chore: use search-box in logs and connections

src/components/base/base-search-box.tsx

@@ -11,9 +11,8 @@ type SearchProps = {
   placeholder?: string;
   onSearch: (
     match: (content: string) => boolean,
-    search: (contents: string[]) => string[],
     state: {
-      input: string;
+      text: string;
       matchCase: boolean;
       matchWholeWord: boolean;
       useRegularExpression: boolean;
@@ -41,9 +40,8 @@ export const BaseSearchBox = styled((props: SearchProps) => {
   const onChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     props.onSearch(
       (content) => doSearch([content], e.target?.value ?? "").length > 0,
-      (contents: string[]) => doSearch(contents, e.target?.value ?? ""),
       {
-        input: e.target?.value ?? "",
+        text: e.target?.value ?? "",
         matchCase,
         matchWholeWord,
         useRegularExpression,
@@ -74,8 +72,8 @@ export const BaseSearchBox = styled((props: SearchProps) => {
         } else {
           return item.includes(searchItemCopy);
         }
-      } catch (e) {
-        setErrorMessage(`${e}`);
+      } catch (err) {
+        setErrorMessage(`${err}`);
       }
     });
   };

src/pages/connections.tsx

@@ -18,7 +18,7 @@ import {
 } from "@/components/connection/connection-detail";
 import parseTraffic from "@/utils/parse-traffic";
 import { useCustomTheme } from "@/components/layout/use-custom-theme";
-import { BaseStyledTextField } from "@/components/base/base-styled-text-field";
+import { BaseSearchBox } from "@/components/base/base-search-box";
 
 const initConn = { uploadTotal: 0, downloadTotal: 0, connections: [] };
 
@@ -29,7 +29,7 @@ const ConnectionsPage = () => {
   const { clashInfo } = useClashInfo();
   const { theme } = useCustomTheme();
   const isDark = theme.palette.mode === "dark";
-  const [filterText, setFilterText] = useState("");
+  const [match, setMatch] = useState(() => (_: string) => true);
   const [curOrderOpt, setOrderOpt] = useState("Default");
   const [connData, setConnData] = useState<IConnections>(initConn);
 
@@ -52,7 +52,7 @@ const ConnectionsPage = () => {
   const [filterConn, download, upload] = useMemo(() => {
     const orderFunc = orderOpts[curOrderOpt];
     let connections = connData.connections.filter((conn) =>
-      (conn.metadata.host || conn.metadata.destinationIP)?.includes(filterText)
+      match(conn.metadata.host || conn.metadata.destinationIP || "")
     );
 
     if (orderFunc) connections = orderFunc(connections);
@@ -63,7 +63,7 @@ const ConnectionsPage = () => {
       upload += x.upload;
     });
     return [connections, download, upload];
-  }, [connData, filterText, curOrderOpt]);
+  }, [connData, match, curOrderOpt]);
 
   const { connect, disconnect } = useWebsocket(
     (event) => {
@@ -182,11 +182,7 @@ const ConnectionsPage = () => {
             ))}
           </Select>
         )}
-
-        <BaseStyledTextField
-          value={filterText}
-          onChange={(e) => setFilterText(e.target.value)}
-        />
+        <BaseSearchBox onSearch={(match) => setMatch(() => match)} />
       </Box>
 
       <Box

src/pages/rules.tsx

@@ -8,18 +8,18 @@ import { BaseEmpty, BasePage } from "@/components/base";
 import RuleItem from "@/components/rule/rule-item";
 import { ProviderButton } from "@/components/rule/provider-button";
 import { useCustomTheme } from "@/components/layout/use-custom-theme";
-import { BaseStyledTextField } from "@/components/base/base-styled-text-field";
+import { BaseSearchBox } from "@/components/base/base-search-box";
 
 const RulesPage = () => {
   const { t } = useTranslation();
   const { data = [] } = useSWR("getRules", getRules);
   const { theme } = useCustomTheme();
   const isDark = theme.palette.mode === "dark";
-  const [filterText, setFilterText] = useState("");
+  const [match, setMatch] = useState(() => (_: string) => true);
 
   const rules = useMemo(() => {
-    return data.filter((each) => each.payload.includes(filterText));
-  }, [data, filterText]);
+    return data.filter((item) => match(item.payload));
+  }, [data, match]);
 
   return (
     <BasePage
@@ -42,10 +42,7 @@ const RulesPage = () => {
           alignItems: "center",
         }}
       >
-        <BaseStyledTextField
-          value={filterText}
-          onChange={(e) => setFilterText(e.target.value)}
-        />
+        <BaseSearchBox onSearch={(match) => setMatch(() => match)} />
       </Box>
 
       <Box