fix: appearance and locale initial value

1 year ago · 9ffd827028
parent 15e6542f0d
commit 9ffd827028
4 changed files with 19 additions and 30 deletions
--- a/web/index.html
+++ b/web/index.html
@ -10,6 +10,13 @@
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <!-- memos.metadata.head -->
    <title>Memos</title>
+    <script>
+      // Prevent flash of light mode.
+      const appearance = localStorage.getItem("appearance");
+      if (appearance === `"dark"`) {
+        document.documentElement.classList.add("dark");
+      }
+    </script>
  </head>
  <body>
    <div id="root"></div>
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@ -83,7 +83,7 @@ const App = () => {

  useEffect(() => {
    const { locale: storageLocale } = storage.get(["locale"]);
-    const currentLocale = storageLocale || userStore?.userSetting?.locale || locale;
+    const currentLocale = userStore.userSetting?.locale || storageLocale || locale;
    i18n.changeLanguage(currentLocale);
    document.documentElement.setAttribute("lang", currentLocale);
    if (currentLocale === "ar") {
@ -91,17 +91,22 @@ const App = () => {
    } else {
      document.documentElement.setAttribute("dir", "ltr");
    }
-  }, [locale]);
+    storage.set({
+      locale: currentLocale,
+    });
+  }, [locale, userStore.userSetting?.locale]);

  useEffect(() => {
    const { appearance: storageAppearance } = storage.get(["appearance"]);
-    let currentAppearance = (storageAppearance || userStore?.userSetting?.appearance || appearance) as Appearance;
+    let currentAppearance = (userStore.userSetting?.appearance || storageAppearance || appearance) as Appearance;
    if (currentAppearance === "system") {
      currentAppearance = getSystemColorScheme();
    }
-
    setMode(currentAppearance);
-  }, [appearance]);
+    storage.set({
+      appearance: currentAppearance,
+    });
+  }, [appearance, userStore.userSetting?.appearance]);

  useEffect(() => {
    const root = document.documentElement;
--- a/web/src/store/module/global.ts
+++ b/web/src/store/module/global.ts
@ -50,12 +50,8 @@ export const initialGlobalState = async () => {
    // Otherwise, use server's default locale, set to storageLocale.
    const { locale: storageLocale, appearance: storageAppearance } = storage.get(["locale", "appearance"]);
    defaultGlobalState.locale =
-      storageLocale ||
-      defaultGlobalState.systemStatus.customizedProfile.locale ||
-      defaultGlobalState.locale ||
-      findNearestLanguageMatch(i18n.language);
-    defaultGlobalState.appearance =
-      storageAppearance || defaultGlobalState.systemStatus.customizedProfile.appearance || defaultGlobalState.appearance;
+      storageLocale || defaultGlobalState.systemStatus.customizedProfile.locale || findNearestLanguageMatch(i18n.language);
+    defaultGlobalState.appearance = storageAppearance || defaultGlobalState.systemStatus.customizedProfile.appearance;
  }
  store.dispatch(setGlobalState(defaultGlobalState));
 };
--- a/web/src/store/v1/user.ts
+++ b/web/src/store/v1/user.ts
@ -1,9 +1,6 @@
 import { create } from "zustand";
 import { combine } from "zustand/middleware";
 import { authServiceClient, userServiceClient } from "@/grpcweb";
-import storage from "@/helpers/storage";
-import store from "@/store";
-import { setAppearance, setLocale } from "@/store/reducer/global";
 import { User, UserSetting } from "@/types/proto/api/v2/user_service";
 import { UserNamePrefix, extractUsernameFromName } from "./resourceName";

@ -113,22 +110,6 @@ export const useUserStore = create(
          ...setting,
        }),
      });
-      const userLocale = get().userSetting?.locale;
-      const userAppearance = get().userSetting?.appearance;
-      const { locale: storedLocale, appearance: storedAppearance } = storage.get(["locale", "appearance"]);
-      // Use storageLocale > userLocale > default locale
-      const locale = storedLocale || userLocale || store.getState().global.locale;
-      const appearance = (storedAppearance || userAppearance || store.getState().global.appearance) as Appearance;
-
-      // If storedLocale is undefined, set storageLocale to userLocale.
-      if (storedLocale === undefined && storedAppearance === undefined) {
-        storage.set({ locale: locale });
-        storage.set({ appearance: appearance });
-      }
-
-      store.dispatch(setLocale(locale));
-      store.dispatch(setAppearance(appearance));
-
      return user;
    },
    updateUserSetting: async (userSetting: Partial<UserSetting>, updateMask: string[]) => {