feat: refactor proxy page

src/components/proxy/proxy-global.tsx

@@ -0,0 +1,98 @@
+import { useEffect, useRef, useState } from "react";
+import { useSWRConfig } from "swr";
+import { useLockFn } from "ahooks";
+import { Virtuoso } from "react-virtuoso";
+import { Box, IconButton } from "@mui/material";
+import { MyLocationRounded, NetworkCheckRounded } from "@mui/icons-material";
+import { ApiType } from "../../services/types";
+import { updateProxy } from "../../services/api";
+import delayManager from "../../services/delay";
+import ProxyItem from "./proxy-item";
+
+interface Props {
+  groupName: string;
+  curProxy?: string;
+  proxies: ApiType.ProxyItem[];
+}
+
+const ProxyGlobal = (props: Props) => {
+  const { groupName, curProxy, proxies } = props;
+
+  const { mutate } = useSWRConfig();
+  const virtuosoRef = useRef<any>();
+  const [now, setNow] = useState(curProxy || "DIRECT");
+
+  const onChangeProxy = useLockFn(async (name: string) => {
+    await updateProxy("GLOBAL", name);
+    mutate("getProxies");
+    setNow(name);
+  });
+
+  const onLocation = (smooth = true) => {
+    const index = proxies.findIndex((p) => p.name === now);
+
+    if (index >= 0) {
+      virtuosoRef.current?.scrollToIndex?.({
+        index,
+        align: "center",
+        behavior: smooth ? "smooth" : "auto",
+      });
+    }
+  };
+
+  const onCheckAll = useLockFn(async () => {
+    // rerender quickly
+    if (proxies.length) setTimeout(() => mutate("getProxies"), 500);
+
+    let names = proxies.map((p) => p.name);
+    while (names.length) {
+      const list = names.slice(0, 8);
+      names = names.slice(8);
+
+      await Promise.all(list.map((n) => delayManager.checkDelay(n, groupName)));
+
+      mutate("getProxies");
+    }
+  });
+
+  useEffect(() => onLocation(false), [groupName]);
+
+  useEffect(() => {
+    if (groupName === "DIRECT") setNow("DIRECT");
+    if (groupName === "GLOBAL") setNow(curProxy || "DIRECT");
+  }, [groupName, curProxy]);
+
+  return (
+    <>
+      <Box sx={{ px: 3, my: 0.5 }}>
+        <IconButton
+          size="small"
+          title="location"
+          onClick={() => onLocation(true)}
+        >
+          <MyLocationRounded />
+        </IconButton>
+        <IconButton size="small" title="check" onClick={onCheckAll}>
+          <NetworkCheckRounded />
+        </IconButton>
+      </Box>
+
+      <Virtuoso
+        ref={virtuosoRef}
+        style={{ height: "calc(100% - 40px)" }}
+        totalCount={proxies.length}
+        itemContent={(index) => (
+          <ProxyItem
+            groupName={groupName}
+            proxy={proxies[index]}
+            selected={proxies[index].name === now}
+            onClick={onChangeProxy}
+            sx={{ py: 0, px: 2 }}
+          />
+        )}
+      />
+    </>
+  );
+};
+
+export default ProxyGlobal;

src/components/proxy/proxy-group.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import { useSWRConfig } from "swr";
+import { useLockFn } from "ahooks";
 import { Virtuoso } from "react-virtuoso";
 import {
   Box,
@@ -35,14 +36,10 @@ const ProxyGroup = ({ group }: Props) => {
   const virtuosoRef = useRef<any>();
   const proxies = group.all ?? [];
 
-  const selectLockRef = useRef(false);
-  const onSelect = async (name: string) => {
+  const onSelect = useLockFn(async (name: string) => {
     // Todo: support another proxy group type
     if (group.type !== "Selector") return;
 
-    if (selectLockRef.current) return;
-    selectLockRef.current = true;
-
     const oldValue = now;
     try {
       setNow(name);
@@ -50,8 +47,6 @@ const ProxyGroup = ({ group }: Props) => {
     } catch {
       setNow(oldValue);
       return; // do not update profile
-    } finally {
-      selectLockRef.current = false;
     }
 
     try {
@@ -73,7 +68,7 @@ const ProxyGroup = ({ group }: Props) => {
     } catch (err) {
       console.error(err);
     }
-  };
+  });
 
   const onLocation = (smooth = true) => {
     const index = proxies.findIndex((p) => p.name === now);
@@ -87,11 +82,7 @@ const ProxyGroup = ({ group }: Props) => {
     }
   };
 
-  const checkLockRef = useRef(false);
-  const onCheckAll = async () => {
-    if (checkLockRef.current) return;
-    checkLockRef.current = true;
-
+  const onCheckAll = useLockFn(async () => {
     // rerender quickly
     if (proxies.length) setTimeout(() => mutate("getProxies"), 500);
 
@@ -106,9 +97,7 @@ const ProxyGroup = ({ group }: Props) => {
 
       mutate("getProxies");
     }
-
-    checkLockRef.current = false;
-  };
+  });
 
   // auto scroll to current index
   useEffect(() => {

src/pages/proxies.tsx

@@ -1,90 +1,51 @@
 import useSWR, { useSWRConfig } from "swr";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { Virtuoso } from "react-virtuoso";
+import { useEffect } from "react";
+import { useLockFn } from "ahooks";
 import { Button, ButtonGroup, List, Paper } from "@mui/material";
-import { getClashConfig, updateConfigs, updateProxy } from "../services/api";
+import { getClashConfig, updateConfigs } from "../services/api";
 import { patchClashConfig } from "../services/cmds";
 import { getProxies } from "../services/api";
 import BasePage from "../components/base/base-page";
-import ProxyItem from "../components/proxy/proxy-item";
 import ProxyGroup from "../components/proxy/proxy-group";
+import ProxyGlobal from "../components/proxy/proxy-global";
 
 const ProxyPage = () => {
   const { mutate } = useSWRConfig();
   const { data: proxiesData } = useSWR("getProxies", getProxies);
   const { data: clashConfig } = useSWR("getClashConfig", getClashConfig);
-  const [curProxy, setCurProxy] = useState<string>("DIRECT");
-  const curMode = clashConfig?.mode.toLowerCase();
-
-  // proxy groups
-  const { groups = [] } = proxiesData ?? {};
-  // proxies and sorted
-  const filterProxies = useMemo(() => {
-    if (!proxiesData?.proxies) return [];
-
-    const list = Object.values(proxiesData.proxies);
-    const retList = list.filter(
-      (p) => !p.all?.length && p.name !== "DIRECT" && p.name !== "REJECT"
-    );
-    const direct = list.filter((p) => p.name === "DIRECT");
-    const reject = list.filter((p) => p.name === "REJECT");
-
-    return direct.concat(retList).concat(reject);
-  }, [proxiesData]);
 
   const modeList = ["rule", "global", "direct"];
-  const asGroup = curMode === "rule" && groups.length;
+  const curMode = clashConfig?.mode.toLowerCase() ?? "direct";
+  const { groups = [], proxies = [] } = proxiesData ?? {};
 
   // make sure that fetch the proxies successfully
   useEffect(() => {
     if (
       (curMode === "rule" && !groups.length) ||
-      (curMode === "global" && filterProxies.length < 4)
+      (curMode === "global" && proxies.length < 2)
     ) {
       setTimeout(() => mutate("getProxies"), 500);
     }
-  }, [groups, filterProxies, curMode]);
+  }, [groups, proxies, curMode]);
 
-  // update the current proxy
-  useEffect(() => {
-    if (curMode === "direct") setCurProxy("DIRECT");
-    if (curMode === "global") {
-      const globalNow = proxiesData?.proxies?.GLOBAL?.now;
-      setCurProxy(globalNow || "DIRECT");
-    }
-  }, [curMode, proxiesData]);
-
-  const changeLockRef = useRef(false);
-  const onChangeMode = async (mode: string) => {
-    if (changeLockRef.current) return;
-    changeLockRef.current = true;
-
-    try {
-      // switch rapidly
-      await updateConfigs({ mode });
-      await patchClashConfig({ mode });
-      mutate("getClashConfig");
-    } finally {
-      changeLockRef.current = false;
-    }
-  };
-
-  const onChangeProxy = async (name: string) => {
-    if (curMode !== "global") return;
-    await updateProxy("GLOBAL", name);
-    setCurProxy(name);
-  };
+  const onChangeMode = useLockFn(async (mode: string) => {
+    // switch rapidly
+    await updateConfigs({ mode });
+    await patchClashConfig({ mode });
+    mutate("getClashConfig");
+  });
 
   // difference style
-  const pageStyle = asGroup ? {} : { height: "100%" };
-  const paperStyle: any = asGroup
+  const showGroup = curMode === "rule" && !!groups.length;
+  const pageStyle = showGroup ? {} : { height: "100%" };
+  const paperStyle: any = showGroup
     ? { mb: 0.5 }
     : { py: 1, height: "100%", boxSizing: "border-box" };
 
   return (
     <BasePage
       contentStyle={pageStyle}
-      title={asGroup ? "Proxy Groups" : "Proxies"}
+      title={showGroup ? "Proxy Groups" : "Proxies"}
       header={
         <ButtonGroup size="small">
           {modeList.map((mode) => (
@@ -101,26 +62,25 @@ const ProxyPage = () => {
       }
     >
       <Paper sx={{ borderRadius: 1, boxShadow: 2, ...paperStyle }}>
-        {asGroup ? (
+        {curMode === "rule" && !!groups.length && (
           <List>
             {groups.map((group) => (
               <ProxyGroup key={group.name} group={group} />
             ))}
           </List>
-        ) : (
-          // virtual list
-          <Virtuoso
-            style={{ height: "100%" }}
-            totalCount={filterProxies.length}
-            itemContent={(index) => (
-              <ProxyItem
-                groupName="GLOBAL"
-                proxy={filterProxies[index]}
-                selected={filterProxies[index].name === curProxy}
-                onClick={onChangeProxy}
-                sx={{ py: 0, px: 2 }}
-              />
-            )}
+        )}
+        {((curMode === "rule" && !groups.length) || curMode === "global") && (
+          <ProxyGlobal
+            groupName="GLOBAL"
+            curProxy={proxiesData?.global?.now}
+            proxies={proxies}
+          />
+        )}
+        {curMode === "direct" && (
+          <ProxyGlobal
+            groupName="DIRECT"
+            curProxy="DIRECT"
+            proxies={[proxiesData?.direct!].filter(Boolean)}
           />
         )}
       </Paper>

src/services/api.ts

@@ -84,33 +84,41 @@ export async function updateProxy(group: string, proxy: string) {
 export async function getProxies() {
   const instance = await getAxios();
   const response = await instance.get<any, any>("/proxies");
-  const proxies = (response?.proxies ?? {}) as Record<
+  const records = (response?.proxies ?? {}) as Record<
     string,
     ApiType.ProxyItem
   >;
 
-  const global = proxies["GLOBAL"];
+  const global = records["GLOBAL"];
+  const direct = records["DIRECT"];
+  const reject = records["REJECT"];
   const order = global?.all;
 
   let groups: ApiType.ProxyGroupItem[] = [];
 
   if (order) {
     groups = order
-      .filter((name) => proxies[name]?.all)
-      .map((name) => proxies[name])
+      .filter((name) => records[name]?.all)
+      .map((name) => records[name])
       .map((each) => ({
         ...each,
-        all: each.all!.map((item) => proxies[item]),
+        all: each.all!.map((item) => records[item]),
       }));
   } else {
-    groups = Object.values(proxies)
+    groups = Object.values(records)
       .filter((each) => each.name !== "GLOBAL" && each.all)
       .map((each) => ({
         ...each,
-        all: each.all!.map((item) => proxies[item]),
+        all: each.all!.map((item) => records[item]),
       }));
     groups.sort((a, b) => b.name.localeCompare(a.name));
   }
 
-  return { global, groups, proxies };
+  const proxies = [direct, reject].concat(
+    Object.values(records).filter(
+      (p) => !p.all?.length && p.name !== "DIRECT" && p.name !== "REJECT"
+    )
+  );
+
+  return { global, direct, groups, records, proxies };
 }