Fix settings display issues by adding property name transformation layer. This resolves the issue where image moderation and other settings values weren't displaying properly in the advanced settings panels.

Maphikza · Maphikza · commit 137d5bfaf346 · 2025-05-09T17:10:32.000+02:00
diff --git a/src/components/settings/ContentFilterSettings.tsx b/src/components/settings/ContentFilterSettings.tsx
@@ -22,7 +22,30 @@ const ContentFilterSettings: React.FC = () => {
   // Update form values when settings change
   useEffect(() => {
     if (settings) {
-      form.setFieldsValue(settings);
+      console.log('ContentFilterSettings - Received settings:', settings);
+      
+      // Transform property names to match form field names
+      // The API returns properties without the prefix, but the form expects prefixed names
+      const settingsObj = settings as Record<string, any>;
+      
+      const formValues = {
+        content_filter_enabled: settingsObj.enabled,
+        content_filter_cache_size: typeof settingsObj.cache_size === 'string' 
+          ? parseInt(settingsObj.cache_size) 
+          : settingsObj.cache_size,
+        content_filter_cache_ttl: typeof settingsObj.cache_ttl === 'string' 
+          ? parseInt(settingsObj.cache_ttl) 
+          : settingsObj.cache_ttl,
+        full_text_kinds: settingsObj.full_text_kinds || []
+      };
+      
+      console.log('ContentFilterSettings - Transformed form values:', formValues);
+      
+      // Set form values with a slight delay to ensure the form is ready
+      setTimeout(() => {
+        form.setFieldsValue(formValues);
+        console.log('ContentFilterSettings - Form values after set:', form.getFieldsValue());
+      }, 100);
     }
   }, [settings, form]);
 
@@ -53,6 +76,7 @@ const ContentFilterSettings: React.FC = () => {
         layout="vertical"
         onValuesChange={handleValuesChange}
         initialValues={settings || {}}
+        onFinish={(values) => console.log('Form submitted with values:', values)}
       >
         <Form.Item
           name="content_filter_enabled"
diff --git a/src/components/settings/ImageModerationSettings.tsx b/src/components/settings/ImageModerationSettings.tsx
@@ -22,7 +22,38 @@ const ImageModerationSettings: React.FC = () => {
   // Update form values when settings change
   useEffect(() => {
     if (settings) {
-      form.setFieldsValue(settings);
+      console.log('ImageModerationSettings - Received settings:', settings);
+      
+      // Transform property names to match form field names
+      // The API returns properties without the prefix, but the form expects prefixed names
+      const settingsObj = settings as Record<string, any>;
+      
+      const formValues = {
+        image_moderation_api: settingsObj.api,
+        image_moderation_check_interval: typeof settingsObj.check_interval === 'string' 
+          ? parseFloat(settingsObj.check_interval) 
+          : settingsObj.check_interval,
+        image_moderation_concurrency: typeof settingsObj.concurrency === 'string' 
+          ? parseFloat(settingsObj.concurrency) 
+          : settingsObj.concurrency,
+        image_moderation_enabled: settingsObj.enabled,
+        image_moderation_mode: settingsObj.mode,
+        image_moderation_temp_dir: settingsObj.temp_dir,
+        image_moderation_threshold: typeof settingsObj.threshold === 'string' 
+          ? parseFloat(settingsObj.threshold) 
+          : settingsObj.threshold,
+        image_moderation_timeout: typeof settingsObj.timeout === 'string' 
+          ? parseFloat(settingsObj.timeout) 
+          : settingsObj.timeout
+      };
+      
+      console.log('ImageModerationSettings - Transformed form values:', formValues);
+      
+      // Set form values with a slight delay to ensure the form is ready
+      setTimeout(() => {
+        form.setFieldsValue(formValues);
+        console.log('ImageModerationSettings - Form values after set:', form.getFieldsValue());
+      }, 100);
     }
   }, [settings, form]);
 
@@ -44,6 +75,7 @@ const ImageModerationSettings: React.FC = () => {
         layout="vertical"
         onValuesChange={handleValuesChange}
         initialValues={settings || {}}
+        onFinish={(values) => console.log('Form submitted with values:', values)}
       >
         <Form.Item
           name="image_moderation_enabled"
@@ -65,9 +97,11 @@ const ImageModerationSettings: React.FC = () => {
           }
         >
           <Select>
-            <Option value="full">Full</Option>
-            <Option value="basic">Basic</Option>
-            <Option value="minimal">Minimal</Option>
+            <Option value="full">Full (Check all images)</Option>
+            <Option value="basic">Basic (Limited checks)</Option>
+            <Option value="minimal">Minimal (Essential checks only)</Option>
+            <Option value="sample">Sample (Check random images)</Option>
+            <Option value="flagged">Flagged Only (Check only reported images)</Option>
           </Select>
         </Form.Item>
 
diff --git a/src/components/settings/NestFeederSettings.tsx b/src/components/settings/NestFeederSettings.tsx
@@ -20,7 +20,33 @@ const NestFeederSettings: React.FC = () => {
   // Update form values when settings change
   useEffect(() => {
     if (settings) {
-      form.setFieldsValue(settings);
+      console.log('NestFeederSettings - Received settings:', settings);
+      
+      // Transform property names to match form field names
+      // The API returns properties without the prefix, but the form expects prefixed names
+      const settingsObj = settings as Record<string, any>;
+      
+      const formValues = {
+        nest_feeder_enabled: settingsObj.enabled,
+        nest_feeder_url: settingsObj.url,
+        nest_feeder_timeout: typeof settingsObj.timeout === 'string' 
+          ? parseInt(settingsObj.timeout) 
+          : settingsObj.timeout,
+        nest_feeder_cache_size: typeof settingsObj.cache_size === 'string' 
+          ? parseInt(settingsObj.cache_size) 
+          : settingsObj.cache_size,
+        nest_feeder_cache_ttl: typeof settingsObj.cache_ttl === 'string' 
+          ? parseInt(settingsObj.cache_ttl) 
+          : settingsObj.cache_ttl
+      };
+      
+      console.log('NestFeederSettings - Transformed form values:', formValues);
+      
+      // Set form values with a slight delay to ensure the form is ready
+      setTimeout(() => {
+        form.setFieldsValue(formValues);
+        console.log('NestFeederSettings - Form values after set:', form.getFieldsValue());
+      }, 100);
     }
   }, [settings, form]);
 
@@ -42,6 +68,7 @@ const NestFeederSettings: React.FC = () => {
         layout="vertical"
         onValuesChange={handleValuesChange}
         initialValues={settings || {}}
+        onFinish={(values) => console.log('Form submitted with values:', values)}
       >
         <Form.Item
           name="nest_feeder_enabled"
diff --git a/src/components/settings/OllamaSettings.tsx b/src/components/settings/OllamaSettings.tsx
@@ -22,7 +22,27 @@ const OllamaSettings: React.FC = () => {
   // Update form values when settings change
   useEffect(() => {
     if (settings) {
-      form.setFieldsValue(settings);
+      console.log('OllamaSettings - Received settings:', settings);
+      
+      // Transform property names to match form field names
+      // The API returns properties without the prefix, but the form expects prefixed names
+      const settingsObj = settings as Record<string, any>;
+      
+      const formValues = {
+        ollama_url: settingsObj.url,
+        ollama_model: settingsObj.model,
+        ollama_timeout: typeof settingsObj.timeout === 'string' 
+          ? parseInt(settingsObj.timeout) 
+          : settingsObj.timeout
+      };
+      
+      console.log('OllamaSettings - Transformed form values:', formValues);
+      
+      // Set form values with a slight delay to ensure the form is ready
+      setTimeout(() => {
+        form.setFieldsValue(formValues);
+        console.log('OllamaSettings - Form values after set:', form.getFieldsValue());
+      }, 100);
     }
   }, [settings, form]);
 
@@ -62,6 +82,7 @@ const OllamaSettings: React.FC = () => {
         layout="vertical"
         onValuesChange={handleValuesChange}
         initialValues={settings || {}}
+        onFinish={(values) => console.log('Form submitted with values:', values)}
       >
         <Form.Item
           name="ollama_url"
diff --git a/src/components/settings/WalletSettings.tsx b/src/components/settings/WalletSettings.tsx
@@ -20,7 +20,24 @@ const WalletSettings: React.FC = () => {
   // Update form values when settings change
   useEffect(() => {
     if (settings) {
-      form.setFieldsValue(settings);
+      console.log('WalletSettings - Received settings:', settings);
+      
+      // Transform property names to match form field names
+      // The API returns properties without the prefix, but the form expects prefixed names
+      const settingsObj = settings as Record<string, any>;
+      
+      const formValues = {
+        wallet_name: settingsObj.name,
+        wallet_api_key: settingsObj.api_key
+      };
+      
+      console.log('WalletSettings - Transformed form values:', formValues);
+      
+      // Set form values with a slight delay to ensure the form is ready
+      setTimeout(() => {
+        form.setFieldsValue(formValues);
+        console.log('WalletSettings - Form values after set:', form.getFieldsValue());
+      }, 100);
     }
   }, [settings, form]);
 
@@ -42,6 +59,7 @@ const WalletSettings: React.FC = () => {
         layout="vertical"
         onValuesChange={handleValuesChange}
         initialValues={settings || {}}
+        onFinish={(values) => console.log('Form submitted with values:', values)}
       >
         <Form.Item
           name="wallet_name"
diff --git a/src/components/settings/XNostrSettings.tsx b/src/components/settings/XNostrSettings.tsx
@@ -46,17 +46,45 @@ const XNostrSettingsComponent: React.FC = () => {
   // Update form values when settings change
   useEffect(() => {
     if (settings) {
-      // Set form values from settings
-      form.setFieldsValue({
-        ...settings,
+      console.log('XNostrSettings - Received settings:', settings);
+      
+      // Transform property names to match form field names
+      // The API returns properties without the prefix, but the form expects prefixed names
+      const settingsObj = settings as Record<string, any>;
+      
+      // Create a transformed settings object with prefixed property names
+      const formValues = {
+        xnostr_enabled: settingsObj.enabled,
+        xnostr_browser_path: settingsObj.browser_path,
+        xnostr_browser_pool_size: typeof settingsObj.browser_pool_size === 'string' 
+          ? parseInt(settingsObj.browser_pool_size) 
+          : settingsObj.browser_pool_size,
+        xnostr_check_interval: typeof settingsObj.check_interval === 'string' 
+          ? parseInt(settingsObj.check_interval) 
+          : settingsObj.check_interval,
+        xnostr_concurrency: typeof settingsObj.concurrency === 'string' 
+          ? parseInt(settingsObj.concurrency) 
+          : settingsObj.concurrency,
+        xnostr_temp_dir: settingsObj.temp_dir,
+        xnostr_update_interval: typeof settingsObj.update_interval === 'string' 
+          ? parseInt(settingsObj.update_interval) 
+          : settingsObj.update_interval,
         // Handle nested objects
-        xnostr_verification_intervals: settings.xnostr_verification_intervals || {},
+        xnostr_verification_intervals: settingsObj.verification_intervals || {},
         // Don't set nitter instances here, we'll handle them separately
-      });
+      };
+      
+      console.log('XNostrSettings - Transformed form values:', formValues);
+      
+      // Set form values with a slight delay to ensure the form is ready
+      setTimeout(() => {
+        form.setFieldsValue(formValues);
+        console.log('XNostrSettings - Form values after set:', form.getFieldsValue());
+      }, 100);
 
       // Set nitter instances
-      if (settings.xnostr_nitter?.instances) {
-        setNitterInstances(settings.xnostr_nitter.instances);
+      if (settingsObj.nitter?.instances) {
+        setNitterInstances(settingsObj.nitter.instances);
       } else {
         setNitterInstances([]);
       }
@@ -230,6 +258,7 @@ const XNostrSettingsComponent: React.FC = () => {
         layout="vertical"
         onValuesChange={handleValuesChange}
         initialValues={settings || {}}
+        onFinish={(values) => console.log('Form submitted with values:', values)}
       >
         {/* General XNostr Settings */}
         <Form.Item
diff --git a/src/components/settings/layouts/AdvancedSettingsLayout.tsx b/src/components/settings/layouts/AdvancedSettingsLayout.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Collapse, Button, Space, Spin } from 'antd';
 import { BaseRow } from '@app/components/common/BaseRow/BaseRow';
 import { BaseCol } from '@app/components/common/BaseCol/BaseCol';
@@ -32,7 +32,7 @@ const AdvancedSettingsLayout: React.FC<AdvancedSettingsLayoutProps> = ({
 }) => {
   const [saveLoading, setSaveLoading] = useState(false);
   const [resetLoading, setResetLoading] = useState(false);
-  const [activeKeys, setActiveKeys] = useState<string[]>(['general']);
+  const [activeKeys, setActiveKeys] = useState<string[]>(['general', 'image-moderation']);
   
   // Use the generic settings hook to handle saving all settings
   const { 
@@ -45,19 +45,41 @@ const AdvancedSettingsLayout: React.FC<AdvancedSettingsLayoutProps> = ({
   const loading = propLoading || hookLoading;
   const error = propError || (hookError ? hookError.toString() : null);
 
+  // Ensure image-moderation panel is expanded when needed
+  useEffect(() => {
+    // Check URL for any parameters indicating we should expand image moderation
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.has('section') && urlParams.get('section') === 'image-moderation') {
+      if (!activeKeys.includes('image-moderation')) {
+        setActiveKeys([...activeKeys, 'image-moderation']);
+      }
+    }
+    
+    // Log for debugging
+    console.log('AdvancedSettingsLayout - Active panels:', activeKeys);
+  }, [activeKeys]);
+
   const handleSave = async () => {
+    console.log('Saving all settings...');
     setSaveLoading(true);
     try {
       await saveSettings();
+      console.log('Settings saved successfully');
+    } catch (error) {
+      console.error('Error saving settings:', error);
     } finally {
       setSaveLoading(false);
     }
   };
 
   const handleReset = async () => {
+    console.log('Resetting all settings...');
     setResetLoading(true);
     try {
       await fetchSettings();
+      console.log('Settings reset successfully');
+    } catch (error) {
+      console.error('Error resetting settings:', error);
     } finally {
       setResetLoading(false);
     }
@@ -88,7 +110,10 @@ const AdvancedSettingsLayout: React.FC<AdvancedSettingsLayoutProps> = ({
           <Collapse 
             accordion={false} 
             activeKey={activeKeys} 
-            onChange={(keys) => setActiveKeys(keys as string[])}
+            onChange={(keys) => {
+              console.log('Collapse panels changed:', keys);
+              setActiveKeys(keys as string[]);
+            }}
           >
             <Panel header="General Settings" key="general">
               <GeneralSettingsPanel />
diff --git a/src/components/settings/panels/ImageModerationPanel.tsx b/src/components/settings/panels/ImageModerationPanel.tsx
diff --git a/src/hooks/useGenericSettings.ts b/src/hooks/useGenericSettings.ts
