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,
+ };
+}