feat: optimize proxy page ui

src/components/proxy/use-render-list.ts

@@ -0,0 +1,84 @@
+import useSWR from "swr";
+import { getProxies } from "@/services/api";
+import { useEffect, useMemo } from "react";
+import { filterSort } from "./use-filter-sort";
+import { useHeadStateNew, type HeadState } from "./use-head-state";
+
+export interface IRenderItem {
+  type: 0 | 1 | 2 | 3; // 组 ｜ head ｜ item ｜ empty
+  key: string;
+  group: IProxyGroupItem;
+  proxy?: IProxyItem;
+  headState?: HeadState;
+}
+
+export const useRenderList = (mode: string) => {
+  const { data: proxiesData, mutate: mutateProxies } = useSWR(
+    "getProxies",
+    getProxies,
+    { refreshInterval: 45000, suspense: true }
+  );
+
+  const [headStates, setHeadState] = useHeadStateNew();
+
+  // make sure that fetch the proxies successfully
+  useEffect(() => {
+    if (!proxiesData) return;
+    const { groups, proxies } = proxiesData;
+
+    if (
+      (mode === "rule" && !groups.length) ||
+      (mode === "global" && proxies.length < 2)
+    ) {
+      setTimeout(() => mutateProxies(), 500);
+    }
+  }, [proxiesData, mode]);
+
+  const renderList: IRenderItem[] = useMemo(() => {
+    const useRule = mode === "rule" || mode === "script";
+    const renderGroups =
+      (useRule ? proxiesData?.groups : [proxiesData?.global!]) || [];
+
+    const retList = renderGroups.flatMap((group) => {
+      const headState = headStates[group.name];
+      const ret: IRenderItem[] = [
+        { type: 0, key: group.name, group, headState },
+      ];
+
+      if (headState?.open) {
+        const proxies = filterSort(
+          group.all,
+          group.name,
+          headState.filterText,
+          headState.sortType
+        );
+
+        ret.push({ type: 1, key: `head${group.name}`, group, headState });
+
+        if (!proxies.length) {
+          ret.push({ type: 3, key: `empty${group.name}`, group, headState });
+        }
+
+        return ret.concat(
+          proxies.map((proxy) => ({
+            type: 2,
+            key: `${group.name}-${proxy!.name}`,
+            group,
+            proxy,
+            headState,
+          }))
+        );
+      }
+      return ret;
+    });
+
+    if (!useRule) return retList.slice(1);
+    return retList;
+  }, [headStates, proxiesData, mode]);
+
+  return {
+    renderList,
+    onProxies: mutateProxies,
+    onHeadState: setHeadState,
+  };
+};