fix settings not save.

src-tauri/tauri.conf.json

@@ -45,7 +45,6 @@
       "active": true,
       "targets": "all",
       "identifier": "WindowPet",
-      "category": "",
       "icon": [
         "icons/WindowPetNewTransparent.png",
         "icons/WindowPetNewTransparent.ico",

src/Setting.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import {
   AppShell,
   Navbar,
@@ -16,36 +16,41 @@ import AddPet from './components/setting_tabs/AddPet';
 import EditPet from './components/setting_tabs/EditPet';
 import Settings from './components/setting_tabs/Settings';
 import { useTranslation } from 'react-i18next';
-import { createDefaultSettingsIfNotExist, setSettings, getAppSettings } from "./utils/settingsFunction";
+import { createDefaultSettingsIfNotExist, getAppSettings, setSettings } from "./utils/settingsFunction";
 
 createDefaultSettingsIfNotExist();
 
 interface SettingTabComponentInterface {
   [key: number]: () => JSX.Element;
 }
 
-// current work around for 
-// Top-level await is not available in the configured target environment ("safari13" + 3 overrides)
-let settings:any
-async function setSetting() {
-  settings = await getAppSettings()
-}
-setSetting()
-
 function Setting() {
   // disable right click (context menu) for build version only. uncomment for development
   // credit: https://github.com/tauri-apps/wry/issues/30
   document.addEventListener('contextmenu', event => event.preventDefault());
 
-  const [colorScheme, setColorScheme] = useState<ColorScheme>(settings!.theme);
-  const toggleColorScheme = async (value?: ColorScheme) => {
+  const [colorScheme, setColorScheme] = useState<ColorScheme>("dark");
+  const { t, i18n } = useTranslation();
+
+  useEffect(() => {
+    getAppSettings().then((appSetting) => {
+      if (appSetting.theme !== colorScheme) {
+        setColorScheme(appSetting.theme);
+      }
+
+      if (appSetting.language !== i18n.language) {
+        i18n.changeLanguage(appSetting.language);
+      }
+    })
+  }, [colorScheme, i18n.language]);
+
+  const toggleColorScheme = (value?: ColorScheme) => {
     const theme = value || (colorScheme === 'dark' ? 'light' : 'dark');
     setColorScheme(theme);
-    await setSettings("theme", theme);
+    setSettings("theme", theme);
   }
 
   const page = useSettingTabStore((state) => state.page);
-  const { t } = useTranslation();
 
   const SettingTabComponent: SettingTabComponentInterface = {
     0: AddPet,
@@ -96,7 +101,6 @@ function Setting() {
             </Navbar>
           }
         >
-          {/* <Text>Resize app to see responsive navbar in action {page}</Text> */}
           <CurrentSettingTab />
         </AppShell>
       </MantineProvider>

src/components/setting_tabs/Settings.tsx

@@ -30,7 +30,6 @@ isAutoStartUpEnabled();
 
 function Settings() {
     const { t, i18n } = useTranslation();
-
     const initialSettingState = {
         language: i18n.language,
         autoStartUp: isAutoStartUp,

src/hooks/settingReducer.tsx

@@ -16,7 +16,6 @@ interface Action {
 export const settingReducer = (state: State, action: Action) => {
     switch (action.type) {
         case 'changeAppLanguage':
-            // the function return a promise but since it doesn't matter even if we wait for setting to change, I don't use a wait.
             setSettings('language', action.payload.value);
             return {
                 ...state,

src/hooks/useSettings.tsx

@@ -0,0 +1,20 @@
+import { useEffect, useState } from "react";
+import { getAppSettings } from "../utils/settingsFunction";
+
+export interface ISetting {
+    language: string,
+    theme: 'light' | 'dark',
+}
+
+export default function useSetting() {
+    const [appSetting, setAppSetting] = useState<any>();
+
+    useEffect(() => {
+        (async function () {
+            const setting = await getAppSettings();
+            setAppSetting(setting);
+        })();
+    }, []);
+
+    return appSetting as ISetting;
+}

src/i18next.ts

@@ -2,19 +2,14 @@ import English from "./locale/en/translation.json";
 import Khmer from "./locale/kh/translation.json";
 import i18next from "i18next";
 import { initReactI18next } from "react-i18next";
-import { getAppSettings } from "./utils/settingsFunction";
 
-let settings:any
-async function setSetting() {
-  settings = await getAppSettings()
-}
-setSetting()
+const defaultLanguage = 'en';
 
 i18next
     .use(initReactI18next)
     .init({
-        lng: settings?.language,
-        fallbackLng: 'defaultLanguage',
+        lng: 'en',
+        fallbackLng: defaultLanguage,
         resources: {
             en: {
                 translation: English

src/utils/settingsFunction.ts

@@ -1,50 +1,52 @@
 import { enable, isEnabled, disable } from "tauri-plugin-autostart-api";
 import { appConfigDir } from '@tauri-apps/api/path';
-import { exists  } from '@tauri-apps/api/fs';
+import { exists } from '@tauri-apps/api/fs';
 import { Store } from "tauri-plugin-store-api";
 import defaultSettings from "../settings/defaultSettings.json";
-
-export interface ISetting {
-    language: string,
-    theme: 'light' | 'dark',
-}
-
-export async function toggleAutoStartUp(isAutoStartUp: boolean) {
-    const hasEnabledStartUp = await isEnabled();
-
-    if (isAutoStartUp) {
-        if (hasEnabledStartUp) return;
-        await enable();
-        return;
-    }
-
-    if (hasEnabledStartUp) {
-        await disable();
-    }
+import { ISetting } from "../hooks/useSettings";
+
+export function toggleAutoStartUp(isAutoStartUp: boolean) {
+    (async () => {
+        const hasEnabledStartUp = await isEnabled();
+
+        if (isAutoStartUp) {
+            if (hasEnabledStartUp) return;
+            await enable();
+            return;
+        }
+
+        if (hasEnabledStartUp) {
+            await disable();
+        }
+    })()
 };
 
 export async function getAppSettings() {
     const store = new Store("settings.json")
-    const settings: ISetting | null = await store.get("app");
+    const settings: any = await store.get("app");
     return settings;
 }
 
-export async function setSettings(key: string, newValue: unknown) {
-    let setting: any = await getAppSettings();
-    setting[key] = newValue; 
-    const store = new Store("settings.json")
-    await store.set("app", setting);
-    await store.save();
-}
-
-export async function createDefaultSettingsIfNotExist() {
-    const configDirPath = await appConfigDir();
-    const settingsFilePath = `${configDirPath}settings.json`;
-    const fileExists = await exists(settingsFilePath);
-
-    if (!fileExists) {
+export function setSettings(key: string, newValue: unknown) {
+    (async () => {
+        let setting: any = await getAppSettings();
+        setting[key] = newValue;
         const store = new Store("settings.json")
-        await store.set("app", defaultSettings);
+        await store.set("app", setting);
         await store.save();
-    }
+    })()
+}
+
+export function createDefaultSettingsIfNotExist() {
+    (async () => {
+        const configDirPath = await appConfigDir();
+        const settingsFilePath = `${configDirPath}settings.json`;
+        const fileExists = await exists(settingsFilePath);
+
+        if (!fileExists) {
+            const store = new Store("settings.json")
+            await store.set("app", defaultSettings);
+            await store.save();
+        }
+    })()
 }