From 4e0e9d0f9ea0d0b0d5ca81f7f59dcfb599af6ab0 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Mon, 24 Oct 2022 13:15:31 +0800
Subject: [PATCH] [portal] add job titles typeahead

---
 .../portal/src/components/shared/JobTitles.ts | 31 ++++++++++++
 .../components/shared/JobTitlesTypahead.tsx   | 48 +++++++++++++++++++
 apps/portal/src/pages/test__.tsx              |  8 ++++
 3 files changed, 87 insertions(+)
 create mode 100644 apps/portal/src/components/shared/JobTitles.ts
 create mode 100644 apps/portal/src/components/shared/JobTitlesTypahead.tsx

diff --git a/apps/portal/src/components/shared/JobTitles.ts b/apps/portal/src/components/shared/JobTitles.ts
new file mode 100644
index 00000000..0dfcb336
--- /dev/null
+++ b/apps/portal/src/components/shared/JobTitles.ts
@@ -0,0 +1,31 @@
+export const JobTitleLabels = {
+  'ai-ml-engineer': 'AI/ML Engineer',
+  'algorithms-engineer': 'Algorithms Engineer',
+  'android-engineer': 'Android Software Engineer',
+  'applications-engineer': 'Applications Engineer',
+  'back-end-engineer': 'Back End Engineer',
+  'business-engineer': 'Business Engineer',
+  'data-engineer': 'Data Engineer',
+  'devops-engineer': 'DevOps Engineer',
+  'enterprise-engineer': 'Enterprise Engineer',
+  'front-end-engineer': 'Front End Engineer',
+  'hardware-engineer': 'Hardware Engineer',
+  'ios-engineer': 'iOS Software Engineer',
+  'mobile-engineer': 'Mobile Software Engineer (iOS + Android)',
+  'networks-engineer': 'Networks Engineer',
+  'partner-engineer': 'Partner Engineer',
+  'production-engineer': 'Production Engineer',
+  'research-engineer': 'Research Engineer',
+  'sales-engineer': 'Sales Engineer',
+  'security-engineer': 'Security Engineer',
+  'site-reliability-engineer': 'Site Reliability Engineer (SRE)',
+  'software-engineer': 'Software Engineer',
+  'systems-engineer': 'Systems Engineer',
+  'test-engineer': 'QA/Test Engineer (SDET)',
+};
+
+export type JobTitleType = keyof typeof JobTitleLabels;
+
+export function getLabelForJobTitleType(jobTitle: JobTitleType): string {
+  return JobTitleLabels[jobTitle];
+}
diff --git a/apps/portal/src/components/shared/JobTitlesTypahead.tsx b/apps/portal/src/components/shared/JobTitlesTypahead.tsx
new file mode 100644
index 00000000..036af8f1
--- /dev/null
+++ b/apps/portal/src/components/shared/JobTitlesTypahead.tsx
@@ -0,0 +1,48 @@
+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) => void;
+  placeHolder?: string;
+  required?: boolean;
+}>;
+
+export default function JobTitlesTypeahead({
+  disabled,
+  onSelect,
+  isLabelHidden,
+  placeHolder,
+  required,
+}: Props) {
+  const [query, setQuery] = useState('');
+  const options = Object.entries(JobTitleLabels)
+    .map(([slug, label]) => ({
+      id: slug,
+      label,
+      value: slug,
+    }))
+    .filter(
+      ({ label }) =>
+        label.toLocaleLowerCase().indexOf(query.toLocaleLowerCase()) > -1,
+    );
+
+  return (
+    <Typeahead
+      disabled={disabled}
+      isLabelHidden={isLabelHidden}
+      label="Job Title"
+      noResultsMessage="No available job titles."
+      nullable={true}
+      options={options}
+      placeholder={placeHolder}
+      required={required}
+      onQueryChange={setQuery}
+      onSelect={onSelect}
+    />
+  );
+}
diff --git a/apps/portal/src/pages/test__.tsx b/apps/portal/src/pages/test__.tsx
index 26859c56..f7309e26 100644
--- a/apps/portal/src/pages/test__.tsx
+++ b/apps/portal/src/pages/test__.tsx
@@ -5,12 +5,15 @@ import { useToast } from '@tih/ui';
 import { HorizontalDivider } from '@tih/ui';
 
 import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead';
+import JobTitlesTypeahead from '~/components/shared/JobTitlesTypahead';
 import type { Month, MonthYear } from '~/components/shared/MonthYearPicker';
 import MonthYearPicker from '~/components/shared/MonthYearPicker';
 
 export default function HomePage() {
   const [selectedCompany, setSelectedCompany] =
     useState<TypeaheadOption | null>(null);
+  const [selectedJobTitle, setSelectedJobTitle] =
+    useState<TypeaheadOption | null>(null);
   const [monthYear, setMonthYear] = useState<MonthYear>({
     month: (new Date().getMonth() + 1) as Month,
     year: new Date().getFullYear(),
@@ -30,6 +33,11 @@ export default function HomePage() {
           />
           <pre>{JSON.stringify(selectedCompany, null, 2)}</pre>
           <HorizontalDivider />
+          <JobTitlesTypeahead
+            onSelect={(option) => setSelectedJobTitle(option)}
+          />
+          <pre>{JSON.stringify(selectedJobTitle, null, 2)}</pre>
+          <HorizontalDivider />
           <MonthYearPicker value={monthYear} onChange={setMonthYear} />
           <HorizontalDivider />
           <Button