Fix field name mapping in relay settings and add chart data debugging

- Update useRelaySettings.ts to send correct field names (mime_patterns, max_size_mb)
- Add backward compatibility for reading both old and new field names
- Add comprehensive logging to useChartData.ts to debug media count issues
- Ensure media definitions are always sent with complete structure to avoid backend conflicts

Author: Maphikza

src/hooks/useChartData.ts

@@ -45,19 +45,29 @@ const useChartData = () => {
         }
 
         const data: FileCountResponse = await response.json();
+        
+        // Log the complete backend response for debugging
+        console.log('=== CHART DATA BACKEND RESPONSE ===');
+        console.log('Full response:', JSON.stringify(data, null, 2));
+        console.log('Response keys:', Object.keys(data));
+        console.log('==============================');
 
         // Process the data into chartDataItems using translated names
         // Handle dynamic media types while maintaining UI compatibility
         const newChartData: ChartDataItem[] = [];
 
         // Always include kinds first
+        console.log('Adding kinds data:', { value: data.kinds, name: t('categories.kinds') });
         newChartData.push({ value: data.kinds, name: t('categories.kinds') });
 
         // Destructure to separate kinds from media types
         const { kinds, ...mediaCounts } = data;
+        console.log('Media counts after destructuring:', mediaCounts);
+        console.log('Media count entries:', Object.entries(mediaCounts));
 
         // Map dynamic media types to chart data with fallback translations
         Object.entries(mediaCounts).forEach(([mediaType, count]) => {
+          console.log(`Processing media type: ${mediaType} with count: ${count}`);
           let translationKey = '';
           let fallbackName = '';
 
@@ -88,9 +98,16 @@ const useChartData = () => {
 
           // Use translation if available, otherwise use fallback
           const displayName = t(translationKey, { defaultValue: fallbackName });
-          newChartData.push({ value: count, name: displayName });
+          const chartItem = { value: count, name: displayName };
+          console.log(`Adding chart item:`, chartItem);
+          newChartData.push(chartItem);
         });
 
+        console.log('=== FINAL CHART DATA ===');
+        console.log('Final chart data:', newChartData);
+        console.log('Chart data length:', newChartData.length);
+        console.log('========================');
+        
         setChartData(newChartData);
       } catch (error) {
         console.error('Error:', error);

src/hooks/useRelaySettings.ts

@@ -103,14 +103,15 @@ const useRelaySettings = () => {
 
       // Extract mime types and file sizes from actual backend format
       const mediaDefinitions = backendData.event_filtering.media_definitions || {};
-      settings.photos = mediaDefinitions.image?.mimepatterns || [];
-      settings.videos = mediaDefinitions.video?.mimepatterns || [];
-      settings.audio = mediaDefinitions.audio?.mimepatterns || [];
+      // Handle both old and new field names for backward compatibility
+      settings.photos = mediaDefinitions.image?.mime_patterns || mediaDefinitions.image?.mimepatterns || [];
+      settings.videos = mediaDefinitions.video?.mime_patterns || mediaDefinitions.video?.mimepatterns || [];
+      settings.audio = mediaDefinitions.audio?.mime_patterns || mediaDefinitions.audio?.mimepatterns || [];
 
-      // Extract file size limits
-      settings.photoMaxSizeMB = mediaDefinitions.image?.maxsizemb || 100;
-      settings.videoMaxSizeMB = mediaDefinitions.video?.maxsizemb || 500;
-      settings.audioMaxSizeMB = mediaDefinitions.audio?.maxsizemb || 100;
+      // Extract file size limits (handle both old and new field names)
+      settings.photoMaxSizeMB = mediaDefinitions.image?.max_size_mb || mediaDefinitions.image?.maxsizemb || 100;
+      settings.videoMaxSizeMB = mediaDefinitions.video?.max_size_mb || mediaDefinitions.video?.maxsizemb || 500;
+      settings.audioMaxSizeMB = mediaDefinitions.audio?.max_size_mb || mediaDefinitions.audio?.maxsizemb || 100;
 
       // Set protocols
       if (backendData.event_filtering.protocols?.enabled) {
@@ -141,32 +142,24 @@ const useRelaySettings = () => {
   }, []);
 
   const transformToBackendSettings = useCallback((settings: Settings) => {
-    const mediaDefinitions: any = {};
-    
-    // Create media definitions in the format backend expects
-    if (settings.photos.length > 0) {
-      mediaDefinitions.image = {
-        mimepatterns: settings.photos,
+    // Always create media definitions with correct field names to avoid backend conflicts
+    const mediaDefinitions = {
+      image: {
+        mime_patterns: settings.photos, // Only send correct field name
         extensions: [".jpg", ".jpeg", ".png", ".gif", ".webp"],
-        maxsizemb: settings.photoMaxSizeMB
-      };
-    }
-    
-    if (settings.videos.length > 0) {
-      mediaDefinitions.video = {
-        mimepatterns: settings.videos,
+        max_size_mb: settings.photoMaxSizeMB // Only send correct field name
+      },
+      video: {
+        mime_patterns: settings.videos, // Only send correct field name
         extensions: [".mp4", ".webm", ".avi", ".mov"],
-        maxsizemb: settings.videoMaxSizeMB
-      };
-    }
-    
-    if (settings.audio.length > 0) {
-      mediaDefinitions.audio = {
-        mimepatterns: settings.audio,
+        max_size_mb: settings.videoMaxSizeMB // Only send correct field name
+      },
+      audio: {
+        mime_patterns: settings.audio, // Only send correct field name
         extensions: [".mp3", ".wav", ".ogg", ".flac"],
-        maxsizemb: settings.audioMaxSizeMB
-      };
-    }
+        max_size_mb: settings.audioMaxSizeMB // Only send correct field name
+      }
+    };
 
     return {
       settings: {