From 07249067c00e9ce862541e14432e694f781355a2 Mon Sep 17 00:00:00 2001
From: Jeff Sieu <jeffsy00@gmail.com>
Date: Sun, 6 Nov 2022 14:11:51 +0800
Subject: [PATCH] [questions][fix] use useJobTitleOptions in RoleTypeahead

---
 .../questions/typeahead/RoleTypeahead.tsx        | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/apps/portal/src/components/questions/typeahead/RoleTypeahead.tsx b/apps/portal/src/components/questions/typeahead/RoleTypeahead.tsx
index d0b62149..829c8ad2 100644
--- a/apps/portal/src/components/questions/typeahead/RoleTypeahead.tsx
+++ b/apps/portal/src/components/questions/typeahead/RoleTypeahead.tsx
@@ -1,33 +1,25 @@
 import { useState } from 'react';
 
-import { JobTitleLabels } from '~/components/shared/JobTitles';
+import { useJobTitleOptions } from '~/components/shared/JobTitlesTypeahead';
 
 import type { ExpandedTypeaheadProps } from './ExpandedTypeahead';
 import ExpandedTypeahead from './ExpandedTypeahead';
-import type { FilterChoices } from '../filter/FilterSection';
 
 export type RoleTypeaheadProps = Omit<
   ExpandedTypeaheadProps,
   'label' | 'onQueryChange' | 'options'
 >;
 
-const ROLES: FilterChoices = Object.entries(JobTitleLabels)
-  .map(([slug, { label, ranking }]) => ({
-    id: slug,
-    label,
-    ranking,
-    value: slug,
-  }))
-  .sort((a, b) => b.ranking - a.ranking);
-
 export default function RoleTypeahead(props: RoleTypeaheadProps) {
   const [query, setQuery] = useState('');
 
+  const roleOptions = useJobTitleOptions(query);
+
   return (
     <ExpandedTypeahead
       {...(props as ExpandedTypeaheadProps)}
       label="Role"
-      options={ROLES.filter((option) =>
+      options={roleOptions.filter((option) =>
         option.label
           .toLocaleLowerCase()
           .includes(query.trim().toLocaleLowerCase()),