From cea566b8e95ebc6e5b08278842ce676b6b794f1f Mon Sep 17 00:00:00 2001
From: Jeff Sieu <jeffsy00@gmail.com>
Date: Mon, 10 Oct 2022 16:18:50 +0800
Subject: [PATCH 1/2] [questions][ui] remove ui-patch components

---
 .../questions/ContributeQuestionForm.tsx      | 17 ++++++---
 .../questions/filter/FilterSection.tsx        | 25 ++++++++-----
 .../questions/ui-patch/Checkbox.tsx           | 25 -------------
 .../questions/ui-patch/RadioGroup.tsx         | 36 -------------------
 4 files changed, 28 insertions(+), 75 deletions(-)
 delete mode 100644 apps/portal/src/components/questions/ui-patch/Checkbox.tsx
 delete mode 100644 apps/portal/src/components/questions/ui-patch/RadioGroup.tsx

diff --git a/apps/portal/src/components/questions/ContributeQuestionForm.tsx b/apps/portal/src/components/questions/ContributeQuestionForm.tsx
index c5e7f84b..5e230d73 100644
--- a/apps/portal/src/components/questions/ContributeQuestionForm.tsx
+++ b/apps/portal/src/components/questions/ContributeQuestionForm.tsx
@@ -3,7 +3,14 @@ import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { CalendarDaysIcon, UserIcon } from '@heroicons/react/24/outline';
 import type { QuestionsQuestionType } from '@prisma/client';
-import { Button, Collapsible, Select, TextArea, TextInput } from '@tih/ui';
+import {
+  Button,
+  CheckboxInput,
+  Collapsible,
+  Select,
+  TextArea,
+  TextInput,
+} from '@tih/ui';
 
 import { QUESTION_TYPES } from '~/utils/questions/constants';
 import {
@@ -11,7 +18,6 @@ import {
   useSelectRegister,
 } from '~/utils/questions/useFormRegister';
 
-import Checkbox from './ui-patch/Checkbox';
 import CompaniesTypeahead from '../shared/CompaniesTypeahead';
 import type { Month } from '../shared/MonthYearPicker';
 import MonthYearPicker from '../shared/MonthYearPicker';
@@ -148,10 +154,11 @@ export default function ContributeQuestionForm({
       </div> */}
       <div className="bg-primary-50 fixed bottom-0 left-0 w-full px-4 py-3 sm:flex sm:flex-row sm:justify-between sm:px-6">
         <div className="mb-1 flex">
-          <Checkbox
-            checked={canSubmit}
+          <CheckboxInput
             label="I have checked that my question is new"
-            onChange={handleCheckSimilarQuestions}></Checkbox>
+            value={canSubmit}
+            onChange={handleCheckSimilarQuestions}
+          />
         </div>
         <div className=" flex gap-x-2">
           <button
diff --git a/apps/portal/src/components/questions/filter/FilterSection.tsx b/apps/portal/src/components/questions/filter/FilterSection.tsx
index cfb6ba5c..5c515333 100644
--- a/apps/portal/src/components/questions/filter/FilterSection.tsx
+++ b/apps/portal/src/components/questions/filter/FilterSection.tsx
@@ -1,8 +1,5 @@
 import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
-import { Collapsible, TextInput } from '@tih/ui';
-
-import Checkbox from '../ui-patch/Checkbox';
-import RadioGroup from '../ui-patch/RadioGroup';
+import { CheckboxInput, Collapsible, RadioList, TextInput } from '@tih/ui';
 
 export type FilterOption<V extends string = string> = {
   checked: boolean;
@@ -66,17 +63,27 @@ export default function FilterSection<
             />
           )}
           {isSingleSelect ? (
-            <RadioGroup
-              radioData={options}
+            <RadioList
+              label=""
+              value={options.find((option) => option.checked)?.value}
               onChange={(value) => {
                 onOptionChange(value);
-              }}></RadioGroup>
+              }}>
+              {options.map((option) => (
+                <RadioList.Item
+                  key={option.value}
+                  label={option.label}
+                  value={option.value}
+                />
+              ))}
+            </RadioList>
           ) : (
             <div className="mx-1">
               {options.map((option) => (
-                <Checkbox
+                <CheckboxInput
                   key={option.value}
-                  {...option}
+                  label={option.label}
+                  value={option.checked}
                   onChange={(checked) => {
                     onOptionChange(option.value, checked);
                   }}
diff --git a/apps/portal/src/components/questions/ui-patch/Checkbox.tsx b/apps/portal/src/components/questions/ui-patch/Checkbox.tsx
deleted file mode 100644
index 413c12fe..00000000
--- a/apps/portal/src/components/questions/ui-patch/Checkbox.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useId } from 'react';
-
-export type CheckboxProps = {
-  checked: boolean;
-  label: string;
-  onChange: (checked: boolean) => void;
-};
-
-export default function Checkbox({ label, checked, onChange }: CheckboxProps) {
-  const id = useId();
-  return (
-    <div className="flex items-center">
-      <input
-        checked={checked}
-        className="text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-gray-300"
-        id={id}
-        type="checkbox"
-        onChange={(event) => onChange(event.target.checked)}
-      />
-      <label className="ml-3 min-w-0 flex-1 text-gray-700" htmlFor={id}>
-        {label}
-      </label>
-    </div>
-  );
-}
diff --git a/apps/portal/src/components/questions/ui-patch/RadioGroup.tsx b/apps/portal/src/components/questions/ui-patch/RadioGroup.tsx
deleted file mode 100644
index 4b6692c4..00000000
--- a/apps/portal/src/components/questions/ui-patch/RadioGroup.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-export type RadioProps = {
-  onChange: (value: string) => void;
-  radioData: Array<RadioData>;
-};
-
-export type RadioData = {
-  checked: boolean;
-  label: string;
-  value: string;
-};
-
-export default function RadioGroup({ radioData, onChange }: RadioProps) {
-  return (
-    <div className="mx-1 space-y-1">
-      {radioData.map((radio) => (
-        <div key={radio.value} className="flex items-center">
-          <input
-            checked={radio.checked}
-            className="text-primary-600 focus:ring-primary-500 h-4 w-4 border-gray-300"
-            type="radio"
-            value={radio.value}
-            onChange={(event) => {
-              const target = event.target as HTMLInputElement;
-              onChange(target.value);
-            }}
-          />
-          <label
-            className="ml-3 min-w-0 flex-1 text-gray-700"
-            htmlFor={radio.value}>
-            {radio.label}
-          </label>
-        </div>
-      ))}
-    </div>
-  );
-}

From 38eefa2fd348ce8fa85789e184b1f8c98e9f9ae1 Mon Sep 17 00:00:00 2001
From: Jeff Sieu <jeffsy00@gmail.com>
Date: Mon, 10 Oct 2022 16:48:47 +0800
Subject: [PATCH 2/2] [question][fix] fix search filters

---
 .../questions/filter/FilterSection.tsx        | 32 ++++++++++---------
 apps/portal/src/pages/questions/index.tsx     | 21 +++++++-----
 .../src/utils/questions/useSearchFilter.ts    | 13 ++------
 3 files changed, 32 insertions(+), 34 deletions(-)

diff --git a/apps/portal/src/components/questions/filter/FilterSection.tsx b/apps/portal/src/components/questions/filter/FilterSection.tsx
index 5c515333..312122c3 100644
--- a/apps/portal/src/components/questions/filter/FilterSection.tsx
+++ b/apps/portal/src/components/questions/filter/FilterSection.tsx
@@ -63,22 +63,24 @@ export default function FilterSection<
             />
           )}
           {isSingleSelect ? (
-            <RadioList
-              label=""
-              value={options.find((option) => option.checked)?.value}
-              onChange={(value) => {
-                onOptionChange(value);
-              }}>
-              {options.map((option) => (
-                <RadioList.Item
-                  key={option.value}
-                  label={option.label}
-                  value={option.value}
-                />
-              ))}
-            </RadioList>
+            <div className="px-1.5">
+              <RadioList
+                label=""
+                value={options.find((option) => option.checked)?.value}
+                onChange={(value) => {
+                  onOptionChange(value);
+                }}>
+                {options.map((option) => (
+                  <RadioList.Item
+                    key={option.value}
+                    label={option.label}
+                    value={option.value}
+                  />
+                ))}
+              </RadioList>
+            </div>
           ) : (
-            <div className="mx-1">
+            <div className="px-1.5">
               {options.map((option) => (
                 <CheckboxInput
                   key={option.value}
diff --git a/apps/portal/src/pages/questions/index.tsx b/apps/portal/src/pages/questions/index.tsx
index 41e2cee7..776a3f72 100644
--- a/apps/portal/src/pages/questions/index.tsx
+++ b/apps/portal/src/pages/questions/index.tsx
@@ -1,5 +1,5 @@
 import { subMonths, subYears } from 'date-fns';
-import { useRouter } from 'next/router';
+import Router, { useRouter } from 'next/router';
 import { useEffect, useMemo, useState } from 'react';
 import { NoSymbolIcon } from '@heroicons/react/24/outline';
 import type { QuestionsQuestionType } from '@prisma/client';
@@ -120,8 +120,9 @@ export default function QuestionsHomePage() {
     }));
   }, [selectedLocations]);
 
-  const handleLandingQuery = (data: LandingQueryData) => {
+  const handleLandingQuery = async (data: LandingQueryData) => {
     const { company, location, questionType } = data;
+
     setSelectedCompanies([company]);
     setSelectedLocations([location]);
     setSelectedQuestionTypes([questionType as QuestionsQuestionType]);
@@ -142,11 +143,15 @@ export default function QuestionsHomePage() {
     areLocationsInitialized,
   ]);
 
+  const { pathname } = router;
+
   useEffect(() => {
-    if (areFiltersInitialized && !loaded) {
-      // Update query params
-      router.replace({
-        pathname: router.pathname,
+    if (areFiltersInitialized) {
+      // Router.replace used instead of router.replace to avoid
+      // the page reloading itself since the router.replace
+      // callback changes on every page load
+      Router.replace({
+        pathname,
         query: {
           companies: selectedCompanies,
           locations: selectedLocations,
@@ -169,7 +174,7 @@ export default function QuestionsHomePage() {
     areFiltersInitialized,
     hasLanded,
     loaded,
-    router,
+    pathname,
     selectedCompanies,
     selectedLocations,
     selectedQuestionAge,
@@ -181,7 +186,7 @@ export default function QuestionsHomePage() {
   }
 
   const filterSidebar = (
-    <div className="divide-y divide-slate-200 px-4">
+    <div className="mt-2 divide-y divide-slate-200 px-4">
       <FilterSection
         label="Company"
         options={companyFilterOptions}
diff --git a/apps/portal/src/utils/questions/useSearchFilter.ts b/apps/portal/src/utils/questions/useSearchFilter.ts
index 193e7165..0b916261 100644
--- a/apps/portal/src/utils/questions/useSearchFilter.ts
+++ b/apps/portal/src/utils/questions/useSearchFilter.ts
@@ -37,15 +37,8 @@ export const useSearchFilter = <Value extends string = string>(
     (newFilters: Array<Value>) => {
       setFilters(newFilters);
       localStorage.setItem(name, JSON.stringify(newFilters));
-      router.replace({
-        pathname: router.pathname,
-        query: {
-          ...router.query,
-          [name]: newFilters,
-        },
-      });
     },
-    [name, router],
+    [name],
   );
 
   return [filters, setFiltersCallback, isInitialized] as const;
@@ -66,9 +59,7 @@ export const useSearchFilterSingle = <Value extends string = string>(
 
   return [
     filters[0],
-    (value: Value) => {
-      setFilters([value]);
-    },
+    (value: Value) => setFilters([value]),
     isInitialized,
   ] as const;
 };