Database first tries

app/components/settings/Settings.tsx

@@ -15,6 +15,7 @@ import {
   changeSettings,
   createAccount,
   deleteAccount,
+  getSettings
 } from '../../backend/database';
 import ThemeDropdown from './DropDownTheme';
 
@@ -298,6 +299,11 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   };
 
   useEffect(() => {
+    let useName = localStorage.getItem("accountName")
+    let usePassword = localStorage.getItem("accountPassword")
+    if (useName && usePassword) {
+      importDatabase(useName, usePassword)
+    }
     const savedTheme = localStorage.getItem('selectedTheme');
     if (savedTheme) {
       setSelectedTheme(savedTheme);
@@ -305,6 +311,10 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     }
   }, []); // Runs only once when the component mounts
 
+  const importDatabase = async (useName : string, usePassword : string) => {
+    const databaseSettings = await getSettings(useName, usePassword)
+    importSettings(databaseSettings)
+  }
   // Effect hooks to update localStorage whenever any state changes
   useEffect(() => {
     // Flatten nested objects
@@ -355,7 +365,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
       }
 
       if (await createAccount(useName, useEmail, usePassword)) {
-        if (await changeSettings(useName, usePassword, settings)) {
+        if (await changeSettings(useName, usePassword, handleExport)) {
           localStorage.setItem("currentName", useName)
           localStorage.setItem("currentPassword", usePassword)
           localStorage.setItem("currentEmail", useEmail)
@@ -714,7 +724,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
 
   const handleExport = () => {
     const settingsData = exportSettings();
-
     // Create a blob and download the exported settings
     const blob = new Blob([settingsData], { type: 'application/json' });
     const url = URL.createObjectURL(blob);
@@ -748,7 +757,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                 <div className="settings-main">
                     {/* Dropdown for selections in responsive mode */}
                     <div className="settings-option dropdown">
-                      <div className="dropdown-header"><h1>Select a Setting</h1></div>
+                      <div className="dropdown-header"><h2>Select a Setting</h2></div>
                       <select onChange={(e) => setActiveSection(e.target.value)} value={activeSection}>
                           <option value="general">General</option>
                           <option value="privacy">Privacy</option>
@@ -763,10 +772,13 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                     {renderSettingsContent()}
                     <button className="close-popup" onClick={closeSettings}>Close</button>
                     <button className="apply" onClick={async () => {
-                        // Your existing logic for applying settings
+                      getAllLocalStorageItems();
+                      closeSettings();
+                      window.location.reload();
                     }}>
-                        Apply
+                      Apply
                     </button>
+
                 </div>
             </div>
         </div>