From 77525e3f5ad3ed8fb958ce2d70c1827bc1915205 Mon Sep 17 00:00:00 2001 From: jas0ncn Date: Thu, 25 Oct 2018 00:23:43 +0800 Subject: [PATCH] Update: proxy page --- src/components/index.ts | 2 +- .../Proxies/components/Proxy/index.tsx | 59 ++++++++++++------- .../Proxies/components/Proxy/style.scss | 38 +++++++----- src/containers/Proxies/index.tsx | 43 ++++++++------ src/lib/helper.ts | 2 +- src/lib/request.ts | 11 +++- 6 files changed, 98 insertions(+), 57 deletions(-) diff --git a/src/components/index.ts b/src/components/index.ts index 4223eb4..c823d0d 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -11,4 +11,4 @@ export * from './Select' export * from './Modal' export * from './Alert' export * from './Button' -export { default as Message } from './Message' +export * from './Message' diff --git a/src/containers/Proxies/components/Proxy/index.tsx b/src/containers/Proxies/components/Proxy/index.tsx index 92ad7a4..5529a16 100644 --- a/src/containers/Proxies/components/Proxy/index.tsx +++ b/src/containers/Proxies/components/Proxy/index.tsx @@ -1,28 +1,45 @@ import * as React from 'react' -import { BaseComponentProps, ProxyType } from '@models' import classnames from 'classnames' - +import { BaseComponentProps, Proxy as IProxy } from '@models' +import { getProxyDelay } from '@lib/request' +import { to } from '@lib/helper' import './style.scss' -const shadowsocks = require('@assets/proxy/shadowsocks.svg') -const vmess = require('@assets/proxy/vmess.svg') -const iconMapping = { - [ProxyType.Shadowsocks]: shadowsocks, - [ProxyType.Shadowsocks]: shadowsocks, - [ProxyType.Vmess]: vmess + +interface ProxyProps extends BaseComponentProps, IProxy {} + +interface ProxyState { + delay: number + hasError: boolean } -interface ProxyProps extends BaseComponentProps { - type: ProxyType - name: string -} +export class Proxy extends React.Component { -export const Proxy: React.SFC = props => { - const { type, name, className } = props - const icon = iconMapping[type] - return ( -
- - { name } -
- ) + state = { + delay: -1, + hasError: false + } + + async componentDidMount () { + const { name } = this.props + const [res, err] = await to(getProxyDelay(name)) + + if (err) { + return this.setState({ hasError: true }) + } + + const { data: { delay } } = res + this.setState({ delay }) + } + + render () { + const { name, className } = this.props + const { delay, hasError } = this.state + + return ( +
+ {name} + {delay === -1 ? '-' : `${delay}s`} +
+ ) + } } diff --git a/src/containers/Proxies/components/Proxy/style.scss b/src/containers/Proxies/components/Proxy/style.scss index 750f781..9110a74 100644 --- a/src/containers/Proxies/components/Proxy/style.scss +++ b/src/containers/Proxies/components/Proxy/style.scss @@ -1,6 +1,6 @@ @import '~@styles/variables'; -.proxy { +.proxy-item { display: flex; flex-direction: column; align-items: center; @@ -9,19 +9,29 @@ width: 100px; box-shadow: 0 0 20px rgba($color-primary-dark, 0.2); border-radius: 4px; -} -.proxy-icon { - height: 40px; - width: 40px; -} + .proxy-icon { + height: 40px; + width: 40px; + } -.proxy-name { - width: 80%; - margin-top: 8px; - color: $color-primary-dark; - font-size: 12px; - text-overflow: ellipsis; - overflow: hidden; - text-align: center; + .proxy-name { + width: 80%; + margin-top: 8px; + color: $color-primary-dark; + font-size: 12px; + text-overflow: ellipsis; + overflow: hidden; + text-align: center; + } + + .proxy-delay { + width: 80%; + margin-top: 8px; + color: $color-primary-dark; + font-size: 12px; + text-overflow: ellipsis; + overflow: hidden; + text-align: center; + } } diff --git a/src/containers/Proxies/index.tsx b/src/containers/Proxies/index.tsx index fab09b3..92dae9e 100644 --- a/src/containers/Proxies/index.tsx +++ b/src/containers/Proxies/index.tsx @@ -1,18 +1,25 @@ import * as React from 'react' import { translate } from 'react-i18next' +import { inject, observer } from 'mobx-react' +import { storeKeys } from '@lib/createStore' import { Header, Icon } from '@components' -import { ProxyType, I18nProps } from '@models' +import { I18nProps, BaseRouterProps } from '@models' import { Proxy } from './components' import './style.scss' -class Proxies extends React.Component { +interface ProxiesProps extends BaseRouterProps, I18nProps {} + +@inject(...storeKeys) +@observer +class Proxies extends React.Component { + + componentDidMount () { + this.props.config.fetchAndParseConfig() + } + render () { - const { t } = this.props - const proxies: { type: ProxyType, name: string }[] = [ - { type: ProxyType.Shadowsocks, name: 'shadowsocks' }, - { type: ProxyType.Vmess, name: 'vmess' } - ] + const { t, config } = this.props return (
@@ -20,17 +27,19 @@ class Proxies extends React.Component {
-
    - { - proxies.map( - proxy => ( -
  • - -
    • + { + config.state === 'ok' &&
      + { + config.config.proxy.map( + (p, index) => ( +
    • + +
      • + ) ) - ) - } -
    + } +
+ }
diff --git a/src/lib/helper.ts b/src/lib/helper.ts index 584ae97..3e32a48 100644 --- a/src/lib/helper.ts +++ b/src/lib/helper.ts @@ -14,7 +14,7 @@ export function removeLocalStorageItem (key: string) { * to return Promise<[T, Error]> * @param {Promise} promise */ -export async function to (promise: any): Promise<[T, E]> { +export async function to (promise: Promise): Promise<[T, E]> { try { const ret = await promise return [ret, null as E] diff --git a/src/lib/request.ts b/src/lib/request.ts index 188cb27..ade8c00 100644 --- a/src/lib/request.ts +++ b/src/lib/request.ts @@ -57,17 +57,22 @@ export async function getProxies () { export async function getProxy (name: string) { const req = await getInstance() - return req.get('proxies/:name', { params: { name } }) + return req.get(`proxies/${name}`) } export async function getProxyDelay (name: string) { const req = await getInstance() - return req.get<{ delay: number }>('proxies/:name/delay', { params: { name } }) + return req.get<{ delay: number }>(`proxies/${name}/delay`, { + params: { + timeout: 2000, + url: 'http://www.gstatic.com/generate_204' + } + }) } export async function changeProxySelected (name: string, select: string) { const req = await getInstance() - return req.get('proxies/:name', { params: { name }, data: { name: select } }) + return req.get(`proxies/${name}`, { data: { name: select } }) } export async function getInstance () {