Update: proxy page

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'

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')
+interface ProxyProps extends BaseComponentProps, IProxy {}
-const iconMapping = {
+
-    [ProxyType.Shadowsocks]: shadowsocks,
+interface ProxyState {
-    [ProxyType.Shadowsocks]: shadowsocks,
+    delay: number
-    [ProxyType.Vmess]: vmess
+    hasError: boolean
 }
 
-interface ProxyProps extends BaseComponentProps {
+export class Proxy extends React.Component<ProxyProps, ProxyState> {
-    type: ProxyType
-    name: string
-}
 
-export const Proxy: React.SFC<ProxyProps> = props => {
+    state = {
-    const { type, name, className } = props
+        delay: -1,
-    const icon = iconMapping[type]
+        hasError: false
-    return (
+    }
-        <div className={classnames('proxy', className)}>
+
-            <img className="proxy-icon" src={icon}/>
+    async componentDidMount () {
-            <span className="proxy-name">{ name }</span>
+        const { name } = this.props
-        </div>
+        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 (
+            <div className={classnames('proxy-item', { 'proxy-error': hasError }, className)}>
+                <span className="proxy-name">{name}</span>
+                <span className="proxy-delay">{delay === -1 ? '-' : `${delay}s`}</span>
+            </div>
+        )
+    }
 }

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 {
+    .proxy-icon {
-    height: 40px;
+        height: 40px;
-    width: 40px;
+        width: 40px;
-}
+    }
 
-.proxy-name {
+    .proxy-name {
-    width: 80%;
+        width: 80%;
-    margin-top: 8px;
+        margin-top: 8px;
-    color: $color-primary-dark;
+        color: $color-primary-dark;
-    font-size: 12px;
+        font-size: 12px;
-    text-overflow: ellipsis;
+        text-overflow: ellipsis;
-    overflow: hidden;
+        overflow: hidden;
-    text-align: center;
+        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;
+    }
 }

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<I18nProps, {}> {
+interface ProxiesProps extends BaseRouterProps, I18nProps {}
+
+@inject(...storeKeys)
+@observer
+class Proxies extends React.Component<ProxiesProps, {}> {
+
+    componentDidMount () {
+        this.props.config.fetchAndParseConfig()
+    }
+
     render () {
-        const { t } = this.props
+        const { t, config } = this.props
-        const proxies: { type: ProxyType, name: string }[] = [
-            { type: ProxyType.Shadowsocks, name: 'shadowsocks' },
-            { type: ProxyType.Vmess, name: 'vmess' }
-        ]
 
         return (
             <div className="page">
@@ -20,17 +27,19 @@ class Proxies extends React.Component<I18nProps, {}> {
                     <Header title={t('title')} >
                         <Icon type="plus" size={20} style={{ fontWeight: 'bold' }} />
                     </Header>
-                    <ul className="proxies-list">
+                    {
-                        {
+                        config.state === 'ok' && <ul className="proxies-list">
-                            proxies.map(
+                            {
-                                proxy => (
+                                config.config.proxy.map(
-                                    <li>
+                                    (p, index) => (
-                                        <Proxy type={proxy.type} name={proxy.name} />
+                                        <li key={index}>
-                                    </li>
+                                            <Proxy name={p.name} config={p.config} />
+                                        </li>
+                                    )
                                 )
-                            )
+                            }
-                        }
+                        </ul>
-                    </ul>
+                    }
                 </div>
                 <div className="proxies-container">
                     <Header title={t('groupTitle')} />

src/lib/helper.ts

@@ -14,7 +14,7 @@ export function removeLocalStorageItem (key: string) {
  * to return Promise<[T, Error]>
  * @param {Promise<T>} promise
  */
-export async function to <T, E = Error> (promise: any): Promise<[T, E]> {
+export async function to <T, E = Error> (promise: Promise<T>): Promise<[T, E]> {
     try {
         const ret = await promise
         return [ret, null as E]

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<Proxy>('proxies/:name', { params: { name } })
+    return req.get<Proxy>(`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<void>('proxies/:name', { params: { name }, data: { name: select } })
+    return req.get<void>(`proxies/${name}`, { data: { name: select } })
 }
 
 export async function getInstance () {