From 1acb37939cbfadcc67db8d5ad06477b25d5448bd Mon Sep 17 00:00:00 2001
From: Tay Yang Shun <tay.yang.shun@gmail.com>
Date: Mon, 31 Oct 2022 20:24:07 +0800
Subject: [PATCH] [portal][misc] refactor typeahead props

---
 .../src/components/shared/CitiesTypeahead.tsx | 38 +++++++++----------
 .../components/shared/CompaniesTypeahead.tsx  | 36 +++++++++---------
 .../components/shared/CountriesTypeahead.tsx  | 36 +++++++++---------
 .../components/shared/JobTitlesTypahead.tsx   | 35 ++++++++---------
 4 files changed, 73 insertions(+), 72 deletions(-)

diff --git a/apps/portal/src/components/shared/CitiesTypeahead.tsx b/apps/portal/src/components/shared/CitiesTypeahead.tsx
index 05e527ca..902759b0 100644
--- a/apps/portal/src/components/shared/CitiesTypeahead.tsx
+++ b/apps/portal/src/components/shared/CitiesTypeahead.tsx
@@ -1,28 +1,32 @@
+import type { ComponentProps } from 'react';
 import { useState } from 'react';
 import type { TypeaheadOption } from '@tih/ui';
 import { Typeahead } from '@tih/ui';
 
 import { trpc } from '~/utils/trpc';
 
-type Props = Readonly<{
-  disabled?: boolean;
-  errorMessage?: string;
-  isLabelHidden?: boolean;
-  label?: string;
-  onSelect: (option: TypeaheadOption | null) => void;
-  placeholder?: string;
-  required?: boolean;
-  value?: TypeaheadOption | null;
-}>;
+type BaseProps = Pick<
+  ComponentProps<typeof Typeahead>,
+  | 'disabled'
+  | 'errorMessage'
+  | 'isLabelHidden'
+  | 'placeholder'
+  | 'required'
+  | 'textSize'
+>;
+
+type Props = BaseProps &
+  Readonly<{
+    label?: string;
+    onSelect: (option: TypeaheadOption | null) => void;
+    value?: TypeaheadOption | null;
+  }>;
 
 export default function CitiesTypeahead({
-  disabled,
   label = 'City',
   onSelect,
-  isLabelHidden,
-  placeholder,
-  required,
   value,
+  ...props
 }: Props) {
   const [query, setQuery] = useState('');
   const cities = trpc.useQuery([
@@ -36,8 +40,6 @@ export default function CitiesTypeahead({
 
   return (
     <Typeahead
-      disabled={disabled}
-      isLabelHidden={isLabelHidden}
       label={label}
       noResultsMessage="No cities found"
       nullable={true}
@@ -48,12 +50,10 @@ export default function CitiesTypeahead({
           value: id,
         })) ?? []
       }
-      placeholder={placeholder}
-      required={required}
-      textSize="inherit"
       value={value}
       onQueryChange={setQuery}
       onSelect={onSelect}
+      {...props}
     />
   );
 }
diff --git a/apps/portal/src/components/shared/CompaniesTypeahead.tsx b/apps/portal/src/components/shared/CompaniesTypeahead.tsx
index 619d9a55..76d35557 100644
--- a/apps/portal/src/components/shared/CompaniesTypeahead.tsx
+++ b/apps/portal/src/components/shared/CompaniesTypeahead.tsx
@@ -1,26 +1,30 @@
+import type { ComponentProps } from 'react';
 import { useState } from 'react';
 import type { TypeaheadOption } from '@tih/ui';
 import { Typeahead } from '@tih/ui';
 
 import { trpc } from '~/utils/trpc';
 
-type Props = Readonly<{
-  disabled?: boolean;
-  errorMessage?: string;
-  isLabelHidden?: boolean;
-  onSelect: (option: TypeaheadOption | null) => void;
-  placeholder?: string;
-  required?: boolean;
-  value?: TypeaheadOption | null;
-}>;
+type BaseProps = Pick<
+  ComponentProps<typeof Typeahead>,
+  | 'disabled'
+  | 'errorMessage'
+  | 'isLabelHidden'
+  | 'placeholder'
+  | 'required'
+  | 'textSize'
+>;
+
+type Props = BaseProps &
+  Readonly<{
+    onSelect: (option: TypeaheadOption | null) => void;
+    value?: TypeaheadOption | null;
+  }>;
 
 export default function CompaniesTypeahead({
-  disabled,
   onSelect,
-  isLabelHidden,
-  placeholder,
-  required,
   value,
+  ...props
 }: Props) {
   const [query, setQuery] = useState('');
   const companies = trpc.useQuery([
@@ -34,8 +38,6 @@ export default function CompaniesTypeahead({
 
   return (
     <Typeahead
-      disabled={disabled}
-      isLabelHidden={isLabelHidden}
       label="Company"
       noResultsMessage="No companies found"
       nullable={true}
@@ -46,12 +48,10 @@ export default function CompaniesTypeahead({
           value: id,
         })) ?? []
       }
-      placeholder={placeholder}
-      required={required}
-      textSize="inherit"
       value={value}
       onQueryChange={setQuery}
       onSelect={onSelect}
+      {...props}
     />
   );
 }
diff --git a/apps/portal/src/components/shared/CountriesTypeahead.tsx b/apps/portal/src/components/shared/CountriesTypeahead.tsx
index c3bae569..51d72cb0 100644
--- a/apps/portal/src/components/shared/CountriesTypeahead.tsx
+++ b/apps/portal/src/components/shared/CountriesTypeahead.tsx
@@ -1,26 +1,30 @@
+import type { ComponentProps } from 'react';
 import { useState } from 'react';
 import type { TypeaheadOption } from '@tih/ui';
 import { Typeahead } from '@tih/ui';
 
 import { trpc } from '~/utils/trpc';
 
-type Props = Readonly<{
-  disabled?: boolean;
-  errorMessage?: string;
-  isLabelHidden?: boolean;
-  onSelect: (option: TypeaheadOption | null) => void;
-  placeholder?: string;
-  required?: boolean;
-  value?: TypeaheadOption | null;
-}>;
+type BaseProps = Pick<
+  ComponentProps<typeof Typeahead>,
+  | 'disabled'
+  | 'errorMessage'
+  | 'isLabelHidden'
+  | 'placeholder'
+  | 'required'
+  | 'textSize'
+>;
+
+type Props = BaseProps &
+  Readonly<{
+    onSelect: (option: TypeaheadOption | null) => void;
+    value?: TypeaheadOption | null;
+  }>;
 
 export default function CountriesTypeahead({
-  disabled,
   onSelect,
-  isLabelHidden,
-  placeholder,
-  required,
   value,
+  ...props
 }: Props) {
   const [query, setQuery] = useState('');
   const countries = trpc.useQuery([
@@ -34,8 +38,6 @@ export default function CountriesTypeahead({
 
   return (
     <Typeahead
-      disabled={disabled}
-      isLabelHidden={isLabelHidden}
       label="Country"
       noResultsMessage="No countries found"
       nullable={true}
@@ -46,12 +48,10 @@ export default function CountriesTypeahead({
           value: id,
         })) ?? []
       }
-      placeholder={placeholder}
-      required={required}
-      textSize="inherit"
       value={value}
       onQueryChange={setQuery}
       onSelect={onSelect}
+      {...props}
     />
   );
 }
diff --git a/apps/portal/src/components/shared/JobTitlesTypahead.tsx b/apps/portal/src/components/shared/JobTitlesTypahead.tsx
index b5221262..9de68c45 100644
--- a/apps/portal/src/components/shared/JobTitlesTypahead.tsx
+++ b/apps/portal/src/components/shared/JobTitlesTypahead.tsx
@@ -1,25 +1,30 @@
+import type { ComponentProps } from 'react';
 import { useState } from 'react';
 import type { TypeaheadOption } from '@tih/ui';
 import { Typeahead } from '@tih/ui';
 
 import { JobTitleLabels } from './JobTitles';
 
-type Props = Readonly<{
-  disabled?: boolean;
-  isLabelHidden?: boolean;
-  onSelect: (option: TypeaheadOption | null) => void;
-  placeholder?: string;
-  required?: boolean;
-  value?: TypeaheadOption | null;
-}>;
+type BaseProps = Pick<
+  ComponentProps<typeof Typeahead>,
+  | 'disabled'
+  | 'errorMessage'
+  | 'isLabelHidden'
+  | 'placeholder'
+  | 'required'
+  | 'textSize'
+>;
+
+type Props = BaseProps &
+  Readonly<{
+    onSelect: (option: TypeaheadOption | null) => void;
+    value?: TypeaheadOption | null;
+  }>;
 
 export default function JobTitlesTypeahead({
-  disabled,
   onSelect,
-  isLabelHidden,
-  placeholder,
-  required,
   value,
+  ...props
 }: Props) {
   const [query, setQuery] = useState('');
   const options = Object.entries(JobTitleLabels)
@@ -35,18 +40,14 @@ export default function JobTitlesTypeahead({
 
   return (
     <Typeahead
-      disabled={disabled}
-      isLabelHidden={isLabelHidden}
       label="Job Title"
       noResultsMessage="No available job titles."
       nullable={true}
       options={options}
-      placeholder={placeholder}
-      required={required}
-      textSize="inherit"
       value={value}
       onQueryChange={setQuery}
       onSelect={onSelect}
+      {...props}
     />
   );
 }