fix: i18n persist

Signed-off-by: Innei <[email protected]>
RSSNext · Sep 19, 2024 · 18e0353 · 18e0353
1 parent 9ead475
commit 18e0353
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 29 deletions.
diff --git a/apps/renderer/src/constants/app.tsx b/apps/renderer/src/constants/app.tsx
@@ -4,6 +4,7 @@ import { getStorageNS } from "~/lib/ns"
 export const FEED_COLLECTION_LIST = "collections"
 /// Local storage keys
 export const QUERY_PERSIST_KEY = getStorageNS("REACT_QUERY_OFFLINE_CACHE")
+export const I18N_LOCALE_KEY = getStorageNS("I18N_LOCALE")
 
 /// Route Keys
 export const ROUTE_FEED_PENDING = "all"

diff --git a/apps/renderer/src/modules/settings/tabs/wallet/transaction-section/index.tsx b/apps/renderer/src/modules/settings/tabs/wallet/transaction-section/index.tsx
@@ -48,22 +48,22 @@ export const TransactionsSection = () => {
         <Table>
           <TableHeader>
             <TableRow className="[&_*]:!font-semibold">
-              <TableHead className="w-16 text-center" size="sm">
+              <TableHead className="min-w-16 whitespace-nowrap text-center" size="sm">
                 {t("wallet.transactions.type")}
               </TableHead>
-              <TableHead className="text-center" size="sm">
+              <TableHead className="whitespace-nowrap text-center" size="sm">
                 {t("wallet.transactions.amount")}
               </TableHead>
-              <TableHead className="pl-8" size="sm">
+              <TableHead className="whitespace-nowrap pl-8" size="sm">
                 {t("wallet.transactions.from")}
               </TableHead>
-              <TableHead className="pl-8" size="sm">
+              <TableHead className="whitespace-nowrap pl-8" size="sm">
                 {t("wallet.transactions.to")}
               </TableHead>
-              <TableHead className="pl-6" size="sm">
+              <TableHead className="whitespace-nowrap pl-6" size="sm">
                 {t("wallet.transactions.date")}
               </TableHead>
-              <TableHead className="pl-6" size="sm">
+              <TableHead className="whitespace-nowrap pl-6" size="sm">
                 {t("wallet.transactions.tx")}
               </TableHead>
             </TableRow>

diff --git a/apps/renderer/src/providers/i18n-provider.tsx b/apps/renderer/src/providers/i18n-provider.tsx
@@ -7,10 +7,9 @@ import { I18nextProvider } from "react-i18next"
 
 import { currentSupportedLanguages } from "~/@types/constants"
 import { getGeneralSettings, setGeneralSetting } from "~/atoms/settings/general"
-import { i18nAtom, langChain } from "~/i18n"
+import { I18N_LOCALE_KEY } from "~/constants"
+import { i18nAtom } from "~/i18n"
 import { EventBus } from "~/lib/event-bus"
-import { loadLanguageAndApply } from "~/lib/load-language"
-import { appLog } from "~/lib/log"
 
 export const I18nProvider: FC<PropsWithChildren> = ({ children }) => {
   const [currentI18NInstance, update] = useAtom(i18nAtom)
@@ -24,33 +23,18 @@ export const I18nProvider: FC<PropsWithChildren> = ({ children }) => {
           const nextI18n = i18next.cloneInstance({
             lng: lang,
           })
+
           update(nextI18n)
         }),
       [update],
     )
 
-  useLayoutEffect(() => {
-    const i18next = currentI18NInstance
-
-    const handler = (lang: string) => {
-      if (i18next.language === lang) return
-      loadLanguageAndApply(lang).then(() => {
-        langChain.next(() => {
-          appLog("change language to", lang)
-          return i18next.changeLanguage(lang)
-        })
-      })
-    }
-    i18next.on("languageChanged", handler)
-
-    return () => {
-      i18next.off("languageChanged")
-    }
-  }, [currentI18NInstance])
-
   useLayoutEffect(() => {
     const languageDetector = new LanguageDetector(null, {
-      order: ["navigator", "htmlTag"],
+      order: ["querystring", "localStorage", "navigator"],
+      lookupQuerystring: "lng",
+      lookupLocalStorage: I18N_LOCALE_KEY,
+      caches: ["localStorage"],
     })
     const userLang = languageDetector.detect()
     if (!userLang) return

diff --git a/apps/renderer/src/providers/setting-sync.tsx b/apps/renderer/src/providers/setting-sync.tsx
@@ -3,6 +3,7 @@ import { useEffect, useInsertionEffect, useLayoutEffect } from "react"
 
 import { useGeneralSettingKey } from "~/atoms/settings/general"
 import { useUISettingValue } from "~/atoms/settings/ui"
+import { I18N_LOCALE_KEY } from "~/constants"
 import { useReduceMotion } from "~/hooks/biz/useReduceMotion"
 import { useSyncThemeark } from "~/hooks/common"
 import { langChain } from "~/i18n"
@@ -65,6 +66,7 @@ const useLanguageSync = () => {
     loadLanguageAndApply(language as string).then(() => {
       langChain.next(() => {
         if (mounted) {
+          localStorage.setItem(I18N_LOCALE_KEY, language as string)
           return i18next.changeLanguage(language as string)
         }
       })