[resumes][refactor] use JobTitlesTypeahead instead

apps/portal/src/components/resumes/shared/ResumeRoleTypeahead.tsx

@@ -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}
-    />
-  );
-}

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}

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}
           />
         );

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}