2019-09-30 15:11:28 +08:00

90 lines
2.9 KiB
TypeScript

import React, { useLayoutEffect, useState, useMemo } from 'react'
import EE from '@lib/event'
import { Card, Header, Icon } from '@components'
import { containers } from '@stores'
import * as API from '@lib/request'
import { Proxy, Group } from './components'
import './style.scss'
enum sortType {
None,
Asc,
Desc
}
const sortMap = {
[sortType.None]: 'sort',
[sortType.Asc]: 'sort-ascending',
[sortType.Desc]: 'sort-descending'
}
function compareDesc (a: API.Proxy, b: API.Proxy) {
const lastDelayA = a.history.length ? a.history.slice(-1)[0].delay : 0
const lastDelayB = b.history.length ? b.history.slice(-1)[0].delay : 0
return (lastDelayB || Number.MAX_SAFE_INTEGER) - (lastDelayA || Number.MAX_SAFE_INTEGER)
}
export default function Proxies () {
const { data, fetch } = containers.useData()
const { useTranslation } = containers.useI18n()
const { t } = useTranslation('Proxies')
useLayoutEffect(() => {
fetch()
}, [])
function handleNotitySpeedTest () {
EE.notifySpeedTest()
}
const [sort, setSort] = useState(sortType.None)
const proxies = useMemo(() => {
switch (sort) {
case sortType.Desc:
return data.proxy.slice().sort((a, b) => compareDesc(a, b))
case sortType.Asc:
return data.proxy.slice().sort((a, b) => -1 * compareDesc(a, b))
default:
return data.proxy.slice()
}
}, [sort, data])
function handleSort () {
setSort((sort + 1) % 3)
}
return (
<div className="page">
<div className="proxies-container">
<Header title={t('groupTitle')} />
<Card className="proxies-group-card">
<ul className="proxies-group-list">
{
data.proxyGroup.map(p => (
<li className="proxies-group-item" key={p.name}>
<Group config={p} />
</li>
))
}
</ul>
</Card>
</div>
<div className="proxies-container">
<Header title={t('title')}>
<Icon className="proxies-action-icon" type={sortMap[sort]} onClick={handleSort} size={20} />
<Icon className="proxies-action-icon" type="speed" size={20} />
<span className="proxies-speed-test" onClick={handleNotitySpeedTest}>{t('speedTestText')}</span>
</Header>
<ul className="proxies-list">
{
proxies.map(p => (
<li key={p.name}>
<Proxy config={p} />
</li>
))
}
</ul>
</div>
</div>
)
}