From d522191f69efd9db32e8c9ed9f8b31ab4b3eccc9 Mon Sep 17 00:00:00 2001
From: GyDi <segydi@foxmail.com>
Date: Sat, 24 Sep 2022 19:03:14 +0800
Subject: [PATCH] fix: save enable log on localstorage

---
 src/components/layout/use-log-setup.ts  | 18 ++++++++----------
 src/components/layout/use-log-toggle.ts | 24 ------------------------
 src/pages/_routers.tsx                  | 10 +++++-----
 src/services/states.ts                  | 16 +++++++++++++++-
 4 files changed, 28 insertions(+), 40 deletions(-)
 delete mode 100644 src/components/layout/use-log-toggle.ts

diff --git a/src/components/layout/use-log-setup.ts b/src/components/layout/use-log-setup.ts
index 75885a4..efd372f 100644
--- a/src/components/layout/use-log-setup.ts
+++ b/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]);
 }
diff --git a/src/components/layout/use-log-toggle.ts b/src/components/layout/use-log-toggle.ts
deleted file mode 100644
index 36e1f80..0000000
--- a/src/components/layout/use-log-toggle.ts
+++ /dev/null
@@ -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];
-}
diff --git a/src/pages/_routers.tsx b/src/pages/_routers.tsx
index bb3d7c9..f53ed48 100644
--- a/src/pages/_routers.tsx
+++ b/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",
diff --git a/src/services/states.ts b/src/services/states.ts
index 3f322e3..664fc3b 100644
--- a/src/services/states.ts
+++ b/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