From 3cc238b0ce8ab7b5d372f8a68b3222d4d74b6508 Mon Sep 17 00:00:00 2001 From: Jeff Sieu Date: Mon, 31 Oct 2022 18:09:41 +0800 Subject: [PATCH] [questions][fix] fix landing page location params (#482) --- .../components/questions/LandingComponent.tsx | 14 +++++--- apps/portal/src/pages/questions/browse.tsx | 34 ++++++++----------- .../questions/questions-question-router.ts | 1 + .../src/utils/questions/locationSlug.ts | 16 +++++++++ 4 files changed, 40 insertions(+), 25 deletions(-) create mode 100644 apps/portal/src/utils/questions/locationSlug.ts diff --git a/apps/portal/src/components/questions/LandingComponent.tsx b/apps/portal/src/components/questions/LandingComponent.tsx index 336c185a..2349c042 100644 --- a/apps/portal/src/components/questions/LandingComponent.tsx +++ b/apps/portal/src/components/questions/LandingComponent.tsx @@ -1,10 +1,12 @@ import { useEffect, useState } from 'react'; import { ArrowSmallRightIcon } from '@heroicons/react/24/outline'; import type { QuestionsQuestionType } from '@prisma/client'; +import type { TypeaheadOption } from '@tih/ui'; import { Button, Select } from '@tih/ui'; import { companyOptionToSlug } from '~/utils/questions/companySlug'; import { QUESTION_TYPES } from '~/utils/questions/constants'; +import { locationOptionToSlug } from '~/utils/questions/locationSlug'; import useDefaultCompany from '~/utils/questions/useDefaultCompany'; import useDefaultLocation from '~/utils/questions/useDefaultLocation'; @@ -12,6 +14,8 @@ import type { FilterChoice } from './filter/FilterSection'; import CompanyTypeahead from './typeahead/CompanyTypeahead'; import LocationTypeahead from './typeahead/LocationTypeahead'; +import type { Location } from '~/types/questions'; + export type LandingQueryData = { companySlug: string; location: string; @@ -31,9 +35,9 @@ export default function LandingComponent({ const [company, setCompany] = useState( defaultCompany, ); - const [location, setLocation] = useState( - defaultLocation, - ); + const [location, setLocation] = useState< + (Location & TypeaheadOption) | undefined + >(defaultLocation); const [questionType, setQuestionType] = useState('CODING'); @@ -42,7 +46,7 @@ export default function LandingComponent({ setCompany(newCompany); }; - const handleChangeLocation = (newLocation: FilterChoice) => { + const handleChangeLocation = (newLocation: Location & TypeaheadOption) => { setLocation(newLocation); }; @@ -126,7 +130,7 @@ export default function LandingComponent({ if (company !== undefined && location !== undefined) { return handleLandingQuery({ companySlug: companyOptionToSlug(company), - location: location.value, + location: locationOptionToSlug(location), questionType, }); } diff --git a/apps/portal/src/pages/questions/browse.tsx b/apps/portal/src/pages/questions/browse.tsx index c08e189e..61196263 100644 --- a/apps/portal/src/pages/questions/browse.tsx +++ b/apps/portal/src/pages/questions/browse.tsx @@ -18,14 +18,11 @@ 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'; import createSlug from '~/utils/questions/createSlug'; +import { locationOptionToSlug } from '~/utils/questions/locationSlug'; import relabelQuestionAggregates from '~/utils/questions/relabelQuestionAggregates'; import { useSearchParam, @@ -37,17 +34,6 @@ import type { Location } from '~/types/questions.d'; import { SortType } from '~/types/questions.d'; import { SortOrder } from '~/types/questions.d'; -function locationToSlug(value: Location & TypeaheadOption): string { - return [ - value.countryId, - value.stateId, - value.cityId, - value.id, - value.label, - value.value, - ].join('-'); -} - export default function QuestionsBrowsePage() { const router = useRouter(); @@ -90,7 +76,7 @@ export default function QuestionsBrowsePage() { useSearchParam('roles'); const [selectedLocations, setSelectedLocations, areLocationsInitialized] = useSearchParam('locations', { - paramToString: locationToSlug, + paramToString: locationOptionToSlug, stringToParam: (param) => { const [countryId, stateId, cityId, id, label, value] = param.split('-'); return { cityId, countryId, id, label, stateId, value }; @@ -267,7 +253,7 @@ export default function QuestionsBrowsePage() { pathname, query: { companies: selectedCompanySlugs, - locations: selectedLocations.map(locationToSlug), + locations: selectedLocations.map(locationOptionToSlug), questionAge: selectedQuestionAge, questionTypes: selectedQuestionTypes, roles: selectedRoles, @@ -292,7 +278,15 @@ export default function QuestionsBrowsePage() { ]); const selectedCompanyOptions = useMemo(() => { - return selectedCompanySlugs.map(slugToCompanyOption); + return selectedCompanySlugs.map((company) => { + const [id, label] = company.split('_'); + return { + checked: true, + id, + label, + value: id, + }; + }); }, [selectedCompanySlugs]); const selectedRoleOptions = useMemo(() => { @@ -359,12 +353,12 @@ export default function QuestionsBrowsePage() { if (option.checked) { setSelectedCompanySlugs([ ...selectedCompanySlugs, - companyOptionToSlug(option), + `${option.id}_${option.label}`, ]); } else { setSelectedCompanySlugs( selectedCompanySlugs.filter( - (companySlug) => companySlug !== companyOptionToSlug(option), + (companySlug) => companySlug !== `${option.id}_${option.label}`, ), ); } diff --git a/apps/portal/src/server/router/questions/questions-question-router.ts b/apps/portal/src/server/router/questions/questions-question-router.ts index a5c06f2d..a6821fb2 100644 --- a/apps/portal/src/server/router/questions/questions-question-router.ts +++ b/apps/portal/src/server/router/questions/questions-question-router.ts @@ -13,6 +13,7 @@ export const questionsQuestionRouter = createRouter() input: z.object({ cityIds: z.string().array(), companyIds: z.string().array(), + content: z.string().optional(), countryIds: z.string().array(), cursor: z.string().nullish(), endDate: z.date().default(new Date()), diff --git a/apps/portal/src/utils/questions/locationSlug.ts b/apps/portal/src/utils/questions/locationSlug.ts new file mode 100644 index 00000000..ad450ce0 --- /dev/null +++ b/apps/portal/src/utils/questions/locationSlug.ts @@ -0,0 +1,16 @@ +import type { TypeaheadOption } from '@tih/ui'; + +import type { Location } from '~/types/questions'; + +export function locationOptionToSlug( + value: Location & TypeaheadOption, +): string { + return [ + value.countryId, + value.stateId, + value.cityId, + value.id, + value.label, + value.value, + ].join('-'); +}