Broke the 1000 line code mark | useEffect makes my life easier

app/components/Settings.tsx

@@ -1,51 +1,224 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { exportSettings, importSettings } from './settingUtils'; // Import utility functions
 
 const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => {
-  const [activeSection, setActiveSection] = useState('general');
-  const [preferredLanguage, setPreferredLanguage] = useState('en');
-  const [preferredCurrency, setPreferredCurrency] = useState('usd');
-  const [dateFormat, setDateFormat] = useState('mm/dd/yyyy');
-  const [timeFormat, setTimeFormat] = useState('12-hour');
-  const [timeZone, setTimeZone] = useState('GMT');
-  const [disableOnlineAI, setDisableOnlineAI] = useState(false);
-  const [disableChatHistory, setDisableChatHistory] = useState(false);
-  const [disableAIMemory, setDisableAIMemory] = useState(false);
-  const [openSourceMode, setOpenSourceMode] = useState(false);
-  const [newName, setNewName] = useState('');
-  const [newEmail, setNewEmail] = useState('');
-  const [newPassword, setNewPassword] = useState('');
-  const [preferredMessurement, setPreferredMessurement] = useState('Metric');
 
-  // Theme settings state
+    const getItemFromLocalStorage = (key: string) => {
-  const [backgroundColor, setBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim());
+      const item = localStorage.getItem(key);
-  const [textColor, setTextColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--text-color').trim());
+      return item ? JSON.parse(item) : false; // Default to false if item is null
-  const [inputBackgroundColor, setInputBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--input-background-color').trim());
+    };
-  const [inputButtonColor, setInputButtonColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--input-button-color').trim());
-  const [inputButtonHoverColor, setInputButtonHoverColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--input-button-hover-color').trim());
-  const [userMessageBackgroundColor, setUserMessageBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--user-message-background-color').trim());
-  const [userMessageTextColor, setUserMessageTextColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--user-message-text-color').trim());
-  const [aiMessageBackgroundColor, setAiMessageBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--ai-message-background-color').trim());
-  const [aiMessageTextColor, setAiMessageTextColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--ai-message-text-color').trim());
-  const [buttonBackgroundColor, setButtonBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--button-background-color').trim());
-  const [buttonHoverBackgroundColor, setButtonHoverBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--button-hover-background-color').trim());
-  const [modelsBackgroundColor, setModelsBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--models-background-color').trim());
-  const [historyBackgroundColor, setHistoryBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--history-background-color').trim());
-  const [leftPanelBackgroundColor, setLeftPanelBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--left-panel-background-color').trim());
-  const [conversationBackgroundColor, setConversationBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--conversation-background-color').trim());
-  const [popUpTextColor, setPopUpTextColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--pop-up-text').trim());
-  const [inputBorderColor, setInputBorderColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--input-border-color').trim());
-  const [fontFamily, setFontFamily] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--font-family').trim());
-  const [fontSize, setFontSize] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--font-size').trim());
 
-  // Theme selection
+    // Active section
-  const [selectedTheme, setSelectedTheme] = useState<string>('default');
+    const [activeSection, setActiveSection] = useState(() => localStorage.getItem('activeSection') || 'general');
 
-  // API Keys
+    // Language setting
-  const [laPlateforme, setLaPlateforme] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--online-la-plateforme').trim());
+    const [preferredLanguage, setPreferredLanguage] = useState(() => localStorage.getItem('preferredLanguage') || 'en');
-  const [openAI, setOpenAI] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-openai').trim());
+  
-  const [anthropic, setAnthropic] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-anthropic').trim());
+    // Currency setting
-  const [google, setGoogle] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-google').trim());
+    const [preferredCurrency, setPreferredCurrency] = useState(() => localStorage.getItem('preferredCurrency') || 'usd');
+  
+    // Date and time format settings
+    const [dateFormat, setDateFormat] = useState(() => localStorage.getItem('dateFormat') || 'mm/dd/yyyy');
+    const [timeFormat, setTimeFormat] = useState(() => localStorage.getItem('timeFormat') || '12-hour');
+    const [timeZone, setTimeZone] = useState(() => localStorage.getItem('timeZone') || 'GMT');
+  
+    // Online AI and chat history settings
+    // State declarations
+    const [disableOnlineAI, setDisableOnlineAI] = useState(() => getItemFromLocalStorage('disableOnlineAI'));
+    const [disableChatHistory, setDisableChatHistory] = useState(() => getItemFromLocalStorage('disableChatHistory'));
+    const [disableAIMemory, setDisableAIMemory] = useState(() => getItemFromLocalStorage('disableAIMemory'));
+    const [openSourceMode, setOpenSourceMode] = useState(() => getItemFromLocalStorage('openSourceMode'));
+    
+    // User credentials
+    const [newName, setNewName] = useState(() => localStorage.getItem('newName') || '');
+    const [newEmail, setNewEmail] = useState(() => localStorage.getItem('newEmail') || '');
+    const [newPassword, setNewPassword] = useState(() => localStorage.getItem('newPassword') || '');
+  
+    // Measurement setting
+    const [preferredMeasurement, setPreferredMeasurement] = useState(() => localStorage.getItem('preferredMeasurement') || 'Metric');
+  
+    // Theme settings
+    const [backgroundColor, setBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim());
+    const [textColor, setTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--text-color').trim());
+    const [inputBackgroundColor, setInputBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--input-background-color').trim());
+    const [inputButtonColor, setInputButtonColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--input-button-color').trim());
+    const [inputButtonHoverColor, setInputButtonHoverColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--input-button-hover-color').trim());
+    const [userMessageBackgroundColor, setUserMessageBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--user-message-background-color').trim());
+    const [userMessageTextColor, setUserMessageTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--user-message-text-color').trim());
+    const [aiMessageBackgroundColor, setAiMessageBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--ai-message-background-color').trim());
+    const [aiMessageTextColor, setAiMessageTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--ai-message-text-color').trim());
+    const [buttonBackgroundColor, setButtonBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--button-background-color').trim());
+    const [buttonHoverBackgroundColor, setButtonHoverBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--button-hover-background-color').trim());
+    const [modelsBackgroundColor, setModelsBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--models-background-color').trim());
+    const [historyBackgroundColor, setHistoryBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--history-background-color').trim());
+    const [leftPanelBackgroundColor, setLeftPanelBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--left-panel-background-color').trim());
+    const [conversationBackgroundColor, setConversationBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--conversation-background-color').trim());
+    const [popUpTextColor, setPopUpTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--pop-up-text').trim());
+    const [inputBorderColor, setInputBorderColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--input-border-color').trim());
+    const [fontFamily, setFontFamily] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--font-family').trim());
+    const [fontSize, setFontSize] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--font-size').trim());
+  
+    // Theme selection
+    const [selectedTheme, setSelectedTheme] = useState(() => localStorage.getItem('selectedTheme') || 'default');
+  
+    // API Keys
+    const [laPlateforme, setLaPlateforme] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-la-plateforme').trim());
+    const [openAI, setOpenAI] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-openai').trim());
+    const [anthropic, setAnthropic] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-anthropic').trim());
+    const [google, setGoogle] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-google').trim());
+
+    // Effect hooks to update localStorage whenever any state changes
+    useEffect(() => {
+      localStorage.setItem('activeSection', activeSection);
+    }, [activeSection]);
+  
+    useEffect(() => {
+      localStorage.setItem('preferredLanguage', preferredLanguage);
+    }, [preferredLanguage]);
+  
+    useEffect(() => {
+      localStorage.setItem('preferredCurrency', preferredCurrency);
+    }, [preferredCurrency]);
+  
+    useEffect(() => {
+      localStorage.setItem('dateFormat', dateFormat);
+    }, [dateFormat]);
+  
+    useEffect(() => {
+      localStorage.setItem('timeFormat', timeFormat);
+    }, [timeFormat]);
+  
+    useEffect(() => {
+      localStorage.setItem('timeZone', timeZone);
+    }, [timeZone]);
+  
+    useEffect(() => {
+      localStorage.setItem('disableOnlineAI', JSON.stringify(disableOnlineAI));
+    }, [disableOnlineAI]);
+  
+    useEffect(() => {
+      localStorage.setItem('disableChatHistory', JSON.stringify(disableChatHistory));
+    }, [disableChatHistory]);
+  
+    useEffect(() => {
+      localStorage.setItem('disableAIMemory', JSON.stringify(disableAIMemory));
+    }, [disableAIMemory]);
+  
+    useEffect(() => {
+      localStorage.setItem('openSourceMode', JSON.stringify(openSourceMode));
+    }, [openSourceMode]);
+  
+    useEffect(() => {
+      localStorage.setItem('newName', newName);
+    }, [newName]);
+  
+    useEffect(() => {
+      localStorage.setItem('newEmail', newEmail);
+    }, [newEmail]);
+  
+    useEffect(() => {
+      localStorage.setItem('newPassword', newPassword);
+    }, [newPassword]);
+  
+    useEffect(() => {
+      localStorage.setItem('preferredMeasurement', preferredMeasurement);
+    }, [preferredMeasurement]);
+  
+    useEffect(() => {
+      localStorage.setItem('backgroundColor', backgroundColor);
+    }, [backgroundColor]);
+  
+    useEffect(() => {
+      localStorage.setItem('textColor', textColor);
+    }, [textColor]);
+  
+    useEffect(() => {
+      localStorage.setItem('inputBackgroundColor', inputBackgroundColor);
+    }, [inputBackgroundColor]);
+  
+    useEffect(() => {
+      localStorage.setItem('inputButtonColor', inputButtonColor);
+    }, [inputButtonColor]);
+  
+    useEffect(() => {
+      localStorage.setItem('inputButtonHoverColor', inputButtonHoverColor);
+    }, [inputButtonHoverColor]);
+  
+    useEffect(() => {
+      localStorage.setItem('userMessageBackgroundColor', userMessageBackgroundColor);
+    }, [userMessageBackgroundColor]);
+  
+    useEffect(() => {
+      localStorage.setItem('userMessageTextColor', userMessageTextColor);
+    }, [userMessageTextColor]);
+  
+    useEffect(() => {
+      localStorage.setItem('aiMessageBackgroundColor', aiMessageBackgroundColor);
+    }, [aiMessageBackgroundColor]);
+  
+    useEffect(() => {
+      localStorage.setItem('aiMessageTextColor', aiMessageTextColor);
+    }, [aiMessageTextColor]);
+  
+    useEffect(() => {
+      localStorage.setItem('buttonBackgroundColor', buttonBackgroundColor);
+    }, [buttonBackgroundColor]);
+  
+    useEffect(() => {
+      localStorage.setItem('buttonHoverBackgroundColor', buttonHoverBackgroundColor);
+    }, [buttonHoverBackgroundColor]);
+  
+    useEffect(() => {
+      localStorage.setItem('modelsBackgroundColor', modelsBackgroundColor);
+    }, [modelsBackgroundColor]);
+  
+    useEffect(() => {
+      localStorage.setItem('historyBackgroundColor', historyBackgroundColor);
+    }, [historyBackgroundColor]);
+  
+    useEffect(() => {
+      localStorage.setItem('leftPanelBackgroundColor', leftPanelBackgroundColor);
+    }, [leftPanelBackgroundColor]);
+  
+    useEffect(() => {
+      localStorage.setItem('conversationBackgroundColor', conversationBackgroundColor);
+    }, [conversationBackgroundColor]);
+  
+    useEffect(() => {
+      localStorage.setItem('popUpTextColor', popUpTextColor);
+    }, [popUpTextColor]);
+  
+    useEffect(() => {
+      localStorage.setItem('inputBorderColor', inputBorderColor);
+    }, [inputBorderColor]);
+  
+    useEffect(() => {
+      localStorage.setItem('fontFamily', fontFamily);
+    }, [fontFamily]);
+  
+    useEffect(() => {
+      localStorage.setItem('fontSize', fontSize);
+    }, [fontSize]);
+  
+    useEffect(() => {
+      localStorage.setItem('selectedTheme', selectedTheme);
+    }, [selectedTheme]);
+  
+    useEffect(() => {
+      localStorage.setItem('laPlateforme', laPlateforme);
+    }, [laPlateforme]);
+  
+    useEffect(() => {
+      localStorage.setItem('openAI', openAI);
+    }, [openAI]);
+  
+    useEffect(() => {
+      localStorage.setItem('anthropic', anthropic);
+    }, [anthropic]);
+  
+    useEffect(() => {
+      localStorage.setItem('google', google);
+    }, [google]);
   
   // Apply imported settings to the CSS variables
   const applySettings = (settings: any) => {
@@ -241,8 +414,8 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
           <div className="settings-option">
             <label>Preferred Measurement</label>
             <select
-              value={preferredMessurement}
+              value={preferredMeasurement}
-              onChange={(e) => setPreferredMessurement(e.target.value)}
+              onChange={(e) => setPreferredMeasurement(e.target.value)}
             >
               <option value="Metric">Metric</option>
               <option value="Imperial">Imperial</option>
@@ -810,7 +983,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     fontSize,
     preferredLanguage,
     preferredCurrency,
-    preferredMessurement, 
+    preferredMeasurement, 
     dateFormat,
     timeFormat,
     timeZone,