refactor(Setting): get init state from store

src/containers/Settings/index.tsx

@@ -4,9 +4,11 @@ import { changeLanguage } from 'i18next'
 import { Header, Card, Row, Col, Switch, ButtonSelect, ButtonSelectOptions, Input, Icon } from '@components'
 import { ExternalControllerModal } from './components'
 import { I18nProps } from '@models'
-import { getConfig, updateConfig } from '@lib/request'
+import { updateConfig } from '@lib/request'
-import { getLocalStorageItem, setLocalStorageItem } from '@lib/helper'
+import { setLocalStorageItem, to } from '@lib/helper'
+import { rootStores } from '@lib/createStore'
 import './style.scss'
+import { isClashX } from '@lib/jsBridge'
 
 class Settings extends React.Component<I18nProps, {}> {
     state = {
@@ -16,9 +18,9 @@ class Settings extends React.Component<I18nProps, {}> {
         proxyMode: 'Rule',
         socks5ProxyPort: 7891,
         httpProxyPort: 7890,
-        externalControllerHost: getLocalStorageItem('externalControllerAddr', '127.0.0.1'),
+        externalControllerHost: '127.0.0.1',
-        externalControllerPort: getLocalStorageItem('externalControllerPort', '8080'),
+        externalControllerPort: '8080',
-        externalControllerSecret: getLocalStorageItem('secret', ''),
+        externalControllerSecret: '',
         showEditDrawer: false
     }
 
@@ -41,57 +43,45 @@ class Settings extends React.Component<I18nProps, {}> {
     }
 
     handleProxyModeChange = async (mode: string) => {
-        try {
+        const [, err] = await to(updateConfig({ mode }))
-            await updateConfig({ mode })
+        if (err === null) {
             this.setState({ proxyMode: mode })
-        } catch (err) {
-            throw err
         }
     }
 
     handleHttpPortSave = async () => {
-        try {
+        const [, err] = await to(updateConfig({ 'redir-port': this.state.httpProxyPort }))
-            await updateConfig({
+        if (err === null) {}
-                'redir-port': this.state.httpProxyPort
-            })
-        } catch (err) {
-            throw err
-        }
     }
 
     handleSocksPortSave = async () => {
-        try {
+        const [, err] = await to(updateConfig({ 'socket-port': this.state.socks5ProxyPort }))
-            await updateConfig({
+        if (err === null) {}
-                'socket-port': this.state.socks5ProxyPort
-            })
-        } catch (err) {
-            throw err
-        }
     }
 
     handleAllowLanChange = async (state: boolean) => {
-        try {
+        const [, err] = await to(updateConfig({ 'allow-lan': state }))
-            await updateConfig({
+        if (err === null) {
-                'allow-lan': state
-            })
             this.setState({ allowConnectFromLan: state })
-        } catch (err) {
-            throw err
         }
     }
 
     async componentDidMount () {
-        try {
+        if (isClashX()) {
-            const { data: config } = await getConfig()
+            await rootStores.config.fetchAndParseConfig()
-            this.setState({
+        } else {
-                proxyMode: config.mode,
+            await rootStores.config.fetchConfig()
-                httpProxyPort: config['redir-port'],
-                socks5ProxyPort: config['socket-port'],
-                allowConnectFromLan: config['allow-lan']
-            })
-        } catch (err) {
-            throw err
         }
+        const general = rootStores.config.config.general
+        this.setState({
+            allowConnectFromLan: general.allowLan,
+            proxyMode: general.mode,
+            socks5ProxyPort: general.socksPort,
+            httpProxyPort: general.port,
+            externalControllerHost: general.externalControllerAddr,
+            externalControllerPort: general.externalControllerPort,
+            externalControllerSecret: general.secret
+        })
     }
 
     render () {

src/models/Config.ts

@@ -32,7 +32,7 @@ export interface Config {
         /**
          * controller port
          */
-        externalControllerPort?: number
+        externalControllerPort?: string
 
         /**
          * controller address

src/stores/ConfigStore.ts

@@ -2,6 +2,8 @@ import { observable, action, runInAction } from 'mobx'
 import * as yaml from 'yaml'
 import * as Models from '@models'
 import { jsBridge } from '@lib/jsBridge'
+import { getConfig } from '@lib/request'
+import { getLocalStorageItem } from '@lib/helper'
 
 export class ConfigStore {
 
@@ -48,7 +50,7 @@ export class ConfigStore {
                     redirPort: config['redir-port'] || 0,
                     allowLan: config['allow-lan'] || false,
                     externalControllerAddr: host[0] || '',
-                    externalControllerPort: parseInt(host[1], 10) || 0,
+                    externalControllerPort: host[1] || '',
                     secret: config.secret || '',
                     logLevel: config['log-level'] || 'info',
                     mode: config.mode || 'Rule'
@@ -61,4 +63,21 @@ export class ConfigStore {
         })
     }
 
+    @action
+    async fetchConfig () {
+        const { data: config } = await getConfig()
+        this.config = {
+            general: {
+                port: config.port,
+                socksPort: config['socket-port'],
+                redirPort: config['redir-port'],
+                allowLan: config['allow-lan'],
+                mode: config.mode,
+                externalControllerAddr: getLocalStorageItem('externalControllerAddr', '127.0.0.1'),
+                externalControllerPort: getLocalStorageItem('externalControllerPort', '8080'),
+                secret: getLocalStorageItem('secret', '')
+            }
+        }
+    }
+
 }