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<boolean>(false);
- const [disableAIMemory, setDisableAIMemory] = useState<boolean>(false);
- const [openSourceMode, setOpenSourceMode] = useState<boolean>(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<string>('');
// API Keys
- const [mistral, setMistral] = useState<string>("");
- const [openai, setOpenai] = useState<string>("");
- const [anthropic, setAnthropic] = useState<string>("");
- const [google, setGoogle] = useState<string>("");
- const [myBoolean, setMyBoolean] = useState<boolean>(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<boolean>(() => 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=""
/>
- <FontSizeSetting
- fontSize={fontSize}
- setFontSize={setFontSize}
- />
- <DropdownSetting
- label="Font Family"
- value={fontFamily}
- setValue={(newFont) => {
- 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 (
<div className="settings-section">
<h2>Account Settings</h2>
@@ -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
/>
<TextSettings
label="New Email"
value={newEmail}
setValue={setNewEmail}
type="email" // Input type is email
- placeholder={emailPlaceholder} // Show current email or a default
+ placeholder={localStorage.getItem("accountEmail") || "Current Email"} // Show current email or a default
/>
<TextSettings
label="New Password"
@@ -674,10 +601,6 @@ const Settings: React.FC<{ closeSettings: () => 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 (
<div className="settings-section">
<TextSettings
@@ -685,7 +608,7 @@ const Settings: React.FC<{ closeSettings: () => 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"}
/>
<div className="settings-option">
<a href="https://console.mistral.ai/api-keys/" target="_blank" rel="noopener noreferrer">
@@ -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"}
/>
<div className="settings-option">
<a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener noreferrer">
@@ -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"}
/>
<div className="settings-option">
<a href="https://console.anthropic.com/settings/keys" target="_blank" rel="noopener noreferrer">
@@ -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"}
/>
<div className="settings-option">
<a href="https://aistudio.google.com/app/apikey" target="_blank" rel="noopener noreferrer">
@@ -806,12 +729,8 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
<button className="apply" onClick={async () => {
getAllLocalStorageItems();
closeSettings();
- if (typeof localStorage !== 'undefined') {
- await changeData(localStorage.getItem('accountName') ?? "hello", localStorage.getItem('accountPassword') ?? "hello", settings) // ????
- }
- if (typeof window !== 'undefined') {
- window.location.reload();
- }
+ await changeData(localStorage.getItem('accountName') ?? "hello", localStorage.getItem('accountPassword') ?? "hello", settings) // ????
+ window.location.reload();
}}>
Apply
</button>