[questions][fix] fix landing page company param (#477)

apps/portal/src/components/questions/LandingComponent.tsx

@@ -3,6 +3,7 @@ import { ArrowSmallRightIcon } from '@heroicons/react/24/outline';
 import type { QuestionsQuestionType } from '@prisma/client';
 import { Button, Select } from '@tih/ui';
 
+import { companyOptionToSlug } from '~/utils/questions/companySlug';
 import { QUESTION_TYPES } from '~/utils/questions/constants';
 import useDefaultCompany from '~/utils/questions/useDefaultCompany';
 import useDefaultLocation from '~/utils/questions/useDefaultLocation';
@@ -12,7 +13,7 @@ import CompanyTypeahead from './typeahead/CompanyTypeahead';
 import LocationTypeahead from './typeahead/LocationTypeahead';
 
 export type LandingQueryData = {
-  company: string;
+  companySlug: string;
   location: string;
   questionType: QuestionsQuestionType;
 };
@@ -71,7 +72,7 @@ export default function LandingComponent({
               className="h-40 w-40"
               src="/bank-logo.png"
             />
-            <h1 className="text-4xl font-bold text-slate-900 text-center">
+            <h1 className="text-center text-4xl font-bold text-slate-900">
               Tech Interview Question Bank
             </h1>
           </div>
@@ -124,7 +125,7 @@ export default function LandingComponent({
             onClick={() => {
               if (company !== undefined && location !== undefined) {
                 return handleLandingQuery({
-                  company: company.label,
+                  companySlug: companyOptionToSlug(company),
                   location: location.value,
                   questionType,
                 });

apps/portal/src/pages/questions/browse.tsx

@@ -18,6 +18,10 @@ import LocationTypeahead from '~/components/questions/typeahead/LocationTypeahea
 import RoleTypeahead from '~/components/questions/typeahead/RoleTypeahead';
 import { JobTitleLabels } from '~/components/shared/JobTitles';
 
+import {
+  companyOptionToSlug,
+  slugToCompanyOption,
+} from '~/utils/questions/companySlug';
 import type { QuestionAge } from '~/utils/questions/constants';
 import { APP_TITLE } from '~/utils/questions/constants';
 import { QUESTION_AGES, QUESTION_TYPES } from '~/utils/questions/constants';
@@ -288,15 +292,7 @@ export default function QuestionsBrowsePage() {
   ]);
 
   const selectedCompanyOptions = useMemo(() => {
-    return selectedCompanySlugs.map((company) => {
-      const [id, label] = company.split('_');
-      return {
-        checked: true,
-        id,
-        label,
-        value: id,
-      };
-    });
+    return selectedCompanySlugs.map(slugToCompanyOption);
   }, [selectedCompanySlugs]);
 
   const selectedRoleOptions = useMemo(() => {
@@ -363,12 +359,12 @@ export default function QuestionsBrowsePage() {
           if (option.checked) {
             setSelectedCompanySlugs([
               ...selectedCompanySlugs,
-              `${option.id}_${option.label}`,
+              companyOptionToSlug(option),
             ]);
           } else {
             setSelectedCompanySlugs(
               selectedCompanySlugs.filter(
-                (companySlug) => companySlug !== `${option.id}_${option.label}`,
+                (companySlug) => companySlug !== companyOptionToSlug(option),
               ),
             );
           }

apps/portal/src/pages/questions/index.tsx

@@ -10,13 +10,13 @@ export default function QuestionsHomePage() {
   const router = useRouter();
 
   const handleLandingQuery = async (data: LandingQueryData) => {
-    const { company, location, questionType } = data;
+    const { companySlug, location, questionType } = data;
 
     // Go to browse page
     router.push({
       pathname: '/questions/browse',
       query: {
-        companies: [company],
+        companies: [companySlug],
         locations: [location],
         questionTypes: [questionType],
       },

apps/portal/src/utils/questions/companySlug.ts

@@ -0,0 +1,18 @@
+import type {
+  FilterChoice,
+  FilterOption,
+} from '~/components/questions/filter/FilterSection';
+
+export function companyOptionToSlug(option: FilterChoice): string {
+  return `${option.id}_${option.label}`;
+}
+
+export function slugToCompanyOption(slug: string): FilterOption {
+  const [id, label] = slug.split('_');
+  return {
+    checked: true,
+    id,
+    label,
+    value: id,
+  };
+}