From ce2ee24c0e453318ffec4d728d75fc2d3f6e9565 Mon Sep 17 00:00:00 2001 From: Dreamacro <305009791@qq.com> Date: Mon, 23 Dec 2019 17:19:54 +0800 Subject: [PATCH] Chore: remove timeago.js --- package-lock.json | 5 ----- package.json | 1 - src/containers/Connections/index.tsx | 4 ++-- src/containers/Proxies/components/Provider/index.tsx | 4 ++-- src/containers/Settings/index.tsx | 3 ++- src/i18n/index.ts | 8 +++++--- src/lib/date.ts | 12 ++++++++++++ 7 files changed, 23 insertions(+), 14 deletions(-) create mode 100644 src/lib/date.ts diff --git a/package-lock.json b/package-lock.json index 4f74d44..698b782 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 3173336..c9a4395 100644 --- a/package.json +++ b/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" } diff --git a/src/containers/Connections/index.tsx b/src/containers/Connections/index.tsx index b3024c0..9b4f510 100644 --- a/src/containers/Connections/index.tsx +++ b/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, diff --git a/src/containers/Proxies/components/Provider/index.tsx b/src/containers/Proxies/components/Provider/index.tsx index 873722b..766d27e 100644 --- a/src/containers/Proxies/components/Provider/index.tsx +++ b/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) {
{ provider.updatedAt && - { `${t('providerUpdateTime')}: ${format(new Date(provider.updatedAt), lang)}`} + { `${t('providerUpdateTime')}: ${fromNow(new Date(provider.updatedAt), lang)}`} } diff --git a/src/containers/Settings/index.tsx b/src/containers/Settings/index.tsx index ed9d037..84c1e55 100644 --- a/src/containers/Settings/index.tsx +++ b/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) } diff --git a/src/i18n/index.ts b/src/i18n/index.ts index 03fcc6c..9ca9955 100644 --- a/src/i18n/index.ts +++ b/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) } diff --git a/src/lib/date.ts b/src/lib/date.ts new file mode 100644 index 0000000..e4796fd --- /dev/null +++ b/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) +}