Refactor useSearch to be more generic

for reusability across pages

lib/hooks/use-search.ts

@@ -0,0 +1,27 @@
+import { useState } from "react";
+
+export function useSearch<T = unknown[]>(items: T[], fieldNames: string[]) {
+  const [filteredItems, setFilteredItems] = useState<T[]>(items);
+  const handleSubmitKeywords = (keywords: string) => {
+    const lowerKeywords = keywords.toLowerCase();
+    setFilteredItems(
+      items.filter((item) => {
+        const filterBy = (fieldName: keyof T) => {
+          const selectedField = item[fieldName];
+
+          if (typeof selectedField === "string") {
+            return selectedField.toLowerCase().includes(lowerKeywords);
+          } else {
+            return false;
+          }
+        };
+
+        const filterFunctions = fieldNames.map((fieldName) =>
+          filterBy(fieldName as keyof T)
+        );
+        return filterFunctions.reduce((acc, curr) => acc || curr, false);
+      })
+    );
+  };
+  return [filteredItems, handleSubmitKeywords] as const;
+}

pages/provinces/[provinceSlug]/index.tsx

@@ -1,7 +1,7 @@
 import { GetStaticPaths, GetStaticProps } from "next";
-import { useState } from "react";
 import { ContactList } from "../../../components/contact-list";
 import { SearchForm } from "../../../components/search-form";
+import { useSearch } from "../../../lib/hooks/use-search";
 import provinces, {
   Contact,
   getProvincesPaths,
@@ -14,35 +14,21 @@ type ProvinceProps = {
   provinceSlug: string;
 };
 
-const useSearch = (items: Contact[]) => {
-  const [filteredItems, setFilteredItems] = useState<Contact[]>(items);
-  const handleSubmitKeywords = (keywords: string) => {
-    const lowerKeywords = keywords.toLowerCase();
-    setFilteredItems(
-      items.filter((item) => {
-        const filterBy = (fieldName: keyof Contact) =>
-          item[fieldName]?.toLowerCase().includes(lowerKeywords) ?? false;
-        return (
-          filterBy("kebutuhan") ||
-          filterBy("penyedia") ||
-          filterBy("lokasi") ||
-          filterBy("alamat") ||
-          filterBy("keterangan") ||
-          filterBy("kontak") ||
-          filterBy("tautan") ||
-          filterBy("tambahan_informasi") ||
-          filterBy("bentuk_verifikasi")
-        );
-      })
-    );
-  };
-  return [filteredItems, handleSubmitKeywords] as const;
-};
-
 export default function ProvincePage(props: ProvinceProps) {
   const { province, provinceSlug } = props;
   const [filteredContacts, handleSubmitKeywords] = useSearch(
-    props.province.data
+    props.province.data,
+    [
+      "kebutuhan",
+      "penyedia",
+      "lokasi",
+      "alamat",
+      "keterangan",
+      "kontak",
+      "tautan",
+      "tambahan_informasi",
+      "bentuk_verifikasi",
+    ]
   );
 
   if (province) {

pages/provinces/index.tsx

@@ -2,28 +2,17 @@ import { GetStaticProps } from "next";
 import provinces from "../../lib/provinces";
 import { getInitial, getSlug } from "../../lib/string-utils";
 import { SearchForm } from "../../components/search-form";
-import { useState } from "react";
 import { ProvinceList, ProvinceListItem } from "../../components/province-list";
+import { useSearch } from "../../lib/hooks/use-search";
 
 type ProvincesPageProps = {
   provincesList: ProvinceListItem[];
 };
 
-const useSearch = (items: ProvinceListItem[]) => {
-  const [filteredItems, setFilteredItems] = useState<ProvinceListItem[]>(items);
-  const handleSubmitKeywords = (keywords: string) => {
-    setFilteredItems(
-      items.filter((item) => {
-        return item.name.toLowerCase().includes(keywords.toLowerCase());
-      })
-    );
-  };
-  return [filteredItems, handleSubmitKeywords] as const;
-};
-
 export default function ProvincesPage(props: ProvincesPageProps) {
   const [filteredProvinces, handleSubmitKeywords] = useSearch(
-    props.provincesList
+    props.provincesList,
+    ["name"]
   );
   return (
     <div>