From 93669ca15a1a3ab4f0ed84e4af001c474942add2 Mon Sep 17 00:00:00 2001
From: ekamuktia <ekamuktia@gmail.com>
Date: Sun, 25 Jul 2021 22:07:14 +0700
Subject: [PATCH 1/3] revert filter ui, usefiltermodal as prop

---
 components/search-filter-modal.tsx | 125 +++----------------------
 components/search-filter.tsx       | 142 +++++++++++++++++++++++++++++
 components/search-form.tsx         |  66 +++++++++-----
 3 files changed, 199 insertions(+), 134 deletions(-)
 create mode 100644 components/search-filter.tsx

diff --git a/components/search-filter-modal.tsx b/components/search-filter-modal.tsx
index 3e20e2a33..d5793e53f 100644
--- a/components/search-filter-modal.tsx
+++ b/components/search-filter-modal.tsx
@@ -2,11 +2,9 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import { ChangeEventHandler, Fragment, useMemo, useRef } from "react";
+import { ChangeEventHandler, Fragment, useRef } from "react";
 
-import { FormLabel } from "./ui/forms/form-label";
-import { InputSelect } from "./ui/forms/input-select";
-import { SelectSkeleton } from "./ui/skeleton-loading";
+import { SearchFilter } from "~/components/search-filter";
 
 import { Dialog, Transition } from "@headlessui/react";
 import { XIcon } from "@heroicons/react/solid";
@@ -17,10 +15,10 @@ export interface SortSetting {
 }
 
 export interface SearchFilterModalProps {
-  isLoading?: boolean;
   checkDocSize?: boolean;
   filters: any;
   filterItems?: {};
+  isLoading?: boolean;
   isOpen: boolean;
   handleFilterChange: ChangeEventHandler<HTMLSelectElement>;
   handleSortChange: ChangeEventHandler<HTMLSelectElement>;
@@ -43,110 +41,6 @@ export function SearchFilterModal({
 }: SearchFilterModalProps) {
   const closeButtonRef = useRef(null);
 
-  const filterForms = useMemo(
-    () =>
-      filterItems && (
-        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-          {Object.entries(filterItems).map(([key, value], idx) => {
-            const { title, buckets }: any = value;
-            return (
-              <div key={`filter-${idx}`} className="space-y-1">
-                <FormLabel htmlFor={`filter-${key}`}>{title}</FormLabel>
-                <InputSelect
-                  name={key}
-                  onChange={handleFilterChange}
-                  title={title}
-                  value={filters?.[key]?.length ? filters[key][0] : ""}
-                >
-                  <option value="">Semua</option>
-                  {buckets.map((bucket: any, bIdx: number) => {
-                    if (bucket.key) {
-                      if (checkDocSize) {
-                        if (bucket.doc_count > 0) {
-                          return (
-                            <option
-                              key={`option-${key}-${bIdx + 1}`}
-                              value={bucket.key}
-                            >
-                              {bucket.key}
-                            </option>
-                          );
-                        }
-                        // Do not print, when doc_count = 0 and checkDocSize set to true
-                        return null;
-                      } else {
-                        // FAQ page doesn't check the doc_count
-                        // just pass checkDocSize props to false
-                        return (
-                          <option
-                            key={`option-${key}-${bIdx + 1}`}
-                            value={bucket.key}
-                          >
-                            {bucket.key}
-                          </option>
-                        );
-                      }
-                    }
-                    return null;
-                  })}
-                </InputSelect>
-              </div>
-            );
-          })}
-        </div>
-      ),
-    [filterItems, handleFilterChange, filters, checkDocSize],
-  );
-
-  const sortForms = useMemo(
-    () =>
-      sortSettings?.length && (
-        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-          <div className="space-y-1">
-            <FormLabel htmlFor="sort-by">Urut berdasarkan</FormLabel>
-            <InputSelect
-              name="sort-by"
-              onChange={handleSortChange}
-              title="Urut berdasarkan"
-              value={sortBy}
-            >
-              {sortSettings.map((cur, idx) => {
-                return (
-                  <option key={`sort-by-${idx}`} value={cur.value}>
-                    {cur.label}
-                  </option>
-                );
-              })}
-            </InputSelect>
-          </div>
-        </div>
-      ),
-    [handleSortChange, sortBy, sortSettings],
-  );
-
-  const renderFilterForms = () => {
-    if (isLoading) {
-      return (
-        <>
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-            <SelectSkeleton />
-          </div>
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-            <SelectSkeleton />
-            <SelectSkeleton />
-          </div>
-        </>
-      );
-    }
-
-    return (
-      <>
-        {filterForms}
-        {sortForms}
-      </>
-    );
-  };
-
   return (
     <Transition.Root as={Fragment} show={isOpen}>
       <Dialog
@@ -206,7 +100,18 @@ export function SearchFilterModal({
                   >
                     Filter
                   </Dialog.Title>
-                  <div className="mt-4 space-y-4">{renderFilterForms()}</div>
+                  <div className="mt-4 space-y-4">
+                    <SearchFilter
+                      checkDocSize={checkDocSize}
+                      filterItems={filterItems}
+                      filters={filters}
+                      handleFilterChange={handleFilterChange}
+                      handleSortChange={handleSortChange}
+                      isLoading={isLoading}
+                      sortBy={sortBy}
+                      sortSettings={sortSettings}
+                    />
+                  </div>
                 </div>
               </div>
             </div>
diff --git a/components/search-filter.tsx b/components/search-filter.tsx
new file mode 100644
index 000000000..80643b846
--- /dev/null
+++ b/components/search-filter.tsx
@@ -0,0 +1,142 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+import { ChangeEventHandler, useMemo } from "react";
+
+import { FormLabel } from "./ui/forms/form-label";
+import { InputSelect } from "./ui/forms/input-select";
+import { SelectSkeleton } from "./ui/skeleton-loading";
+
+export interface SortSetting {
+  value: string;
+  label: string;
+}
+
+export interface SearchFilterProps {
+  checkDocSize?: boolean;
+  filters: any;
+  filterItems?: {};
+  handleFilterChange: ChangeEventHandler<HTMLSelectElement>;
+  handleSortChange: ChangeEventHandler<HTMLSelectElement>;
+  isLoading?: boolean;
+  sortBy: string;
+  sortSettings?: SortSetting[];
+}
+
+export function SearchFilter({
+  checkDocSize,
+  filters,
+  filterItems,
+  handleFilterChange,
+  handleSortChange,
+  isLoading,
+  sortBy,
+  sortSettings,
+}: SearchFilterProps) {
+  const filterForms = useMemo(
+    () =>
+      filterItems && (
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          {Object.entries(filterItems).map(([key, value], idx) => {
+            const { title, buckets }: any = value;
+            return (
+              <div key={`filter-${idx}`} className="space-y-1">
+                <FormLabel htmlFor={`filter-${key}`}>{title}</FormLabel>
+                <InputSelect
+                  name={key}
+                  onChange={handleFilterChange}
+                  title={title}
+                  value={filters?.[key]?.length ? filters[key][0] : ""}
+                >
+                  <option value="">Semua</option>
+                  {buckets.map((bucket: any, bIdx: number) => {
+                    if (bucket.key) {
+                      if (checkDocSize) {
+                        if (bucket.doc_count > 0) {
+                          return (
+                            <option
+                              key={`option-${key}-${bIdx + 1}`}
+                              value={bucket.key}
+                            >
+                              {bucket.key}
+                            </option>
+                          );
+                        }
+                        // Do not print, when doc_count = 0 and checkDocSize set to true
+                        return null;
+                      } else {
+                        // FAQ page doesn't check the doc_count
+                        // just pass checkDocSize props to false
+                        return (
+                          <option
+                            key={`option-${key}-${bIdx + 1}`}
+                            value={bucket.key}
+                          >
+                            {bucket.key}
+                          </option>
+                        );
+                      }
+                    }
+                    return null;
+                  })}
+                </InputSelect>
+              </div>
+            );
+          })}
+        </div>
+      ),
+    [filterItems, handleFilterChange, filters, checkDocSize],
+  );
+
+  const sortForms = useMemo(
+    () =>
+      sortSettings?.length && (
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          <div className="space-y-1">
+            <FormLabel htmlFor="sort-by">Urut berdasarkan</FormLabel>
+            <InputSelect
+              name="sort-by"
+              onChange={handleSortChange}
+              title="Urut berdasarkan"
+              value={sortBy}
+            >
+              {sortSettings.map((cur, idx) => {
+                return (
+                  <option key={`sort-by-${idx}`} value={cur.value}>
+                    {cur.label}
+                  </option>
+                );
+              })}
+            </InputSelect>
+          </div>
+        </div>
+      ),
+    [handleSortChange, sortBy, sortSettings],
+  );
+
+  const renderFilterForms = () => {
+    if (isLoading) {
+      return (
+        <>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <SelectSkeleton />
+          </div>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <SelectSkeleton />
+            <SelectSkeleton />
+          </div>
+        </>
+      );
+    }
+
+    return (
+      <>
+        {filterForms}
+        {sortForms}
+      </>
+    );
+  };
+
+  return renderFilterForms();
+}
diff --git a/components/search-form.tsx b/components/search-form.tsx
index 7822c206e..ec554fd4f 100644
--- a/components/search-form.tsx
+++ b/components/search-form.tsx
@@ -19,6 +19,7 @@ import { debounce } from "ts-debounce";
 import { SearchFilterModal, SortSetting } from "./search-filter-modal";
 import { FormGroup } from "./ui/forms/form-group";
 import { FilterIcon } from "@heroicons/react/outline";
+import { SearchFilter } from "~/components/search-filter";
 
 interface FormElements extends HTMLFormControlsCollection {
   keywordsInput: HTMLInputElement;
@@ -42,6 +43,7 @@ interface SearchFormProps {
   };
   isLoading?: boolean;
   sortSettings?: SortSetting[];
+  useFilterModal?: boolean;
 }
 
 export function SearchForm({
@@ -54,6 +56,7 @@ export function SearchForm({
   initialValue,
   isLoading,
   sortSettings,
+  useFilterModal = false,
 }: SearchFormProps) {
   const defaultSort = sortSettings?.length ? sortSettings[0].value : "";
   const [keywords, setKeywords] = useState<string>("");
@@ -138,18 +141,20 @@ export function SearchForm({
                 type="text"
                 value={keywords}
               />
-              {!isLoading && (filterItems || sortSettings?.length) && (
-                <button
-                  className="-ml-px relative inline-flex items-center space-x-2 px-4 py-2 border border-gray-300 text-sm font-medium rounded-r-md text-gray-700 bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
-                  onClick={() => setFilterModalOpen(true)}
-                >
-                  <FilterIcon
-                    aria-hidden="true"
-                    className="h-5 w-5 text-gray-400"
-                  />
-                  <span>Filter</span>
-                </button>
-              )}
+              {useFilterModal &&
+                !isLoading &&
+                (filterItems || sortSettings?.length) && (
+                  <button
+                    className="-ml-px relative inline-flex items-center space-x-2 px-4 py-2 border border-gray-300 text-sm font-medium rounded-r-md text-gray-700 bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+                    onClick={() => setFilterModalOpen(true)}
+                  >
+                    <FilterIcon
+                      aria-hidden="true"
+                      className="h-5 w-5 text-gray-400"
+                    />
+                    <span>Filter</span>
+                  </button>
+                )}
             </FormGroup>
           </div>
         </div>
@@ -165,18 +170,31 @@ export function SearchForm({
         </div>
       </div>
 
-      <SearchFilterModal
-        checkDocSize={checkDocSize}
-        filterItems={filterItems}
-        filters={filters}
-        handleFilterChange={handleFilterChange}
-        handleSortChange={handleSortChange}
-        isLoading={isLoading}
-        isOpen={isFilterModalOpen}
-        onToggle={setFilterModalOpen}
-        sortBy={sortBy}
-        sortSettings={sortSettings}
-      />
+      {useFilterModal ? (
+        <SearchFilterModal
+          checkDocSize={checkDocSize}
+          filterItems={filterItems}
+          filters={filters}
+          handleFilterChange={handleFilterChange}
+          handleSortChange={handleSortChange}
+          isLoading={isLoading}
+          isOpen={isFilterModalOpen}
+          onToggle={setFilterModalOpen}
+          sortBy={sortBy}
+          sortSettings={sortSettings}
+        />
+      ) : (
+        <SearchFilter
+          checkDocSize={checkDocSize}
+          filterItems={filterItems}
+          filters={filters}
+          handleFilterChange={handleFilterChange}
+          handleSortChange={handleSortChange}
+          isLoading={isLoading}
+          sortBy={sortBy}
+          sortSettings={sortSettings}
+        />
+      )}
     </form>
   );
 }

From dda5b7606386567caecd10cdeca9c833e6962535 Mon Sep 17 00:00:00 2001
From: ekamuktia <ekamuktia@gmail.com>
Date: Sun, 25 Jul 2021 22:32:31 +0700
Subject: [PATCH 2/3] remove reset button, remove sort in contact list page

---
 components/__tests__/search-form.test.tsx |  6 -----
 components/search-form.tsx                | 27 +++++------------------
 pages/provinces/[provinceSlug]/index.tsx  |  4 ----
 3 files changed, 6 insertions(+), 31 deletions(-)

diff --git a/components/__tests__/search-form.test.tsx b/components/__tests__/search-form.test.tsx
index eb753b434..a62301721 100644
--- a/components/__tests__/search-form.test.tsx
+++ b/components/__tests__/search-form.test.tsx
@@ -59,12 +59,6 @@ describe("SearchForm", () => {
             >
               Cari
             </button>
-            <button
-              class="flex px-4 py-2 text-sm rounded-md items-center justify-center border border-transparent font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 text-blue-700 bg-blue-100 hover:bg-blue-200 focus:ring-blue-500 disabled:cursor-not-allowed disabled:opacity-75 flex-1 ml-2"
-              type="reset"
-            >
-              Reset
-            </button>
           </div>
         </div>
       </form>
diff --git a/components/search-form.tsx b/components/search-form.tsx
index ec554fd4f..91ce1e20b 100644
--- a/components/search-form.tsx
+++ b/components/search-form.tsx
@@ -11,7 +11,7 @@ import React, {
   useState,
 } from "react";
 
-import { PrimaryButton, SecondaryButton } from "./ui/button";
+import { PrimaryButton } from "./ui/button";
 import { FormLabel } from "./ui/forms/form-label";
 import { InputText } from "./ui/forms/input-text";
 
@@ -70,14 +70,6 @@ export function SearchForm({
     onSubmitKeywords(keywords, {}, sortBy);
   }
 
-  function handleReset(event: FormEvent<UsernameFormElement>) {
-    event.preventDefault();
-    setKeywords("");
-    setFilters({});
-    setSortBy(defaultSort);
-    onSubmitKeywords("");
-  }
-
   const debouncedSearch = useCallback(
     debounce(
       (keywordsValue: string, filtersValue?: any, sortValue?: string) =>
@@ -121,11 +113,7 @@ export function SearchForm({
   }, [initialValue]);
 
   return (
-    <form
-      className="pb-8 space-y-4"
-      onReset={handleReset}
-      onSubmit={handleSubmit}
-    >
+    <form className="pb-8 space-y-4" onSubmit={handleSubmit}>
       <div className="flex flex-col sm:flex-row sm:items-end">
         <div className="flex flex-1 items-center mt-1">
           <div className="space-y-1 flex-1">
@@ -158,16 +146,13 @@ export function SearchForm({
             </FormGroup>
           </div>
         </div>
-        <div className="flex flex-row mt-2 ml-0 sm:mt-0 sm:ml-2">
-          {!autoSearch && (
+        {!autoSearch && (
+          <div className="flex flex-row mt-2 ml-0 sm:mt-0 sm:ml-2">
             <PrimaryButton block className="flex-1" type="submit">
               Cari
             </PrimaryButton>
-          )}
-          <SecondaryButton block className="flex-1 ml-2" type="reset">
-            Reset
-          </SecondaryButton>
-        </div>
+          </div>
+        )}
       </div>
 
       {useFilterModal ? (
diff --git a/pages/provinces/[provinceSlug]/index.tsx b/pages/provinces/[provinceSlug]/index.tsx
index 78503140f..d4a4e0611 100644
--- a/pages/provinces/[provinceSlug]/index.tsx
+++ b/pages/provinces/[provinceSlug]/index.tsx
@@ -96,10 +96,6 @@ export default function ProvincePage(props: ProvinceProps) {
             itemName="kontak"
             onSubmitKeywords={handleSubmitKeywords}
             placeholderText="Cari berdasarkan kontak, alamat, provider, dan keterangan"
-            sortSettings={[
-              { value: "verified_first", label: "Terverifikasi" },
-              { value: "penyedia_asc", label: "Nama" },
-            ]}
           />
           <ContactList
             data={filteredContacts}

From 3fd68a37492878b932ca93a3c04d3adc6fb8f3d9 Mon Sep 17 00:00:00 2001
From: ekamuktia <ekamuktia@gmail.com>
Date: Sun, 25 Jul 2021 22:45:51 +0700
Subject: [PATCH 3/3] rename useFilterModal to withFilterModal

---
 components/search-form.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/search-form.tsx b/components/search-form.tsx
index 91ce1e20b..c38f5dccb 100644
--- a/components/search-form.tsx
+++ b/components/search-form.tsx
@@ -43,7 +43,7 @@ interface SearchFormProps {
   };
   isLoading?: boolean;
   sortSettings?: SortSetting[];
-  useFilterModal?: boolean;
+  withFilterModal?: boolean;
 }
 
 export function SearchForm({
@@ -56,7 +56,7 @@ export function SearchForm({
   initialValue,
   isLoading,
   sortSettings,
-  useFilterModal = false,
+  withFilterModal = false,
 }: SearchFormProps) {
   const defaultSort = sortSettings?.length ? sortSettings[0].value : "";
   const [keywords, setKeywords] = useState<string>("");
@@ -129,7 +129,7 @@ export function SearchForm({
                 type="text"
                 value={keywords}
               />
-              {useFilterModal &&
+              {withFilterModal &&
                 !isLoading &&
                 (filterItems || sortSettings?.length) && (
                   <button
@@ -155,7 +155,7 @@ export function SearchForm({
         )}
       </div>
 
-      {useFilterModal ? (
+      {withFilterModal ? (
         <SearchFilterModal
           checkDocSize={checkDocSize}
           filterItems={filterItems}