use new configs PATCH API

src/api/configs.js

@@ -11,12 +11,20 @@ export async function fetchConfigs(apiConfig) {
 // req body
 // { Path: string }
 
+function configsPatchWorkaround(o) {
+  // backward compatibility for older clash  using `socket-port`
+  if ('socks-port' in o) {
+    o['socket-port'] = o['socks-port'];
+  }
+  return o;
+}
+
 export async function updateConfigs(apiConfig, o) {
   const { url, init } = getURLAndInit(apiConfig);
   return await fetch(url + endpoint, {
     ...init,
     method: 'PATCH',
     // mode: 'cors',
-    body: JSON.stringify(o)
+    body: JSON.stringify(configsPatchWorkaround(o))
   });
 }

src/components/Config.js

@@ -99,7 +99,7 @@ function Config({ configs }) {
         updateConfigs({ [name]: value });
         break;
       case 'redir-port':
-      case 'socket-port':
+      case 'socks-port':
       case 'port':
         if (target.value !== '') {
           const num = parseInt(target.value, 10);
@@ -117,7 +117,7 @@ function Config({ configs }) {
     const { name, value } = target;
     switch (name) {
       case 'port':
-      case 'socket-port':
+      case 'socks-port':
       case 'redir-port': {
         const num = parseInt(value, 10);
         if (num < 0 || num > 65535) return;
@@ -144,8 +144,8 @@ function Config({ configs }) {
         <div>
           <div className={s0.label}>SOCKS5 Proxy Port</div>
           <Input
-            name="socket-port"
-            value={configState['socket-port']}
+            name="socks-port"
+            value={configState['socks-port']}
             onChange={handleInputOnChange}
             onBlur={handleInputOnBlur}
           />

src/ducks/configs.js

@@ -99,7 +99,7 @@ export function updateConfigs(partialConfg) {
 
 const initialState = {
   port: 7890,
-  'socket-port': 7891,
+  'socks-port': 7891,
   'redir-port': 0,
   'allow-lan': false,
   mode: 'Rule',