I have immense pain in the left temple.

app/components/Login.tsx

@@ -5,6 +5,7 @@ import {
   getSettings
 } from '../backend/database';
 import Settings from './settings/Settings'; // Import the Settings component
+import { importDatabase } from './settings/settingUtils';
 
 const Login: React.FC = () => {
   // State to handle popup visibility
@@ -23,9 +24,9 @@ const Login: React.FC = () => {
 
   // On component mount, check if there are credentials in localStorage
   useEffect(() => {
-    let savedAccountName:string|null;
+    let savedAccountName: string | null;
-    let savedAccountEmail:string|null;
+    let savedAccountEmail: string | null;
-    let savedAccountPassword:string|null;
+    let savedAccountPassword: string | null;
     if (typeof localStorage !== 'undefined') {
       savedAccountName = localStorage.getItem('accountName');
       savedAccountEmail = localStorage.getItem('accountEmail');
@@ -40,6 +41,14 @@ const Login: React.FC = () => {
           if (savedAccountName !== null && savedAccountPassword !== null) {
             const success = await checkCredentials(savedAccountName, savedAccountPassword);
             setIsLoggedIn(success); // Automatically log in
+            const useName = localStorage.getItem("accountName");
+            const usePassword = localStorage.getItem("accountPassword");
+
+            if (useName && usePassword) {
+              await importDatabase(useName, usePassword);
+            }
+
+
           }
         };
         check();
@@ -69,6 +78,14 @@ const Login: React.FC = () => {
           }
         }
         setShowLoginPopup(false); // Close the login popup
+        const useName = localStorage.getItem("accountName");
+        const usePassword = localStorage.getItem("accountPassword");
+
+        if (useName && usePassword) {
+          await importDatabase(useName, usePassword);
+        }
+
+        window.location.reload();
       } else {
         alert('Incorrect credentials');
       }

app/components/settings/Settings.tsx

@@ -1,7 +1,7 @@
 //#region imports
 import React, { useState, useEffect } from 'react';
 import { applyTheme } from './theme';
-import { exportSettings, importSettings } from './settingUtils'; // Import utility functions
+import { exportSettings, importSettings, sendToDatabase, importDatabase } from './settingUtils'; // Import utility functions
 import { getAllLocalStorageItems } from '../../backend/GetLocalStorage';
 import ColorSetting from './ColorSettings';
 import TextSettings from './TextSettings'
@@ -15,8 +15,6 @@ import {
   changeSettings,
   createAccount,
   deleteAccount,
-  getSettings,
-  sendToDatabase
 } from '../../backend/database';
 import ThemeDropdown from './DropDownTheme';
 
@@ -314,27 +312,6 @@ 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);
-
-    // Ensure user settings exist before flattening and storing
-    if (typeof databaseSettings == 'object' && databaseSettings) {
-      JSON.stringify(importSettings(databaseSettings), null, 2); // Pass only the current user's settings
-    } else {
-      console.error('Database settings are not in the expected format.');
-    }
-  }
-
-  const sendToDatabase = async () => {
-    let useName = localStorage.getItem("accountName")
-    let usePassword = localStorage.getItem("accountPassword")
-    if (useName && usePassword) {
-        if (await changeSettings(useName, usePassword, JSON.parse(exportSettings()))) {
-          alert('Data has been transferred')
-        }
-    }
-  };
-
   // Effect hooks to update localStorage whenever any state changes
   useEffect(() => {
     // Flatten nested objects
@@ -795,7 +772,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               getAllLocalStorageItems();
               closeSettings();
               sendToDatabase();
-                      window.location.reload();
             }}>
               Apply
             </button>
@@ -804,7 +780,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
         </div>
       </div>
     </div>
-);
+  );
 };
 
 

app/components/settings/settingUtils.ts

@@ -1,4 +1,5 @@
 // settingsManager.ts
+import { changeSettings, getSettings } from "@/app/backend/database";
 
 // Method to export localStorage to a JSON object
 export function exportSettings(): string {
@@ -37,3 +38,27 @@ export function importSettings(jsonData: string): void {
         console.error("Invalid JSON data:", error);
     }
 }
+
+export const sendToDatabase = async () => {
+    let useName = localStorage.getItem("accountName")
+    let usePassword = localStorage.getItem("accountPassword")
+    if (useName && usePassword) {
+        let result = await changeSettings(useName, usePassword, JSON.parse(exportSettings()))
+        if (result == true) {
+            alert('Data has been transferred')
+            window.location.reload();
+        }
+    }
+    window.location.reload();
+};
+
+export const importDatabase = async (useName: string, usePassword: string) => {
+    const databaseSettings = await getSettings(useName, usePassword);
+
+    // Ensure user settings exist before flattening and storing
+    if (typeof databaseSettings == 'object' && databaseSettings) {
+        importSettings(JSON.stringify(databaseSettings, null, 2)); // Pass only the current user's settings
+    } else {
+        console.error('Database settings are not in the expected format.');
+    }
+}