mirror of
https://github.com/Dvorinka/MyClubServer.git
synced 2026-06-04 02:32:57 +00:00
upload
This commit is contained in:
Tomáš Dvořák
@@ -0,0 +1,310 @@
|
||||
# Article System Fixes Summary
|
||||
|
||||
## Overview
|
||||
Comprehensive fixes for the article management system addressing critical React errors, missing functionality, and UX improvements.
|
||||
|
||||
## Issues Fixed
|
||||
|
||||
### 1. **Critical React Error #310 - Infinite Loops** ✅
|
||||
**Problem:** Application crashed after publishing articles with "Minified React error #310"
|
||||
|
||||
**Root Cause:**
|
||||
- `useCallback` hook in `ArticleDetailPage.tsx` with `toAbsoluteUploads` created infinite re-render loop
|
||||
- `fetchYouTubeVideos` in `ArticlesAdminPage.tsx` had unstable dependencies causing loop
|
||||
|
||||
**Solution:**
|
||||
- Changed `useCallback` to `useMemo` for `toAbsoluteUploads` transformation function
|
||||
- Removed dependencies array issues and added proper memoization
|
||||
- Removed `toast` from `fetchYouTubeVideos` dependencies with eslint-disable comment
|
||||
|
||||
**Files Modified:**
|
||||
- `frontend/src/pages/ArticleDetailPage.tsx` (lines 165-190)
|
||||
- `frontend/src/pages/admin/ArticlesAdminPage.tsx` (lines 372-391)
|
||||
|
||||
---
|
||||
|
||||
### 2. **Missing YouTube Video Picker Modal** ✅
|
||||
**Problem:** "Vybrat z kanálu" button did nothing - modal component didn't exist
|
||||
|
||||
**Solution:**
|
||||
- Created full YouTube video picker modal with:
|
||||
- Search functionality for videos
|
||||
- Grid display of video thumbnails
|
||||
- Click to select and attach to article
|
||||
- Empty state handling
|
||||
- Loading states
|
||||
- Refresh functionality
|
||||
|
||||
**Features:**
|
||||
- Searchable video list
|
||||
- Visual thumbnail preview
|
||||
- Published date display
|
||||
- Responsive grid layout (1-3 columns)
|
||||
- Integration with existing YouTube cache
|
||||
|
||||
**Files Modified:**
|
||||
- `frontend/src/pages/admin/ArticlesAdminPage.tsx` (lines 1710-1810)
|
||||
|
||||
---
|
||||
|
||||
### 3. **Zonerama Album API Response Parsing** ✅
|
||||
**Problem:** "Album nenalezeno" error despite API returning correct data with photos
|
||||
|
||||
**Root Cause:**
|
||||
- API response structure has two formats:
|
||||
- `{ albums: [{ photos: [...] }] }` (new format)
|
||||
- `{ album: {...}, photos: [...] }` (direct format)
|
||||
- Code only handled one format
|
||||
|
||||
**Solution:**
|
||||
- Added dual format parsing with fallbacks
|
||||
- Enhanced error messages
|
||||
- Added photo count validation
|
||||
- Improved user feedback
|
||||
|
||||
**Files Modified:**
|
||||
- `frontend/src/pages/admin/ArticlesAdminPage.tsx` (lines 520-558)
|
||||
|
||||
---
|
||||
|
||||
### 4. **Media Tab Reorganization** ✅
|
||||
**Problem:** Poor UX flow - users had to upload images before seeing Zonerama options
|
||||
|
||||
**Solution:**
|
||||
Reorganized Media tab in this optimal order:
|
||||
1. **Zonerama výběr** (photo selection from albums)
|
||||
2. **Titulní obrázek** (cover image with upload option)
|
||||
3. **YouTube video** (video attachment)
|
||||
4. **OG obrázek** (social sharing image)
|
||||
5. **Poll Linker** (if article exists)
|
||||
|
||||
**Benefits:**
|
||||
- Users see Zonerama photos first
|
||||
- Logical flow: select from existing → upload new → add extras
|
||||
- Better visual hierarchy with improved labels and help text
|
||||
|
||||
**Files Modified:**
|
||||
- `frontend/src/pages/admin/ArticlesAdminPage.tsx` (lines 1431-1607)
|
||||
|
||||
---
|
||||
|
||||
### 5. **Image Cropping Performance Optimization** ✅
|
||||
**Problem:** Image cropping was laggy and slow
|
||||
|
||||
**Solution:**
|
||||
- Added max width constraint (default 1500px) with automatic scaling
|
||||
- Configurable JPEG quality (default 85%)
|
||||
- Canvas optimization with image smoothing
|
||||
- Better memory management
|
||||
- User-friendly controls
|
||||
|
||||
**New Features:**
|
||||
- Max width input (100-3000px)
|
||||
- Quality slider (1-100%)
|
||||
- Smart image downscaling
|
||||
- High-quality smoothing algorithm
|
||||
- Clear user guidance
|
||||
|
||||
**Files Modified:**
|
||||
- `frontend/src/pages/admin/ArticlesAdminPage.tsx` (lines 162-323, 1686-1781)
|
||||
|
||||
---
|
||||
|
||||
### 6. **Editable Images in Blog Editor** ✅
|
||||
**Problem:** Images inserted in articles weren't adjustable or resizable
|
||||
|
||||
**Solution:**
|
||||
- Added click handlers to images in Quill editor
|
||||
- Visual feedback on hover and selection
|
||||
- Width adjustment via prompt dialog
|
||||
- Support for percentages, pixels, and "auto" sizing
|
||||
- CSS styling for better image presentation
|
||||
|
||||
**Features:**
|
||||
- Hover effect with blue border
|
||||
- Click to adjust width
|
||||
- Support formats: "50%", "300px", "auto", "full"
|
||||
- Max-width constraints prevent overflow
|
||||
- Selection visual feedback
|
||||
|
||||
**Files Modified:**
|
||||
- `frontend/src/pages/admin/ArticlesAdminPage.tsx` (lines 373-416, 1421-1477)
|
||||
|
||||
---
|
||||
|
||||
### 7. **Match Link Data Validation** ✅
|
||||
**Problem:** Match info not visible after article creation
|
||||
|
||||
**Solution:**
|
||||
- Enhanced query invalidation after save
|
||||
- Better success messages with match ID
|
||||
- Proper cache invalidation for match links
|
||||
- Improved feedback for linked vs non-linked articles
|
||||
|
||||
**Improvements:**
|
||||
- Specific match link query invalidation
|
||||
- Article detail query invalidation
|
||||
- Clearer success messages showing match connection
|
||||
- Better error handling
|
||||
|
||||
**Files Modified:**
|
||||
- `frontend/src/pages/admin/ArticlesAdminPage.tsx` (lines 771-849)
|
||||
|
||||
---
|
||||
|
||||
## Testing Checklist
|
||||
|
||||
### Critical Functionality
|
||||
- [x] Article creation works without crashes
|
||||
- [x] Article detail pages load without React errors
|
||||
- [x] Admin articles list loads after publishing
|
||||
- [x] YouTube modal opens and allows video selection
|
||||
- [x] Zonerama album photos display correctly
|
||||
- [x] Image cropping is smooth and responsive
|
||||
- [x] Images in editor are clickable and resizable
|
||||
- [x] Match links save and display properly
|
||||
|
||||
### User Experience
|
||||
- [x] Zonerama appears first in Media tab
|
||||
- [x] Image quality controls work
|
||||
- [x] Video selection from channel works
|
||||
- [x] Manual video input works
|
||||
- [x] Match picker filters by category
|
||||
- [x] Success messages are clear and informative
|
||||
|
||||
### Performance
|
||||
- [x] Image cropping no longer laggy
|
||||
- [x] No infinite render loops
|
||||
- [x] Proper query invalidation
|
||||
- [x] Optimized canvas rendering
|
||||
|
||||
---
|
||||
|
||||
## Usage Guide
|
||||
|
||||
### Adding YouTube Video to Article
|
||||
1. Go to **Média** tab in article editor
|
||||
2. Click "Vybrat z kanálu" button
|
||||
3. Search or browse videos
|
||||
4. Click video thumbnail to select
|
||||
5. OR use manual input: paste URL or video ID
|
||||
6. Video appears with thumbnail preview
|
||||
|
||||
### Selecting Zonerama Photos
|
||||
1. Open **Média** tab (Zonerama is now first)
|
||||
2. Use "Z cache" for quick selection from prefetched photos
|
||||
3. OR use "Album odkaz" to load specific album
|
||||
4. Click photo to set as cover image
|
||||
5. Photos visible with thumbnails
|
||||
|
||||
### Cropping Images
|
||||
1. Click image button in article editor
|
||||
2. Select image file
|
||||
3. Adjust crop area by dragging corners/edges
|
||||
4. Set max width (default 1500px)
|
||||
5. Set JPEG quality (default 85%)
|
||||
6. Click "Oříznout a vložit"
|
||||
|
||||
### Resizing Images in Editor
|
||||
1. Click on any image in article content
|
||||
2. Image highlights with blue border
|
||||
3. Enter desired width in prompt:
|
||||
- "50%" for half width
|
||||
- "300px" for fixed pixels
|
||||
- "auto" or "full" for 100% width
|
||||
4. Image updates immediately
|
||||
|
||||
### Linking Match to Article
|
||||
1. Select **category/competition** first (required)
|
||||
2. Go to match linking section in **Základní** tab
|
||||
3. Use search or date filter to find match
|
||||
4. Click match card to link
|
||||
5. Linked matches show with green badge
|
||||
6. Match info displays in article admin list
|
||||
|
||||
---
|
||||
|
||||
## Technical Details
|
||||
|
||||
### React Hook Dependencies Fixed
|
||||
```typescript
|
||||
// Before (caused infinite loop)
|
||||
const toAbsoluteUploads = React.useCallback((html) => { ... }, []);
|
||||
|
||||
// After (stable reference)
|
||||
const toAbsoluteUploads = React.useMemo(() => {
|
||||
return (html?: string) => { ... };
|
||||
}, []);
|
||||
```
|
||||
|
||||
### Zonerama API Response Handling
|
||||
```typescript
|
||||
// Handles both response formats
|
||||
if (Array.isArray(data?.albums) && data.albums.length > 0) {
|
||||
photos = data.albums[0]?.photos || [];
|
||||
} else if (Array.isArray(data?.photos)) {
|
||||
photos = data.photos;
|
||||
}
|
||||
```
|
||||
|
||||
### Image Cropping Optimization
|
||||
```typescript
|
||||
// Smart downscaling
|
||||
if (outputWidth > cropMaxWidth) {
|
||||
const scale = cropMaxWidth / outputWidth;
|
||||
outputWidth = cropMaxWidth;
|
||||
outputHeight = Math.round(outputHeight * scale);
|
||||
}
|
||||
|
||||
// High-quality rendering
|
||||
ctx.imageSmoothingEnabled = true;
|
||||
ctx.imageSmoothingQuality = 'high';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Known Limitations
|
||||
|
||||
1. **Image Resizing**: Uses browser prompt for width input (could be improved with inline UI)
|
||||
2. **Zonerama Cache**: Requires prefetch to be configured in settings
|
||||
3. **YouTube Videos**: Requires channel ID configuration in settings
|
||||
4. **Match Linking**: Only works for competitions in club's FACR data
|
||||
|
||||
---
|
||||
|
||||
## Future Enhancements
|
||||
|
||||
- [ ] Inline image resize handles (drag to resize)
|
||||
- [ ] Image alignment controls (left, center, right)
|
||||
- [ ] Image caption support
|
||||
- [ ] Bulk image operations
|
||||
- [ ] Advanced crop presets (16:9, 4:3, 1:1, etc.)
|
||||
- [ ] Image compression preview
|
||||
- [ ] Drag-and-drop image reordering
|
||||
- [ ] Image galleries within articles
|
||||
|
||||
---
|
||||
|
||||
## Compatibility
|
||||
|
||||
- **React**: 18.x
|
||||
- **React Query**: 4.x
|
||||
- **Chakra UI**: 2.x
|
||||
- **React Quill**: 2.x
|
||||
- **React Image Crop**: 11.x
|
||||
|
||||
---
|
||||
|
||||
## Deployment Notes
|
||||
|
||||
1. Clear browser cache after deployment
|
||||
2. Test article creation/editing in production
|
||||
3. Verify Zonerama cache is populated
|
||||
4. Confirm YouTube API credentials are set
|
||||
5. Check FACR match data is loading
|
||||
|
||||
---
|
||||
|
||||
**Status**: ✅ All fixes completed and tested
|
||||
**Date**: 2025-01-12
|
||||
**Version**: 2.1.0
|
||||
Reference in New Issue
Block a user