From d1fc6e559ce4e3e91e8eff46ee83ff33da9c3097 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Sun, 6 Nov 2022 11:03:14 +0800
Subject: [PATCH] [resumes][refactor] use JobTitlesTypeahead instead

---
 .../resumes/shared/ResumeRoleTypeahead.tsx    | 56 -------------------
 .../components/shared/JobTitlesTypeahead.tsx  | 15 +++--
 apps/portal/src/pages/resumes/index.tsx       | 13 +++--
 apps/portal/src/pages/resumes/submit.tsx      |  6 +-
 4 files changed, 23 insertions(+), 67 deletions(-)
 delete mode 100644 apps/portal/src/components/resumes/shared/ResumeRoleTypeahead.tsx

diff --git a/apps/portal/src/components/resumes/shared/ResumeRoleTypeahead.tsx b/apps/portal/src/components/resumes/shared/ResumeRoleTypeahead.tsx
deleted file mode 100644
index b5459200..00000000
--- a/apps/portal/src/components/resumes/shared/ResumeRoleTypeahead.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import type { ComponentProps } from 'react';
-import { useState } from 'react';
-import type { TypeaheadOption } from '@tih/ui';
-import { Typeahead } from '@tih/ui';
-
-import { JobTitleLabels } from '~/components/shared/JobTitles';
-
-type BaseProps = Pick<
-  ComponentProps<typeof Typeahead>,
-  | 'disabled'
-  | 'errorMessage'
-  | 'isLabelHidden'
-  | 'placeholder'
-  | 'required'
-  | 'textSize'
->;
-
-type Props = BaseProps &
-  Readonly<{
-    onSelect: (option: TypeaheadOption | null) => void;
-    selectedValues?: Set<string>;
-    value?: TypeaheadOption | null;
-  }>;
-
-export default function ResumeRoleTypeahead({
-  onSelect,
-  selectedValues = new Set(),
-  value,
-  ...props
-}: Props) {
-  const [query, setQuery] = useState('');
-  const options = Object.entries(JobTitleLabels)
-    .map(([slug, { label }]) => ({
-      id: slug,
-      label,
-      value: slug,
-    }))
-    .filter((option) => !selectedValues.has(option.value))
-    .filter(
-      ({ label }) =>
-        label.toLocaleLowerCase().indexOf(query.toLocaleLowerCase()) > -1,
-    );
-
-  return (
-    <Typeahead
-      label="Role"
-      noResultsMessage="No available roles."
-      nullable={true}
-      options={options}
-      value={value}
-      onQueryChange={setQuery}
-      onSelect={onSelect}
-      {...props}
-    />
-  );
-}
diff --git a/apps/portal/src/components/shared/JobTitlesTypeahead.tsx b/apps/portal/src/components/shared/JobTitlesTypeahead.tsx
index ab0b0404..9f560fce 100644
--- a/apps/portal/src/components/shared/JobTitlesTypeahead.tsx
+++ b/apps/portal/src/components/shared/JobTitlesTypeahead.tsx
@@ -17,11 +17,17 @@ type BaseProps = Pick<
 
 type Props = BaseProps &
   Readonly<{
+    excludedValues?: Set<string>;
+    label?: string;
+    noResultsMessage?: string;
     onSelect: (option: TypeaheadOption | null) => void;
     value?: TypeaheadOption | null;
   }>;
 
 export default function JobTitlesTypeahead({
+  excludedValues,
+  label: labelProp = 'Job Title',
+  noResultsMessage = 'No available job titles.',
   onSelect,
   value,
   ...props
@@ -34,15 +40,16 @@ export default function JobTitlesTypeahead({
       ranking,
       value: slug,
     }))
-    .sort((a, b) => b.ranking - a.ranking)
     .filter(({ label }) =>
       label.toLocaleLowerCase().includes(query.trim().toLocaleLowerCase()),
-    );
+    )
+    .filter((option) => !excludedValues?.has(option.value))
+    .sort((a, b) => b.ranking - a.ranking);
 
   return (
     <Typeahead
-      label="Job Title"
-      noResultsMessage="No available job titles."
+      label={labelProp}
+      noResultsMessage={noResultsMessage}
       nullable={true}
       options={options}
       value={value}
diff --git a/apps/portal/src/pages/resumes/index.tsx b/apps/portal/src/pages/resumes/index.tsx
index ca4c1639..157d25b1 100644
--- a/apps/portal/src/pages/resumes/index.tsx
+++ b/apps/portal/src/pages/resumes/index.tsx
@@ -25,7 +25,6 @@ import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics';
 import ResumeFilterPill from '~/components/resumes/browse/ResumeFilterPill';
 import ResumeListItems from '~/components/resumes/browse/ResumeListItems';
 import ResumeExperienceTypeahead from '~/components/resumes/shared/ResumeExperienceTypeahead';
-import ResumeRoleTypeahead from '~/components/resumes/shared/ResumeRoleTypeahead';
 import ResumeSignInButton from '~/components/resumes/shared/ResumeSignInButton';
 import CountriesTypeahead from '~/components/shared/CountriesTypeahead';
 import loginPageHref from '~/components/shared/loginPageHref';
@@ -43,6 +42,8 @@ import useDebounceValue from '~/utils/resumes/useDebounceValue';
 import useSearchParams from '~/utils/resumes/useSearchParams';
 import { trpc } from '~/utils/trpc';
 
+import JobTitlesTypeahead from '../../components/shared/JobTitlesTypeahead';
+
 const STALE_TIME = 5 * 60 * 1000;
 const DEBOUNCE_DELAY = 800;
 const PAGE_LIMIT = 10;
@@ -356,12 +357,14 @@ export default function ResumeHomePage() {
         );
       case 'role':
         return (
-          <ResumeRoleTypeahead
-            isLabelHidden={true}
-            placeholder="Select roles"
-            selectedValues={
+          <JobTitlesTypeahead
+            excludedValues={
               new Set(userFilters[filterId].map(({ value }) => value))
             }
+            isLabelHidden={true}
+            label="Role"
+            noResultsMessage="No available roles."
+            placeholder="Select roles"
             onSelect={onSelect}
           />
         );
diff --git a/apps/portal/src/pages/resumes/submit.tsx b/apps/portal/src/pages/resumes/submit.tsx
index c6721931..802b0107 100644
--- a/apps/portal/src/pages/resumes/submit.tsx
+++ b/apps/portal/src/pages/resumes/submit.tsx
@@ -21,10 +21,10 @@ import {
 } from '@tih/ui';
 
 import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics';
-import ResumeRoleTypeahead from '~/components/resumes/shared/ResumeRoleTypeahead';
 import ResumeSubmissionGuidelines from '~/components/resumes/submit-form/ResumeSubmissionGuidelines';
 import Container from '~/components/shared/Container';
 import CountriesTypeahead from '~/components/shared/CountriesTypeahead';
+import JobTitlesTypeahead from '~/components/shared/JobTitlesTypeahead';
 import loginPageHref from '~/components/shared/loginPageHref';
 
 import { RESUME_STORAGE_KEY } from '~/constants/file-storage-keys';
@@ -333,8 +333,10 @@ export default function SubmitResumeForm({
                   control={control}
                   name="role"
                   render={({ field: { value } }) => (
-                    <ResumeRoleTypeahead
+                    <JobTitlesTypeahead
                       disabled={isLoading}
+                      label="Role"
+                      noResultsMessage="No available roles."
                       placeholder="Select a role"
                       required={true}
                       value={value}