feat: add use clash hook

src/components/layout/use-log-setup.ts

@@ -1,48 +1,36 @@
 import dayjs from "dayjs";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { useRecoilValue, useSetRecoilState } from "recoil";
-import { listen } from "@tauri-apps/api/event";
-import { getInformation } from "@/services/api";
 import { getClashLogs } from "@/services/cmds";
+import { useClashInfo } from "@/hooks/use-clash";
 import { atomEnableLog, atomLogData } from "@/services/states";
 
 const MAX_LOG_NUM = 1000;
 
 // setup the log websocket
-export default function useLogSetup() {
-  const [refresh, setRefresh] = useState({});
+export const useLogSetup = () => {
+  const { clashInfo } = useClashInfo();
 
   const enableLog = useRecoilValue(atomEnableLog);
   const setLogData = useSetRecoilState(atomLogData);
 
   useEffect(() => {
-    if (!enableLog) return;
+    if (!enableLog || !clashInfo) return;
 
     getClashLogs().then(setLogData);
 
-    const handler = (event: MessageEvent<any>) => {
+    const { server = "", secret = "" } = clashInfo;
+    const ws = new WebSocket(`ws://${server}/logs?token=${secret}`);
+
+    ws.addEventListener("message", (event) => {
       const data = JSON.parse(event.data) as ILogItem;
       const time = dayjs().format("MM-DD HH:mm:ss");
       setLogData((l) => {
         if (l.length >= MAX_LOG_NUM) l.shift();
         return [...l, { ...data, time }];
       });
-    };
-
-    const ws = getInformation().then((info) => {
-      const { server = "", secret = "" } = info;
-      const ws = new WebSocket(`ws://${server}/logs?token=${secret}`);
-      ws.addEventListener("message", handler);
-      return ws;
     });
 
-    const unlisten = listen("verge://refresh-clash-config", () =>
-      setRefresh({})
-    );
-
-    return () => {
-      ws.then((ws) => ws?.close());
-      unlisten.then((fn) => fn());
-    };
-  }, [refresh, enableLog]);
-}
+    return () => ws?.close();
+  }, [clashInfo, enableLog]);
+};