Migration: remove all class component

configs/webpack/dev.js

@@ -17,6 +17,11 @@ module.exports = merge(commonConfig, {
         hot: true, // enable HMR on the server
         noInfo: true,
     },
+    resolve: {
+        alias: {
+          'react-dom': '@hot-loader/react-dom'
+        }
+    },
     devtool: 'cheap-module-eval-source-map',
     plugins: [
         new webpack.HotModuleReplacementPlugin(), // enable HMR globally

package.json

@@ -32,11 +32,11 @@
         "@babel/core": "^7.4.5",
         "@babel/preset-env": "^7.4.5",
         "@babel/preset-react": "^7.0.0",
+        "@hot-loader/react-dom": "^16.8.6",
         "@types/classnames": "^2.2.8",
         "@types/node": "^12.0.10",
         "@types/react": "^16.8.22",
         "@types/react-dom": "^16.8.4",
-        "@types/react-i18next": "^8.1.0",
         "@types/react-router-dom": "^4.3.4",
         "@types/react-sortable-hoc": "^0.6.5",
         "@types/react-virtualized": "^9.21.2",
@@ -53,13 +53,14 @@
         "offline-plugin": "^5.0.7",
         "postcss-loader": "^3.0.0",
         "react-addons-test-utils": "^15.6.2",
-        "react-hot-loader": "^4.12.0",
+        "react-hot-loader": "^4.12.1",
         "sass": "^1.22.2",
         "sass-loader": "^7.1.0",
         "style-loader": "^0.23.1",
         "stylelint": "^10.1.0",
         "stylelint-config-standard": "^18.3.0",
         "stylelint-webpack-plugin": "^0.10.5",
+        "terser-webpack-plugin": "^1.3.0",
         "tslint": "^5.18.0",
         "tslint-config-standard": "^8.0.1",
         "tslint-loader": "^3.6.0",
@@ -78,16 +79,12 @@
         "i18next": "^17.0.6",
         "i18next-browser-languagedetector": "^3.0.1",
         "immer": "^3.1.3",
-        "mobx": "^5.10.1",
-        "mobx-react": "^6.1.1",
-        "mobx-react-router": "^4.0.7",
         "react": "^16.8.6",
         "react-dom": "^16.8.6",
         "react-i18next": "^10.11.2",
         "react-router-dom": "^5.0.1",
         "react-sortable-hoc": "^1.9.1",
         "react-virtualized": "^9.21.1",
-        "terser-webpack-plugin": "^1.3.0",
         "typescript": "^3.5.2",
         "unstated-next": "^1.1.0",
         "use-immer": "^0.3.2",

src/containers/App.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react'
+import React, { useEffect } from 'react'
 import { Route, Redirect } from 'react-router-dom'
-import { hot } from 'react-hot-loader'
+import { hot } from 'react-hot-loader/root'
 import classnames from 'classnames'
 import { I18nProps } from '@models'
 import { isClashX } from '@lib/jsBridge'
@@ -18,12 +18,11 @@ import { getLogsStreamReader } from '@lib/request'
 export interface AppProps extends I18nProps {
 }
 
-@hot(module)
+function App () {
-export default class App extends React.Component<AppProps, {}> {
+    useEffect(() => {
-    componentDidMount () {
         getLogsStreamReader()
-    }
+    }, [])
-    render () {
+
     const routes = [
         // { path: '/', name: 'Overview', component: Overview, exact: true },
         { path: '/proxies', name: 'Proxies', component: Proxies },
@@ -47,4 +46,5 @@ export default class App extends React.Component<AppProps, {}> {
         </div>
     )
 }
-}
+
+export default hot(App)

src/containers/ExternalControllerDrawer/index.tsx

@@ -1,56 +1,40 @@
-import * as React from 'react'
+import React, { useEffect } from 'react'
-import { withTranslation, WithTranslation } from 'react-i18next'
+import { useTranslation } from 'react-i18next'
-import { inject, observer } from 'mobx-react'
+import { useObject } from '@lib/hook'
-import { storeKeys } from '@lib/createStore'
 import { Modal, Input, Row, Col, Alert } from '@components'
-import { BaseProps } from '@models'
+import { APIInfo, ExternalControllerModal } from '@stores'
 import './style.scss'
 
-interface ExternalControllerModalProps extends BaseProps, WithTranslation {}
+export default function ExternalController () {
-
+    const { t } = useTranslation(['Settings'])
-interface ExternalControllerModalState {
+    const { data: info, update, fetch } = APIInfo.useContainer()
-    hostname: string
+    const { hidden, visible } = ExternalControllerModal.useContainer()
-    port: string
+    const { value, set, change } = useObject({
-    secret: string
-}
-
-@inject(...storeKeys)
-@observer
-class ExternalController extends React.Component<ExternalControllerModalProps, ExternalControllerModalState> {
-
-    state = {
         hostname: '',
         port: '',
         secret: ''
-    }
+    })
 
-    private handleOk = () => {
+    useEffect(() => {
-        const { hostname, port, secret } = this.state
+        fetch()
-        this.props.store.updateAPIInfo({ hostname, port, secret })
+    }, [])
-    }
 
-    private handleCancel = () => {
+    useEffect(() => {
-        this.props.store.setShowAPIModal(false)
+        set({ hostname: info.hostname, port: info.port, secret: info.secret })
-    }
+    }, [info])
 
-    async componentWillMount () {
+    function handleOk () {
-        await this.props.store.fetchAPIInfo()
+        const { hostname, port, secret } = value
-        const info = this.props.store.apiInfo
+        update({ hostname, port, secret })
-        this.setState({ hostname: info.hostname, port: info.port, secret: info.secret })
     }
 
-    render () {
-        const { t } = this.props
-        const { hostname, port, secret } = this.state
-        const show = this.props.store.showAPIModal
-
     return (
         <Modal
-                show={show}
+            show={visible}
             title={t('externalControllerSetting.title')}
             bodyClassName="external-controller"
-                onClose={this.handleCancel}
+            onClose={hidden}
-                onOk={this.handleOk}
+            onOk={handleOk}
         >
             <Alert type="info" inside={true}>
                 <p>{t('externalControllerSetting.note')}</p>
@@ -61,8 +45,8 @@ class ExternalController extends React.Component<ExternalControllerModalProps, E
                     <Input
                         align="left"
                         inside={true}
-                            value={hostname}
+                        value={value.hostname}
-                            onChange={hostname => this.setState({ hostname })}
+                        onChange={hostname => change('hostname', hostname)}
                     />
                 </Col>
             </Row>
@@ -72,8 +56,8 @@ class ExternalController extends React.Component<ExternalControllerModalProps, E
                     <Input
                         align="left"
                         inside={true}
-                            value={port}
+                        value={value.port}
-                            onChange={port => this.setState({ port })}
+                        onChange={port => change('port', port)}
                     />
                 </Col>
             </Row>
@@ -83,14 +67,11 @@ class ExternalController extends React.Component<ExternalControllerModalProps, E
                     <Input
                         align="left"
                         inside={true}
-                            value={secret}
+                        value={value.secret}
-                            onChange={secret => this.setState({ secret })}
+                        onChange={secret => change('secret', secret)}
                     />
                 </Col>
             </Row>
         </Modal>
     )
 }
-}
-
-export default withTranslation(['Settings'])(ExternalController)

src/containers/Overview/index.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react'
 const logo = require('@assets/LOGO-fixing.svg')
 
-export default class Overview extends React.Component<{}, {}> {
+export default function Overview () {
-    render () {
     return (
         <div style={{
             height: '90vh',
@@ -20,4 +19,3 @@ export default class Overview extends React.Component<{}, {}> {
         </div>
     )
 }
-}

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

@@ -1,26 +1,22 @@
 import * as React from 'react'
-import { inject } from 'mobx-react'
+import { Data } from '@stores'
-import { BaseComponentProps } from '@models'
-import { ConfigStore } from '@stores'
 import { changeProxySelected, Group as IGroup } from '@lib/request'
-import { storeKeys } from '@lib/createStore'
 import { Tags } from '@components'
 import './style.scss'
 
-interface GroupProps extends BaseComponentProps {
+interface GroupProps {
     config: IGroup
-    store?: ConfigStore
 }
 
-@inject(...storeKeys)
+export function Group (props: GroupProps) {
-export class Group extends React.Component<GroupProps, {}> {
+    const { fetch } = Data.useContainer()
-    handleChangeProxySelected = async (name: string) => {
+    const { config } = props
-        await changeProxySelected(this.props.config.name, name)
+
-        await this.props.store.fetchData()
+    async function handleChangeProxySelected (name: string) {
+        await changeProxySelected(props.config.name, name)
+        await fetch()
     }
 
-    render () {
-        const { config } = this.props
     const canClick = config.type === 'Selector'
     return (
         <div className="proxy-group">
@@ -32,7 +28,7 @@ export class Group extends React.Component<GroupProps, {}> {
                 <Tags
                     className="proxy-group-tags"
                     data={config.all}
-                        onClick={this.handleChangeProxySelected}
+                    onClick={handleChangeProxySelected}
                     select={config.now}
                     canClick={canClick}
                     rowHeight={30} />
@@ -40,4 +36,3 @@ export class Group extends React.Component<GroupProps, {}> {
         </div>
     )
 }
-}

src/containers/Proxies/components/ModifyProxyDialog/FormItems.tsx

@@ -1,144 +0,0 @@
-import * as React from 'react'
-import classnames from 'classnames'
-import { Row, Col, Input, Icon, Select, Option, Switch } from '@components'
-import { noop } from '@lib/helper'
-
-// type selector
-export function ProxyTypeSelector ({ types, label, value, onSelect = noop }: {
-    types: { [key: string]: string },
-    label: string,
-    value: string,
-    onSelect?: (type: string) => void
-}) {
-    return (
-        <Row gutter={24} className="proxy-editor-row">
-            <Col span={6} className="proxy-editor-label">{label}</Col>
-            <Col span={18}>
-                <Select value={value} onSelect={onSelect}>
-                    {
-                        Object.keys(types)
-                            .map(typeName => {
-                                const type = types[typeName]
-                                return (
-                                    <Option value={type} key={type}>{typeName}</Option>
-                                )
-                            })
-                    }
-                </Select>
-            </Col>
-        </Row>
-    )
-}
-
-// color selector
-export function ProxyColorSelector ({ colors, value, onSelect = noop }: {
-    colors: string[],
-    value: string,
-    onSelect?: (color: string) => void
-}) {
-    return (
-        <Row gutter={24} style={{ padding: '12px 0' }}>
-            <div className="proxy-editor-color-selector">
-                {
-                    colors.map(color => (
-                        <span
-                            className={classnames('color-item', {
-                                'color-item-active': value === color
-                            })}
-                            key={color}
-                            style={{ background: color }}
-                            onClick={() => onSelect(color)}
-                        />
-                    ))
-                }
-            </div>
-        </Row>
-    )
-}
-
-// input form
-export function ProxyInputForm ({ label, value, onChange = noop }: {
-    label: string,
-    value: string,
-    onChange?: (value: string) => void
-}) {
-    return (
-        <Row gutter={24} className="proxy-editor-row">
-            <Col span={6} className="proxy-editor-label">{label}</Col>
-            <Col span={18}>
-                <Input value={value} onChange={onChange} align="left"/>
-            </Col>
-        </Row>
-    )
-}
-
-// switch form
-export function ProxySwitch ({ label, value, onChange = noop }: {
-    label: string,
-    value: boolean,
-    onChange?: (value: boolean) => void
-}) {
-    return (
-        <Row gutter={24} align="middle" className="proxy-editor-row">
-            <Col span={6} className="proxy-editor-label">{label}</Col>
-            <Col span={18}>
-                <Switch checked={value} onChange={onChange} />
-            </Col>
-        </Row>
-    )
-}
-
-// password form
-export class ProxyPasswordForm extends React.Component<{
-    label: string,
-    value: string,
-    onChange?: (value: string) => void
-}, { showPassword: boolean }> {
-
-    state = {
-        showPassword: false
-    }
-
-    render () {
-        const { label, value, onChange } = this.props
-        const { showPassword } = this.state
-        const type = showPassword ? 'text' : 'password'
-        return (
-            <Row gutter={24} className="proxy-editor-row">
-                <Col span={6} className="proxy-editor-label">{label}</Col>
-                <Col span={18} className="proxy-editor-value">
-                    <Input style={{ paddingRight: '32px' }} type={type} value={value} onChange={onChange} align="left" />
-                    <Icon
-                        className="proxy-editor-passsword-icon"
-                        type={showPassword ? 'hide' : 'show'}
-                        size={20}
-                        onClick={() => this.setState({ showPassword: !showPassword })}
-                    />
-                </Col>
-            </Row>
-        )
-    }
-}
-
-// cipher selector
-export function ProxyCipherSelector ({ ciphers, label, value, onSelect = noop }: {
-    ciphers: string[],
-    label: string,
-    value: string,
-    onSelect?: (type: string) => void
-}) {
-    return (
-        <Row gutter={24} className="proxy-editor-row">
-            <Col span={6} className="proxy-editor-label">{label}</Col>
-            <Col span={18}>
-                <Select value={value} onSelect={onSelect}>
-                    {
-                        ciphers.map(cipher => (
-                            <Option value={cipher} key={cipher}>{cipher}</Option>
-                        ))
-                    }
-                </Select>
-            </Col>
-        </Row>
-    )
-}

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

@@ -1,224 +0,0 @@
-import * as React from 'react'
-import { withTranslation, WithTranslation } from 'react-i18next'
-import { Modal } from '@components'
-import { getLocalStorageItem, setLocalStorageItem } from '@lib/helper'
-import './style.scss'
-
-import {
-    BaseComponentProps,
-    Proxy as IProxy,
-    SsProxyConfigList, VmessProxyConfigList, Socks5ProxyConfigList,
-    TagColors,
-    ProxyType,
-    SsCipher, VmessCipher, pickCipherWithAlias
-} from '@models'
-
-import {
-    ProxyInputForm,
-    ProxySwitch,
-    ProxyColorSelector,
-    ProxyTypeSelector,
-    ProxyPasswordForm,
-    ProxyCipherSelector
-} from './FormItems'
-
-interface ModifyProxyDialogProps extends BaseComponentProps, WithTranslation {
-    config: IProxy
-    onOk?: (config: IProxy) => void
-    onCancel?: () => void
-}
-
-interface ModifyProxyDialogState {
-    config: IProxy
-    currentColor: string
-}
-
-class RawDialog extends React.Component<ModifyProxyDialogProps, ModifyProxyDialogState> {
-
-    constructor (props: ModifyProxyDialogProps) {
-        super(props)
-
-        this.state = {
-            config: props.config,
-            currentColor: getLocalStorageItem(props.config.name)
-        }
-    }
-
-    componentDidMount () {
-        console.log(this.props.config)
-    }
-
-    handleOk = () => {
-        const { onOk } = this.props
-        const { config, currentColor } = this.state
-        setLocalStorageItem(config.name, currentColor)
-
-        onOk(config)
-    }
-
-    handleConfigChange = (key: string, value: any) => {
-        console.log(key, value)
-        const { config } = this.state
-        this.setState({ config: { ...config, [key]: value } })
-    }
-
-    getCipherFromType (type) {
-        switch (type) {
-        case 'ss':
-            return SsCipher
-        case 'vmess':
-            return VmessCipher
-        default:
-            return []
-        }
-    }
-
-    getConfigListFromType (type) {
-        switch (type) {
-        case 'ss':
-            return SsProxyConfigList
-        case 'vmess':
-            return VmessProxyConfigList
-        case 'socks5':
-            return Socks5ProxyConfigList
-        default:
-            return []
-        }
-    }
-
-    renderFormItem (key) {
-        const { t } = this.props
-        const { config } = this.state
-
-        switch (key) {
-        case 'type':
-            return (
-                <ProxyTypeSelector
-                    key={key}
-                    types={ProxyType}
-                    label={t('editDialog.type')}
-                    value={config.type}
-                    onSelect={value => this.handleConfigChange('type', value)}
-                />
-            )
-        case 'name':
-            return (
-                <ProxyInputForm
-                    key={key}
-                    label={t('editDialog.name')}
-                    value={config.name}
-                    onChange={value => this.handleConfigChange('name', value)}
-                />
-            )
-        case 'server':
-            return (
-                <ProxyInputForm
-                    key={key}
-                    label={t('editDialog.server')}
-                    value={config.server}
-                    onChange={value => this.handleConfigChange('server', value)}
-                />
-            )
-        case 'port':
-            return (
-                <ProxyInputForm
-                    key={key}
-                    label={t('editDialog.port')}
-                    value={config.port ? config.port.toString() : ''}
-                    onChange={value => this.handleConfigChange('port', +value)}
-                />
-            )
-        case 'password':
-            return (
-                <ProxyPasswordForm
-                    key={key}
-                    label={t('editDialog.password')}
-                    value={config.password}
-                    onChange={value => this.handleConfigChange('password', value)}
-                />
-            )
-        case 'cipher':
-            return (
-                <ProxyCipherSelector
-                    key={key}
-                    ciphers={this.getCipherFromType(config.type)}
-                    label={t('editDialog.cipher')}
-                    value={pickCipherWithAlias(config.cipher)}
-                    onSelect={value => this.handleConfigChange('cipher', value)}
-                />
-            )
-        case 'obfs':
-            return (
-                <ProxyInputForm
-                    key={key}
-                    label={t('editDialog.obfs')}
-                    value={config.obfs}
-                    onChange={value => this.handleConfigChange('obfs', value)}
-                />
-            )
-        case 'obfs-host':
-            return (
-                <ProxyInputForm
-                    key={key}
-                    label={t('editDialog.obfs-host')}
-                    value={config['obfs-host']}
-                    onChange={value => this.handleConfigChange('obfs-host', value)}
-                />
-            )
-        case 'uuid':
-            return (
-                <ProxyPasswordForm
-                    key={key}
-                    label={t('editDialog.uuid')}
-                    value={config.uuid}
-                    onChange={value => this.handleConfigChange('uuid', value)}
-                />
-            )
-        case 'alterId':
-            return (
-                <ProxyInputForm
-                    key={key}
-                    label={t('editDialog.alterId')}
-                    value={config.alterId ? config.alterId.toString() : ''}
-                    onChange={value => this.handleConfigChange('alterId', +value)}
-                />
-            )
-        case 'tls':
-            return (
-                <ProxySwitch
-                    key={key}
-                    label={t('editDialog.tls')}
-                    value={!!config.tls}
-                    onChange={value => this.handleConfigChange('tls', !!value)}
-                />
-            )
-        default:
-            return null
-        }
-    }
-
-    render () {
-        const { onCancel, t } = this.props
-        const { currentColor, config } = this.state
-        const { type } = config
-        const configList = this.getConfigListFromType(type)
-
-        return <Modal
-            className="proxy-editor"
-            title={t('editDialog.title')}
-            onOk={this.handleOk}
-            onClose={onCancel}
-        >
-            <ProxyColorSelector
-                colors={TagColors}
-                value={currentColor}
-                onSelect={color => this.setState({ currentColor: color })}
-            />
-            {
-                configList.map(c => this.renderFormItem(c))
-            }
-        </Modal>
-    }
-}
-
-export const ModifyProxyDialog = withTranslation(['Proxies'])(RawDialog)

src/containers/Proxies/components/ModifyProxyDialog/style.scss

@@ -1,51 +0,0 @@
-@import '~@styles/variables';
-
-.proxy-editor {
-    .proxy-editor-row {
-        padding: 5px 0;
-
-        .proxy-editor-label {
-            padding-left: 0;
-            line-height: 30px;
-        }
-
-        .proxy-editor-value {
-            position: relative;
-
-            .proxy-editor-passsword-icon {
-                position: absolute;
-                right: 15px;
-                top: 4px;
-                cursor: pointer;
-                color: $color-primary-darken;
-                user-select: none;
-            }
-        }
-    }
-
-    .proxy-editor-color-selector {
-        display: flex;
-        align-items: center;
-
-        .color-item {
-            position: relative;
-            margin-right: 20px;
-            width: 16px;
-            height: 16px;
-            border-radius: 50%;
-            cursor: pointer;
-        }
-
-        .color-item-active::after {
-            position: absolute;
-            left: -3px;
-            top: -3px;
-            content: '';
-            display: block;
-            width: 22px;
-            height: 22px;
-            border-radius: 50%;
-            border: 1px solid $color-gray-dark;
-        }
-    }
-}

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

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React, { useState, useMemo, useLayoutEffect, useEffect } from 'react'
 import classnames from 'classnames'
 import { BaseComponentProps, TagColors } from '@models'
 import { getProxyDelay, Proxy as IProxy } from '@lib/request'
@@ -9,55 +9,9 @@ import './style.scss'
 
 interface ProxyProps extends BaseComponentProps {
     config: IProxy
-    // onEdit?: (e: React.MouseEvent<HTMLElement>) => void
 }
 
-interface ProxyState {
+async function getDelay (name: string) {
-    delay: number
-    hasError: boolean
-    color: string
-}
-
-export class Proxy extends React.Component<ProxyProps , ProxyState> {
-    constructor (props: ProxyProps) {
-        super(props)
-
-        const { config } = props
-        const { name } = config
-        let color = getLocalStorageItem(name)
-
-        if (!color) {
-            color = sample(TagColors)
-            setLocalStorageItem(name, color)
-        }
-
-        const delay = config.history.length ? config.history.slice(-1)[0].delay : 0
-        this.state = {
-            delay,
-            hasError: delay === 0,
-            color
-        }
-    }
-
-    componentWillUpdate () {
-        const { config: { name } } = this.props
-        const { color: rawColor } = this.state
-        const color = getLocalStorageItem(name)
-
-        if (rawColor !== color) {
-            this.setState({ color })
-        }
-    }
-
-    componentDidMount () {
-        EE.subscribe(Action.SPEED_NOTIFY, this.speedTest)
-    }
-
-    componentWillUnmount () {
-        EE.unsubscribe(Action.SPEED_NOTIFY, this.speedTest)
-    }
-
-    getDelay = async (name: string) => {
     if (isClashX()) {
         const delay = await jsBridge.getProxyDelay(name)
         return delay
@@ -67,24 +21,42 @@ export class Proxy extends React.Component<ProxyProps , ProxyState> {
     return delay
 }
 
-    speedTest = async () => {
+export function Proxy (props: ProxyProps) {
-        const { config } = this.props
+    const { config, className } = props
-        const [delay, err] = await to(this.getDelay(config.name))
+    const [delay, setDelay] = useState(0)
-        this.setState({ delay: err ? -1 : delay, hasError: !!err })
+
+    async function speedTest () {
+        const [delay, err] = await to(getDelay(config.name))
+        setDelay(err ? 0 : delay)
     }
 
-    render () {
+    useEffect(() => {
-        const { config, className } = this.props
+        setDelay(config.history.length ? config.history.slice(-1)[0].delay : 0)
-        const { delay, color, hasError } = this.state
+    }, [config])
-        const backgroundColor = hasError ? undefined : color
 
+    useLayoutEffect(() => {
+        EE.subscribe(Action.SPEED_NOTIFY, speedTest)
+        return () => EE.unsubscribe(Action.SPEED_NOTIFY, speedTest)
+    }, [])
+
+    const hasError = useMemo(() => delay === 0, [delay])
+    const color = useMemo(() => {
+        let color = getLocalStorageItem(config.name)
+
+        if (!color) {
+            color = sample(TagColors)
+            setLocalStorageItem(name, color)
+        }
+
+        return color
+    }, [config])
+
+    const backgroundColor = hasError ? undefined : color
     return (
         <div className={classnames('proxy-item', { 'proxy-error': hasError }, className)}>
             <span className="proxy-type" style={{ backgroundColor }}>{config.type}</span>
             <p className="proxy-name">{config.name}</p>
             <p className="proxy-delay">{delay === 0 ? '-' : `${delay}ms`}</p>
-                {/* <Icon className="proxy-editor" type="setting" onClick={onEdit} /> */}
         </div>
     )
 }
-}

src/containers/Proxies/components/index.ts

@@ -1,3 +1,2 @@
 export * from './Proxy'
 export * from './Group'
-export * from './ModifyProxyDialog'

src/containers/Proxies/index.tsx

@@ -1,33 +1,24 @@
-import * as React from 'react'
+import React, { useLayoutEffect } from 'react'
-import { withTranslation, WithTranslation } from 'react-i18next'
+import { useTranslation } from 'react-i18next'
-import { inject, observer } from 'mobx-react'
-import { storeKeys } from '@lib/createStore'
 import EE from '@lib/event'
 import { Card, Header, Icon } from '@components'
-import { BaseRouterProps } from '@models'
+import { Data } from '@stores'
 
 import { Proxy, Group } from './components'
 import './style.scss'
 
-interface ProxiesProps extends BaseRouterProps, WithTranslation {}
+export default function Proxies () {
+    const { data, fetch } = Data.useContainer()
+    const { t } = useTranslation(['Proxies'])
 
-interface ProxiesState {
+    useLayoutEffect(() => {
-}
+        fetch()
+    }, [])
 
-@inject(...storeKeys)
+    function handleNotitySpeedTest () {
-@observer
-class Proxies extends React.Component<ProxiesProps, ProxiesState> {
-    componentDidMount () {
-        this.props.store.fetchData()
-    }
-
-    handleNotitySpeedTest = () => {
         EE.notifySpeedTest()
     }
 
-    render () {
-        const { t, store } = this.props
-
     return (
         <div className="page">
             <div className="proxies-container">
@@ -35,7 +26,7 @@ class Proxies extends React.Component<ProxiesProps, ProxiesState> {
                 <Card className="proxies-group-card">
                     <ul className="proxies-group-list">
                         {
-                                store.data.proxyGroup.map(p => (
+                            data.proxyGroup.map(p => (
                                 <li className="proxies-group-item" key={p.name}>
                                     <Group config={p} />
                                 </li>
@@ -47,11 +38,11 @@ class Proxies extends React.Component<ProxiesProps, ProxiesState> {
             <div className="proxies-container">
                 <Header title={t('title')}>
                     <Icon type="speed" size={20} />
-                        <span className="proxies-speed-test" onClick={this.handleNotitySpeedTest}>{t('speedTestText')}</span>
+                    <span className="proxies-speed-test" onClick={handleNotitySpeedTest}>{t('speedTestText')}</span>
                 </Header>
                 <ul className="proxies-list">
                     {
-                            store.data.proxy.map(p => (
+                        data.proxy.map(p => (
                             <li key={p.name}>
                                 <Proxy config={p} />
                             </li>
@@ -62,6 +53,3 @@ class Proxies extends React.Component<ProxiesProps, ProxiesState> {
         </div>
     )
 }
-}
-
-export default withTranslation(['Proxies'])(Proxies)

src/containers/Rules/index.tsx

@@ -1,24 +1,20 @@
-import * as React from 'react'
+import React, { useEffect } from 'react'
-import { withTranslation, WithTranslation } from 'react-i18next'
+import { useTranslation } from 'react-i18next'
 import { Header, Card, Row, Col } from '@components'
-import { BaseRouterProps } from '@models'
 import './style.scss'
-import { storeKeys } from '@lib/createStore'
+import { Data } from '@stores'
-import { inject, observer } from 'mobx-react'
 import { List, AutoSizer } from 'react-virtualized'
 
-interface RulesProps extends BaseRouterProps, WithTranslation {}
+export default function Rules () {
+    const { data, fetch } = Data.useContainer()
+    const { t } = useTranslation(['Rules'])
+    const { rules } = data
 
-@inject(...storeKeys)
+    useEffect(() => {
-@observer
+        fetch()
-class Rules extends React.Component<RulesProps, {}> {
+    }, [])
 
-    componentWillMount () {
+    function renderRuleItem ({ index, key, style }) {
-        this.props.store.fetchData()
-    }
-
-    renderRuleItem = ({ index, key, style }) => {
-        const { rules } = this.props.store.data
         const rule = rules[index]
         return (
             <li className="rule-item" key={key} style={style}>
@@ -37,9 +33,6 @@ class Rules extends React.Component<RulesProps, {}> {
         )
     }
 
-    render () {
-        const { t } = this.props
-        const { rules } = this.props.store.data
     return (
         <div className="page">
             <Header title={t('title')} />
@@ -51,7 +44,7 @@ class Rules extends React.Component<RulesProps, {}> {
                                 height={height}
                                 width={width}
                                 rowCount={rules.length}
-                                    rowRenderer={this.renderRuleItem}
+                                rowRenderer={renderRuleItem}
                                 rowHeight={50}
                                 overscanRowCount={10}
                             />
@@ -62,6 +55,3 @@ class Rules extends React.Component<RulesProps, {}> {
         </div>
     )
 }
-}
-
-export default withTranslation(['Rules'])(Rules)

src/containers/Settings/index.tsx

@@ -1,106 +1,93 @@
-import * as React from 'react'
+import React, { useEffect } from 'react'
-import { withTranslation, WithTranslation } from 'react-i18next'
+import { useTranslation } from 'react-i18next'
 import i18next from 'i18next'
-import { inject, observer } from 'mobx-react'
 import { Header, Card, Row, Col, Switch, ButtonSelect, ButtonSelectOptions, Input, Icon } from '@components'
-import { BaseRouterProps } from '@models'
+import { APIInfo, Data, ClashXData, ExternalControllerModal } from '@stores'
 import { updateConfig } from '@lib/request'
+import { useObject } from '@lib/hook'
 import { to } from '@lib/helper'
-import { rootStores, storeKeys } from '@lib/createStore'
-import './style.scss'
 import { isClashX, jsBridge } from '@lib/jsBridge'
+import './style.scss'
 
-interface SettingProps extends BaseRouterProps, WithTranslation {}
+const languageOptions: ButtonSelectOptions[] = [{ label: '中文', value: 'zh' }, { label: 'English', value: 'en' }]
 
-@inject(...storeKeys)
+function changeLanguage (language: string) {
-@observer
-class Settings extends React.Component<SettingProps, {}> {
-    state = {
-        socks5ProxyPort: 7891,
-        httpProxyPort: 7890,
-        isClashX: false
-    }
-
-    languageOptions: ButtonSelectOptions[] = [{ label: '中文', value: 'zh' }, { label: 'English', value: 'en' }]
-
-    changeLanguage = (language: string) => {
     i18next.changeLanguage(language)
 }
 
-    handleProxyModeChange = async (mode: string) => {
+async function handleStartAtLoginChange (state: boolean) {
+    await jsBridge.setStartAtLogin(state)
+}
+
+async function handleSetSystemProxy (state: boolean) {
+    await jsBridge.setSystemProxy(state)
+}
+
+export default function Settings () {
+    const { data: clashXData, fetch: fetchClashXData } = ClashXData.useContainer()
+    const { data, fetch } = Data.useContainer()
+    const { data: apiInfo } = APIInfo.useContainer()
+    const { show } = ExternalControllerModal.useContainer()
+    const { t, i18n } = useTranslation(['Settings'])
+    const { value: info, change } = useObject({
+        socks5ProxyPort: 7891,
+        httpProxyPort: 7890,
+        isClashX: false
+    })
+
+    useEffect(() => {
+        fetch()
+        if (isClashX()) {
+            fetchClashXData().then(() => change('isClashX', true))
+        }
+    }, [])
+
+    useEffect(() => {
+        change('socks5ProxyPort', data.general.socksPort)
+        change('httpProxyPort', data.general.port)
+    }, [data])
+
+    async function handleProxyModeChange (mode: string) {
         const [, err] = await to(updateConfig({ mode }))
         if (!err) {
-            rootStores.store.fetchData()
+            fetch()
         }
     }
 
-    handleHttpPortSave = async () => {
+    async function handleHttpPortSave () {
-        const [, err] = await to(updateConfig({ 'port': this.state.httpProxyPort }))
+        const [, err] = await to(updateConfig({ 'port': info.httpProxyPort }))
         if (!err) {
-            await this.props.store.fetchData()
+            await fetch()
-            this.setState({ httpProxyPort: this.props.store.data.general.port })
+            change('httpProxyPort', data.general.port)
         }
     }
 
-    handleSocksPortSave = async () => {
+    async function handleSocksPortSave () {
-        const [, err] = await to(updateConfig({ 'socks-port': this.state.socks5ProxyPort }))
+        const [, err] = await to(updateConfig({ 'socks-port': info.socks5ProxyPort }))
         if (!err) {
-            await this.props.store.fetchData()
+            await fetch()
-            this.setState({ socks5ProxyPort: this.props.store.data.general.socksPort })
+            change('socks5ProxyPort', data.general.socksPort)
         }
     }
 
-    handleAllowLanChange = async (state: boolean) => {
+    async function handleAllowLanChange (state: boolean) {
         const [, err] = await to(updateConfig({ 'allow-lan': state }))
         if (!err) {
-            await this.props.store.fetchData()
+            await fetch()
         }
     }
 
-    handleStartAtLoginChange = async (state: boolean) => {
-        await jsBridge.setStartAtLogin(state)
-        this.setState({ startAtLogin: state })
-    }
-
-    handleSetSystemProxy = async (state: boolean) => {
-        await jsBridge.setSystemProxy(state)
-        this.setState({ setAsSystemProxy: state })
-    }
-
-    async componentDidMount () {
-        await rootStores.store.fetchData()
-        if (isClashX()) {
-            await rootStores.store.fetchClashXData()
-            this.setState({
-                isClashX: true
-            })
-        }
-
-        const general = this.props.store.data.general
-        this.setState({
-            socks5ProxyPort: general.socksPort,
-            httpProxyPort: general.port
-        })
-    }
-
-    render () {
-        const { t, i18n, store } = this.props
-        const {
-            isClashX,
-            socks5ProxyPort,
-            httpProxyPort
-        } = this.state
-
     const {
         hostname: externalControllerHost,
         port: externalControllerPort
-        } = store.apiInfo
+    } = apiInfo
 
-        const { allowLan, mode } = store.data.general
+    const { allowLan, mode } = data.general
     const {
         startAtLogin,
         systemProxy
-        } = store.clashxData
+    } = clashXData
+
     const proxyModeOptions: ButtonSelectOptions[] = [
         { label: t('values.global'), value: 'Global' },
         { label: t('values.rules'), value: 'Rule' },
@@ -117,7 +104,7 @@ class Settings extends React.Component<SettingProps, {}> {
                             <span className="label">{t('labels.startAtLogin')}</span>
                         </Col>
                         <Col span={8} className="value-column">
-                                <Switch disabled={!isClashX} checked={startAtLogin} onChange={this.handleStartAtLoginChange} />
+                            <Switch disabled={!isClashX} checked={startAtLogin} onChange={handleStartAtLoginChange} />
                         </Col>
                     </Col>
                     <Col span={12}>
@@ -125,7 +112,7 @@ class Settings extends React.Component<SettingProps, {}> {
                             <span className="label">{t('labels.language')}</span>
                         </Col>
                         <Col span={14} className="value-column">
-                                <ButtonSelect options={this.languageOptions} value={i18n.language.replace(/-.+$/, '')} onSelect={this.changeLanguage} />
+                            <ButtonSelect options={languageOptions} value={i18n.language.replace(/-.+$/, '')} onSelect={changeLanguage} />
                         </Col>
                     </Col>
                 </Row>
@@ -138,7 +125,7 @@ class Settings extends React.Component<SettingProps, {}> {
                             <Switch
                                 disabled={!isClashX}
                                 checked={systemProxy}
-                                    onChange={this.handleSetSystemProxy}
+                                onChange={handleSetSystemProxy}
                             />
                         </Col>
                     </Col>
@@ -149,7 +136,7 @@ class Settings extends React.Component<SettingProps, {}> {
                         <Col span={8} className="value-column">
                             <Switch
                                 checked={allowLan}
-                                    onChange={this.handleAllowLanChange}
+                                onChange={handleAllowLanChange}
                             />
                         </Col>
                     </Col>
@@ -166,7 +153,7 @@ class Settings extends React.Component<SettingProps, {}> {
                             <ButtonSelect
                                 options={proxyModeOptions}
                                 value={mode}
-                                    onSelect={this.handleProxyModeChange}
+                                onSelect={handleProxyModeChange}
                             />
                         </Col>
                     </Col>
@@ -176,9 +163,9 @@ class Settings extends React.Component<SettingProps, {}> {
                         </Col>
                         <Col span={8}>
                             <Input
-                                    value={socks5ProxyPort}
+                                value={info.socks5ProxyPort}
-                                    onChange={socks5ProxyPort => this.setState({ socks5ProxyPort: parseInt(socks5ProxyPort, 10) })}
+                                onChange={socks5ProxyPort => change('socks5ProxyPort', parseInt(socks5ProxyPort, 10))}
-                                    onBlur={this.handleSocksPortSave}
+                                onBlur={handleSocksPortSave}
                             />
                         </Col>
                     </Col>
@@ -190,10 +177,9 @@ class Settings extends React.Component<SettingProps, {}> {
                         </Col>
                         <Col span={8}>
                             <Input
-                                    type="number"
+                                value={info.httpProxyPort}
-                                    value={httpProxyPort}
+                                onChange={httpProxyPort => change('httpProxyPort', parseInt(httpProxyPort, 10))}
-                                    onChange={httpProxyPort => this.setState({ httpProxyPort: parseInt(httpProxyPort, 10) })}
+                                onBlur={handleHttpPortSave}
-                                    onBlur={this.handleHttpPortSave}
                             />
                         </Col>
                     </Col>
@@ -202,7 +188,7 @@ class Settings extends React.Component<SettingProps, {}> {
                             <span className="label">{t('labels.externalController')}</span>
                         </Col>
                         <Col className="external-controller" span={10}>
-                                <span className="modify-btn" onClick={() => this.props.store.setShowAPIModal(true)}>
+                            <span className="modify-btn" onClick={show}>
                                 {`${externalControllerHost}:${externalControllerPort}`}
                             </span>
                         </Col>
@@ -220,6 +206,3 @@ class Settings extends React.Component<SettingProps, {}> {
         </div>
     )
 }
-}
-
-export default withTranslation(['Settings'])(Settings)

src/lib/createStore.ts

@@ -1,14 +0,0 @@
-import { createHashHistory } from 'history'
-import { configure } from 'mobx'
-import { RouterStore, ConfigStore } from '@stores'
-
-// prepare MobX stores
-configure({ enforceActions: 'observed' })
-const history = createHashHistory()
-
-export const rootStores = {
-    router: new RouterStore(history),
-    store: new ConfigStore()
-}
-
-export const storeKeys = Object.keys(rootStores)

src/lib/request.ts

@@ -1,7 +1,7 @@
 import axios, { AxiosInstance } from 'axios'
 import { Partial, getLocalStorageItem } from '@lib/helper'
 import { isClashX, jsBridge } from '@lib/jsBridge'
-import { rootStores } from '@lib/createStore'
+import { ExternalControllerModal } from '@stores'
 import { Log } from '@models/Log'
 import { StreamReader } from './streamer'
 
@@ -117,7 +117,8 @@ export async function getInstance () {
         resp => resp,
         err => {
             if (!err.response || err.response.status === 401) {
-                rootStores.store.setShowAPIModal(true)
+                const { show } = ExternalControllerModal.useContainer()
+                show()
             }
             throw err
         }

src/models/BaseProps.ts

@@ -1,21 +1,11 @@
 import { CSSProperties, ReactNode } from 'react'
 import { RouteComponentProps } from 'react-router'
-import { RouterStore, ConfigStore } from '@stores'
 
 /**
  * expose base router component props
  * and mobx store to props
  */
-export interface BaseRouterProps extends RouteComponentProps<any>, BaseProps {}
+export interface BaseRouterProps extends RouteComponentProps<any> {}
-
-/**
- * use when component is inject by mobx
- */
-export interface BaseProps extends BaseComponentProps {
-    styles?: any
-    router?: RouterStore
-    store?: ConfigStore
-}
 
 export interface BaseComponentProps {
     className?: string

src/render.tsx

@@ -1,9 +1,7 @@
 import * as React from 'react'
 import { render } from 'react-dom'
-import { Provider } from 'mobx-react'
 import { HashRouter } from 'react-router-dom'
 import { I18nextProvider } from 'react-i18next'
-import { rootStores } from '@lib/createStore'
 import { BaseComponentProps } from '@models/BaseProps'
 import { APIInfo, Data, ClashXData, ExternalControllerModal } from '@stores'
 import App from '@containers/App'
@@ -27,13 +25,11 @@ export default function renderApp () {
     const rootEl = document.getElementById('root')
     const AppInstance = (
         <Store>
-            <Provider {...rootStores}>
             <HashRouter>
                 <I18nextProvider i18n={ i18n }>
                     <App />
                 </I18nextProvider>
             </HashRouter>
-            </Provider>
         </Store>
     )
 

src/stores/ConfigStore.ts

@@ -1,228 +0,0 @@
-import { observable, action, runInAction } from 'mobx'
-import * as yaml from 'yaml'
-import * as Models from '@models'
-import { jsBridge, isClashX } from '@lib/jsBridge'
-import * as API from '@lib/request'
-import { getLocalStorageItem, setLocalStorageItem, partition } from '@lib/helper'
-
-export class ConfigStore {
-
-    @observable
-    config: Models.Config = {
-        proxy: [],
-        proxyGroup: [],
-        rules: []
-    }
-
-    @observable
-    data: Models.Data = {
-        general: {},
-        proxy: [],
-        proxyGroup: [],
-        rules: []
-    }
-
-    @observable
-    apiInfo: Models.APIInfo = {
-        hostname: '127.0.0.1',
-        port: '9090',
-        secret: ''
-    }
-
-    @observable
-    showAPIModal = false
-
-    @observable
-    clashxData: Models.ClashXData = {
-        startAtLogin: false,
-        systemProxy: false
-    }
-
-    @action
-    async fetchAPIInfo () {
-        if (isClashX()) {
-            const apiInfo = await jsBridge.getAPIInfo()
-            runInAction(() => {
-                this.apiInfo = { hostname: apiInfo.host, port: apiInfo.port, secret: apiInfo.secret }
-            })
-            return
-        }
-        const info = await API.getExternalControllerConfig()
-
-        runInAction(() => {
-            this.apiInfo = { ...info }
-        })
-    }
-
-    @action
-    async fetchData () {
-        const [{ data: general }, rawProxies, rules] = await Promise.all([API.getConfig(), API.getProxies(), API.getRules()])
-
-        runInAction(() => {
-            this.data.general = {
-                port: general.port,
-                socksPort: general['socks-port'],
-                redirPort: general['redir-port'],
-                mode: general.mode,
-                logLevel: general['log-level'],
-                allowLan: general['allow-lan']
-            }
-
-            const policyGroup = new Set(['Selector', 'URLTest', 'Fallback', 'LoadBalance'])
-            const unUsedProxy = new Set(['DIRECT', 'REJECT', 'GLOBAL'])
-            const proxyList = rawProxies.data.proxies['GLOBAL'] as API.Group
-            const proxies = proxyList.all
-                .filter(key => !unUsedProxy.has(key))
-                .map(key => ({ ...rawProxies.data.proxies[key], name: key }))
-            const [proxy, groups] = partition(proxies, proxy => !policyGroup.has(proxy.type))
-            this.data.proxy = proxy as API.Proxy[]
-            this.data.proxyGroup = groups as API.Group[]
-            this.data.rules = rules.data.rules
-        })
-    }
-
-    @action
-    async fetchClashXData () {
-        const startAtLogin = await jsBridge.getStartAtLogin()
-        const systemProxy = await jsBridge.isSystemProxySet()
-
-        runInAction(() => {
-            this.clashxData = {
-                startAtLogin,
-                systemProxy
-            }
-        })
-    }
-
-    @action
-    async fetchAndParseConfig () {
-        const rawConfig = await jsBridge.readConfigString()
-
-        runInAction(() => {
-            // emit error when config is empty
-            // because read config might be error
-            if (!rawConfig) {
-                return
-            }
-
-            // otherwise parse ini
-            const config = yaml.parse(rawConfig)
-            const externalController = config['external-controller'] as string || ''
-            const host = externalController.split(':')
-
-            const proxies = config.Proxy as any[] || []
-            const proxy: Models.Proxy[] = proxies
-                .filter(p => ['vmess', 'ss', 'socks5'].includes(p.type))
-
-            const proxyGroups = config['Proxy Group'] as any[] || []
-            const proxyGroup: Models.ProxyGroup[] = proxyGroups
-                .filter(p => ['url-test', 'select', 'fallback'].includes(p.type))
-            const rules = config['Rule'] as any[] || []
-            const rule: Models.Rule[] = rules.map(r => r.split(',')).filter(r => r.length >= 3).map(r => ({
-                type: Models.RuleType[r[0] as string],
-                payload: r[1],
-                proxy: r[2]
-            }))
-            this.config = {
-                general: {
-                    port: config.port || 0,
-                    socksPort: config['socks-port'] || 0,
-                    redirPort: config['redir-port'] || 0,
-                    allowLan: config['allow-lan'] || false,
-                    externalControllerAddr: host[0] || '',
-                    externalControllerPort: host[1] || '',
-                    secret: config.secret || '',
-                    logLevel: config['log-level'] || 'info',
-                    mode: config.mode || 'Rule'
-                },
-                proxy,
-                proxyGroup,
-                rules: rule || []
-            }
-        })
-    }
-
-    @action
-    async fetchConfig () {
-        const { data: config } = await API.getConfig()
-        this.config = {
-            general: {
-                port: config.port,
-                socksPort: config['socks-port'],
-                redirPort: config['redir-port'],
-                allowLan: config['allow-lan'],
-                mode: config.mode,
-                externalControllerAddr: getLocalStorageItem('externalControllerAddr', '127.0.0.1'),
-                externalControllerPort: getLocalStorageItem('externalControllerPort', '9090'),
-                secret: getLocalStorageItem('secret', '')
-            }
-        }
-    }
-
-    @action
-    async updateConfig () {
-        const { general, proxy, proxyGroup, rules } = this.config
-        const externalController = `${general.externalControllerAddr}:${general.externalControllerPort}`
-        const Rule = rules.map(r => [r.type, r.payload, r.proxy].join(','))
-        const config = {
-            'external-controller': externalController,
-            port: general.port,
-            'socks-port': general.socksPort,
-            'redir-port': general.redirPort,
-            'allow-lan': general.allowLan,
-            secret: general.secret,
-            'log-level': general.logLevel,
-            mode: general.mode,
-            Proxy: proxy,
-            'Proxy Group': proxyGroup,
-            Rule
-        }
-        const data = yaml.stringify(config)
-        // console.log(data)
-        jsBridge.writeConfigWithString(data)
-    }
-
-    @action
-    async updateAPIInfo (info: Models.APIInfo) {
-        const { hostname, port, secret } = info
-        setLocalStorageItem('externalControllerAddr', hostname)
-        setLocalStorageItem('externalControllerPort', port)
-        setLocalStorageItem('secret', secret)
-        window.location.reload()
-    }
-
-    @action
-    setShowAPIModal (visible: boolean) {
-        runInAction(() => {
-            this.showAPIModal = visible
-        })
-    }
-
-    @action
-    async modifyProxyByIndexAndSave (index: number, config: Models.Proxy) {
-        const { proxy } = this.config
-        const fomatedConfig: Models.Proxy = {}
-        const { type } = config
-        let configList: string[] = []
-
-        switch (type) {
-        case 'ss':
-            configList = Models.SsProxyConfigList
-            break
-        case 'vmess':
-            configList = Models.VmessProxyConfigList
-            break
-        case 'socks5':
-            configList = Models.Socks5ProxyConfigList
-            break
-        }
-
-        for (const configKey of configList) {
-            fomatedConfig[configKey] = config[configKey]
-        }
-
-        proxy[index] = fomatedConfig
-        await this.updateConfig()
-        await this.fetchAndParseConfig()
-    }
-}

src/stores/RouterStore.ts

@@ -1,14 +0,0 @@
-import { History } from 'history'
-import { RouterStore as BaseRouterStore, syncHistoryWithStore } from 'mobx-react-router'
-
-export class RouterStore extends BaseRouterStore {
-    constructor (history?: History) {
-        super()
-
-        if (history) {
-            this.history = syncHistoryWithStore(history, this)
-        }
-    }
-}
-
-export default RouterStore

src/stores/index.ts

@@ -1,3 +1 @@
-export * from './ConfigStore'
-export * from './RouterStore'
 export * from './HookStore'