From fa1dc5df35a2225bb22320a8fc049d3c0b75fa5b Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Mon, 16 Sep 2024 18:31:07 +0800
Subject: [PATCH] fix: language setting syncing

Signed-off-by: Innei <i@innei.in>
---
 src/renderer/src/atoms/lang.ts                |  3 +++
 .../src/modules/settings/tabs/general.tsx     | 22 +++++--------------
 src/renderer/src/providers/root-providers.tsx |  2 +-
 .../{ui-setting-sync.tsx => setting-sync.tsx} | 21 ++++++++++++++++++
 4 files changed, 31 insertions(+), 17 deletions(-)
 create mode 100644 src/renderer/src/atoms/lang.ts
 rename src/renderer/src/providers/{ui-setting-sync.tsx => setting-sync.tsx} (67%)

diff --git a/src/renderer/src/atoms/lang.ts b/src/renderer/src/atoms/lang.ts
new file mode 100644
index 000000000..349f0daa8
--- /dev/null
+++ b/src/renderer/src/atoms/lang.ts
@@ -0,0 +1,3 @@
+import { atom } from "jotai"
+
+export const langLoadingLockMapAtom = atom({} as Record<string, boolean>)
diff --git a/src/renderer/src/modules/settings/tabs/general.tsx b/src/renderer/src/modules/settings/tabs/general.tsx
index e1045a6ea..abded7b81 100644
--- a/src/renderer/src/modules/settings/tabs/general.tsx
+++ b/src/renderer/src/modules/settings/tabs/general.tsx
@@ -1,4 +1,5 @@
 import { currentSupportedLanguages } from "@renderer/@types/constants"
+import { langLoadingLockMapAtom } from "@renderer/atoms/lang"
 import {
   setGeneralSetting,
   useGeneralSettingSelector,
@@ -24,12 +25,11 @@ import { IS_MANUAL_CHANGE_LANGUAGE_KEY } from "@renderer/constants"
 import { fallbackLanguage } from "@renderer/i18n"
 import { initPostHog } from "@renderer/initialize/posthog"
 import { tipcClient } from "@renderer/lib/client"
-import { loadLanguageAndApply } from "@renderer/lib/load-language"
 import { cn } from "@renderer/lib/utils"
 import { clearLocalPersistStoreData } from "@renderer/store/utils/clear"
 import { useQuery } from "@tanstack/react-query"
-import i18next from "i18next"
-import { useCallback, useEffect, useState } from "react"
+import { useAtom } from "jotai"
+import { useCallback, useEffect } from "react"
 import { useTranslation } from "react-i18next"
 
 import { SettingsTitle } from "../title"
@@ -212,9 +212,8 @@ export const LanguageSelector = () => {
     ? language
     : fallbackLanguage
 
-  const [loadingLanguageLockMap, setLoadingLanguageLockMap] = useState(
-    {} as Record<string, boolean>,
-  )
+  const [loadingLanguageLockMap] = useAtom(langLoadingLockMapAtom)
+
   return (
     <div className="mb-3 mt-4 flex items-center justify-between">
       <span className="shrink-0 text-sm font-medium">{t("general.language")}</span>
@@ -224,16 +223,7 @@ export const LanguageSelector = () => {
         disabled={loadingLanguageLockMap[finalRenderLanguage]}
         onValueChange={(value) => {
           localStorage.setItem(IS_MANUAL_CHANGE_LANGUAGE_KEY, "true")
-          setLoadingLanguageLockMap((state) => ({ ...state, [value]: true }))
-          loadLanguageAndApply(value as string)
-            .then(() => {
-              i18next.changeLanguage(value as string)
-
-              setGeneralSetting("language", value as string)
-            })
-            .finally(() => {
-              setLoadingLanguageLockMap((state) => ({ ...state, [value]: false }))
-            })
+          setGeneralSetting("language", value as string)
         }}
       >
         <SelectTrigger
diff --git a/src/renderer/src/providers/root-providers.tsx b/src/renderer/src/providers/root-providers.tsx
index b28109a83..90e7bdb54 100644
--- a/src/renderer/src/providers/root-providers.tsx
+++ b/src/renderer/src/providers/root-providers.tsx
@@ -14,8 +14,8 @@ import { ContextMenuProvider } from "./context-menu-provider"
 import { EventProvider } from "./event-provider"
 import { I18nProvider } from "./i18n-provider"
 import { InvalidateQueryProvider } from "./invalidate-query-provider"
+import { SettingSync } from "./setting-sync"
 import { StableRouterProvider } from "./stable-router-provider"
-import { SettingSync } from "./ui-setting-sync"
 import { UserProvider } from "./user-provider"
 
 const loadFeatures = () => import("../framer-lazy-feature").then((res) => res.default)
diff --git a/src/renderer/src/providers/ui-setting-sync.tsx b/src/renderer/src/providers/setting-sync.tsx
similarity index 67%
rename from src/renderer/src/providers/ui-setting-sync.tsx
rename to src/renderer/src/providers/setting-sync.tsx
index 95e881d60..e1c30687b 100644
--- a/src/renderer/src/providers/ui-setting-sync.tsx
+++ b/src/renderer/src/providers/setting-sync.tsx
@@ -1,8 +1,13 @@
+import { langLoadingLockMapAtom } from "@renderer/atoms/lang"
+import { useGeneralSettingKey } from "@renderer/atoms/settings/general"
 import { useUISettingValue } from "@renderer/atoms/settings/ui"
 import { useReduceMotion } from "@renderer/hooks/biz/useReduceMotion"
 import { useSyncThemeark } from "@renderer/hooks/common"
 import { tipcClient } from "@renderer/lib/client"
+import { loadLanguageAndApply } from "@renderer/lib/load-language"
 import { feedUnreadActions } from "@renderer/store/unread"
+import i18next from "i18next"
+import { useSetAtom } from "jotai"
 import { useEffect, useInsertionEffect, useLayoutEffect } from "react"
 
 const useUISettingSync = () => {
@@ -51,8 +56,24 @@ const useUXSettingSync = () => {
     document.documentElement.dataset.motionReduce = reduceMotion ? "true" : "false"
   }, [reduceMotion])
 }
+
+const useLanguageSync = () => {
+  const setLoadingLanguageLockMap = useSetAtom(langLoadingLockMapAtom)
+  const language = useGeneralSettingKey("language")
+  useEffect(() => {
+    setLoadingLanguageLockMap((state) => ({ ...state, [language]: true }))
+    loadLanguageAndApply(language as string)
+      .then(() => {
+        i18next.changeLanguage(language as string)
+      })
+      .finally(() => {
+        setLoadingLanguageLockMap((state) => ({ ...state, [language]: false }))
+      })
+  }, [setLoadingLanguageLockMap, language])
+}
 export const SettingSync = () => {
   useUISettingSync()
   useUXSettingSync()
+  useLanguageSync()
   return null
 }