From 6f2e8e7a2def6ef670d50f5cf9be33c4140321d8 Mon Sep 17 00:00:00 2001 From: Ai Ling Date: Wed, 2 Nov 2022 19:55:08 +0800 Subject: [PATCH] [offers][feat] Use city typeahead for location field --- .../portal/src/components/offers/constants.ts | 15 ----- .../offers/dashboard/DashboardOfferCard.tsx | 2 +- .../offersSubmission/OffersSubmissionForm.tsx | 2 +- .../submissionForm/BackgroundForm.tsx | 53 ++++++++++++---- .../submissionForm/OfferDetailsForm.tsx | 60 +++++++++++++------ .../components/offers/table/OffersTable.tsx | 2 +- apps/portal/src/components/offers/types.ts | 6 +- .../offers/profile/edit/[offerProfileId].tsx | 6 +- 8 files changed, 97 insertions(+), 49 deletions(-) diff --git a/apps/portal/src/components/offers/constants.ts b/apps/portal/src/components/offers/constants.ts index e2b14d96..d49dca1a 100644 --- a/apps/portal/src/components/offers/constants.ts +++ b/apps/portal/src/components/offers/constants.ts @@ -2,21 +2,6 @@ import { EducationBackgroundType } from './types'; export const emptyOption = '----'; -export const locationOptions = [ - { - label: 'Singapore, Singapore', - value: 'Singapore, Singapore', - }, - { - label: 'New York, US', - value: 'New York, US', - }, - { - label: 'San Francisco, US', - value: 'San Francisco, US', - }, -]; - export const internshipCycleOptions = [ { label: 'Summer', diff --git a/apps/portal/src/components/offers/dashboard/DashboardOfferCard.tsx b/apps/portal/src/components/offers/dashboard/DashboardOfferCard.tsx index d76bcd60..722263b6 100644 --- a/apps/portal/src/components/offers/dashboard/DashboardOfferCard.tsx +++ b/apps/portal/src/components/offers/dashboard/DashboardOfferCard.tsx @@ -51,7 +51,7 @@ export default function DashboardProfileCard({ aria-hidden="true" className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400" /> - {location} + {location.cityName} )} {level && ( diff --git a/apps/portal/src/components/offers/offersSubmission/OffersSubmissionForm.tsx b/apps/portal/src/components/offers/offersSubmission/OffersSubmissionForm.tsx index c6156137..06415aad 100644 --- a/apps/portal/src/components/offers/offersSubmission/OffersSubmissionForm.tsx +++ b/apps/portal/src/components/offers/offersSubmission/OffersSubmissionForm.tsx @@ -26,11 +26,11 @@ import { getCurrentMonth, getCurrentYear } from '~/utils/offers/time'; import { trpc } from '~/utils/trpc'; const defaultOfferValues = { + cityId: '', comments: '', companyId: '', jobTitle: '', jobType: JobType.FULLTIME, - location: '', monthYearReceived: { month: getCurrentMonth() as Month, year: getCurrentYear(), diff --git a/apps/portal/src/components/offers/offersSubmission/submissionForm/BackgroundForm.tsx b/apps/portal/src/components/offers/offersSubmission/submissionForm/BackgroundForm.tsx index d0d718ba..bfe5ee5f 100644 --- a/apps/portal/src/components/offers/offersSubmission/submissionForm/BackgroundForm.tsx +++ b/apps/portal/src/components/offers/offersSubmission/submissionForm/BackgroundForm.tsx @@ -7,9 +7,9 @@ import { educationLevelOptions, emptyOption, FieldError, - locationOptions, } from '~/components/offers/constants'; import type { BackgroundPostData } from '~/components/offers/types'; +import CitiesTypeahead from '~/components/shared/CitiesTypeahead'; import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead'; import type { JobTitleType } from '~/components/shared/JobTitles'; import { getLabelForJobTitleType } from '~/components/shared/JobTitles'; @@ -102,6 +102,12 @@ function FullTimeJobFields() { const watchCompanyName = useWatch({ name: 'background.experiences.0.companyName', }); + const watchCityId = useWatch({ + name: 'background.experiences.0.cityId', + }); + const watchCityName = useWatch({ + name: 'background.experiences.0.cityName', + }); return ( <> @@ -166,11 +172,22 @@ function FullTimeJobFields() { placeholder="e.g. L4, Junior" {...register(`background.experiences.0.level`)} /> - { + if (option) { + setValue('background.experiences.0.cityId', option.value); + setValue('background.experiences.0.cityName', option.label); + } else { + setValue('background.experiences.0.cityId', ''); + setValue('background.experiences.0.cityName', ''); + } + }} /> @@ -256,12 +279,22 @@ function InternshipJobFields() { })} /> - { + if (option) { + setValue('background.experiences.0.cityId', option.value); + setValue('background.experiences.0.cityName', option.label); + } else { + setValue('background.experiences.0.cityId', ''); + setValue('background.experiences.0.cityName', ''); + } + }} /> diff --git a/apps/portal/src/components/offers/offersSubmission/submissionForm/OfferDetailsForm.tsx b/apps/portal/src/components/offers/offersSubmission/submissionForm/OfferDetailsForm.tsx index b1a438f7..7c9e52e6 100644 --- a/apps/portal/src/components/offers/offersSubmission/submissionForm/OfferDetailsForm.tsx +++ b/apps/portal/src/components/offers/offersSubmission/submissionForm/OfferDetailsForm.tsx @@ -12,6 +12,7 @@ import { TrashIcon } from '@heroicons/react/24/outline'; import { JobType } from '@prisma/client'; import { Button, Dialog, HorizontalDivider } from '@tih/ui'; +import CitiesTypeahead from '~/components/shared/CitiesTypeahead'; import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead'; import type { JobTitleType } from '~/components/shared/JobTitles'; import { getLabelForJobTitleType } from '~/components/shared/JobTitles'; @@ -25,7 +26,6 @@ import { emptyOption, FieldError, internshipCycleOptions, - locationOptions, yearOptions, } from '../../constants'; import FormMonthYearPicker from '../../forms/FormMonthYearPicker'; @@ -64,6 +64,12 @@ function FullTimeOfferDetailsForm({ const watchCompanyName = useWatch({ name: `offers.${index}.companyName`, }); + const watchCityId = useWatch({ + name: `offers.${index}.cityId`, + }); + const watchCityName = useWatch({ + name: `offers.${index}.cityName`, + }); const watchCurrency = useWatch({ name: `offers.${index}.offersFullTime.totalCompensation.currency`, }); @@ -119,16 +125,23 @@ function FullTimeOfferDetailsForm({ } }} /> - { + if (option) { + setValue(`offers.${index}.cityId`, option.value); + setValue(`offers.${index}.cityName`, option.label); + } else { + setValue(`offers.${index}.cityId`, ''); + setValue(`offers.${index}.cityName`, ''); + } + }} /> @@ -308,6 +321,12 @@ function InternshipOfferDetailsForm({ const watchCompanyName = useWatch({ name: `offers.${index}.companyName`, }); + const watchCityId = useWatch({ + name: `offers.${index}.cityId`, + }); + const watchCityName = useWatch({ + name: `offers.${index}.cityName`, + }); return (
@@ -341,16 +360,23 @@ function InternshipOfferDetailsForm({ } }} /> - { + if (option) { + setValue(`offers.${index}.cityId`, option.value); + setValue(`offers.${index}.cityName`, option.label); + } else { + setValue(`offers.${index}.cityId`, ''); + setValue(`offers.${index}.cityName`, ''); + } + }} />
diff --git a/apps/portal/src/components/offers/table/OffersTable.tsx b/apps/portal/src/components/offers/table/OffersTable.tsx index 07a938f2..e31ce619 100644 --- a/apps/portal/src/components/offers/table/OffersTable.tsx +++ b/apps/portal/src/components/offers/table/OffersTable.tsx @@ -100,7 +100,7 @@ export default function OffersTable({
- View all offers in + Display offers in setCurrency(value)} diff --git a/apps/portal/src/components/offers/types.ts b/apps/portal/src/components/offers/types.ts index 1ee07a15..0e963a17 100644 --- a/apps/portal/src/components/offers/types.ts +++ b/apps/portal/src/components/offers/types.ts @@ -46,13 +46,14 @@ export type BackgroundPostData = { }; type ExperiencePostData = { + cityId?: string | null; + cityName?: string | null; companyId?: string | null; companyName?: string | null; durationInMonths?: number | null; id?: string; jobType?: string | null; level?: string | null; - location?: Location | null; monthlySalary?: Money | null; title?: string | null; totalCompensation?: Money | null; @@ -77,12 +78,13 @@ type SpecificYoePostData = { type SpecificYoe = SpecificYoePostData; export type OfferPostData = { + cityId: string; + cityName?: string; comments: string; companyId: string; companyName?: string; id?: string; jobType: JobType; - location: string; monthYearReceived: Date; negotiationStrategy: string; offersFullTime?: OfferFullTimePostData | null; diff --git a/apps/portal/src/pages/offers/profile/edit/[offerProfileId].tsx b/apps/portal/src/pages/offers/profile/edit/[offerProfileId].tsx index 05e47b7c..829acb28 100644 --- a/apps/portal/src/pages/offers/profile/edit/[offerProfileId].tsx +++ b/apps/portal/src/pages/offers/profile/edit/[offerProfileId].tsx @@ -36,13 +36,14 @@ export default function OffersEditPage() { experiences.length === 0 ? [{ jobType: JobType.FULLTIME }] : experiences.map((exp) => ({ + cityId: exp.location?.cityId, + cityName: exp.location?.cityName, companyId: exp.company?.id, companyName: exp.company?.name, durationInMonths: exp.durationInMonths, id: exp.id, jobType: exp.jobType, level: exp.level, - location: exp.location, monthlySalary: exp.monthlySalary, title: exp.title, totalCompensation: exp.totalCompensation, @@ -53,12 +54,13 @@ export default function OffersEditPage() { }, id: data.id, offers: data.offers.map((offer) => ({ + cityId: offer.location.cityId, + cityName: offer.location.cityName, comments: offer.comments, companyId: offer.company.id, companyName: offer.company.name, id: offer.id, jobType: offer.jobType, - location: offer.location, monthYearReceived: convertToMonthYear(offer.monthYearReceived), negotiationStrategy: offer.negotiationStrategy, offersFullTime: offer.offersFullTime,