feat: add i18n to connections page

5 files changed, 53 insertions, 23 deletions

diff --git a/src/components/ConnectionTable.tsx b/src/components/ConnectionTable.tsx
index f2e70a4..a8ad827 100644
--- a/src/components/ConnectionTable.tsx
+++ b/src/components/ConnectionTable.tsx
@@ -1,7 +1,9 @@
 import cx from 'clsx';
-import { formatDistance } from 'date-fns';
+import { formatDistance, Locale } from 'date-fns';
+import { enUS, zhCN } from 'date-fns/locale'
 import React from 'react';
 import { ChevronDown } from 'react-feather';
+import { useTranslation } from 'react-i18next';
 import { useSortBy, useTable } from 'react-table';
 
 import prettyBytes from '../misc/pretty-bytes';
@@ -11,24 +13,24 @@ const sortDescFirst = true;
 
 const columns = [
   { accessor: 'id', show: false },
-  { Header: 'Host', accessor: 'host' },
-  { Header: 'Process', accessor: 'process' },
-  { Header: 'DL', accessor: 'download', sortDescFirst },
-  { Header: 'UL', accessor: 'upload', sortDescFirst },
-  { Header: 'DL Speed', accessor: 'downloadSpeedCurr', sortDescFirst },
-  { Header: 'UL Speed', accessor: 'uploadSpeedCurr', sortDescFirst },
-  { Header: 'Chains', accessor: 'chains' },
-  { Header: 'Rule', accessor: 'rule' },
-  { Header: 'Time', accessor: 'start', sortDescFirst },
-  { Header: 'Source', accessor: 'source' },
-  { Header: 'Destination IP', accessor: 'destinationIP' },
-  { Header: 'Type', accessor: 'type' },
+  { Header: 'c_host', accessor: 'host' },
+  { Header: 'c_process', accessor: 'process' },
+  { Header: 'c_dl', accessor: 'download', sortDescFirst },
+  { Header: 'c_ul', accessor: 'upload', sortDescFirst },
+  { Header: 'c_dl_speed', accessor: 'downloadSpeedCurr', sortDescFirst },
+  { Header: 'c_ul_speed', accessor: 'uploadSpeedCurr', sortDescFirst },
+  { Header: 'c_chains', accessor: 'chains' },
+  { Header: 'c_rule', accessor: 'rule' },
+  { Header: 'c_time', accessor: 'start', sortDescFirst },
+  { Header: 'c_source', accessor: 'source' },
+  { Header: 'c_destination_ip', accessor: 'destinationIP' },
+  { Header: 'c_type', accessor: 'type' },
 ];
 
-function renderCell(cell: { column: { id: string }; value: number }) {
+function renderCell(cell: { column: { id: string }; value: number }, locale: Locale) {
   switch (cell.column.id) {
     case 'start':
-      return formatDistance(cell.value, 0);
+      return formatDistance(cell.value, 0, { locale: locale });
     case 'download':
     case 'upload':
       return prettyBytes(cell.value);
@@ -59,6 +61,10 @@ function Table({ data }) {
     },
     useSortBy
   );
+
+  const { t, i18n } = useTranslation();
+  const locale = i18n.language === 'zh' ? zhCN : enUS;
+
   return (
     <div {...getTableProps()}>
       {headerGroups.map((headerGroup) => {
@@ -69,7 +75,7 @@ function Table({ data }) {
                 {...column.getHeaderProps(column.getSortByToggleProps())}
                 className={s.th}
               >
-                <span>{column.render('Header')}</span>
+                <span>{t(column.render('Header'))}</span>
                 <span className={s.sortIconContainer}>
                   {column.isSorted ? (
                     <span className={column.isSortedDesc ? '' : s.rotate180}>
@@ -92,7 +98,7 @@ function Table({ data }) {
                       j >= 2 && j <= 5 ? s.du : false
                     )}
                   >
-                    {renderCell(cell)}
+                    {renderCell(cell, locale)}
                   </div>
                 );
               });
diff --git a/src/components/Connections.tsx b/src/components/Connections.tsx
index 513020a..95875d5 100644
--- a/src/components/Connections.tsx
+++ b/src/components/Connections.tsx
@@ -210,7 +210,7 @@ function Conn({ apiConfig }) {
               name="filter"
               autoComplete="off"
               className={s.input}
-              placeholder="Filter"
+              placeholder={t('Search')}
               onChange={(e) => setFilterKeyword(e.target.value)}
             />
           </div>
@@ -231,7 +231,7 @@ function Conn({ apiConfig }) {
                 text={isRefreshPaused ? t('Resume Refresh') : t('Pause Refresh')}
                 onClick={toggleIsRefreshPaused}
               >
-                <Action text="Close All Connections" onClick={openCloseAllModal}>
+                <Action text={t('close_all_connections')} onClick={openCloseAllModal}>
                   <IconClose size={10} />
                 </Action>
               </Fab>
diff --git a/src/i18n/en.ts b/src/i18n/en.ts
index ac45dec..f936643 100644
--- a/src/i18n/en.ts
+++ b/src/i18n/en.ts
@@ -12,6 +12,8 @@ export const data = {
   'Active Connections': 'Active Connections',
   'Pause Refresh': 'Pause Refresh',
   'Resume Refresh': 'Resume Refresh',
+  close_all_connections: 'Close All Connections',
+  Search: 'Search',
   Up: 'Up',
   Down: 'Down',
   'Test Latency': 'Test Latency',
@@ -42,4 +44,16 @@ export const data = {
   enable_tun_device: 'Enable TUN Device',
   allow_lan: 'Allow LAN',
   tls_sniffing: 'TLS Sniffing',
+  c_host: 'Host',
+  c_process: 'Process',
+  c_dl: 'DL',
+  c_ul: 'UL',
+  c_dl_speed: 'DL Speed',
+  c_ul_speed: 'UP Speed',
+  c_chains: 'Chains',
+  c_rule: 'Rule',
+  c_time: 'Time',
+  c_source: 'Source',
+  c_destination_ip: 'Destination IP',
+  c_type: 'Type',
 };
diff --git a/src/i18n/zh.ts b/src/i18n/zh.ts
index 0efb10e..a86c06f 100644
--- a/src/i18n/zh.ts
+++ b/src/i18n/zh.ts
@@ -12,6 +12,8 @@ export const data = {
   'Active Connections': '活动连接',
   'Pause Refresh': '暂停刷新',
   'Resume Refresh': '继续刷新',
+  close_all_connections: '闭关所有连接',
+  Search: '查找',
   Up: '上传',
   Down: '下载',
   'Test Latency': '延迟测速',
@@ -42,4 +44,16 @@ export const data = {
   enable_tun_device: '开启 TUN 转发',
   allow_lan: '允许局域网连接',
   tls_sniffing: 'SNI 嗅探',
+  c_host: '域名',
+  c_process: '进程',
+  c_dl: '下载',
+  c_ul: '上传',
+  c_dl_speed: '下载速率',
+  c_ul_speed: '上传速率',
+  c_chains: '节点链',
+  c_rule: '规则',
+  c_time: '连接时间',
+  c_source: '来源',
+  c_destination_ip: '目标IP',
+  c_type: '类型',
 };
diff --git a/src/swRegistration.ts b/src/swRegistration.ts
index 6d9ff1b..55ceb0b 100644
--- a/src/swRegistration.ts
+++ b/src/swRegistration.ts
@@ -24,10 +24,6 @@ export function register(config?: Config) {
       return;
     }
 
-    if (1 === 1) {
-        return;
-    }
-
     window.addEventListener('load', () => {
       const swUrl = `${process.env.PUBLIC_URL}/sw.js`;