diff --git a/web/index.html b/web/index.html index 00674581..2258fc56 100644 --- a/web/index.html +++ b/web/index.html @@ -10,6 +10,13 @@ Memos +
diff --git a/web/src/App.tsx b/web/src/App.tsx index c9515648..48087748 100644 --- 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; diff --git a/web/src/store/module/global.ts b/web/src/store/module/global.ts index d646d8e8..8c4cb4a5 100644 --- 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)); }; diff --git a/web/src/store/v1/user.ts b/web/src/store/v1/user.ts index 72aa98aa..03726d92 100644 --- 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, updateMask: string[]) => {