proxy operation implemented

src/components/Controller.tsx

@@ -21,9 +21,13 @@ export const Controller: React.FC<ControllerProp> = (props) => {
             wsc.updateWSCStatus()
         }
         updateStatus()
-        const id = setInterval(updateStatus, 1000)
+        const id = setInterval(updateStatus, 500)
 
         wsc.onWSCMessage((req: { connected: boolean }) => {
+            if (req['connected'] === undefined) {
+                return
+            }
+
             setConnected(req.connected)
             setTimeout(() => {
                 setInit(true)
@@ -35,11 +39,7 @@ export const Controller: React.FC<ControllerProp> = (props) => {
     }, [])
 
     useEffect(() => {
-        if (!init) {
-            return
-        }
-
-        if (connected) {
+        if (!init || connected) {
             return
         }
 
@@ -47,12 +47,12 @@ export const Controller: React.FC<ControllerProp> = (props) => {
             const ws = new WebSocket(`ws://127.0.0.1:${port}`)
             ws.onclose = (e: CloseEvent) => {
                 if (e.reason !== `FoundYakitWebSocketController` && (port + 1 <= max)) {
-                    setTimeout(() => findPort(port + 1, max), 1000)
+                    setTimeout(() => findPort(port + 1, max), 300)
                 }
 
                 if (port + 1 > max) {
                     setFindingPort(false)
-                    setAutoFindFailedReason("Yakit 未启动或无法监测到 WebSocket Controller 端口")
+                    setAutoFindFailedReason("Cannot found Yakit or Yakit WebSocket Controller Port is not right")
                 }
             }
             ws.onopen = () => {
@@ -67,21 +67,29 @@ export const Controller: React.FC<ControllerProp> = (props) => {
     const freeze = findingPort || (!init);
     const safeConnected = connected && init;
 
-    return <Card size={"small"} extra={safeConnected ? <Button>
-        断开链接
-    </Button> : <Button></Button>}>
-        {connected && init ? <Alert type={"success"} message={"已连接至 Yakit"}/> : <Form onSubmitCapture={e => {
-            e.preventDefault()
+    return <Card size={"small"} extra={safeConnected ? <Button size={"small"} danger={true} onClick={() => {
+        wsc.disconnect()
+    }}>
+        Disconnect
+    </Button> : undefined}>
+        {connected && init ?
+            <Alert type={"success"} message={"Yakit Connected"}/> :
+            <Form
+                onSubmitCapture={e => {
+                    e.preventDefault()
 
-            wsc.connect(port)
-        }}>
-            {autoFindFailedReason !== '' ? <Alert type={"error"} message={autoFindFailedReason}/> : undefined}
-            <Form.Item label={"端口"}>
-                <InputNumber disabled={freeze} value={port} onChange={e => setPort(e)}/>
-            </Form.Item>
-            <Form.Item>
-                <Button loading={freeze} htmlType={"submit"}>连接至 Yakit</Button>
-            </Form.Item>
-        </Form>}
+                    wsc.connect(port)
+                }}
+                size={"small"}
+            >
+                {autoFindFailedReason !== '' ? <Alert type={"error"} message={autoFindFailedReason}/> : undefined}
+                <Form.Item label={"Controller Port"}>
+                    <InputNumber disabled={freeze} value={port} onChange={e => setPort(e)}/>
+                </Form.Item>
+                <Form.Item>
+                    <Button size={"small"} type={"primary"} loading={freeze} htmlType={"submit"}>Connect to
+                        Yakit</Button>
+                </Form.Item>
+            </Form>}
     </Card>
 };

src/components/Proxifier.tsx

@@ -30,6 +30,10 @@ export const Proxifier: React.FC<ProxifierProp> = (props) => {
         }
 
         wsc.onProxyStatusMessage(msg => {
+            if (msg['proxy'] === undefined || msg['enable'] === undefined) {
+                return
+            }
+
             setInit(true)
             setProxyEnable(msg.enable)
             setCurrentProxy(msg.proxy)
@@ -42,19 +46,23 @@ export const Proxifier: React.FC<ProxifierProp> = (props) => {
             wsc.updateProxyStatus()
         }
         update()
-        const id = setInterval(update, 1000)
+        const id = setInterval(update, 500)
         return () => {
             clearInterval(id)
         }
     }, [])
 
-    return <Card title={`代理设置: ${proxyEnable ? currentProxy : "未启用"}`}>
+    return <Card title={`Proxy Set: ${proxyEnable ? currentProxy : "Non-Config"}`} size={"small"} extra={<>{
+        proxyEnable ? <Button size={"small"} onClick={() => {
+            wsc.clearproxy()
+        }}>停用</Button> : undefined
+    }</>}>
         <Form size={"small"} onSubmitCapture={e => {
             e.preventDefault()
             setInit(false)
             wsc.setproxy(config.scheme, config.host, config.port)
-        }} disabled={!init}>
-            <Form.Item label={"设置代理"}>
+        }} disabled={!init || proxyEnable}>
+            <Form.Item label={"Proxy Setting"}>
                 <Compact>
                     <Select
                         style={{width: 86}}
@@ -78,7 +86,7 @@ export const Proxifier: React.FC<ProxifierProp> = (props) => {
                 </Compact>
             </Form.Item>
             <Form.Item>
-                <Button htmlType={"submit"} loading={!init}>启用链接</Button>
+                <Button type={"primary"} htmlType={"submit"} loading={!init}>Enable Proxy</Button>
             </Form.Item>
         </Form>
     </Card>