fix: save enable log on localstorage

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

@@ -1,11 +1,10 @@
 import dayjs from "dayjs";
 import { useEffect, useState } from "react";
-import { useSetRecoilState } from "recoil";
+import { useRecoilValue, useSetRecoilState } from "recoil";
 import { listen } from "@tauri-apps/api/event";
 import { getInformation } from "@/services/api";
 import { getClashLogs } from "@/services/cmds";
-import { atomLogData } from "@/services/states";
-import useLogToggle from "./use-log-toggle";
+import { atomEnableLog, atomLogData } from "@/services/states";
 
 const MAX_LOG_NUM = 1000;
 
@@ -13,7 +12,7 @@ const MAX_LOG_NUM = 1000;
 export default function useLogSetup() {
   const [refresh, setRefresh] = useState({});
 
-  const [enableLog] = useLogToggle();
+  const enableLog = useRecoilValue(atomEnableLog);
   const setLogData = useSetRecoilState(atomLogData);
 
   useEffect(() => {
@@ -21,8 +20,6 @@ export default function useLogSetup() {
 
     getClashLogs().then(setLogData);
 
-    let ws: WebSocket = null!;
-
     const handler = (event: MessageEvent<any>) => {
       const data = JSON.parse(event.data) as ApiType.LogItem;
       const time = dayjs().format("MM-DD HH:mm:ss");
@@ -32,10 +29,11 @@ export default function useLogSetup() {
       });
     };
 
-    getInformation().then((info) => {
+    const ws = getInformation().then((info) => {
       const { server = "", secret = "" } = info;
-      ws = new WebSocket(`ws://${server}/logs?token=${secret}`);
+      const ws = new WebSocket(`ws://${server}/logs?token=${secret}`);
       ws.addEventListener("message", handler);
+      return ws;
     });
 
     const unlisten = listen("verge://refresh-clash-config", () =>
@@ -43,8 +41,8 @@ export default function useLogSetup() {
     );
 
     return () => {
-      ws?.close();
-      unlisten?.then((fn) => fn());
+      ws.then((ws) => ws?.close());
+      unlisten.then((fn) => fn());
     };
   }, [refresh, enableLog]);
 }

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

@@ -1,24 +0,0 @@
-import { useEffect } from "react";
-import { useRecoilState } from "recoil";
-import { atomEnableLog } from "@/services/states";
-
-const LOG_KEY = "enable-log";
-
-export default function useLogToggle() {
-  const [enableLog, setEnableLog] = useRecoilState(atomEnableLog);
-
-  useEffect(() => {
-    try {
-      setEnableLog(localStorage.getItem(LOG_KEY) !== "false");
-    } catch {}
-  }, []);
-
-  const setter = (enable: boolean) => {
-    try {
-      localStorage.setItem(LOG_KEY, enable.toString());
-    } catch {}
-    setEnableLog(enable);
-  };
-
-  return [enableLog, setter];
-}