From 98465a61282628931fc4513a271aa0363a92b152 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Sun, 6 Nov 2022 10:42:10 +0800
Subject: [PATCH] [portal][feat] pass isLoading states to typeahead components

---
 .../src/components/questions/typeahead/CompanyTypeahead.tsx  | 3 ++-
 .../src/components/questions/typeahead/LocationTypeahead.tsx | 3 ++-
 .../src/components/questions/typeahead/RoleTypeahead.tsx     | 4 +++-
 apps/portal/src/components/shared/CitiesTypeahead.tsx        | 3 ++-
 apps/portal/src/components/shared/CompaniesTypeahead.tsx     | 3 ++-
 apps/portal/src/components/shared/CountriesTypeahead.tsx     | 3 ++-
 apps/portal/src/components/shared/JobTitlesTypeahead.tsx     | 5 ++---
 7 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/apps/portal/src/components/questions/typeahead/CompanyTypeahead.tsx b/apps/portal/src/components/questions/typeahead/CompanyTypeahead.tsx
index c61d1e6c..e3cbaa98 100644
--- a/apps/portal/src/components/questions/typeahead/CompanyTypeahead.tsx
+++ b/apps/portal/src/components/questions/typeahead/CompanyTypeahead.tsx
@@ -13,7 +13,7 @@ export type CompanyTypeaheadProps = Omit<
 export default function CompanyTypeahead(props: CompanyTypeaheadProps) {
   const [query, setQuery] = useState('');
 
-  const { data: companies } = trpc.useQuery([
+  const { data: companies, isLoading } = trpc.useQuery([
     'companies.list',
     {
       name: query,
@@ -33,6 +33,7 @@ export default function CompanyTypeahead(props: CompanyTypeaheadProps) {
   return (
     <ExpandedTypeahead
       {...(props as ExpandedTypeaheadProps)}
+      isLoading={isLoading}
       label="Company"
       options={companyOptions}
       onQueryChange={setQuery}
diff --git a/apps/portal/src/components/questions/typeahead/LocationTypeahead.tsx b/apps/portal/src/components/questions/typeahead/LocationTypeahead.tsx
index 9b2d4dc2..2ec1b2e8 100644
--- a/apps/portal/src/components/questions/typeahead/LocationTypeahead.tsx
+++ b/apps/portal/src/components/questions/typeahead/LocationTypeahead.tsx
@@ -23,7 +23,7 @@ export default function LocationTypeahead({
 }: LocationTypeaheadProps) {
   const [query, setQuery] = useState('');
 
-  const { data: locations } = trpc.useQuery([
+  const { data: locations, isLoading } = trpc.useQuery([
     'locations.cities.list',
     {
       name: query,
@@ -45,6 +45,7 @@ export default function LocationTypeahead({
 
   return (
     <ExpandedTypeahead
+      isLoading={isLoading}
       {...({
         onSuggestionClick: onSuggestionClick
           ? (option: TypeaheadOption) => {
diff --git a/apps/portal/src/components/questions/typeahead/RoleTypeahead.tsx b/apps/portal/src/components/questions/typeahead/RoleTypeahead.tsx
index fc7ec0ff..f22538c8 100644
--- a/apps/portal/src/components/questions/typeahead/RoleTypeahead.tsx
+++ b/apps/portal/src/components/questions/typeahead/RoleTypeahead.tsx
@@ -26,7 +26,9 @@ export default function RoleTypeahead(props: RoleTypeaheadProps) {
       {...(props as ExpandedTypeaheadProps)}
       label="Role"
       options={ROLES.filter((option) =>
-        option.label.toLowerCase().includes(query.toLowerCase()),
+        option.label
+          .toLocaleLowerCase()
+          .includes(query.trim().toLocaleLowerCase()),
       )}
       onQueryChange={setQuery}
     />
diff --git a/apps/portal/src/components/shared/CitiesTypeahead.tsx b/apps/portal/src/components/shared/CitiesTypeahead.tsx
index f9a6140d..f24a4035 100644
--- a/apps/portal/src/components/shared/CitiesTypeahead.tsx
+++ b/apps/portal/src/components/shared/CitiesTypeahead.tsx
@@ -36,10 +36,11 @@ export default function CitiesTypeahead({
     },
   ]);
 
-  const { data } = cities;
+  const { data, isLoading } = cities;
 
   return (
     <Typeahead
+      isLoading={isLoading}
       label={label}
       minQueryLength={3}
       noResultsMessage="No cities found"
diff --git a/apps/portal/src/components/shared/CompaniesTypeahead.tsx b/apps/portal/src/components/shared/CompaniesTypeahead.tsx
index 76d35557..d7a43b14 100644
--- a/apps/portal/src/components/shared/CompaniesTypeahead.tsx
+++ b/apps/portal/src/components/shared/CompaniesTypeahead.tsx
@@ -34,10 +34,11 @@ export default function CompaniesTypeahead({
     },
   ]);
 
-  const { data } = companies;
+  const { data, isLoading } = companies;
 
   return (
     <Typeahead
+      isLoading={isLoading}
       label="Company"
       noResultsMessage="No companies found"
       nullable={true}
diff --git a/apps/portal/src/components/shared/CountriesTypeahead.tsx b/apps/portal/src/components/shared/CountriesTypeahead.tsx
index af0a6465..7784d7f4 100644
--- a/apps/portal/src/components/shared/CountriesTypeahead.tsx
+++ b/apps/portal/src/components/shared/CountriesTypeahead.tsx
@@ -48,10 +48,11 @@ export default function CountriesTypeahead({
     },
   ]);
 
-  const { data } = countries;
+  const { data, isLoading } = countries;
 
   return (
     <Typeahead
+      isLoading={isLoading}
       label={label}
       noResultsMessage="No countries found"
       nullable={true}
diff --git a/apps/portal/src/components/shared/JobTitlesTypeahead.tsx b/apps/portal/src/components/shared/JobTitlesTypeahead.tsx
index 71d35481..ab0b0404 100644
--- a/apps/portal/src/components/shared/JobTitlesTypeahead.tsx
+++ b/apps/portal/src/components/shared/JobTitlesTypeahead.tsx
@@ -35,9 +35,8 @@ export default function JobTitlesTypeahead({
       value: slug,
     }))
     .sort((a, b) => b.ranking - a.ranking)
-    .filter(
-      ({ label }) =>
-        label.toLocaleLowerCase().indexOf(query.toLocaleLowerCase()) > -1,
+    .filter(({ label }) =>
+      label.toLocaleLowerCase().includes(query.trim().toLocaleLowerCase()),
     );
 
   return (