refactor(Home): improve search filtering logic (DefiLlama#1479)

hooks/useFilteredChains.jsx

@@ -0,0 +1,71 @@
+import React, { useMemo } from 'react';
+import { useRouter } from 'next/router';
+
+const TESTNET_KEYWORDS = ['test', 'devnet'];
+
+const createSearchMatcher = (searchTerm) => {
+  const normalized = searchTerm.toLowerCase();
+  return (value) => value?.toLowerCase().includes(normalized);
+};
+
+const isTestnet = (chain) => {
+  const lowercaseValues = [
+    chain.name,
+    chain.title,
+    chain.network
+  ].map((val) => val?.toLowerCase());
+
+  return TESTNET_KEYWORDS.some((keyword) => 
+    lowercaseValues.some((val) => val?.includes(keyword))
+  );
+};
+
+const matchesSearchTerm = (chain, matcher) => {
+  return (
+    matcher(chain.chain) ||
+    matcher(chain.chainId.toString()) ||
+    matcher(chain.name) ||
+    matcher(chain.nativeCurrency?.symbol || '')
+  );
+};
+
+export const useFilteredChains = (chains) => {
+  const [chainName, setChainName] = React.useState("");
+  const router = useRouter();
+  const { testnets, testnet, search } = router.query;
+
+  const chainToFilter = useMemo(() => {
+    if (search?.length > 0 && chainName.length === 0) {
+      return typeof search === "string" ? search : search[0];
+    }
+    return chainName;
+  }, [search, chainName]);
+
+  const includeTestnets = useMemo(() => {
+    return (testnets === "true" || testnet === "true");
+  }, [testnets, testnet]);
+
+  const finalChains = useMemo(() => {
+    if (!chains?.length) return [];
+
+    const matcher = chainToFilter.length > 0 ? createSearchMatcher(chainToFilter) : null;
+
+    return chains.filter((chain) => {
+      if (!includeTestnets && isTestnet(chain)) {
+        return false;
+      }
+
+      if (matcher && !matchesSearchTerm(chain, matcher)) {
+        return false;
+      }
+
+      return true;
+    });
+  }, [includeTestnets, chainToFilter, chains]);
+
+  return {
+    chainName,
+    setChainName,
+    finalChains
+  };
+};

pages/index.js

@@ -5,6 +5,7 @@ import Layout from "../components/Layout";
 import Chain from "../components/chain";
 import { AdBanner } from "../components/AdBanner";
 import { generateChainData } from "../utils/fetch";
+import { useFilteredChains } from '../hooks/useFilteredChains';
 
 export async function getStaticProps() {
   const sortedChains = await generateChainData();
@@ -19,52 +20,7 @@ export async function getStaticProps() {
 }
 
 function Home({ chains }) {
-  const [chainName, setChainName] = React.useState("");
-
-  const router = useRouter();
-  const { testnets, testnet, search } = router.query;
-
-  const chainToFilter =
-    search && search.length > 0 && chainName.length === 0
-      ? typeof search === "string"
-        ? search
-        : search[0]
-      : chainName;
-
-  const includeTestnets =
-    (typeof testnets === "string" && testnets === "true") || (typeof testnet === "string" && testnet === "true");
-
-  const finalChains = React.useMemo(() => {
-    let finalChains = [];
-    for (const chain of chains) {
-      let toFilter = true;
-
-      if (!includeTestnets) {
-        toFilter = !(
-          chain.name?.toLowerCase().includes("test") ||
-          chain.title?.toLowerCase().includes("test") ||
-          chain.network?.toLowerCase().includes("test") ||
-          chain.name?.toLowerCase().includes("devnet") ||
-          chain.title?.toLowerCase().includes("devnet") ||
-          chain.network?.toLowerCase().includes("devnet")
-        );
-      }
-
-      if (chainToFilter.length > 0 && toFilter) {
-        toFilter =
-          chain.chain.toLowerCase().includes(chainToFilter.toLowerCase()) ||
-          chain.chainId.toString().toLowerCase().includes(chainToFilter.toLowerCase()) ||
-          chain.name.toLowerCase().includes(chainToFilter.toLowerCase()) ||
-          (chain.nativeCurrency ? chain.nativeCurrency.symbol : "").toLowerCase().includes(chainToFilter.toLowerCase());
-      }
-
-      if (toFilter) {
-        finalChains.push(chain);
-      }
-    }
-
-    return finalChains;
-  }, [includeTestnets, chainToFilter, chains]);
+  const { chainName, setChainName, finalChains } = useFilteredChains(chains);
 
   const [end, setEnd] = React.useState(15);