From e4a324625fb38ad524247b48643eb526348df5bb Mon Sep 17 00:00:00 2001
From: kunish <kunish.butt@gmail.com>
Date: Sat, 23 Sep 2023 01:38:36 +0800
Subject: [PATCH] refactor(i18n): add i18n context provider

---
 package.json                                |  1 +
 pnpm-lock.yaml                              | 11 +++++++++++
 src/components/ConnectionsSettingsModal.tsx |  4 ++--
 src/components/Header.tsx                   | 12 +++++-------
 src/components/Latency.tsx                  |  2 +-
 src/components/LogsSettingsModal.tsx        |  2 +-
 src/components/ProxiesSettingsModal.tsx     |  2 +-
 src/components/SubscriptionInfo.tsx         |  4 ++--
 src/i18n/index.tsx                          | 20 +++++++++-----------
 src/main.tsx                                |  9 ++++++---
 src/pages/Config.tsx                        |  8 ++++----
 src/pages/Connections.tsx                   |  8 ++++----
 src/pages/Logs.tsx                          |  2 +-
 src/pages/Overview.tsx                      |  2 +-
 src/pages/Proxies.tsx                       |  2 +-
 src/pages/Rules.tsx                         |  2 +-
 src/pages/Setup.tsx                         |  2 +-
 src/signals/global.ts                       |  4 ++--
 18 files changed, 54 insertions(+), 43 deletions(-)

diff --git a/package.json b/package.json
index 390c70f..8588837 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "@felte/validator-zod": "^1.0.17",
     "@fontsource/fira-sans": "^5.0.12",
     "@solid-primitives/clipboard": "^1.5.7",
+    "@solid-primitives/context": "^0.2.1",
     "@solid-primitives/event-listener": "^2.3.0",
     "@solid-primitives/i18n": "^2.0.0",
     "@solid-primitives/keyed": "^1.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 16a3ba0..0eb0682 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,9 @@ dependencies:
   '@solid-primitives/clipboard':
     specifier: ^1.5.7
     version: 1.5.7(solid-js@1.7.12)
+  '@solid-primitives/context':
+    specifier: ^0.2.1
+    version: 0.2.1(solid-js@1.7.12)
   '@solid-primitives/event-listener':
     specifier: ^2.3.0
     version: 2.3.0(solid-js@1.7.12)
@@ -2032,6 +2035,14 @@ packages:
       solid-js: 1.7.12
     dev: false
 
+  /@solid-primitives/context@0.2.1(solid-js@1.7.12):
+    resolution: {integrity: sha512-XIIwCOWpRKDersgkR9LNFXaJHIV8QlCFo/tq5bV0cAOZklcwOFcqi2bN+uWgEIQSWGjWXU2kc1H1/TzgYzVDlg==}
+    peerDependencies:
+      solid-js: ^1.6.12
+    dependencies:
+      solid-js: 1.7.12
+    dev: false
+
   /@solid-primitives/event-listener@2.3.0(solid-js@1.7.12):
     resolution: {integrity: sha512-0DS7DQZvCExWSpurVZC9/wjI8RmkhuOtWOy6Pp1Woq9ElMT9/bfjNpkwXsOwisLpcTqh9eUs17kp7jtpWcC20w==}
     peerDependencies:
diff --git a/src/components/ConnectionsSettingsModal.tsx b/src/components/ConnectionsSettingsModal.tsx
index a6670ea..a180199 100644
--- a/src/components/ConnectionsSettingsModal.tsx
+++ b/src/components/ConnectionsSettingsModal.tsx
@@ -45,7 +45,7 @@ const TagClientSourceIPWithNameForm: Component = () => {
     sourceIP: z.string().nonempty(),
   })
 
-  const { t } = useI18n()
+  const [t] = useI18n()
 
   const { form, reset } = createForm<z.infer<typeof schema>>({
     extend: validator({ schema }),
@@ -113,7 +113,7 @@ export const ConnectionsSettingsModal = (props: {
   onVisibleChange: (value: ConnectionsTableColumnVisibility) => void
 }) => {
   const modalID = MODAL.CONNECTIONS_SETTINGS
-  const { t } = useI18n()
+  const [t] = useI18n()
   const [activeKey, setActiveKey] =
     createSignal<CONNECTIONS_TABLE_ACCESSOR_KEY | null>(null)
 
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index a06de4d..345a314 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -13,7 +13,7 @@ import {
 import { For, ParentComponent, Show, createSignal } from 'solid-js'
 import { Button, LogoText } from '~/components'
 import { LANG, ROUTES, themes } from '~/constants'
-import { useI18n } from '~/i18n'
+import { setLocale, useI18n } from '~/i18n'
 import { setCurTheme } from '~/signals'
 
 const Nav: ParentComponent<{ href: string; tooltip: string }> = ({
@@ -62,7 +62,7 @@ const ThemeSwitcher = () => (
 )
 
 export const Header = () => {
-  const { t, locale } = useI18n()
+  const [t] = useI18n()
   const navs = () => [
     {
       href: ROUTES.Overview,
@@ -154,11 +154,9 @@ export const Header = () => {
         <div class="flex items-center gap-2">
           <Button
             class="btn-circle btn-secondary btn-sm"
-            onClick={() => {
-              const curLocale = locale()
-
-              locale(curLocale === LANG.EN ? LANG.ZH : LANG.EN)
-            }}
+            onClick={() =>
+              setLocale((locale) => (locale === LANG.EN ? LANG.ZH : LANG.EN))
+            }
             icon={<IconLanguage />}
           />
 
diff --git a/src/components/Latency.tsx b/src/components/Latency.tsx
index 17cae14..0a7da45 100644
--- a/src/components/Latency.tsx
+++ b/src/components/Latency.tsx
@@ -4,7 +4,7 @@ import { useI18n } from '~/i18n'
 import { latencyQualityMap, useProxies } from '~/signals'
 
 export const Latency = (props: { name?: string }) => {
-  const { t } = useI18n()
+  const [t] = useI18n()
   const { latencyMap } = useProxies()
   const [textClassName, setTextClassName] = createSignal('')
   const latency = createMemo(() => {
diff --git a/src/components/LogsSettingsModal.tsx b/src/components/LogsSettingsModal.tsx
index 787c7d9..abdf6f4 100644
--- a/src/components/LogsSettingsModal.tsx
+++ b/src/components/LogsSettingsModal.tsx
@@ -19,7 +19,7 @@ import {
 
 export const LogsSettingsModal = () => {
   const modalID = MODAL.LOGS_SETTINGS
-  const { t } = useI18n()
+  const [t] = useI18n()
 
   return (
     <dialog id={modalID} class="modal modal-bottom sm:modal-middle">
diff --git a/src/components/ProxiesSettingsModal.tsx b/src/components/ProxiesSettingsModal.tsx
index 4dbecc4..3fed43a 100644
--- a/src/components/ProxiesSettingsModal.tsx
+++ b/src/components/ProxiesSettingsModal.tsx
@@ -20,7 +20,7 @@ import {
 
 export const ProxiesSettingsModal = () => {
   const modalID = MODAL.PROXIES_SETTINGS
-  const { t } = useI18n()
+  const [t] = useI18n()
 
   return (
     <dialog id={modalID} class="modal modal-bottom sm:modal-middle">
diff --git a/src/components/SubscriptionInfo.tsx b/src/components/SubscriptionInfo.tsx
index 5c38484..51ab758 100644
--- a/src/components/SubscriptionInfo.tsx
+++ b/src/components/SubscriptionInfo.tsx
@@ -14,13 +14,13 @@ const getSubscriptionsInfo = (subscriptionInfo: ISubscriptionInfo) => {
   const percentage = toFinite((((Download + Upload) / Total) * 100).toFixed(2))
 
   const expirePrefix = () => {
-    const { t } = useI18n()
+    const [t] = useI18n()
 
     return t('expire')
   }
 
   const expireStr = () => {
-    const { t } = useI18n()
+    const [t] = useI18n()
 
     if (Expire === 0) {
       return t('noExpire')
diff --git a/src/i18n/index.tsx b/src/i18n/index.tsx
index 3b6e289..a62b7dd 100644
--- a/src/i18n/index.tsx
+++ b/src/i18n/index.tsx
@@ -1,10 +1,11 @@
+import { createContextProvider } from '@solid-primitives/context'
 import * as i18n from '@solid-primitives/i18n'
 import { makePersisted } from '@solid-primitives/storage'
-import { createMemo, createSignal } from 'solid-js'
+import { createSignal } from 'solid-js'
 import { LANG } from '~/constants'
-import dict from './dict'
+import dict, { Dict } from './dict'
 
-export const [curLocale, setCurLocale] = makePersisted(
+export const [locale, setLocale] = makePersisted(
   createSignal<LANG>(
     Reflect.has(dict, navigator.language)
       ? (navigator.language as LANG)
@@ -16,12 +17,9 @@ export const [curLocale, setCurLocale] = makePersisted(
   },
 )
 
-const locale = (localeName?: LANG) =>
-  localeName ? setCurLocale(localeName) : curLocale()
+export const [I18nProvider, useMaybeI18n] = createContextProvider<
+  [i18n.Translator<Dict>],
+  { locale: LANG }
+>((props) => [i18n.translator(() => i18n.flatten(dict[props.locale]))])
 
-export const useI18n = () => {
-  const curDict = createMemo(() => i18n.flatten(dict[curLocale()]))!
-  const t = createMemo(() => i18n.translator(() => curDict()))
-
-  return { t: t(), locale }
-}
+export const useI18n = () => useMaybeI18n()!
diff --git a/src/main.tsx b/src/main.tsx
index c6dfbec..0b83917 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -7,14 +7,17 @@ import 'dayjs/locale/zh-cn'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { render } from 'solid-js/web'
 import { App } from '~/App'
+import { I18nProvider, locale } from '~/i18n'
 
 dayjs.extend(relativeTime)
 
 render(
   () => (
-    <Router source={hashIntegration()}>
-      <App />
-    </Router>
+    <I18nProvider locale={locale()}>
+      <Router source={hashIntegration()}>
+        <App />
+      </Router>
+    </I18nProvider>
   ),
   document.getElementById('root')!,
 )
diff --git a/src/pages/Config.tsx b/src/pages/Config.tsx
index 4da3150..0938cc4 100644
--- a/src/pages/Config.tsx
+++ b/src/pages/Config.tsx
@@ -48,7 +48,7 @@ const dnsQueryFormSchema = z.object({
 })
 
 const DNSQueryForm = () => {
-  const { t } = useI18n()
+  const [t] = useI18n()
   const request = useRequest()
 
   const { form, isSubmitting } = createForm<z.infer<typeof dnsQueryFormSchema>>(
@@ -111,7 +111,7 @@ const configFormSchema = z.object({
 })
 
 const ConfigForm = () => {
-  const { t } = useI18n()
+  const [t] = useI18n()
   const navigate = useNavigate()
 
   const portList = [
@@ -352,7 +352,7 @@ const ConfigForm = () => {
 }
 
 const ConfigForXd = () => {
-  const { t } = useI18n()
+  const [t] = useI18n()
 
   return (
     <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
@@ -439,7 +439,7 @@ const Versions = () => {
 }
 
 export default () => {
-  const { t } = useI18n()
+  const [t] = useI18n()
 
   return (
     <div class="mx-auto flex max-w-screen-md flex-col gap-4">
diff --git a/src/pages/Connections.tsx b/src/pages/Connections.tsx
index ab15886..c04fcdc 100644
--- a/src/pages/Connections.tsx
+++ b/src/pages/Connections.tsx
@@ -78,7 +78,7 @@ const fuzzyFilter: FilterFn<Connection> = (row, columnId, value, addMeta) => {
 }
 
 export default () => {
-  const { t } = useI18n()
+  const [t] = useI18n()
 
   const [activeTab, setActiveTab] = createSignal(ActiveTab.activeConnections)
   const { activeConnections, closedConnections, paused, setPaused } =
@@ -88,7 +88,7 @@ export default () => {
 
   const [selectedConnectionID, setSelectedConnectionID] = createSignal<string>()
 
-  const columns = createMemo<ColumnDef<Connection>[]>(() => [
+  const columns: ColumnDef<Connection>[] = [
     {
       header: () => t('details'),
       enableGrouping: false,
@@ -243,7 +243,7 @@ export default () => {
         original.metadata.destinationIP ||
         original.metadata.host,
     },
-  ])
+  ]
 
   const [grouping, setGrouping] = createSignal<GroupingState>([])
   const [sorting, setSorting] = makePersisted(
@@ -281,7 +281,7 @@ export default () => {
     },
     sortDescFirst: true,
     enableHiding: true,
-    columns: columns(),
+    columns,
     onGlobalFilterChange: setGlobalFilter,
     globalFilterFn: fuzzyFilter,
     onGroupingChange: setGrouping,
diff --git a/src/pages/Logs.tsx b/src/pages/Logs.tsx
index e471305..ae9c9eb 100644
--- a/src/pages/Logs.tsx
+++ b/src/pages/Logs.tsx
@@ -40,7 +40,7 @@ const fuzzyFilter: FilterFn<LogWithSeq> = (row, columnId, value, addMeta) => {
 }
 
 export default () => {
-  const { t } = useI18n()
+  const [t] = useI18n()
   let seq = 1
   const [logs, setLogs] = createSignal<LogWithSeq[]>([])
 
diff --git a/src/pages/Overview.tsx b/src/pages/Overview.tsx
index 296ef07..41d97ad 100644
--- a/src/pages/Overview.tsx
+++ b/src/pages/Overview.tsx
@@ -26,7 +26,7 @@ const TrafficWidget: ParentComponent<{ label: JSX.Element }> = (props) => (
 )
 
 export default () => {
-  const { t } = useI18n()
+  const [t] = useI18n()
 
   const [traffics, setTraffics] = createSignal<{ down: number; up: number }[]>(
     [],
diff --git a/src/pages/Proxies.tsx b/src/pages/Proxies.tsx
index 7f9edda..5c76362 100644
--- a/src/pages/Proxies.tsx
+++ b/src/pages/Proxies.tsx
@@ -34,7 +34,7 @@ enum ActiveTab {
 }
 
 export default () => {
-  const { t } = useI18n()
+  const [t] = useI18n()
   const {
     proxies,
     selectProxyInGroup,
diff --git a/src/pages/Rules.tsx b/src/pages/Rules.tsx
index f7543ab..8be1c85 100644
--- a/src/pages/Rules.tsx
+++ b/src/pages/Rules.tsx
@@ -12,7 +12,7 @@ enum ActiveTab {
 }
 
 export default () => {
-  const { t } = useI18n()
+  const [t] = useI18n()
   const {
     rules,
     ruleProviders,
diff --git a/src/pages/Setup.tsx b/src/pages/Setup.tsx
index b0cdd86..391216a 100644
--- a/src/pages/Setup.tsx
+++ b/src/pages/Setup.tsx
@@ -23,7 +23,7 @@ const schema = z.object({
 })
 
 export default () => {
-  const { t } = useI18n()
+  const [t] = useI18n()
   const navigate = useNavigate()
 
   const onSetupSuccess = (id: string) => {
diff --git a/src/signals/global.ts b/src/signals/global.ts
index 65a566e..b10ea87 100644
--- a/src/signals/global.ts
+++ b/src/signals/global.ts
@@ -1,5 +1,5 @@
 import dayjs from 'dayjs'
-import { curLocale } from '~/i18n'
+import { locale } from '~/i18n'
 
 export const formatTimeFromNow = (time: number | string) =>
-  dayjs(time).locale(curLocale()).fromNow()
+  dayjs(time).locale(locale()).fromNow()