refactor: proxy head

src/components/proxy/proxy-global.tsx

@@ -1,22 +1,14 @@
 import useSWR, { useSWRConfig } from "swr";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useLockFn } from "ahooks";
 import { Virtuoso } from "react-virtuoso";
-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 { getProfiles, patchProfile } from "../../services/cmds";
+import useFilterProxy, { ProxySortType } from "./use-filter-proxy";
 import delayManager from "../../services/delay";
-import useFilterProxy from "./use-filter-proxy";
 import ProxyItem from "./proxy-item";
+import ProxyHead from "./proxy-head";
 
 interface Props {
   groupName: string;
@@ -30,13 +22,38 @@ const ProxyGlobal = (props: Props) => {
 
   const { mutate } = useSWRConfig();
   const [now, setNow] = useState(curProxy || "DIRECT");
+
   const [showType, setShowType] = useState(true);
-  const [showFilter, setShowFilter] = useState(false);
+  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 = 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);
 
   const onChangeProxy = useLockFn(async (name: string) => {
@@ -61,7 +78,7 @@ const ProxyGlobal = (props: 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?.({
@@ -73,7 +90,7 @@ const ProxyGlobal = (props: Props) => {
   };
 
   const onCheckAll = useLockFn(async () => {
-    const names = filterProxies.map((p) => p.name);
+    const names = sortedProxies.map((p) => p.name);
 
     await delayManager.checkListDelay(
       { names, groupName, skipNum: 8, maxTimeout: 600 },
@@ -85,10 +102,6 @@ const ProxyGlobal = (props: Props) => {
 
   useEffect(() => onLocation(false), [groupName]);
 
-  useEffect(() => {
-    if (!showFilter) setFilterText("");
-  }, [showFilter]);
-
   useEffect(() => {
     if (groupName === "DIRECT") setNow("DIRECT");
     else if (groupName === "GLOBAL") {
@@ -112,74 +125,29 @@ const ProxyGlobal = (props: Props) => {
 
   return (
     <>
-      <Box
+      <ProxyHead
-        sx={{
+        sx={{ px: 3, my: 0.5, button: { mr: 0.5 } }}
-          px: 3,
+        showType={showType}
-          my: 0.5,
+        sortType={sortType}
-          display: "flex",
+        urlText={urlText}
-          alignItems: "center",
+        filterText={filterText}
-          button: { mr: 0.5 },
+        onLocation={onLocation}
-        }}
+        onCheckDelay={onCheckAll}
-      >
+        onShowType={setShowType}
-        <IconButton
+        onSortType={setSortType}
-          size="small"
+        onUrlText={setUrlText}
-          title="location"
+        onFilterText={setFilterText}
-          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
-            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={filterProxies.length}
+        totalCount={sortedProxies.length}
         itemContent={(index) => (
           <ProxyItem
             groupName={groupName}
-            proxy={filterProxies[index]}
+            proxy={sortedProxies[index]}
-            selected={filterProxies[index].name === now}
+            selected={sortedProxies[index].name === now}
             showType={showType}
             onClick={onChangeProxy}
             sx={{ py: 0, px: 2 }}

src/components/proxy/proxy-group.tsx

@@ -42,9 +42,8 @@ const ProxyGroup = ({ group }: Props) => {
   const [showFilter, setShowFilter] = useState(false);
   const [filterText, setFilterText] = useState("");
 
-  const proxies = group.all ?? [];
   const virtuosoRef = useRef<any>();
-  const filterProxies = useFilterProxy(proxies, group.name, filterText);
+  const filterProxies = useFilterProxy(group.all, group.name, filterText);
 
   const { data: profiles } = useSWR("getProfiles", getProfiles);
 

src/components/proxy/proxy-head.tsx

@@ -0,0 +1,134 @@
+import { useState } from "react";
+import { Box, IconButton, TextField, SxProps } from "@mui/material";
+import {
+  AccessTimeRounded,
+  MyLocationRounded,
+  NetworkCheckRounded,
+  FilterAltRounded,
+  FilterAltOffRounded,
+  VisibilityRounded,
+  VisibilityOffRounded,
+  WifiTetheringRounded,
+  WifiTetheringOffRounded,
+  SortByAlphaRounded,
+  SortRounded,
+} from "@mui/icons-material";
+import type { ProxySortType } from "./use-filter-proxy";
+
+interface Props {
+  sx?: SxProps;
+  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 [textState, setTextState] = useState<"url" | "filter" | null>(null);
+
+  return (
+    <Box sx={{ display: "flex", alignItems: "center", ...sx }}>
+      <IconButton
+        size="small"
+        title="location"
+        color="inherit"
+        onClick={props.onLocation}
+      >
+        <MyLocationRounded />
+      </IconButton>
+
+      <IconButton
+        size="small"
+        color="inherit"
+        title="delay check"
+        onClick={props.onCheckDelay}
+      >
+        <NetworkCheckRounded />
+      </IconButton>
+
+      <IconButton
+        size="small"
+        color="inherit"
+        title={["sort by default", "sort by name", "sort by delay"][sortType]}
+        onClick={() => props.onSortType(((sortType + 1) % 3) as ProxySortType)}
+      >
+        {sortType === 0 && <SortRounded />}
+        {sortType === 1 && <SortByAlphaRounded />}
+        {sortType === 2 && <AccessTimeRounded />}
+      </IconButton>
+
+      <IconButton
+        size="small"
+        color="inherit"
+        title="edit test url"
+        onClick={() => setTextState((ts) => (ts === "url" ? null : "url"))}
+      >
+        {textState === "url" ? (
+          <WifiTetheringRounded />
+        ) : (
+          <WifiTetheringOffRounded />
+        )}
+      </IconButton>
+
+      <IconButton
+        size="small"
+        color="inherit"
+        title="proxy detail"
+        onClick={() => props.onShowType(!showType)}
+      >
+        {showType ? <VisibilityRounded /> : <VisibilityOffRounded />}
+      </IconButton>
+
+      <IconButton
+        size="small"
+        color="inherit"
+        title="filter"
+        onClick={() =>
+          setTextState((ts) => (ts === "filter" ? null : "filter"))
+        }
+      >
+        {textState === "filter" ? (
+          <FilterAltRounded />
+        ) : (
+          <FilterAltOffRounded />
+        )}
+      </IconButton>
+
+      {textState === "filter" && (
+        <TextField
+          autoFocus
+          hiddenLabel
+          value={filterText}
+          size="small"
+          variant="outlined"
+          placeholder="Filter conditions"
+          onChange={(e) => props.onFilterText(e.target.value)}
+          sx={{ ml: 0.5, flex: "1 1 auto", input: { py: 0.65, px: 1 } }}
+        />
+      )}
+
+      {textState === "url" && (
+        <TextField
+          autoFocus
+          hiddenLabel
+          value={urlText}
+          size="small"
+          variant="outlined"
+          placeholder="Test url"
+          onChange={(e) => props.onUrlText(e.target.value)}
+          sx={{ ml: 0.5, flex: "1 1 auto", input: { py: 0.65, px: 1 } }}
+        />
+      )}
+    </Box>
+  );
+};
+
+export default ProxyHead;

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

@@ -5,6 +5,9 @@ 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
@@ -15,6 +18,7 @@ export default function useFilterProxy(
   filterText: string
 ) {
   return useMemo(() => {
+    if (!proxies) return [];
     if (!filterText) return proxies;
 
     const res1 = regex1.exec(filterText);