feat: filter proxy and display type

src/components/proxy/proxy-global.tsx

@@ -2,11 +2,19 @@ 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 { Box, IconButton, TextField } from "@mui/material";
+import {
+  MyLocationRounded,
+  NetworkCheckRounded,
+  FilterAltRounded,
+  FilterAltOffRounded,
+  VisibilityRounded,
+  VisibilityOffRounded,
+} from "@mui/icons-material";
 import { ApiType } from "../../services/types";
 import { updateProxy } from "../../services/api";
 import delayManager from "../../services/delay";
+import useFilterProxy from "./use-filter-proxy";
 import ProxyItem from "./proxy-item";
 
 interface Props {
@@ -19,8 +27,13 @@ const ProxyGlobal = (props: Props) => {
   const { groupName, curProxy, proxies } = props;
 
   const { mutate } = useSWRConfig();
-  const virtuosoRef = useRef<any>();
   const [now, setNow] = useState(curProxy || "DIRECT");
+  const [showType, setShowType] = useState(false);
+  const [showFilter, setShowFilter] = useState(false);
+  const [filterText, setFilterText] = useState("");
+
+  const virtuosoRef = useRef<any>();
+  const filterProxies = useFilterProxy(proxies, groupName, filterText);
 
   const onChangeProxy = useLockFn(async (name: string) => {
     await updateProxy("GLOBAL", name);
@@ -29,7 +42,7 @@ const ProxyGlobal = (props: Props) => {
   });
 
   const onLocation = (smooth = true) => {
-    const index = proxies.findIndex((p) => p.name === now);
+    const index = filterProxies.findIndex((p) => p.name === now);
 
     if (index >= 0) {
       virtuosoRef.current?.scrollToIndex?.({
@@ -41,22 +54,22 @@ const ProxyGlobal = (props: Props) => {
   };
 
   const onCheckAll = useLockFn(async () => {
-    // rerender quickly
-    if (proxies.length) setTimeout(() => mutate("getProxies"), 500);
+    const names = filterProxies.map((p) => p.name);
 
-    let names = proxies.map((p) => p.name);
-    while (names.length) {
-      const list = names.slice(0, 8);
-      names = names.slice(8);
+    await delayManager.checkListDelay(
+      { names, groupName, skipNum: 8, maxTimeout: 600 },
+      () => mutate("getProxies")
+    );
 
-      await Promise.all(list.map((n) => delayManager.checkDelay(n, groupName)));
-
-      mutate("getProxies");
-    }
+    mutate("getProxies");
   });
 
   useEffect(() => onLocation(false), [groupName]);
 
+  useEffect(() => {
+    if (!showFilter) setFilterText("");
+  }, [showFilter]);
+
   useEffect(() => {
     if (groupName === "DIRECT") setNow("DIRECT");
     if (groupName === "GLOBAL") setNow(curProxy || "DIRECT");
@@ -64,7 +77,15 @@ const ProxyGlobal = (props: Props) => {
 
   return (
     <>
-      <Box sx={{ px: 3, my: 0.5 }}>
+      <Box
+        sx={{
+          px: 3,
+          my: 0.5,
+          display: "flex",
+          alignItems: "center",
+          button: { mr: 0.5 },
+        }}
+      >
         <IconButton
           size="small"
           title="location"
@@ -72,20 +93,50 @@ const ProxyGlobal = (props: Props) => {
         >
           <MyLocationRounded />
         </IconButton>
+
         <IconButton size="small" title="check" onClick={onCheckAll}>
           <NetworkCheckRounded />
         </IconButton>
+
+        <IconButton
+          size="small"
+          title="check"
+          onClick={() => setShowType(!showType)}
+        >
+          {showType ? <VisibilityRounded /> : <VisibilityOffRounded />}
+        </IconButton>
+
+        <IconButton
+          size="small"
+          title="check"
+          onClick={() => setShowFilter(!showFilter)}
+        >
+          {showFilter ? <FilterAltRounded /> : <FilterAltOffRounded />}
+        </IconButton>
+
+        {showFilter && (
+          <TextField
+            autoFocus
+            hiddenLabel
+            value={filterText}
+            size="small"
+            variant="outlined"
+            placeholder="Filter conditions"
+            onChange={(e) => setFilterText(e.target.value)}
+            sx={{ ml: 0.5, flex: "1 1 auto", input: { py: 0.65, px: 1 } }}
+          />
+        )}
       </Box>
 
       <Virtuoso
         ref={virtuosoRef}
         style={{ height: "calc(100% - 40px)" }}
-        totalCount={proxies.length}
+        totalCount={filterProxies.length}
         itemContent={(index) => (
           <ProxyItem
             groupName={groupName}
-            proxy={proxies[index]}
-            selected={proxies[index].name === now}
+            proxy={filterProxies[index]}
+            selected={filterProxies[index].name === now}
             onClick={onChangeProxy}
             sx={{ py: 0, px: 2 }}
           />