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];
-}

src/pages/_routers.tsx

@@ -16,16 +16,16 @@ export const routers = [
     link: "/profile",
     ele: ProfilesPage,
   },
-  {
-    label: "Label-Rules",
-    link: "/rules",
-    ele: RulesPage,
-  },
   {
     label: "Label-Connections",
     link: "/connections",
     ele: ConnectionsPage,
   },
+  {
+    label: "Label-Rules",
+    link: "/rules",
+    ele: RulesPage,
+  },
   {
     label: "Label-Logs",
     link: "/logs",

src/services/states.ts

@@ -17,7 +17,21 @@ export const atomLogData = atom<ApiType.LogItem[]>({
 
 export const atomEnableLog = atom<boolean>({
   key: "atomEnableLog",
-  default: true,
+  effects: [
+    ({ setSelf, onSet }) => {
+      const key = "enable-log";
+
+      setSelf(localStorage.getItem(key) !== "false");
+
+      onSet((newValue, _, isReset) => {
+        if (isReset) {
+          localStorage.removeItem(key);
+        } else {
+          localStorage.setItem(key, newValue.toString());
+        }
+      });
+    },
+  ],
 });
 
 // save the state of each profile item loading