From 4cd5c09c6bbf33761c68c19dc36c4896ed50f8f1 Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Mon, 7 Oct 2024 14:14:27 +0200 Subject: [PATCH] Fixed our build problems --- app/components/settings/Settings.tsx | 237 +++++++++------------------ 1 file changed, 78 insertions(+), 159 deletions(-) diff --git a/app/components/settings/Settings.tsx b/app/components/settings/Settings.tsx index 0e3e8b1..874ebe1 100644 --- a/app/components/settings/Settings.tsx +++ b/app/components/settings/Settings.tsx @@ -19,12 +19,8 @@ import ThemeDropdown from './DropDownTheme'; const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => { - //#region initialize Variables - let item:string|null; const getItemFromLocalStorage = (key: string) => { - if (typeof localStorage !== 'undefined') { - item = localStorage.getItem(key) - } + const item = localStorage.getItem(key); if (item) { try { @@ -39,48 +35,32 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( }; // Active section - const [activeSection, setActiveSection] = useState('general'); + const [activeSection, setActiveSection] = useState(() => localStorage.getItem('activeSection') || 'general'); // Language setting - const [preferredLanguage, setPreferredLanguage] = useState("en"); + const [preferredLanguage, setPreferredLanguage] = useState(() => localStorage.getItem('preferredLanguage') || 'en'); // Currency setting - const [preferredCurrency, setPreferredCurrency] = useState('usd'); + const [preferredCurrency, setPreferredCurrency] = useState(() => localStorage.getItem('preferredCurrency') || 'usd'); // Date and time format settings - const [dateFormat, setDateFormat] = useState('mm/dd/yyyy'); - const [timeFormat, setTimeFormat] = useState('12-hour'); - const [timeZone, setTimeZone] = useState('GMT'); + 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 const [selectedOption, setSelectedOption] = useState('Offline'); // Default to 'Offline' - const [disableChatHistory, setDisableChatHistory] = useState(false); - const [disableAIMemory, setDisableAIMemory] = useState(false); - const [openSourceMode, setOpenSourceMode] = useState(false); + const [disableChatHistory, setDisableChatHistory] = useState(() => getItemFromLocalStorage('disableChatHistory')); + const [disableAIMemory, setDisableAIMemory] = useState(() => getItemFromLocalStorage('disableAIMemory')); + const [openSourceMode, setOpenSourceMode] = useState(() => getItemFromLocalStorage('openSourceMode')); // User credentials - const [newName, setNewName] = useState(''); - const [newEmail, setNewEmail] = useState(''); - const [newPassword, setNewPassword] = useState(''); + 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('Metric'); - - useEffect(() => { - setActiveSection(getItemFromLocalStorage("activeSection") || "general") - setPreferredLanguage(getItemFromLocalStorage("preferredLanguage") || 'en') - setPreferredCurrency(getItemFromLocalStorage("preferredCurrency") || "usd") - setDateFormat(getItemFromLocalStorage("dateFormat") || "mm/dd/yyyy") - setTimeFormat(getItemFromLocalStorage("timeFormat") || "12-hour") - setTimeZone(getItemFromLocalStorage("timeZone") || "GMT") - setDisableChatHistory(getItemFromLocalStorage('disableChatHistory').toLowerCase()==="true") //#TODO Idk if it works - setDisableAIMemory(getItemFromLocalStorage('disableAIMemory').toLowerCase()==="true") - setOpenSourceMode(getItemFromLocalStorage('openSourceMode').toLowerCase() === "true") - setNewName(getItemFromLocalStorage("newName") || "") - setNewEmail(getItemFromLocalStorage("newEmail") || "") - setNewPassword(getItemFromLocalStorage("newPassword") || "") - setPreferredMeasurement(getItemFromLocalStorage("preferredMeasurement") || "Metric") - },[]) + const [preferredMeasurement, setPreferredMeasurement] = useState(() => localStorage.getItem('preferredMeasurement') || 'Metric'); // Theme settings const [backgroundColor, setBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim()); @@ -119,40 +99,22 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( const [applyButtonHoverColor, setApplyButtonHoverColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--apply-button-hover-color').trim()); // Per default a purple color gradient - const [primaryColor, setPrimaryColor] = useState("#dc8add"); - const [secondaryColor, setSecondaryColor] = useState("#c061cb"); - const [accentColor, setAccentColor] = useState("#9141ac"); - const [basicBackgroundColor, setBasicBackgroundColor] = useState("#813d9c"); - const [basicTextColor, setBasicTextColor] = useState("#fefefe"); - - useEffect(() => { - setPrimaryColor(getItemFromLocalStorage("primaryColor")) - setSecondaryColor(getItemFromLocalStorage("secondaryColor")) - setAccentColor(getItemFromLocalStorage("accentColor")) - setBasicBackgroundColor(getItemFromLocalStorage("basicBackgroundColor")) - setBasicTextColor(getItemFromLocalStorage("basicTextColor")) - },[]) + const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#dc8add"); + const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#c061cb"); + const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#9141ac"); + const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#813d9c"); + const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe"); // Theme selection const [selectedTheme, setSelectedTheme] = useState(''); // API Keys - const [mistral, setMistral] = useState(""); - const [openai, setOpenai] = useState(""); - const [anthropic, setAnthropic] = useState(""); - const [google, setGoogle] = useState(""); - const [myBoolean, setMyBoolean] = useState(false); - - useEffect(() => { - setMistral(getItemFromLocalStorage("mistral") || "") - setOpenai(getItemFromLocalStorage("openai") || "") - setAnthropic(getItemFromLocalStorage("anthropic") || "") - setGoogle(getItemFromLocalStorage("google") || "") - setMyBoolean(getItemFromLocalStorage("myBoolean").toLowerCase() === "true") - },[]) - - //#region set Settings + const [mistral, setMistral] = useState(localStorage.getItem('mistral') || ""); + const [openai, setOpenai] = useState(localStorage.getItem('openai') || ""); + const [anthropic, setAnthropic] = useState(localStorage.getItem('anthropic') || ""); + const [google, setGoogle] = useState(localStorage.getItem('google') || ""); + const [myBoolean, setMyBoolean] = useState(() => getItemFromLocalStorage('myBoolean')); const settings = { userPreferences: { @@ -325,23 +287,17 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( { value: "'Zilla Slab Highlight', serif", label: 'Zilla Slab Highlight' }, ]; - //#region functions for changing Settings - const handleLogout = () => { - if (typeof window !!== "undefined" && typeof localStorage !== 'undefined') { - localStorage.clear(); - alert('Successfully logged out!'); - window.location.reload(); - } + localStorage.clear(); + alert('Successfully logged out!'); + window.location.reload(); }; useEffect(() => { - if (typeof localStorage !== 'undefined') { - const savedTheme = localStorage.getItem('selectedTheme'); - if (savedTheme) { - setSelectedTheme(savedTheme); - applyTheme(savedTheme, primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor); - } + const savedTheme = localStorage.getItem('selectedTheme'); + if (savedTheme) { + setSelectedTheme(savedTheme); + applyTheme(savedTheme, primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor); } }, []); // Runs only once when the component mounts @@ -355,10 +311,8 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( ...settings.generalSettings, }; // Update localStorage for all settings - if (typeof localStorage !== 'undefined') { - for (const [key, value] of Object.entries(flattenedSettings)) { - localStorage.setItem(key, typeof value === 'boolean' ? JSON.stringify(value) : value); - } + for (const [key, value] of Object.entries(flattenedSettings)) { + localStorage.setItem(key, typeof value === 'boolean' ? JSON.stringify(value) : value); } }, [ ...Object.values(settings.userPreferences), @@ -368,50 +322,41 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( ]); useEffect(() => { - if (typeof localStorage !== 'undefined') { - const savedOption = localStorage.getItem('radioSelection'); - if (savedOption) { - savedOption.replace(" (FOSS)", ""); - setSelectedOption(savedOption); // Set saved selection - } + const savedOption = localStorage.getItem('radioSelection'); + if (savedOption) { + savedOption.replace(" (FOSS)", ""); + setSelectedOption(savedOption); // Set saved selection } }, []); const handleRadioChange = (newValue: string) => { - if (typeof localStorage !== 'undefined') { - setSelectedOption(newValue); // Update the state with the selected option - localStorage.setItem('radioSelection', newValue); // Save the selection for persistence - } + setSelectedOption(newValue); // Update the state with the selected option + localStorage.setItem('radioSelection', newValue); // Save the selection for persistence }; // Function to handle updating all credentials const handleUpdateCredentials = async () => { - if (typeof localStorage !== 'undefined') { - - let useName = localStorage.getItem("accountName") - let useEmail = localStorage.getItem("accountEmail") - let usePassword = localStorage.getItem("accountPassword") - if (useName && useEmail && usePassword) { - await deleteAccount(useName, usePassword) + let useName = localStorage.getItem("accountName") + let useEmail = localStorage.getItem("accountEmail") + let usePassword = localStorage.getItem("accountPassword") + if (useName && useEmail && usePassword) { + await deleteAccount(useName, usePassword) - if (newName != "") { - useName = newName - } if (newEmail != "") { - useEmail = newEmail - } if (newPassword != "") { - usePassword = newPassword - } + if (newName != "") { + useName = newName + } if (newEmail != "") { + useEmail = newEmail + } if (newPassword != "") { + usePassword = newPassword + } - if (await createAccount(useName, useEmail, usePassword)) { - if (await changeData(useName, usePassword, settings)) { - if (typeof window !== 'undefined') { - localStorage.setItem("currentName", useName) - localStorage.setItem("currentPassword", usePassword) - localStorage.setItem("currentEmail", useEmail) - alert('Account successfully changed!') - window.location.reload() - } - } + if (await createAccount(useName, useEmail, usePassword)) { + if (await changeData(useName, usePassword, settings)) { + localStorage.setItem("currentName", useName) + localStorage.setItem("currentPassword", usePassword) + localStorage.setItem("currentEmail", useEmail) + alert('Account successfully changed!') + window.location.reload() } } } @@ -419,25 +364,22 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( // Function to handle account deletion const handleDeleteAccount = async () => { - if (typeof localStorage !== 'undefined') { - - const useName = localStorage.getItem("accountName") - const usePassword = localStorage.getItem("accountPassword") - if (useName && usePassword) { - const success = await deleteAccount(useName, usePassword); - if (success && typeof window !== 'undefined' ) { - localStorage.clear(); - alert('Account deleted successfully!'); - window.location.reload() - // Optionally, redirect or reset state here - } else { - alert('Account deletion failed. Please check your password.'); - } + const useName = localStorage.getItem("accountName") + const usePassword = localStorage.getItem("accountPassword") + if (useName && usePassword) { + const success = await deleteAccount(useName, usePassword); + if (success) { + localStorage.clear(); + alert('Account deleted successfully!'); + window.location.reload() + // Optionally, redirect or reset state here + } else { + alert('Account deletion failed. Please check your password.'); } } }; - //#region rendering + // Render settings content based on the active section const renderSettingsContent = () => { switch (activeSection) { @@ -566,19 +508,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( setValue={setBasicTextColor} cssVariable="" /> - - { - setFontFamily(newFont); - document.documentElement.style.setProperty('--font-family', newFont); - }} - options={fontOptions} - /> )} @@ -629,8 +558,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( case 'account': - const namePlaceholder = getItemFromLocalStorage("accountName") || "Current Name" - const emailPlaceholder = getItemFromLocalStorage("accountEmail") || "Current Email" return (

Account Settings

@@ -639,14 +566,14 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( value={newName} type='text' setValue={setNewName} - placeholder={namePlaceholder} // Show current name or a default + placeholder={localStorage.getItem("accountName") || "Current Name"} // Show current name or a default /> void; accountName: string }> = ( ); case 'api': - const mistral_APIKey_PlaceHolder = getItemFromLocalStorage("mistral") || "Enter the API key" - const openai_APIKey_PlaceHolder = getItemFromLocalStorage("openai") || "Enter the API key" - const anthropic_APIKey_PlaceHolder = getItemFromLocalStorage("anthropic") || "Enter the API key" - const google_APIKey_PlaceHolder = getItemFromLocalStorage("google") || "Enter the API key" return (
void; accountName: string }> = ( value={mistral} // State variable for the input setValue={setMistral} // State updater function type="text" // Input type - placeholder={mistral_APIKey_PlaceHolder} + placeholder={localStorage.getItem('mistral') || "Enter the API key"} />
@@ -697,7 +620,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( value={openai} // State variable for the input setValue={setOpenai} // State updater function type="text" // Input type - placeholder={openai_APIKey_PlaceHolder} + placeholder={localStorage.getItem('openai') || "Enter the API key"} />
@@ -709,7 +632,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( value={anthropic} // State variable for the input setValue={setAnthropic} // State updater function type="text" // Input type - placeholder={anthropic_APIKey_PlaceHolder} + placeholder={localStorage.getItem('anthropic') || "Enter the API key"} />
@@ -721,7 +644,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( value={google} // State variable for the input setValue={setGoogle} // State updater function type="text" // Input type - placeholder={google_APIKey_PlaceHolder} + placeholder={localStorage.getItem('google') || "Enter the API key"} />