From 8873b1e04a509b6c85f6ae2417f25dbcee5957ee Mon Sep 17 00:00:00 2001
From: Zain Fathoni <me@zainf.dev>
Date: Sat, 17 Jul 2021 10:26:22 +0800
Subject: [PATCH 01/15] Rename DatabasePage into ProvincesPage

---
 pages/database/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/database/index.tsx b/pages/database/index.tsx
index e889e2793..0bbbc9880 100644
--- a/pages/database/index.tsx
+++ b/pages/database/index.tsx
@@ -16,7 +16,7 @@ type DatabasePageProps = {
   provinces: ProvinceListItem[];
 };
 
-export default function DatabasePage(props: DatabasePageProps) {
+export default function ProvincesPage(props: DatabasePageProps) {
   return (
     <div>
       <h2 className="text-gray-500 text-xs font-medium uppercase tracking-wide">

From a13ba04144c332de21db98b710f95a0447a88e6c Mon Sep 17 00:00:00 2001
From: Zain Fathoni <me@zainf.dev>
Date: Sat, 17 Jul 2021 10:29:43 +0800
Subject: [PATCH 02/15] Rename the `database` path into `provinces`

---
 components/contact-list.tsx                                    | 2 +-
 pages/{database => provinces}/[provinceSlug]/[contactSlug].tsx | 0
 pages/{database => provinces}/[provinceSlug]/index.tsx         | 0
 pages/{database => provinces}/index.tsx                        | 2 +-
 4 files changed, 2 insertions(+), 2 deletions(-)
 rename pages/{database => provinces}/[provinceSlug]/[contactSlug].tsx (100%)
 rename pages/{database => provinces}/[provinceSlug]/index.tsx (100%)
 rename pages/{database => provinces}/index.tsx (97%)

diff --git a/components/contact-list.tsx b/components/contact-list.tsx
index 04072ec0c..918a69a9c 100644
--- a/components/contact-list.tsx
+++ b/components/contact-list.tsx
@@ -19,7 +19,7 @@ export function ContactList(props: ContactListProps) {
       <ul className="divide-y divide-gray-200">
         {props.data.map((contact, index) => (
           <li key={index}>
-            <Link href={`/database/${props.provinceSlug}/${index}`}>
+            <Link href={`/provinces/${props.provinceSlug}/${index}`}>
               <a className="block hover:bg-gray-50">
                 <div className="px-4 py-4 sm:px-6">
                   <div className="flex items-center justify-between">
diff --git a/pages/database/[provinceSlug]/[contactSlug].tsx b/pages/provinces/[provinceSlug]/[contactSlug].tsx
similarity index 100%
rename from pages/database/[provinceSlug]/[contactSlug].tsx
rename to pages/provinces/[provinceSlug]/[contactSlug].tsx
diff --git a/pages/database/[provinceSlug]/index.tsx b/pages/provinces/[provinceSlug]/index.tsx
similarity index 100%
rename from pages/database/[provinceSlug]/index.tsx
rename to pages/provinces/[provinceSlug]/index.tsx
diff --git a/pages/database/index.tsx b/pages/provinces/index.tsx
similarity index 97%
rename from pages/database/index.tsx
rename to pages/provinces/index.tsx
index 0bbbc9880..8363effc9 100644
--- a/pages/database/index.tsx
+++ b/pages/provinces/index.tsx
@@ -31,7 +31,7 @@ export default function ProvincesPage(props: DatabasePageProps) {
             <div className="bg-blue-500 flex-shrink-0 flex items-center justify-center w-16 text-white text-sm font-medium rounded-l-md">
               {province.initials}
             </div>
-            <Link href={`/database/${province.slug}`}>
+            <Link href={`/provinces/${province.slug}`}>
               <a className="flex-1 flex items-center justify-between border-t border-r border-b border-gray-200 bg-white rounded-r-md truncate">
                 <div className="flex-1 px-4 py-2 text-sm truncate">
                   <span className="text-gray-900 font-medium hover:text-gray-600">

From d9a5844ef060b4cfd6fba5dcb3817d665f889f4f Mon Sep 17 00:00:00 2001
From: Zain Fathoni <me@zainf.dev>
Date: Sat, 17 Jul 2021 10:31:21 +0800
Subject: [PATCH 03/15] Rename database.ts into provinces.ts

---
 components/contact-details.tsx                   | 2 +-
 components/contact-list.tsx                      | 2 +-
 lib/{database.ts => provinces.ts}                | 0
 pages/provinces/[provinceSlug]/[contactSlug].tsx | 2 +-
 pages/provinces/[provinceSlug]/index.tsx         | 2 +-
 pages/provinces/index.tsx                        | 2 +-
 6 files changed, 5 insertions(+), 5 deletions(-)
 rename lib/{database.ts => provinces.ts} (100%)

diff --git a/components/contact-details.tsx b/components/contact-details.tsx
index e21166a6a..c4316fafe 100644
--- a/components/contact-details.tsx
+++ b/components/contact-details.tsx
@@ -1,4 +1,4 @@
-import { Contact } from "../lib/database";
+import { Contact } from "../lib/provinces";
 
 type ContactDetailsProps = {
   contact: Contact;
diff --git a/components/contact-list.tsx b/components/contact-list.tsx
index 918a69a9c..ba6a900da 100644
--- a/components/contact-list.tsx
+++ b/components/contact-list.tsx
@@ -5,7 +5,7 @@ import {
   PhoneIcon,
 } from "@heroicons/react/solid";
 import { BadgeCheckIcon as BadgeCheckIconUnverified } from "@heroicons/react/outline";
-import { Contact } from "../lib/database";
+import { Contact } from "../lib/provinces";
 import Link from "next/link";
 
 type ContactListProps = {
diff --git a/lib/database.ts b/lib/provinces.ts
similarity index 100%
rename from lib/database.ts
rename to lib/provinces.ts
diff --git a/pages/provinces/[provinceSlug]/[contactSlug].tsx b/pages/provinces/[provinceSlug]/[contactSlug].tsx
index 5eab0d050..658935de2 100644
--- a/pages/provinces/[provinceSlug]/[contactSlug].tsx
+++ b/pages/provinces/[provinceSlug]/[contactSlug].tsx
@@ -1,6 +1,6 @@
 import { GetStaticPaths, GetStaticProps } from "next";
 import { ContactDetails } from "../../../components/contact-details";
-import database, { getContactsPaths, Contact } from "../../../lib/database";
+import database, { getContactsPaths, Contact } from "../../../lib/provinces";
 import { getTheLastSegmentFromKebabCase } from "../../../lib/string-utils";
 
 type ContactPageProps = {
diff --git a/pages/provinces/[provinceSlug]/index.tsx b/pages/provinces/[provinceSlug]/index.tsx
index 02d8708e6..c3bf2d2d3 100644
--- a/pages/provinces/[provinceSlug]/index.tsx
+++ b/pages/provinces/[provinceSlug]/index.tsx
@@ -1,6 +1,6 @@
 import { GetStaticPaths, GetStaticProps } from "next";
 import { ContactList } from "../../../components/contact-list";
-import database, { getProvincesPaths, Province } from "../../../lib/database";
+import database, { getProvincesPaths, Province } from "../../../lib/provinces";
 import { getTheLastSegmentFromKebabCase } from "../../../lib/string-utils";
 
 type ProvinceDatabaseProps = {
diff --git a/pages/provinces/index.tsx b/pages/provinces/index.tsx
index 8363effc9..0c046486c 100644
--- a/pages/provinces/index.tsx
+++ b/pages/provinces/index.tsx
@@ -1,7 +1,7 @@
 /* This example requires Tailwind CSS v2.0+ */
 import { DotsVerticalIcon } from "@heroicons/react/solid";
 import { GetStaticProps } from "next";
-import database from "../../lib/database";
+import database from "../../lib/provinces";
 import { getInitial, getSlug } from "../../lib/string-utils";
 import Link from "next/link";
 

From eb847ab6a5b5f2dc0794b6b0fd2057cb09be8889 Mon Sep 17 00:00:00 2001
From: Zain Fathoni <me@zainf.dev>
Date: Sat, 17 Jul 2021 10:35:02 +0800
Subject: [PATCH 04/15] Rename Database into Provinces

---
 lib/provinces.ts                                 | 10 +++++-----
 pages/provinces/[provinceSlug]/[contactSlug].tsx |  4 ++--
 pages/provinces/[provinceSlug]/index.tsx         |  4 ++--
 pages/provinces/index.tsx                        | 12 ++++++------
 4 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/lib/provinces.ts b/lib/provinces.ts
index 677462c21..d0b6812ca 100644
--- a/lib/provinces.ts
+++ b/lib/provinces.ts
@@ -1,7 +1,7 @@
-import database from "../data/wbw-sheets.json";
+import provinces from "../data/wbw-sheets.json";
 import { getSlug } from "./string-utils";
 
-export type Database = Province[];
+export type Provinces = Province[];
 
 export type Province = {
   readonly id: number;
@@ -29,7 +29,7 @@ export type ProvincePath = {
 };
 
 export const getProvincesPaths = (): ProvincePath[] =>
-  database.map((item, index) => {
+  provinces.map((item, index) => {
     const provinceSlug = getSlug(item.name, index);
     return {
       params: { provinceSlug },
@@ -45,7 +45,7 @@ export type ContactPath = {
 
 export const getContactsPaths = (): ContactPath[] => {
   const contactsPaths: ContactPath[] = [];
-  database.forEach((province, provinceIndex) => {
+  provinces.forEach((province, provinceIndex) => {
     province.data.forEach((_, contactIndex) => {
       const provinceSlug = getSlug(province.name, provinceIndex);
       contactsPaths.push({
@@ -56,4 +56,4 @@ export const getContactsPaths = (): ContactPath[] => {
   return contactsPaths;
 };
 
-export default database as unknown as Database;
+export default provinces as unknown as Provinces;
diff --git a/pages/provinces/[provinceSlug]/[contactSlug].tsx b/pages/provinces/[provinceSlug]/[contactSlug].tsx
index 658935de2..465c6aba6 100644
--- a/pages/provinces/[provinceSlug]/[contactSlug].tsx
+++ b/pages/provinces/[provinceSlug]/[contactSlug].tsx
@@ -1,6 +1,6 @@
 import { GetStaticPaths, GetStaticProps } from "next";
 import { ContactDetails } from "../../../components/contact-details";
-import database, { getContactsPaths, Contact } from "../../../lib/provinces";
+import provinces, { getContactsPaths, Contact } from "../../../lib/provinces";
 import { getTheLastSegmentFromKebabCase } from "../../../lib/string-utils";
 
 type ContactPageProps = {
@@ -26,7 +26,7 @@ export const getStaticPaths: GetStaticPaths = () => {
 export const getStaticProps: GetStaticProps = ({ params = {} }) => {
   const { provinceSlug, contactSlug } = params;
   const index = getTheLastSegmentFromKebabCase(provinceSlug as string);
-  const province = index ? database[index as unknown as number] : null;
+  const province = index ? provinces[index as unknown as number] : null;
   const provinceName = province ? province.name : "";
   const contact =
     province !== null ? province.data[contactSlug as unknown as number] : null;
diff --git a/pages/provinces/[provinceSlug]/index.tsx b/pages/provinces/[provinceSlug]/index.tsx
index c3bf2d2d3..ebd515eab 100644
--- a/pages/provinces/[provinceSlug]/index.tsx
+++ b/pages/provinces/[provinceSlug]/index.tsx
@@ -1,6 +1,6 @@
 import { GetStaticPaths, GetStaticProps } from "next";
 import { ContactList } from "../../../components/contact-list";
-import database, { getProvincesPaths, Province } from "../../../lib/provinces";
+import provinces, { getProvincesPaths, Province } from "../../../lib/provinces";
 import { getTheLastSegmentFromKebabCase } from "../../../lib/string-utils";
 
 type ProvinceDatabaseProps = {
@@ -39,7 +39,7 @@ export const getStaticPaths: GetStaticPaths = () => {
 export const getStaticProps: GetStaticProps = ({ params = {} }) => {
   const { provinceSlug } = params;
   const index = getTheLastSegmentFromKebabCase(provinceSlug as string);
-  const province = index ? database[index as unknown as number] : null;
+  const province = index ? provinces[index as unknown as number] : null;
 
   return {
     props: {
diff --git a/pages/provinces/index.tsx b/pages/provinces/index.tsx
index 0c046486c..a04412eb0 100644
--- a/pages/provinces/index.tsx
+++ b/pages/provinces/index.tsx
@@ -1,7 +1,7 @@
 /* This example requires Tailwind CSS v2.0+ */
 import { DotsVerticalIcon } from "@heroicons/react/solid";
 import { GetStaticProps } from "next";
-import database from "../../lib/provinces";
+import provinces from "../../lib/provinces";
 import { getInitial, getSlug } from "../../lib/string-utils";
 import Link from "next/link";
 
@@ -13,7 +13,7 @@ type ProvinceListItem = {
 };
 
 type DatabasePageProps = {
-  provinces: ProvinceListItem[];
+  provincesList: ProvinceListItem[];
 };
 
 export default function ProvincesPage(props: DatabasePageProps) {
@@ -23,7 +23,7 @@ export default function ProvincesPage(props: DatabasePageProps) {
         Daftar Provinsi
       </h2>
       <ul className="mt-3 grid grid-cols-1 gap-5 sm:gap-6 sm:grid-cols-2 lg:grid-cols-3">
-        {props.provinces.map((province) => (
+        {props.provincesList.map((province) => (
           <li
             key={province.name}
             className="col-span-1 flex shadow-sm rounded-md"
@@ -49,16 +49,16 @@ export default function ProvincesPage(props: DatabasePageProps) {
 }
 
 export const getStaticProps: GetStaticProps = () => {
-  const provinces = database.map(({ name, data }, index) => ({
+  const provincesList = provinces.map(({ name, data }, index) => ({
     initials: getInitial(name),
     name,
     slug: getSlug(name, index),
     count: data.length,
   }));
-  provinces.shift();
+  provincesList.shift();
   return {
     props: {
-      provinces,
+      provincesList,
     },
   };
 };

From a30e4050e365e616d4c489d2c4d09c7999dba0fb Mon Sep 17 00:00:00 2001
From: Zain Fathoni <me@zainf.dev>
Date: Sat, 17 Jul 2021 10:37:54 +0800
Subject: [PATCH 05/15] Refactor ProvincePage naming

---
 pages/provinces/[provinceSlug]/index.tsx | 4 ++--
 pages/provinces/index.tsx                | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/pages/provinces/[provinceSlug]/index.tsx b/pages/provinces/[provinceSlug]/index.tsx
index ebd515eab..dbcb8e80f 100644
--- a/pages/provinces/[provinceSlug]/index.tsx
+++ b/pages/provinces/[provinceSlug]/index.tsx
@@ -3,12 +3,12 @@ import { ContactList } from "../../../components/contact-list";
 import provinces, { getProvincesPaths, Province } from "../../../lib/provinces";
 import { getTheLastSegmentFromKebabCase } from "../../../lib/string-utils";
 
-type ProvinceDatabaseProps = {
+type ProvinceProps = {
   province: Province;
   provinceSlug: string;
 };
 
-export default function ProvinceDatabase(props: ProvinceDatabaseProps) {
+export default function ProvincePage(props: ProvinceProps) {
   const { province, provinceSlug } = props;
 
   if (province) {
diff --git a/pages/provinces/index.tsx b/pages/provinces/index.tsx
index a04412eb0..7bb68d5c1 100644
--- a/pages/provinces/index.tsx
+++ b/pages/provinces/index.tsx
@@ -12,11 +12,11 @@ type ProvinceListItem = {
   count: number;
 };
 
-type DatabasePageProps = {
+type ProvincesPageProps = {
   provincesList: ProvinceListItem[];
 };
 
-export default function ProvincesPage(props: DatabasePageProps) {
+export default function ProvincesPage(props: ProvincesPageProps) {
   return (
     <div>
       <h2 className="text-gray-500 text-xs font-medium uppercase tracking-wide">

From 6c182bb85af83ea0224ca7a0a49d61812f367ba4 Mon Sep 17 00:00:00 2001
From: Zain Fathoni <me@zainf.dev>
Date: Sat, 17 Jul 2021 10:55:05 +0800
Subject: [PATCH 06/15] Implement dumb SearchForm

---
 components/search-form.tsx | 37 +++++++++++++++++++++++++++++++++++++
 pages/provinces/index.tsx  |  2 ++
 2 files changed, 39 insertions(+)
 create mode 100644 components/search-form.tsx

diff --git a/components/search-form.tsx b/components/search-form.tsx
new file mode 100644
index 000000000..d5396044e
--- /dev/null
+++ b/components/search-form.tsx
@@ -0,0 +1,37 @@
+interface FormElements extends HTMLFormControlsCollection {
+  keywordsInput: HTMLInputElement;
+}
+
+interface UsernameFormElement extends HTMLFormElement {
+  readonly elements: FormElements;
+}
+
+export function SearchForm({
+  onSubmitKeywords,
+}: {
+  onSubmitKeywords: (keywords: string) => void;
+}) {
+  function handleSubmit(event: React.FormEvent<UsernameFormElement>) {
+    event.preventDefault();
+    onSubmitKeywords(event.currentTarget.elements.keywordsInput.value);
+  }
+
+  return (
+    <form className="flex items-center" onSubmit={handleSubmit}>
+      <label htmlFor="keywordsInput" className="flex-shrink-0">
+        Cari provinsi:
+      </label>
+      <input
+        id="keywordsInput"
+        type="text"
+        className="focus:ring-indigo-500 focus:border-indigo-500 block w-full px-2 py-2 sm:text-sm border-gray-300 border-2 rounded-md my-5 mx-2"
+      />
+      <button
+        type="submit"
+        className="bg-blue-600 text-white ml-2 py-2 px-6 rounded"
+      >
+        Cari
+      </button>
+    </form>
+  );
+}
diff --git a/pages/provinces/index.tsx b/pages/provinces/index.tsx
index 7bb68d5c1..2ed61bb52 100644
--- a/pages/provinces/index.tsx
+++ b/pages/provinces/index.tsx
@@ -4,6 +4,7 @@ import { GetStaticProps } from "next";
 import provinces from "../../lib/provinces";
 import { getInitial, getSlug } from "../../lib/string-utils";
 import Link from "next/link";
+import { SearchForm } from "../../components/search-form";
 
 type ProvinceListItem = {
   initials: string;
@@ -22,6 +23,7 @@ export default function ProvincesPage(props: ProvincesPageProps) {
       <h2 className="text-gray-500 text-xs font-medium uppercase tracking-wide">
         Daftar Provinsi
       </h2>
+      <SearchForm onSubmitKeywords={(keywords) => console.log(keywords)} />
       <ul className="mt-3 grid grid-cols-1 gap-5 sm:gap-6 sm:grid-cols-2 lg:grid-cols-3">
         {props.provincesList.map((province) => (
           <li

From 4f4a02446ef13c7116af6f06ee16d2cc9a1beda9 Mon Sep 17 00:00:00 2001
From: Zain Fathoni <me@zainf.dev>
Date: Sat, 17 Jul 2021 11:05:04 +0800
Subject: [PATCH 07/15] Implement search functionality for ProvincesPage

---
 pages/provinces/index.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/pages/provinces/index.tsx b/pages/provinces/index.tsx
index 2ed61bb52..cd8b33732 100644
--- a/pages/provinces/index.tsx
+++ b/pages/provinces/index.tsx
@@ -5,6 +5,7 @@ import provinces from "../../lib/provinces";
 import { getInitial, getSlug } from "../../lib/string-utils";
 import Link from "next/link";
 import { SearchForm } from "../../components/search-form";
+import { useState } from "react";
 
 type ProvinceListItem = {
   initials: string;
@@ -18,14 +19,24 @@ type ProvincesPageProps = {
 };
 
 export default function ProvincesPage(props: ProvincesPageProps) {
+  const [filteredProvinces, setFilteredProvinces] = useState(
+    props.provincesList
+  );
+  const handleSubmitKeywords = (keywords: string) => {
+    const provinces = props.provincesList.filter((province) => {
+      return province.name.toLowerCase().includes(keywords.toLowerCase());
+    });
+    console.log({ keywords, provinces });
+    setFilteredProvinces(provinces);
+  };
   return (
     <div>
       <h2 className="text-gray-500 text-xs font-medium uppercase tracking-wide">
         Daftar Provinsi
       </h2>
-      <SearchForm onSubmitKeywords={(keywords) => console.log(keywords)} />
+      <SearchForm onSubmitKeywords={handleSubmitKeywords} />
       <ul className="mt-3 grid grid-cols-1 gap-5 sm:gap-6 sm:grid-cols-2 lg:grid-cols-3">
-        {props.provincesList.map((province) => (
+        {filteredProvinces.map((province) => (
           <li
             key={province.name}
             className="col-span-1 flex shadow-sm rounded-md"

From 3910e5597addbc067edee3cfaa7acdca29dbd0e7 Mon Sep 17 00:00:00 2001
From: Zain Fathoni <me@zainf.dev>
Date: Sat, 17 Jul 2021 11:16:49 +0800
Subject: [PATCH 08/15] Extract useSearch from ProvincesPage

---
 pages/provinces/index.tsx | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/pages/provinces/index.tsx b/pages/provinces/index.tsx
index cd8b33732..ac02d75d7 100644
--- a/pages/provinces/index.tsx
+++ b/pages/provinces/index.tsx
@@ -1,5 +1,3 @@
-/* This example requires Tailwind CSS v2.0+ */
-import { DotsVerticalIcon } from "@heroicons/react/solid";
 import { GetStaticProps } from "next";
 import provinces from "../../lib/provinces";
 import { getInitial, getSlug } from "../../lib/string-utils";
@@ -18,17 +16,22 @@ 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, setFilteredProvinces] = useState(
+  const [filteredProvinces, handleSubmitKeywords] = useSearch(
     props.provincesList
   );
-  const handleSubmitKeywords = (keywords: string) => {
-    const provinces = props.provincesList.filter((province) => {
-      return province.name.toLowerCase().includes(keywords.toLowerCase());
-    });
-    console.log({ keywords, provinces });
-    setFilteredProvinces(provinces);
-  };
   return (
     <div>
       <h2 className="text-gray-500 text-xs font-medium uppercase tracking-wide">

From 65bdf764e48ade5de479a56e24ec1090396012d1 Mon Sep 17 00:00:00 2001
From: Zain Fathoni <me@zainf.dev>
Date: Sat, 17 Jul 2021 11:28:30 +0800
Subject: [PATCH 09/15] Extract ProvinceList into a separate component

---
 components/province-list.tsx | 39 ++++++++++++++++++++++++++++++++++++
 pages/provinces/index.tsx    | 25 ++---------------------
 2 files changed, 41 insertions(+), 23 deletions(-)
 create mode 100644 components/province-list.tsx

diff --git a/components/province-list.tsx b/components/province-list.tsx
new file mode 100644
index 000000000..bfed96652
--- /dev/null
+++ b/components/province-list.tsx
@@ -0,0 +1,39 @@
+import Link from "next/link";
+
+type ProvinceListItem = {
+  initials: string;
+  name: string;
+  slug: string;
+  count: number;
+};
+
+type ProvinceListProps = {
+  data: ProvinceListItem[];
+};
+
+export function ProvinceList(props: ProvinceListProps) {
+  return (
+    <ul className="mt-3 grid grid-cols-1 gap-5 sm:gap-6 sm:grid-cols-2 lg:grid-cols-3">
+      {props.data.map((province) => (
+        <li
+          key={province.name}
+          className="col-span-1 flex shadow-sm rounded-md"
+        >
+          <div className="bg-blue-500 flex-shrink-0 flex items-center justify-center w-16 text-white text-sm font-medium rounded-l-md">
+            {province.initials}
+          </div>
+          <Link href={`/provinces/${province.slug}`}>
+            <a className="flex-1 flex items-center justify-between border-t border-r border-b border-gray-200 bg-white rounded-r-md truncate">
+              <div className="flex-1 px-4 py-2 text-sm truncate">
+                <span className="text-gray-900 font-medium hover:text-gray-600">
+                  {province.name}
+                </span>
+                <p className="text-gray-500">{province.count} Entri</p>
+              </div>
+            </a>
+          </Link>
+        </li>
+      ))}
+    </ul>
+  );
+}
diff --git a/pages/provinces/index.tsx b/pages/provinces/index.tsx
index ac02d75d7..7344d2070 100644
--- a/pages/provinces/index.tsx
+++ b/pages/provinces/index.tsx
@@ -1,9 +1,9 @@
 import { GetStaticProps } from "next";
 import provinces from "../../lib/provinces";
 import { getInitial, getSlug } from "../../lib/string-utils";
-import Link from "next/link";
 import { SearchForm } from "../../components/search-form";
 import { useState } from "react";
+import { ProvinceList } from "../../components/province-list";
 
 type ProvinceListItem = {
   initials: string;
@@ -38,28 +38,7 @@ export default function ProvincesPage(props: ProvincesPageProps) {
         Daftar Provinsi
       </h2>
       <SearchForm onSubmitKeywords={handleSubmitKeywords} />
-      <ul className="mt-3 grid grid-cols-1 gap-5 sm:gap-6 sm:grid-cols-2 lg:grid-cols-3">
-        {filteredProvinces.map((province) => (
-          <li
-            key={province.name}
-            className="col-span-1 flex shadow-sm rounded-md"
-          >
-            <div className="bg-blue-500 flex-shrink-0 flex items-center justify-center w-16 text-white text-sm font-medium rounded-l-md">
-              {province.initials}
-            </div>
-            <Link href={`/provinces/${province.slug}`}>
-              <a className="flex-1 flex items-center justify-between border-t border-r border-b border-gray-200 bg-white rounded-r-md truncate">
-                <div className="flex-1 px-4 py-2 text-sm truncate">
-                  <span className="text-gray-900 font-medium hover:text-gray-600">
-                    {province.name}
-                  </span>
-                  <p className="text-gray-500">{province.count} Entri</p>
-                </div>
-              </a>
-            </Link>
-          </li>
-        ))}
-      </ul>
+      <ProvinceList data={filteredProvinces} />
     </div>
   );
 }

From 2e83edddccf821471b4bd42a0d7a1ff61a83772c Mon Sep 17 00:00:00 2001
From: Zain Fathoni <me@zainf.dev>
Date: Sat, 17 Jul 2021 11:33:13 +0800
Subject: [PATCH 10/15] Refactor SearchForm to require itemName props

and reuse ProvinceListItem type definition from ProvinceList component
---
 components/province-list.tsx             |  2 +-
 components/search-form.tsx               |  4 +++-
 pages/provinces/[provinceSlug]/index.tsx |  2 ++
 pages/provinces/index.tsx                | 11 ++---------
 4 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/components/province-list.tsx b/components/province-list.tsx
index bfed96652..c590d7537 100644
--- a/components/province-list.tsx
+++ b/components/province-list.tsx
@@ -1,6 +1,6 @@
 import Link from "next/link";
 
-type ProvinceListItem = {
+export type ProvinceListItem = {
   initials: string;
   name: string;
   slug: string;
diff --git a/components/search-form.tsx b/components/search-form.tsx
index d5396044e..856110f8b 100644
--- a/components/search-form.tsx
+++ b/components/search-form.tsx
@@ -7,8 +7,10 @@ interface UsernameFormElement extends HTMLFormElement {
 }
 
 export function SearchForm({
+  itemName,
   onSubmitKeywords,
 }: {
+  itemName: string;
   onSubmitKeywords: (keywords: string) => void;
 }) {
   function handleSubmit(event: React.FormEvent<UsernameFormElement>) {
@@ -19,7 +21,7 @@ export function SearchForm({
   return (
     <form className="flex items-center" onSubmit={handleSubmit}>
       <label htmlFor="keywordsInput" className="flex-shrink-0">
-        Cari provinsi:
+        Cari {itemName}:
       </label>
       <input
         id="keywordsInput"
diff --git a/pages/provinces/[provinceSlug]/index.tsx b/pages/provinces/[provinceSlug]/index.tsx
index dbcb8e80f..4e7eb93cd 100644
--- a/pages/provinces/[provinceSlug]/index.tsx
+++ b/pages/provinces/[provinceSlug]/index.tsx
@@ -1,5 +1,6 @@
 import { GetStaticPaths, GetStaticProps } from "next";
 import { ContactList } from "../../../components/contact-list";
+import { SearchForm } from "../../../components/search-form";
 import provinces, { getProvincesPaths, Province } from "../../../lib/provinces";
 import { getTheLastSegmentFromKebabCase } from "../../../lib/string-utils";
 
@@ -15,6 +16,7 @@ export default function ProvincePage(props: ProvinceProps) {
     return (
       <main>
         <h1>Database for {province.name}</h1>
+        <SearchForm itemName="kontak" onSubmitKeywords={() => {}} />
         <ContactList data={province.data} provinceSlug={provinceSlug} />
       </main>
     );
diff --git a/pages/provinces/index.tsx b/pages/provinces/index.tsx
index 7344d2070..ae2e46a0f 100644
--- a/pages/provinces/index.tsx
+++ b/pages/provinces/index.tsx
@@ -3,14 +3,7 @@ import provinces from "../../lib/provinces";
 import { getInitial, getSlug } from "../../lib/string-utils";
 import { SearchForm } from "../../components/search-form";
 import { useState } from "react";
-import { ProvinceList } from "../../components/province-list";
-
-type ProvinceListItem = {
-  initials: string;
-  name: string;
-  slug: string;
-  count: number;
-};
+import { ProvinceList, ProvinceListItem } from "../../components/province-list";
 
 type ProvincesPageProps = {
   provincesList: ProvinceListItem[];
@@ -37,7 +30,7 @@ export default function ProvincesPage(props: ProvincesPageProps) {
       <h2 className="text-gray-500 text-xs font-medium uppercase tracking-wide">
         Daftar Provinsi
       </h2>
-      <SearchForm onSubmitKeywords={handleSubmitKeywords} />
+      <SearchForm itemName="provinsi" onSubmitKeywords={handleSubmitKeywords} />
       <ProvinceList data={filteredProvinces} />
     </div>
   );

From e40ac11f48d9a85c87eb8271bb7568e384fb981a Mon Sep 17 00:00:00 2001
From: Zain Fathoni <me@zainf.dev>
Date: Sat, 17 Jul 2021 11:45:39 +0800
Subject: [PATCH 11/15] Implement useSearch for ProvincePage

---
 pages/provinces/[provinceSlug]/index.tsx | 35 ++++++++++++++++++++++--
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/pages/provinces/[provinceSlug]/index.tsx b/pages/provinces/[provinceSlug]/index.tsx
index 4e7eb93cd..49ed9590b 100644
--- a/pages/provinces/[provinceSlug]/index.tsx
+++ b/pages/provinces/[provinceSlug]/index.tsx
@@ -1,7 +1,12 @@
 import { GetStaticPaths, GetStaticProps } from "next";
+import { useState } from "react";
 import { ContactList } from "../../../components/contact-list";
 import { SearchForm } from "../../../components/search-form";
-import provinces, { getProvincesPaths, Province } from "../../../lib/provinces";
+import provinces, {
+  Contact,
+  getProvincesPaths,
+  Province,
+} from "../../../lib/provinces";
 import { getTheLastSegmentFromKebabCase } from "../../../lib/string-utils";
 
 type ProvinceProps = {
@@ -9,15 +14,39 @@ type ProvinceProps = {
   provinceSlug: string;
 };
 
+const useSearch = (items: Contact[]) => {
+  const [filteredItems, setFilteredItems] = useState<Contact[]>(items);
+  const handleSubmitKeywords = (keywords: string) => {
+    const lowerKeywords = keywords.toLowerCase();
+    const filterBy = (
+      item: Contact,
+      fieldName: "lokasi" | "penyedia" | "kontak"
+    ) => item[fieldName]?.toLowerCase().includes(lowerKeywords) ?? false;
+    setFilteredItems(
+      items.filter((item) => {
+        return (
+          filterBy(item, "lokasi") ||
+          filterBy(item, "penyedia") ||
+          filterBy(item, "kontak")
+        );
+      })
+    );
+  };
+  return [filteredItems, handleSubmitKeywords] as const;
+};
+
 export default function ProvincePage(props: ProvinceProps) {
   const { province, provinceSlug } = props;
+  const [filteredContacts, handleSubmitKeywords] = useSearch(
+    props.province.data
+  );
 
   if (province) {
     return (
       <main>
         <h1>Database for {province.name}</h1>
-        <SearchForm itemName="kontak" onSubmitKeywords={() => {}} />
-        <ContactList data={province.data} provinceSlug={provinceSlug} />
+        <SearchForm itemName="kontak" onSubmitKeywords={handleSubmitKeywords} />
+        <ContactList data={filteredContacts} provinceSlug={provinceSlug} />
       </main>
     );
   } else {

From fe536b783aac12d365e080e4bb5aea01c8f2d57a Mon Sep 17 00:00:00 2001
From: Zain Fathoni <me@zainf.dev>
Date: Sat, 17 Jul 2021 11:46:50 +0800
Subject: [PATCH 12/15] Simplify filterBy function

---
 pages/provinces/[provinceSlug]/index.tsx | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/pages/provinces/[provinceSlug]/index.tsx b/pages/provinces/[provinceSlug]/index.tsx
index 49ed9590b..234b800b2 100644
--- a/pages/provinces/[provinceSlug]/index.tsx
+++ b/pages/provinces/[provinceSlug]/index.tsx
@@ -18,17 +18,11 @@ const useSearch = (items: Contact[]) => {
   const [filteredItems, setFilteredItems] = useState<Contact[]>(items);
   const handleSubmitKeywords = (keywords: string) => {
     const lowerKeywords = keywords.toLowerCase();
-    const filterBy = (
-      item: Contact,
-      fieldName: "lokasi" | "penyedia" | "kontak"
-    ) => item[fieldName]?.toLowerCase().includes(lowerKeywords) ?? false;
     setFilteredItems(
       items.filter((item) => {
-        return (
-          filterBy(item, "lokasi") ||
-          filterBy(item, "penyedia") ||
-          filterBy(item, "kontak")
-        );
+        const filterBy = (fieldName: "lokasi" | "penyedia" | "kontak") =>
+          item[fieldName]?.toLowerCase().includes(lowerKeywords) ?? false;
+        return filterBy("lokasi") || filterBy("penyedia") || filterBy("kontak");
       })
     );
   };

From 7b1a66f3bd03b585df95a07c93dce30049873cb4 Mon Sep 17 00:00:00 2001
From: Zain Fathoni <me@zainf.dev>
Date: Sat, 17 Jul 2021 11:52:27 +0800
Subject: [PATCH 13/15] Implement useSearch in ProvinceData for all text fields

---
 pages/provinces/[provinceSlug]/index.tsx | 26 +++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/pages/provinces/[provinceSlug]/index.tsx b/pages/provinces/[provinceSlug]/index.tsx
index 234b800b2..62761a971 100644
--- a/pages/provinces/[provinceSlug]/index.tsx
+++ b/pages/provinces/[provinceSlug]/index.tsx
@@ -20,9 +20,29 @@ const useSearch = (items: Contact[]) => {
     const lowerKeywords = keywords.toLowerCase();
     setFilteredItems(
       items.filter((item) => {
-        const filterBy = (fieldName: "lokasi" | "penyedia" | "kontak") =>
-          item[fieldName]?.toLowerCase().includes(lowerKeywords) ?? false;
-        return filterBy("lokasi") || filterBy("penyedia") || filterBy("kontak");
+        const filterBy = (
+          fieldName:
+            | "kebutuhan"
+            | "keterangan"
+            | "lokasi"
+            | "penyedia"
+            | "kontak"
+            | "alamat"
+            | "tautan"
+            | "tambahan_informasi"
+            | "bentuk_verifikasi"
+        ) => 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")
+        );
       })
     );
   };

From 63cf7e4d939942f35c3b2875cc03f4aec4d50c41 Mon Sep 17 00:00:00 2001
From: Zain Fathoni <me@zainf.dev>
Date: Sat, 17 Jul 2021 12:03:48 +0800
Subject: [PATCH 14/15] Refactor manual union typing into using keyof keyword

Co-authored-by: Resi Respati <resir014@users.noreply.github.com>
---
 pages/provinces/[provinceSlug]/index.tsx | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

diff --git a/pages/provinces/[provinceSlug]/index.tsx b/pages/provinces/[provinceSlug]/index.tsx
index 62761a971..a7cd1a8c1 100644
--- a/pages/provinces/[provinceSlug]/index.tsx
+++ b/pages/provinces/[provinceSlug]/index.tsx
@@ -20,18 +20,8 @@ const useSearch = (items: Contact[]) => {
     const lowerKeywords = keywords.toLowerCase();
     setFilteredItems(
       items.filter((item) => {
-        const filterBy = (
-          fieldName:
-            | "kebutuhan"
-            | "keterangan"
-            | "lokasi"
-            | "penyedia"
-            | "kontak"
-            | "alamat"
-            | "tautan"
-            | "tambahan_informasi"
-            | "bentuk_verifikasi"
-        ) => item[fieldName]?.toLowerCase().includes(lowerKeywords) ?? false;
+        const filterBy = (fieldName: keyof Contact) =>
+          item[fieldName]?.toLowerCase().includes(lowerKeywords) ?? false;
         return (
           filterBy("kebutuhan") ||
           filterBy("penyedia") ||

From bd1e7316746880cdee1334dab83b833bd645a97e Mon Sep 17 00:00:00 2001
From: Zain Fathoni <me@zainf.dev>
Date: Sat, 17 Jul 2021 12:27:46 +0800
Subject: [PATCH 15/15] Refactor useSearch to be more generic

for reusability across pages
---
 lib/hooks/use-search.ts                  | 27 ++++++++++++++++
 pages/provinces/[provinceSlug]/index.tsx | 40 ++++++++----------------
 pages/provinces/index.tsx                | 17 ++--------
 3 files changed, 43 insertions(+), 41 deletions(-)
 create mode 100644 lib/hooks/use-search.ts

diff --git a/lib/hooks/use-search.ts b/lib/hooks/use-search.ts
new file mode 100644
index 000000000..be90226f2
--- /dev/null
+++ b/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;
+}
diff --git a/pages/provinces/[provinceSlug]/index.tsx b/pages/provinces/[provinceSlug]/index.tsx
index a7cd1a8c1..2aceabde8 100644
--- a/pages/provinces/[provinceSlug]/index.tsx
+++ b/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) {
diff --git a/pages/provinces/index.tsx b/pages/provinces/index.tsx
index ae2e46a0f..2eb59ad14 100644
--- a/pages/provinces/index.tsx
+++ b/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>