refactor(log): use swr subscription (#1220)

src/pages/logs.tsx

@@ -6,17 +6,18 @@ import {
   PlayCircleOutlineRounded,
   PauseCircleOutlineRounded,
 } from "@mui/icons-material";
-import { useEnableLog, useLogData, useSetLogData } from "@/services/states";
+import { useLogData } from "@/hooks/use-log-data";
+import { useEnableLog } from "@/services/states";
 import { BaseEmpty, BasePage } from "@/components/base";
 import LogItem from "@/components/log/log-item";
 import { useCustomTheme } from "@/components/layout/use-custom-theme";
 import { BaseSearchBox } from "@/components/base/base-search-box";
 import { BaseStyledSelect } from "@/components/base/base-styled-select";
+import { mutate } from "swr";
 
 const LogPage = () => {
   const { t } = useTranslation();
-  const logData = useLogData();
-  const setLogData = useSetLogData();
+  const { data: logData = [] } = useLogData();
   const [enableLog, setEnableLog] = useEnableLog();
   const { theme } = useCustomTheme();
   const isDark = theme.palette.mode === "dark";
@@ -54,7 +55,9 @@ const LogPage = () => {
           <Button
             size="small"
             variant="contained"
-            onClick={() => setLogData([])}
+            // useSWRSubscription adds a prefix "$sub$" to the cache key
+            // https://github.com/vercel/swr/blob/1585a3e37d90ad0df8097b099db38f1afb43c95d/src/subscription/index.ts#L37
+            onClick={() => mutate("$sub$getClashLog", [])}
           >
             {t("Clear")}
           </Button>