Broke the 1000 line code mark | useEffect makes my life easier
This commit is contained in:
parent
9577d2f252
commit
81cff1d68b
1 changed files with 218 additions and 45 deletions
|
|
@ -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<string>(getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim());
|
||||
const [textColor, setTextColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--text-color').trim());
|
||||
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());
|
||||
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<string>('default');
|
||||
// Active section
|
||||
const [activeSection, setActiveSection] = useState(() => localStorage.getItem('activeSection') || 'general');
|
||||
|
||||
// API Keys
|
||||
const [laPlateforme, setLaPlateforme] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--online-la-plateforme').trim());
|
||||
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());
|
||||
const [google, setGoogle] = useState<string>(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 }> = (
|
|||
<div className="settings-option">
|
||||
<label>Preferred Measurement</label>
|
||||
<select
|
||||
value={preferredMessurement}
|
||||
onChange={(e) => setPreferredMessurement(e.target.value)}
|
||||
value={preferredMeasurement}
|
||||
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,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue