From 81cff1d68bc044c8e98f679551c45769add3755a Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Tue, 24 Sep 2024 16:49:15 +0200 Subject: [PATCH] Broke the 1000 line code mark | useEffect makes my life easier --- app/components/Settings.tsx | 263 ++++++++++++++++++++++++++++++------ 1 file changed, 218 insertions(+), 45 deletions(-) diff --git a/app/components/Settings.tsx b/app/components/Settings.tsx index e3e626b..472415c 100644 --- a/app/components/Settings.tsx +++ b/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 [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()); + const getItemFromLocalStorage = (key: string) => { + const item = localStorage.getItem(key); + return item ? JSON.parse(item) : false; // Default to false if item is null + }; - // Theme selection - const [selectedTheme, setSelectedTheme] = useState('default'); + // Active section + const [activeSection, setActiveSection] = useState(() => localStorage.getItem('activeSection') || 'general'); - // 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()); + // Language setting + const [preferredLanguage, setPreferredLanguage] = useState(() => localStorage.getItem('preferredLanguage') || 'en'); + + // Currency setting + 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 }> = (