fix: locale and appearance setting

This commit is contained in:
Steven 2024-01-17 22:16:12 +08:00
parent 6d7186fc81
commit 1857362d03
2 changed files with 16 additions and 7 deletions

View File

@ -16,6 +16,7 @@ const App = () => {
const userStore = useUserStore();
const [loading, setLoading] = useState(true);
const { appearance, locale, systemStatus } = globalStore.state;
const userSetting = userStore.userSetting;
// Redirect to sign up page if no host.
useEffect(() => {
@ -81,9 +82,18 @@ const App = () => {
link.href = systemStatus.customizedProfile.logoUrl || "/logo.webp";
}, [systemStatus.customizedProfile]);
useEffect(() => {
if (!userSetting) {
return;
}
globalStore.setLocale(userSetting.locale);
globalStore.setAppearance(userSetting.appearance as Appearance);
}, [userSetting?.locale, userSetting?.appearance]);
useEffect(() => {
const { locale: storageLocale } = storage.get(["locale"]);
const currentLocale = userStore.userSetting?.locale || storageLocale || locale;
const currentLocale = storageLocale || locale;
i18n.changeLanguage(currentLocale);
document.documentElement.setAttribute("lang", currentLocale);
if (currentLocale === "ar") {
@ -94,11 +104,11 @@ const App = () => {
storage.set({
locale: currentLocale,
});
}, [locale, userStore.userSetting?.locale]);
}, [locale]);
useEffect(() => {
const { appearance: storageAppearance } = storage.get(["appearance"]);
let currentAppearance = (userStore.userSetting?.appearance || storageAppearance || appearance) as Appearance;
let currentAppearance = (storageAppearance || appearance) as Appearance;
if (currentAppearance === "system") {
currentAppearance = getSystemColorScheme();
}
@ -106,7 +116,7 @@ const App = () => {
storage.set({
appearance: currentAppearance,
});
}, [appearance, userStore.userSetting?.appearance]);
}, [appearance]);
useEffect(() => {
const root = document.documentElement;

View File

@ -18,7 +18,6 @@ const PreferencesSection = () => {
const t = useTranslate();
const globalStore = useGlobalStore();
const userStore = useUserStore();
const { appearance, locale } = globalStore.state;
const setting = userStore.userSetting as UserSetting;
const [telegramUserId, setTelegramUserId] = useState<string>(setting.telegramUserId);
@ -75,11 +74,11 @@ const PreferencesSection = () => {
<p className="font-medium text-gray-700 dark:text-gray-500">{t("common.basic")}</p>
<div className="w-full flex flex-row justify-between items-center">
<span>{t("common.language")}</span>
<LocaleSelect value={locale} onChange={handleLocaleSelectChange} />
<LocaleSelect value={setting.locale} onChange={handleLocaleSelectChange} />
</div>
<div className="w-full flex flex-row justify-between items-center">
<span>{t("setting.preference-section.theme")}</span>
<AppearanceSelect value={appearance} onChange={handleAppearanceSelectChange} />
<AppearanceSelect value={setting.appearance as Appearance} onChange={handleAppearanceSelectChange} />
</div>
<p className="font-medium text-gray-700 dark:text-gray-500">{t("setting.preference")}</p>
<div className="w-full flex flex-row justify-between items-center">