diff --git a/apps/portal/src/components/questions/LandingComponent.tsx b/apps/portal/src/components/questions/LandingComponent.tsx index f2578c4d..336c185a 100644 --- a/apps/portal/src/components/questions/LandingComponent.tsx +++ b/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" /> -

+

Tech Interview Question Bank

@@ -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, }); diff --git a/apps/portal/src/pages/questions/browse.tsx b/apps/portal/src/pages/questions/browse.tsx index 9a974f5d..c08e189e 100644 --- a/apps/portal/src/pages/questions/browse.tsx +++ b/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), ), ); } diff --git a/apps/portal/src/pages/questions/index.tsx b/apps/portal/src/pages/questions/index.tsx index 0f5f07f1..37999946 100644 --- a/apps/portal/src/pages/questions/index.tsx +++ b/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], }, diff --git a/apps/portal/src/utils/questions/companySlug.ts b/apps/portal/src/utils/questions/companySlug.ts new file mode 100644 index 00000000..bba52c4a --- /dev/null +++ b/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, + }; +}