Chore: remove timeago.js

package-lock.json

@@ -12620,11 +12620,6 @@
             "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
             "dev": true
         },
-        "timeago.js": {
-            "version": "4.0.1",
-            "resolved": "https://registry.npmjs.org/timeago.js/-/timeago.js-4.0.1.tgz",
-            "integrity": "sha512-ePzZuMoJqUc44hJbUYtY1qtzU7IammxooDCcFKogLkS5Nj+iCabR0ZlmNOFX8Dm1r5EpvR5q/PotOJli/mEPew=="
-        },
         "timed-out": {
             "version": "4.0.1",
             "resolved": "https://registry.npmjs.org/timed-out/-/timed-out-4.0.1.tgz",

package.json

@@ -87,7 +87,6 @@
         "react-window": "^1.8.5",
         "semver": "^6.3.0",
         "swr": "^0.1.13",
-        "timeago.js": "^4.0.1",
         "unstated-next": "^1.1.0",
         "use-immer": "^0.3.5"
     }

src/containers/Connections/index.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useState, useMemo, useCallback, useRef, useLayoutEffe
 import { useBlockLayout, useResizeColumns, useTable } from 'react-table'
 import { VariableSizeGrid as Grid, GridOnScrollProps, GridChildComponentProps } from 'react-window'
 import AutoSizer from 'react-virtualized-auto-sizer'
-import { format } from 'timeago.js'
 import classnames from 'classnames'
 import { Header, Card, Checkbox, Modal, useModal, Icon } from '@components'
 import { containers } from '@stores'
@@ -10,6 +9,7 @@ import * as API from '@lib/request'
 import { StreamReader } from '@lib/streamer'
 import { useObject } from '@lib/hook'
 import { noop } from '@lib/helper'
+import { fromNow } from '@lib/date'
 import { useConnections } from './store'
 import './style.scss'
 
@@ -114,7 +114,7 @@ export default function Connections () {
                 host: `${ c.metadata.host || c.metadata.destinationIP }:${ c.metadata.destinationPort }`,
                 chains: c.chains.slice().reverse().join(' --> '),
                 rule: c.rule,
-                time: format(new Date(c.start), lang),
+                time: fromNow(new Date(c.start), lang),
                 upload: formatTraffic(c.upload),
                 download: formatTraffic(c.download),
                 type: c.metadata.type,

src/containers/Proxies/components/Provider/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
-import { format } from 'timeago.js'
 import { Card, Tag, Icon, Loading, useLoading } from '@components'
 import { containers } from '@stores'
+import { fromNow } from '@lib/date'
 import { Provider as IProvider, Proxy as IProxy, updateProvider, healthCheckProvider } from '@lib/request'
 import { Proxy } from '../Proxy'
 import './style.scss'
@@ -40,7 +40,7 @@ export function Provider (props: ProvidersProps) {
                 <div className="proxy-provider-header-part">
                     {
                         provider.updatedAt &&
-                        <span className="proxy-provider-update">{ `${t('providerUpdateTime')}: ${format(new Date(provider.updatedAt), lang)}`}</span>
+                        <span className="proxy-provider-update">{ `${t('providerUpdateTime')}: ${fromNow(new Date(provider.updatedAt), lang)}`}</span>
                     }
                     <Icon className="proxy-provider-icon healthcheck" type="healthcheck" size={18} onClick={handleHealthChech} />
                     <Icon className="proxy-provider-icon" type="update" size={18} onClick={handleUpdate} />

src/containers/Settings/index.tsx

@@ -5,6 +5,7 @@ import { updateConfig } from '@lib/request'
 import { useObject } from '@lib/hook'
 import { to } from '@lib/helper'
 import { isClashX, jsBridge } from '@lib/jsBridge'
+import { Lang } from '@i18n'
 import './style.scss'
 
 const languageOptions: ButtonSelectOptions[] = [{ label: '中文', value: 'zh_CN' }, { label: 'English', value: 'en_US' }]
@@ -50,7 +51,7 @@ export default function Settings () {
         fetchClashXData()
     }
 
-    function changeLanguage (language: string) {
+    function changeLanguage (language: Lang) {
         setLang(language)
     }
 

src/i18n/index.ts

@@ -10,6 +10,8 @@ const Language = {
     zh_CN
 }
 
+export type Lang = keyof typeof Language
+
 const languageKey = 'language'
 
 const locales = Object.keys(Language)
@@ -30,10 +32,10 @@ function getNavigatorLanguage (): string[] {
     return found
 }
 
-function getLanguage () {
+function getLanguage (): Lang {
     const localLanguage = getLocalStorageItem(languageKey)
     if (localLanguage && locales.includes(localLanguage)) {
-        return localLanguage
+        return localLanguage as Lang
     }
 
     const navigatorLanguage = getNavigatorLanguage()
@@ -51,7 +53,7 @@ function getLanguage () {
 export function useI18n () {
     const [lang, set] = useState(getLanguage())
 
-    function setLang (lang: string) {
+    function setLang (lang: Lang) {
         set(lang)
         setLocalStorageItem(languageKey, lang)
     }

src/lib/date.ts

@@ -0,0 +1,12 @@
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import 'dayjs/locale/zh-cn'
+
+import { Lang } from '@i18n'
+
+dayjs.extend(relativeTime)
+
+export function fromNow (date: Date, lang: Lang): string {
+    const locale = lang === 'en_US' ? 'en' : 'zh-cn'
+    return dayjs().locale(locale).from(date)
+}