Skip to content

C
canifa_note
Commit 9ffd8270 authored by Steven's avatar Steven
Browse files
Options

fix: appearance and locale initial value

parent 15e6542f
Hide whitespace changes
Inline Side-by-side
Showing with 19 additions and 30 deletions
web/index.html
View file @ 9ffd8270
...@@ -10,6 +10,13 @@ ...@@ -10,6 +10,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<!-- memos.metadata.head --> <!-- memos.metadata.head -->
<title>Memos</title> <title>Memos</title>
<script>
// Prevent flash of light mode.
const appearance = localStorage.getItem("appearance");
if (appearance === `"dark"`) {
document.documentElement.classList.add("dark");
}
</script>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
......
web/src/App.tsx
View file @ 9ffd8270
...@@ -83,7 +83,7 @@ const App = () => { ...@@ -83,7 +83,7 @@ const App = () => {
useEffect(() => { useEffect(() => {
const { locale: storageLocale } = storage.get(["locale"]); const { locale: storageLocale } = storage.get(["locale"]);
const currentLocale = storageLocale || userStore?.userSetting?.locale || locale; const currentLocale = userStore.userSetting?.locale || storageLocale || locale;
i18n.changeLanguage(currentLocale); i18n.changeLanguage(currentLocale);
document.documentElement.setAttribute("lang", currentLocale); document.documentElement.setAttribute("lang", currentLocale);
if (currentLocale === "ar") { if (currentLocale === "ar") {
...@@ -91,17 +91,22 @@ const App = () => { ...@@ -91,17 +91,22 @@ const App = () => {
} else { } else {
document.documentElement.setAttribute("dir", "ltr"); document.documentElement.setAttribute("dir", "ltr");
} }
}, [locale]); storage.set({
locale: currentLocale,
});
}, [locale, userStore.userSetting?.locale]);
useEffect(() => { useEffect(() => {
const { appearance: storageAppearance } = storage.get(["appearance"]); 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") { if (currentAppearance === "system") {
currentAppearance = getSystemColorScheme(); currentAppearance = getSystemColorScheme();
} }
setMode(currentAppearance); setMode(currentAppearance);
}, [appearance]); storage.set({
appearance: currentAppearance,
});
}, [appearance, userStore.userSetting?.appearance]);
useEffect(() => { useEffect(() => {
const root = document.documentElement; const root = document.documentElement;
......
web/src/store/module/global.ts
View file @ 9ffd8270
...@@ -50,12 +50,8 @@ export const initialGlobalState = async () => { ...@@ -50,12 +50,8 @@ export const initialGlobalState = async () => {
// Otherwise, use server's default locale, set to storageLocale. // Otherwise, use server's default locale, set to storageLocale.
const { locale: storageLocale, appearance: storageAppearance } = storage.get(["locale", "appearance"]); const { locale: storageLocale, appearance: storageAppearance } = storage.get(["locale", "appearance"]);
defaultGlobalState.locale = defaultGlobalState.locale =
storageLocale || storageLocale || defaultGlobalState.systemStatus.customizedProfile.locale || findNearestLanguageMatch(i18n.language);
defaultGlobalState.systemStatus.customizedProfile.locale || defaultGlobalState.appearance = storageAppearance || defaultGlobalState.systemStatus.customizedProfile.appearance;
defaultGlobalState.locale ||
findNearestLanguageMatch(i18n.language);
defaultGlobalState.appearance =
storageAppearance || defaultGlobalState.systemStatus.customizedProfile.appearance || defaultGlobalState.appearance;
} }
store.dispatch(setGlobalState(defaultGlobalState)); store.dispatch(setGlobalState(defaultGlobalState));
}; };
......
web/src/store/v1/user.ts
View file @ 9ffd8270
import { create } from "zustand"; import { create } from "zustand";
import { combine } from "zustand/middleware"; import { combine } from "zustand/middleware";
import { authServiceClient, userServiceClient } from "@/grpcweb"; 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 { User, UserSetting } from "@/types/proto/api/v2/user_service";
import { UserNamePrefix, extractUsernameFromName } from "./resourceName"; import { UserNamePrefix, extractUsernameFromName } from "./resourceName";
...@@ -113,22 +110,6 @@ export const useUserStore = create( ...@@ -113,22 +110,6 @@ export const useUserStore = create(
...setting, ...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; return user;
}, },
updateUserSetting: async (userSetting: Partial<UserSetting>, updateMask: string[]) => { updateUserSetting: async (userSetting: Partial<UserSetting>, updateMask: string[]) => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment