feat: support sort proxy node and custom test url

src/components/proxy/proxy-global.tsx

@@ -1,14 +1,15 @@
 import useSWR, { useSWRConfig } from "swr";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useLockFn } from "ahooks";
 import { Virtuoso } from "react-virtuoso";
 import { ApiType } from "../../services/types";
 import { updateProxy } from "../../services/api";
 import { getProfiles, patchProfile } from "../../services/cmds";
-import useFilterProxy, { ProxySortType } from "./use-filter-proxy";
+import useSortProxy, { ProxySortType } from "./use-sort-proxy";
+import useFilterProxy from "./use-filter-proxy";
 import delayManager from "../../services/delay";
-import ProxyItem from "./proxy-item";
 import ProxyHead from "./proxy-head";
+import ProxyItem from "./proxy-item";
 
 interface Props {
   groupName: string;
@@ -25,34 +26,11 @@ const ProxyGlobal = (props: Props) => {
 
   const [showType, setShowType] = useState(true);
   const [sortType, setSortType] = useState<ProxySortType>(0);
-
-  const [urlText, setUrlText] = useState("");
   const [filterText, setFilterText] = useState("");
 
   const virtuosoRef = useRef<any>();
   const filterProxies = useFilterProxy(proxies, groupName, filterText);
-
+  const sortedProxies = useSortProxy(filterProxies, groupName, sortType);
-  const sortedProxies = useMemo(() => {
-    if (sortType === 0) return filterProxies;
-
-    const list = filterProxies.slice();
-
-    if (sortType === 1) {
-      list.sort((a, b) => a.name.localeCompare(b.name));
-    } else {
-      list.sort((a, b) => {
-        const ad = delayManager.getDelay(a.name, groupName);
-        const bd = delayManager.getDelay(b.name, groupName);
-
-        if (ad === -1) return 1;
-        if (bd === -1) return -1;
-
-        return ad - bd;
-      });
-    }
-
-    return list;
-  }, [filterProxies, sortType, groupName]);
 
   const { data: profiles } = useSWR("getProfiles", getProfiles);
 
@@ -129,13 +107,12 @@ const ProxyGlobal = (props: Props) => {
         sx={{ px: 3, my: 0.5, button: { mr: 0.5 } }}
         showType={showType}
         sortType={sortType}
-        urlText={urlText}
+        groupName={groupName}
         filterText={filterText}
         onLocation={onLocation}
         onCheckDelay={onCheckAll}
         onShowType={setShowType}
         onSortType={setSortType}
-        onUrlText={setUrlText}
         onFilterText={setFilterText}
       />
 

src/components/proxy/proxy-group.tsx

@@ -6,28 +6,22 @@ import {
   Box,
   Collapse,
   Divider,
-  IconButton,
   List,
   ListItem,
   ListItemText,
-  TextField,
 } from "@mui/material";
 import {
   SendRounded,
   ExpandLessRounded,
   ExpandMoreRounded,
-  MyLocationRounded,
-  NetworkCheckRounded,
-  FilterAltRounded,
-  FilterAltOffRounded,
-  VisibilityRounded,
-  VisibilityOffRounded,
 } from "@mui/icons-material";
 import { ApiType } from "../../services/types";
 import { updateProxy } from "../../services/api";
 import { getProfiles, patchProfile } from "../../services/cmds";
-import delayManager from "../../services/delay";
+import useSortProxy, { ProxySortType } from "./use-sort-proxy";
 import useFilterProxy from "./use-filter-proxy";
+import delayManager from "../../services/delay";
+import ProxyHead from "./proxy-head";
 import ProxyItem from "./proxy-item";
 
 interface Props {
@@ -38,12 +32,14 @@ const ProxyGroup = ({ group }: Props) => {
   const { mutate } = useSWRConfig();
   const [open, setOpen] = useState(false);
   const [now, setNow] = useState(group.now);
+
   const [showType, setShowType] = useState(false);
-  const [showFilter, setShowFilter] = useState(false);
+  const [sortType, setSortType] = useState<ProxySortType>(0);
   const [filterText, setFilterText] = useState("");
 
   const virtuosoRef = useRef<any>();
   const filterProxies = useFilterProxy(group.all, group.name, filterText);
+  const sortedProxies = useSortProxy(filterProxies, group.name, sortType);
 
   const { data: profiles } = useSWR("getProfiles", getProfiles);
 
@@ -81,7 +77,7 @@ const ProxyGroup = ({ group }: Props) => {
   });
 
   const onLocation = (smooth = true) => {
-    const index = filterProxies.findIndex((p) => p.name === now);
+    const index = sortedProxies.findIndex((p) => p.name === now);
 
     if (index >= 0) {
       virtuosoRef.current?.scrollToIndex?.({
@@ -93,7 +89,7 @@ const ProxyGroup = ({ group }: Props) => {
   };
 
   const onCheckAll = useLockFn(async () => {
-    const names = filterProxies.map((p) => p.name);
+    const names = sortedProxies.map((p) => p.name);
     const groupName = group.name;
 
     await delayManager.checkListDelay(
@@ -104,10 +100,6 @@ const ProxyGroup = ({ group }: Props) => {
     mutate("getProxies");
   });
 
-  useEffect(() => {
-    if (!showFilter) setFilterText("");
-  }, [showFilter]);
-
   // auto scroll to current index
   useEffect(() => {
     if (open) {
@@ -135,66 +127,20 @@ const ProxyGroup = ({ group }: Props) => {
       </ListItem>
 
       <Collapse in={open} timeout="auto" unmountOnExit>
-        <Box
+        <ProxyHead
-          sx={{
+          sx={{ pl: 4, pr: 3, my: 0.5, button: { mr: 0.5 } }}
-            pl: 4,
+          showType={showType}
-            pr: 3,
+          sortType={sortType}
-            my: 0.5,
+          groupName={group.name}
-            display: "flex",
+          filterText={filterText}
-            alignItems: "center",
+          onLocation={onLocation}
-            button: { mr: 0.5 },
+          onCheckDelay={onCheckAll}
-          }}
+          onShowType={setShowType}
-        >
+          onSortType={setSortType}
-          <IconButton
+          onFilterText={setFilterText}
-            size="small"
-            title="location"
-            color="inherit"
-            onClick={() => onLocation(true)}
-          >
-            <MyLocationRounded />
-          </IconButton>
-
-          <IconButton
-            size="small"
-            title="delay check"
-            color="inherit"
-            onClick={onCheckAll}
-          >
-            <NetworkCheckRounded />
-          </IconButton>
-
-          <IconButton
-            size="small"
-            title="proxy detail"
-            color="inherit"
-            onClick={() => setShowType(!showType)}
-          >
-            {showType ? <VisibilityRounded /> : <VisibilityOffRounded />}
-          </IconButton>
-
-          <IconButton
-            size="small"
-            title="filter"
-            color="inherit"
-            onClick={() => setShowFilter(!showFilter)}
-          >
-            {showFilter ? <FilterAltRounded /> : <FilterAltOffRounded />}
-          </IconButton>
-
-          {showFilter && (
-            <TextField
-              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>
 
-        {!filterProxies.length && (
+        {!sortedProxies.length && (
           <Box
             sx={{
               py: 3,
@@ -207,16 +153,16 @@ const ProxyGroup = ({ group }: Props) => {
           </Box>
         )}
 
-        {filterProxies.length >= 10 ? (
+        {sortedProxies.length >= 10 ? (
           <Virtuoso
             ref={virtuosoRef}
             style={{ height: "320px", marginBottom: "4px" }}
-            totalCount={filterProxies.length}
+            totalCount={sortedProxies.length}
             itemContent={(index) => (
               <ProxyItem
                 groupName={group.name}
-                proxy={filterProxies[index]}
+                proxy={sortedProxies[index]}
-                selected={filterProxies[index].name === now}
+                selected={sortedProxies[index].name === now}
                 showType={showType}
                 sx={{ py: 0, pl: 4 }}
                 onClick={onChangeProxy}
@@ -229,7 +175,7 @@ const ProxyGroup = ({ group }: Props) => {
             disablePadding
             sx={{ maxHeight: "320px", overflow: "auto", mb: "4px" }}
           >
-            {filterProxies.map((proxy) => (
+            {sortedProxies.map((proxy) => (
               <ProxyItem
                 key={proxy.name}
                 groupName={group.name}

src/components/proxy/proxy-head.tsx

@@ -13,27 +13,29 @@ import {
   SortByAlphaRounded,
   SortRounded,
 } from "@mui/icons-material";
-import type { ProxySortType } from "./use-filter-proxy";
+import delayManager from "../../services/delay";
+import type { ProxySortType } from "./use-sort-proxy";
 
 interface Props {
   sx?: SxProps;
+  groupName: string;
   showType: boolean;
   sortType: ProxySortType;
-  urlText: string;
   filterText: string;
   onLocation: () => void;
   onCheckDelay: () => void;
   onShowType: (val: boolean) => void;
   onSortType: (val: ProxySortType) => void;
-  onUrlText: (val: string) => void;
   onFilterText: (val: string) => void;
 }
 
 const ProxyHead = (props: Props) => {
-  const { sx = {}, showType, sortType, urlText, filterText } = props;
+  const { sx = {}, groupName, showType, sortType, filterText } = props;
 
   const [textState, setTextState] = useState<"url" | "filter" | null>(null);
 
+  const [testUrl, setTestUrl] = useState(delayManager.getUrl(groupName) || "");
+
   return (
     <Box sx={{ display: "flex", alignItems: "center", ...sx }}>
       <IconButton
@@ -49,7 +51,13 @@ const ProxyHead = (props: Props) => {
         size="small"
         color="inherit"
         title="delay check"
-        onClick={props.onCheckDelay}
+        onClick={() => {
+          // Remind the user that it is custom test url
+          if (testUrl?.trim() && textState !== "filter") {
+            setTextState("url");
+          }
+          props.onCheckDelay();
+        }}
       >
         <NetworkCheckRounded />
       </IconButton>
@@ -57,12 +65,12 @@ const ProxyHead = (props: Props) => {
       <IconButton
         size="small"
         color="inherit"
-        title={["sort by default", "sort by name", "sort by delay"][sortType]}
+        title={["sort by default", "sort by delay", "sort by name"][sortType]}
         onClick={() => props.onSortType(((sortType + 1) % 3) as ProxySortType)}
       >
         {sortType === 0 && <SortRounded />}
-        {sortType === 1 && <SortByAlphaRounded />}
+        {sortType === 1 && <AccessTimeRounded />}
-        {sortType === 2 && <AccessTimeRounded />}
+        {sortType === 2 && <SortByAlphaRounded />}
       </IconButton>
 
       <IconButton
@@ -119,11 +127,16 @@ const ProxyHead = (props: Props) => {
         <TextField
           autoFocus
           hiddenLabel
-          value={urlText}
+          autoSave="off"
+          autoComplete="off"
+          value={testUrl}
           size="small"
           variant="outlined"
           placeholder="Test url"
-          onChange={(e) => props.onUrlText(e.target.value)}
+          onChange={(e) => {
+            setTestUrl(e.target.value);
+            delayManager.setUrl(groupName, e.target.value);
+          }}
           sx={{ ml: 0.5, flex: "1 1 auto", input: { py: 0.65, px: 1 } }}
         />
       )}

src/components/proxy/use-filter-proxy.ts

@@ -5,9 +5,6 @@ import delayManager from "../../services/delay";
 const regex1 = /delay([=<>])(\d+|timeout|error)/i;
 const regex2 = /type=(.*)/i;
 
-// default | alpha | delay
-export type ProxySortType = 0 | 1 | 2;
-
 /**
  * filter the proxy
  * according to the regular conditions

src/components/proxy/use-sort-proxy.ts

@@ -0,0 +1,38 @@
+import { useMemo } from "react";
+import { ApiType } from "../../services/types";
+import delayManager from "../../services/delay";
+
+// default | delay | alpha
+export type ProxySortType = 0 | 1 | 2;
+
+/**
+ * sort the proxy
+ */
+export default function useSortProxy(
+  proxies: ApiType.ProxyItem[],
+  groupName: string,
+  sortType: ProxySortType
+) {
+  return useMemo(() => {
+    if (!proxies) return [];
+    if (sortType === 0) return proxies;
+
+    const list = proxies.slice();
+
+    if (sortType === 1) {
+      list.sort((a, b) => {
+        const ad = delayManager.getDelay(a.name, groupName);
+        const bd = delayManager.getDelay(b.name, groupName);
+
+        if (ad === -1) return 1;
+        if (bd === -1) return -1;
+
+        return ad - bd;
+      });
+    } else {
+      list.sort((a, b) => a.name.localeCompare(b.name));
+    }
+
+    return list;
+  }, [proxies, groupName, sortType]);
+}

src/services/delay.ts

@@ -4,6 +4,15 @@ const hashKey = (name: string, group: string) => `${group ?? ""}::${name}`;
 
 class DelayManager {
   private cache = new Map<string, [number, number]>();
+  private urlMap = new Map<string, string>();
+
+  setUrl(group: string, url: string) {
+    this.urlMap.set(group, url);
+  }
+
+  getUrl(group: string) {
+    return this.urlMap.get(group);
+  }
 
   setDelay(name: string, group: string, delay: number) {
     this.cache.set(hashKey(name, group), [Date.now(), delay]);
@@ -23,7 +32,8 @@ class DelayManager {
     let delay = -1;
 
     try {
-      const result = await getProxyDelay(name);
+      const url = this.getUrl(group);
+      const result = await getProxyDelay(name, url);
       delay = result.delay;
     } catch {
       delay = 1e6; // error