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

---
 src/App.tsx        | 55 ++++++++++++++++++++++++----------------------
 src/main.tsx       |  9 +++-----
 src/pages/Logs.tsx |  8 +++----
 3 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 1106ba5..04fc7a7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,6 +5,7 @@ import { Toaster } from 'solid-toast'
 import { twMerge } from 'tailwind-merge'
 import { Header } from '~/components'
 import { ROUTES } from '~/constants'
+import { I18nProvider, locale } from '~/i18n'
 import {
   WsMsg,
   autoSwitchTheme,
@@ -59,36 +60,38 @@ export const App = () => {
   })
 
   return (
-    <div
-      class={twMerge(
-        'relative flex h-screen flex-col subpixel-antialiased p-safe',
-        useTwemoji() ? 'font-twemoji' : 'font-no-twemoji',
-      )}
-      data-theme={curTheme()}
-    >
-      <Header />
+    <I18nProvider locale={locale()}>
+      <div
+        class={twMerge(
+          'relative flex h-screen flex-col subpixel-antialiased p-safe',
+          useTwemoji() ? 'font-twemoji' : 'font-no-twemoji',
+        )}
+        data-theme={curTheme()}
+      >
+        <Header />
+
+        <div class="flex-1 overflow-y-auto p-2 sm:p-4">
+          <Routes>
+            <Show when={endpoint()}>
+              <Route path={ROUTES.Overview} component={Overview} />
+              <Route path={ROUTES.Proxies} component={Proxies} />
+              <Route path={ROUTES.Rules} component={Rules} />
+              <Route path={ROUTES.Conns} component={Connections} />
+              <Route path={ROUTES.Log} component={Logs} />
+              <Route path={ROUTES.Config} component={Config} />
+              <Route path="*" element={<Navigate href={ROUTES.Overview} />} />
+            </Show>
+
+            <Route path={endpoint() ? ROUTES.Setup : '*'} component={Setup} />
+          </Routes>
 
-      <div class="flex-1 overflow-y-auto p-2 sm:p-4">
-        <Routes>
           <Show when={endpoint()}>
-            <Route path={ROUTES.Overview} component={Overview} />
-            <Route path={ROUTES.Proxies} component={Proxies} />
-            <Route path={ROUTES.Rules} component={Rules} />
-            <Route path={ROUTES.Conns} component={Connections} />
-            <Route path={ROUTES.Log} component={Logs} />
-            <Route path={ROUTES.Config} component={Config} />
-            <Route path="*" element={<Navigate href={ROUTES.Overview} />} />
+            <ProtectedResources />
           </Show>
+        </div>
 
-          <Route path={endpoint() ? ROUTES.Setup : '*'} component={Setup} />
-        </Routes>
-
-        <Show when={endpoint()}>
-          <ProtectedResources />
-        </Show>
+        <Toaster position="bottom-center" />
       </div>
-
-      <Toaster position="bottom-center" />
-    </div>
+    </I18nProvider>
   )
 }
diff --git a/src/main.tsx b/src/main.tsx
index 0b83917..c6dfbec 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -7,17 +7,14 @@ 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(
   () => (
-    <I18nProvider locale={locale()}>
-      <Router source={hashIntegration()}>
-        <App />
-      </Router>
-    </I18nProvider>
+    <Router source={hashIntegration()}>
+      <App />
+    </Router>
   ),
   document.getElementById('root')!,
 )
diff --git a/src/pages/Logs.tsx b/src/pages/Logs.tsx
index ae9c9eb..9d25b97 100644
--- a/src/pages/Logs.tsx
+++ b/src/pages/Logs.tsx
@@ -15,7 +15,7 @@ import {
   getFilteredRowModel,
   getSortedRowModel,
 } from '@tanstack/solid-table'
-import { For, Index, createEffect, createMemo, createSignal } from 'solid-js'
+import { For, Index, createEffect, createSignal } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
 import { Button, LogsSettingsModal } from '~/components'
 import { LOG_LEVEL, MODAL } from '~/constants'
@@ -65,7 +65,7 @@ export default () => {
     storage: localStorage,
   })
 
-  const columns = createMemo<ColumnDef<LogWithSeq>[]>(() => [
+  const columns: ColumnDef<LogWithSeq>[] = [
     {
       header: t('sequence'),
       accessorFn: (row) => row.seq,
@@ -100,7 +100,7 @@ export default () => {
       header: t('payload'),
       accessorFn: (row) => row.payload,
     },
-  ])
+  ]
 
   const table = createSolidTable({
     filterFns: {
@@ -118,7 +118,7 @@ export default () => {
       return logs()
     },
     sortDescFirst: true,
-    columns: columns(),
+    columns,
     onGlobalFilterChange: setGlobalFilter,
     onSortingChange: setSorting,
     globalFilterFn: fuzzyFilter,