feat: add use clash hook

src/components/setting/mods/clash-port-viewer.tsx

@@ -1,55 +1,37 @@
-import useSWR from "swr";
 import { forwardRef, useImperativeHandle, useState } from "react";
-import { useSetRecoilState } from "recoil";
 import { useTranslation } from "react-i18next";
 import { useLockFn } from "ahooks";
 import { List, ListItem, ListItemText, TextField } from "@mui/material";
-import { atomClashPort } from "@/services/states";
-import { getClashConfig } from "@/services/api";
-import { patchClashConfig } from "@/services/cmds";
+import { useClashInfo } from "@/hooks/use-clash";
 import { BaseDialog, DialogRef, Notice } from "@/components/base";
 
 export const ClashPortViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
 
-  const { data: config, mutate: mutateClash } = useSWR(
-    "getClashConfig",
-    getClashConfig
-  );
+  const { clashInfo, patchInfo } = useClashInfo();
 
   const [open, setOpen] = useState(false);
-  const [port, setPort] = useState(config?.["mixed-port"] ?? 9090);
-
-  const setGlobalClashPort = useSetRecoilState(atomClashPort);
+  const [port, setPort] = useState(clashInfo?.port ?? 7890);
 
   useImperativeHandle(ref, () => ({
     open: () => {
-      if (config?.["mixed-port"]) {
-        setPort(config["mixed-port"]);
-      }
+      if (clashInfo?.port) setPort(clashInfo?.port);
       setOpen(true);
     },
     close: () => setOpen(false),
   }));
 
   const onSave = useLockFn(async () => {
-    if (port < 1000) {
-      return Notice.error("The port should not < 1000");
+    if (port === clashInfo?.port) {
+      setOpen(false);
+      return;
     }
-    if (port > 65536) {
-      return Notice.error("The port should not > 65536");
-    }
-
-    setOpen(false);
-    if (port === config?.["mixed-port"]) return;
-
     try {
-      await patchClashConfig({ "mixed-port": port });
-      setGlobalClashPort(port);
+      await patchInfo({ "mixed-port": port });
+      setOpen(false);
       Notice.success("Change Clash port successfully!", 1000);
-      mutateClash();
     } catch (err: any) {
-      Notice.error(err.message || err.toString(), 5000);
+      Notice.error(err.message || err.toString(), 4000);
     }
   });
 

src/components/setting/mods/controller-viewer.tsx

@@ -1,17 +1,16 @@
-import useSWR from "swr";
 import { forwardRef, useImperativeHandle, useState } from "react";
 import { useLockFn } from "ahooks";
 import { useTranslation } from "react-i18next";
 import { List, ListItem, ListItemText, TextField } from "@mui/material";
-import { getClashInfo, patchClashConfig } from "@/services/cmds";
-import { getAxios } from "@/services/api";
+import { useClashInfo } from "@/hooks/use-clash";
 import { BaseDialog, DialogRef, Notice } from "@/components/base";
 
 export const ControllerViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
 
-  const { data: clashInfo, mutate } = useSWR("getClashInfo", getClashInfo);
+  const { clashInfo, patchInfo } = useClashInfo();
+
   const [controller, setController] = useState(clashInfo?.server || "");
   const [secret, setSecret] = useState(clashInfo?.secret || "");
 
@@ -26,14 +25,11 @@ export const ControllerViewer = forwardRef<DialogRef>((props, ref) => {
 
   const onSave = useLockFn(async () => {
     try {
-      await patchClashConfig({ "external-controller": controller, secret });
-      mutate();
-      // 刷新接口
-      getAxios(true);
+      await patchInfo({ "external-controller": controller, secret });
       Notice.success("Change Clash Config successfully!", 1000);
       setOpen(false);
-    } catch (err) {
-      console.log(err);
+    } catch (err: any) {
+      Notice.error(err.message || err.toString(), 4000);
     }
   });
 

src/components/setting/mods/web-ui-viewer.tsx

@@ -1,23 +1,22 @@
-import useSWR from "swr";
 import { forwardRef, useImperativeHandle, useState } from "react";
 import { useLockFn } from "ahooks";
 import { useTranslation } from "react-i18next";
 import { Button, Box, Typography } from "@mui/material";
 import { useVerge } from "@/hooks/use-verge";
-import { getClashInfo, openWebUrl } from "@/services/cmds";
+import { openWebUrl } from "@/services/cmds";
 import { BaseDialog, BaseEmpty, DialogRef, Notice } from "@/components/base";
+import { useClashInfo } from "@/hooks/use-clash";
 import { WebUIItem } from "./web-ui-item";
 
 export const WebUIViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
 
+  const { clashInfo } = useClashInfo();
   const { verge, patchVerge, mutateVerge } = useVerge();
 
   const [open, setOpen] = useState(false);
   const [editing, setEditing] = useState(false);
 
-  const { data: clashInfo } = useSWR("getClashInfo", getClashInfo);
-
   useImperativeHandle(ref, () => ({
     open: () => setOpen(true),
     close: () => setOpen(false),
@@ -53,9 +52,7 @@ export const WebUIViewer = forwardRef<DialogRef>((props, ref) => {
       if (url.includes("%port") || url.includes("%secret")) {
         if (!clashInfo) throw new Error("failed to get clash info");
         if (!clashInfo.server?.includes(":")) {
-          throw new Error(
-            `failed to parse server with status ${clashInfo.status}`
-          );
+          throw new Error(`failed to parse the server "${clashInfo.server}"`);
         }
 
         const port = clashInfo.server

src/components/setting/setting-clash.tsx

@@ -1,4 +1,3 @@
-import useSWR from "swr";
 import { useRef } from "react";
 import { useTranslation } from "react-i18next";
 import {
@@ -10,9 +9,8 @@ import {
   IconButton,
 } from "@mui/material";
 import { ArrowForward } from "@mui/icons-material";
-import { patchClashConfig } from "@/services/cmds";
-import { getClashConfig, getVersion, updateConfigs } from "@/services/api";
 import { DialogRef } from "@/components/base";
+import { useClash } from "@/hooks/use-clash";
 import { GuardState } from "./mods/guard-state";
 import { CoreSwitch } from "./mods/core-switch";
 import { WebUIViewer } from "./mods/web-ui-viewer";
@@ -28,18 +26,14 @@ interface Props {
 const SettingClash = ({ onError }: Props) => {
   const { t } = useTranslation();
 
-  const { data: clashConfig, mutate: mutateClash } = useSWR(
-    "getClashConfig",
-    getClashConfig
-  );
-  const { data: versionData } = useSWR("getVersion", getVersion);
+  const { clash, version, mutateClash, patchClash } = useClash();
 
   const {
     ipv6,
     "allow-lan": allowLan,
     "log-level": logLevel,
     "mixed-port": mixedPort,
-  } = clashConfig ?? {};
+  } = clash ?? {};
 
   const webRef = useRef<DialogRef>(null);
   const fieldRef = useRef<DialogRef>(null);
@@ -50,15 +44,6 @@ const SettingClash = ({ onError }: Props) => {
   const onChangeData = (patch: Partial<IConfigData>) => {
     mutateClash((old) => ({ ...(old! || {}), ...patch }), false);
   };
-  const onUpdateData = async (patch: Partial<IConfigData>) => {
-    await updateConfigs(patch);
-    await patchClashConfig(patch);
-  };
-
-  // get clash core version
-  const clashVer = versionData?.premium
-    ? `${versionData.version} Premium`
-    : versionData?.version || "-";
 
   return (
     <SettingList title={t("Clash Setting")}>
@@ -74,7 +59,7 @@ const SettingClash = ({ onError }: Props) => {
           onCatch={onError}
           onFormat={onSwitchFormat}
           onChange={(e) => onChangeData({ "allow-lan": e })}
-          onGuard={(e) => onUpdateData({ "allow-lan": e })}
+          onGuard={(e) => patchClash({ "allow-lan": e })}
         >
           <Switch edge="end" />
         </GuardState>
@@ -87,7 +72,7 @@ const SettingClash = ({ onError }: Props) => {
           onCatch={onError}
           onFormat={onSwitchFormat}
           onChange={(e) => onChangeData({ ipv6: e })}
-          onGuard={(e) => onUpdateData({ ipv6: e })}
+          onGuard={(e) => patchClash({ ipv6: e })}
         >
           <Switch edge="end" />
         </GuardState>
@@ -100,7 +85,7 @@ const SettingClash = ({ onError }: Props) => {
           onCatch={onError}
           onFormat={(e: any) => e.target.value}
           onChange={(e) => onChangeData({ "log-level": e })}
-          onGuard={(e) => onUpdateData({ "log-level": e })}
+          onGuard={(e) => patchClash({ "log-level": e })}
         >
           <Select size="small" sx={{ width: 100, "> div": { py: "7.5px" } }}>
             <MenuItem value="debug">Debug</MenuItem>
@@ -159,7 +144,7 @@ const SettingClash = ({ onError }: Props) => {
       </SettingItem>
 
       <SettingItem label={t("Clash Core")} extra={<CoreSwitch />}>
-        <Typography sx={{ py: "7px" }}>{clashVer}</Typography>
+        <Typography sx={{ py: "7px", pr: 1 }}>{version}</Typography>
       </SettingItem>
     </SettingList>
   );