feat: proxy page use swr

src/pages/proxy.tsx

@@ -1,19 +1,11 @@
-import { useEffect, useState } from "react";
+import useSWR from "swr";
 import { Box, List, Typography } from "@mui/material";
 import services from "../services";
 import ProxyGroup from "../components/proxy-group";
-import type { ProxyGroupItem } from "../services/proxy";
 
 const ProxyPage = () => {
-  const [groups, setGroups] = useState<ProxyGroupItem[]>([]);
+  const { data } = useSWR("getProxies", services.getProxies);
-
+  const { groups = [] } = data ?? {};
-  useEffect(() => {
-    // Todo
-    // result cache
-    services.getProxyInfo().then((res) => {
-      setGroups(res.groups);
-    });
-  }, []);
 
   return (
     <Box sx={{ width: 0.9, maxWidth: "850px", mx: "auto", mb: 2 }}>

src/pages/rules.tsx

@@ -1,6 +1,7 @@
 import { useRef, useState } from "react";
 import useSWR, { useSWRConfig } from "swr";
 import { Box, Button, Grid, TextField, Typography } from "@mui/material";
+import services from "../services";
 import {
   getProfiles,
   importProfile,
@@ -35,6 +36,7 @@ const RulesPage = () => {
     putProfiles(index)
       .then(() => {
         mutate("getProfiles", { ...profiles, current: index }, true);
+        mutate("getProxies", services.getProxies());
       })
       .catch((err) => {
         console.error(err);

src/services/proxy.ts

@@ -17,7 +17,7 @@ export type ProxyGroupItem = Omit<ProxyItem, "all"> & {
 };
 
 /// Get the Proxy infomation
-export async function getProxyInfo() {
+export async function getProxies() {
   const axiosIns = await getAxios();
   const response = await axiosIns.get<any, any>("/proxies");
   const proxies = (response?.proxies ?? {}) as Record<string, ProxyItem>;