refactor: replace recoil (#1137)

src/pages/_layout.tsx

@@ -14,8 +14,7 @@ import { useVerge } from "@/hooks/use-verge";
 import LogoSvg from "@/assets/image/logo.svg?react";
 import iconLight from "@/assets/image/icon_light.svg?react";
 import iconDark from "@/assets/image/icon_dark.svg?react";
-import { atomThemeMode } from "@/services/states";
-import { useRecoilState } from "recoil";
+import { useThemeMode } from "@/services/states";
 import { Notice } from "@/components/base";
 import { LayoutItem } from "@/components/layout/layout-item";
 import { LayoutControl } from "@/components/layout/layout-control";
@@ -36,7 +35,7 @@ dayjs.extend(relativeTime);
 const OS = getSystem();
 
 const Layout = () => {
-  const [mode] = useRecoilState(atomThemeMode);
+  const mode = useThemeMode();
   const isDark = mode === "light" ? false : true;
   const { t } = useTranslation();
   const { theme } = useCustomTheme();

src/pages/connections.tsx

@@ -1,12 +1,14 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useLockFn } from "ahooks";
 import { Box, Button, IconButton, MenuItem } from "@mui/material";
-import { useRecoilState } from "recoil";
 import { Virtuoso } from "react-virtuoso";
 import { useTranslation } from "react-i18next";
 import { TableChartRounded, TableRowsRounded } from "@mui/icons-material";
 import { closeAllConnections } from "@/services/api";
-import { atomConnectionSetting } from "@/services/states";
+import {
+  defaultConnectionSetting,
+  useConnectionSetting,
+} from "@/services/states";
 import { useClashInfo } from "@/hooks/use-clash";
 import { BaseEmpty, BasePage } from "@/components/base";
 import { useWebsocket } from "@/hooks/use-websocket";
@@ -34,9 +36,10 @@ const ConnectionsPage = () => {
   const [curOrderOpt, setOrderOpt] = useState("Default");
   const [connData, setConnData] = useState<IConnections>(initConn);
 
-  const [setting, setSetting] = useRecoilState(atomConnectionSetting);
+  const [setting, setSetting] = useConnectionSetting();
 
-  const isTableLayout = setting.layout === "table";
+  const isTableLayout =
+    (setting || defaultConnectionSetting).layout === "table";
 
   const orderOpts: Record<string, OrderFunc> = {
     Default: (list) =>
@@ -137,7 +140,7 @@ const ConnectionsPage = () => {
             size="small"
             onClick={() =>
               setSetting((o) =>
-                o.layout === "list"
+                o?.layout !== "table"
                   ? { ...o, layout: "table" }
                   : { ...o, layout: "list" }
               )

src/pages/logs.tsx

@@ -1,5 +1,4 @@
 import { useMemo, useState } from "react";
-import { useRecoilState } from "recoil";
 import { Box, Button, IconButton, MenuItem } from "@mui/material";
 import { Virtuoso } from "react-virtuoso";
 import { useTranslation } from "react-i18next";
@@ -7,7 +6,7 @@ import {
   PlayCircleOutlineRounded,
   PauseCircleOutlineRounded,
 } from "@mui/icons-material";
-import { atomEnableLog, atomLogData } from "@/services/states";
+import { useEnableLog, useLogData, useSetLogData } from "@/services/states";
 import { BaseEmpty, BasePage } from "@/components/base";
 import LogItem from "@/components/log/log-item";
 import { useCustomTheme } from "@/components/layout/use-custom-theme";
@@ -16,8 +15,9 @@ import { BaseStyledSelect } from "@/components/base/base-styled-select";
 
 const LogPage = () => {
   const { t } = useTranslation();
-  const [logData, setLogData] = useRecoilState(atomLogData);
-  const [enableLog, setEnableLog] = useRecoilState(atomEnableLog);
+  const logData = useLogData();
+  const setLogData = useSetLogData();
+  const [enableLog, setEnableLog] = useEnableLog();
   const { theme } = useCustomTheme();
   const isDark = theme.palette.mode === "dark";
   const [logState, setLogState] = useState("all");

src/pages/profiles.tsx

@@ -1,7 +1,6 @@
 import useSWR, { mutate } from "swr";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useLockFn } from "ahooks";
-import { useSetRecoilState } from "recoil";
 import { Box, Button, Grid, IconButton, Stack, Divider } from "@mui/material";
 import {
   DndContext,
@@ -35,7 +34,7 @@ import {
   reorderProfile,
   createProfile,
 } from "@/services/cmds";
-import { atomLoadingCache } from "@/services/states";
+import { useSetLoadingCache, useThemeMode } from "@/services/states";
 import { closeAllConnections } from "@/services/api";
 import { BasePage, DialogRef, Notice } from "@/components/base";
 import {
@@ -47,8 +46,6 @@ import { ProfileMore } from "@/components/profile/profile-more";
 import { useProfiles } from "@/hooks/use-profiles";
 import { ConfigViewer } from "@/components/setting/mods/config-viewer";
 import { throttle } from "lodash-es";
-import { useRecoilState } from "recoil";
-import { atomThemeMode } from "@/services/states";
 import { BaseStyledTextField } from "@/components/base/base-styled-text-field";
 import { listen } from "@tauri-apps/api/event";
 import { readTextFile } from "@tauri-apps/api/fs";
@@ -239,7 +236,7 @@ const ProfilePage = () => {
   });
 
   // 更新所有订阅
-  const setLoadingCache = useSetRecoilState(atomLoadingCache);
+  const setLoadingCache = useSetLoadingCache();
   const onUpdateAll = useLockFn(async () => {
     const throttleMutate = throttle(mutateProfiles, 2000, {
       trailing: true,
@@ -271,7 +268,7 @@ const ProfilePage = () => {
     const text = await readText();
     if (text) setUrl(text);
   };
-  const [mode] = useRecoilState(atomThemeMode);
+  const mode = useThemeMode();
   const islight = mode === "light" ? true : false;
   const dividercolor = islight
     ? "rgba(0, 0, 0, 0.06)"

src/pages/settings.tsx

@@ -7,8 +7,7 @@ import { openWebUrl } from "@/services/cmds";
 import SettingVerge from "@/components/setting/setting-verge";
 import SettingClash from "@/components/setting/setting-clash";
 import SettingSystem from "@/components/setting/setting-system";
-import { atomThemeMode } from "@/services/states";
-import { useRecoilState } from "recoil";
+import { useThemeMode } from "@/services/states";
 
 const SettingPage = () => {
   const { t } = useTranslation();
@@ -25,7 +24,7 @@ const SettingPage = () => {
     return openWebUrl("https://clash-verge-rev.github.io/guide/log.html");
   });
 
-  const [mode] = useRecoilState(atomThemeMode);
+  const mode = useThemeMode();
   const isDark = mode === "light" ? false : true;
 
   return (