[offers][feat] Integrate offers profile edit (#403)
* [offers][fix] Fix offer analysis and save * [offers][fix] Fix profile view page * [offers][feat] Add offers profile editpull/406/head
Ai Ling
2 years ago
committed by
GitHub
parent
0adec461d0
commit
11df1e1f1c
@ -0,0 +1,243 @@
|
||||
import { useRef, useState } from 'react';
|
||||
import type { SubmitHandler } from 'react-hook-form';
|
||||
import { FormProvider, useForm } from 'react-hook-form';
|
||||
import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/20/solid';
|
||||
import { Button } from '@tih/ui';
|
||||
|
||||
import { Breadcrumbs } from '~/components/offers/Breadcrumb';
|
||||
import OfferAnalysis from '~/components/offers/offersSubmission/analysis/OfferAnalysis';
|
||||
import OfferProfileSave from '~/components/offers/offersSubmission/OfferProfileSave';
|
||||
import BackgroundForm from '~/components/offers/offersSubmission/submissionForm/BackgroundForm';
|
||||
import OfferDetailsForm from '~/components/offers/offersSubmission/submissionForm/OfferDetailsForm';
|
||||
import type {
|
||||
OfferFormData,
|
||||
OffersProfileFormData,
|
||||
} from '~/components/offers/types';
|
||||
import { JobType } from '~/components/offers/types';
|
||||
import type { Month } from '~/components/shared/MonthYearPicker';
|
||||
|
||||
import { cleanObject, removeInvalidMoneyData } from '~/utils/offers/form';
|
||||
import { getCurrentMonth, getCurrentYear } from '~/utils/offers/time';
|
||||
import { trpc } from '~/utils/trpc';
|
||||
|
||||
import type { CreateOfferProfileResponse } from '~/types/offers';
|
||||
|
||||
const defaultOfferValues = {
|
||||
comments: '',
|
||||
companyId: '',
|
||||
jobType: JobType.FullTime,
|
||||
location: '',
|
||||
monthYearReceived: {
|
||||
month: getCurrentMonth() as Month,
|
||||
year: getCurrentYear(),
|
||||
},
|
||||
negotiationStrategy: '',
|
||||
};
|
||||
|
||||
export const defaultFullTimeOfferValues = {
|
||||
...defaultOfferValues,
|
||||
jobType: JobType.FullTime,
|
||||
};
|
||||
|
||||
export const defaultInternshipOfferValues = {
|
||||
...defaultOfferValues,
|
||||
jobType: JobType.Intern,
|
||||
};
|
||||
|
||||
const defaultOfferProfileValues = {
|
||||
background: {
|
||||
educations: [],
|
||||
experiences: [{ jobType: JobType.FullTime }],
|
||||
specificYoes: [],
|
||||
totalYoe: 0,
|
||||
},
|
||||
offers: [defaultOfferValues],
|
||||
};
|
||||
|
||||
type FormStep = {
|
||||
component: JSX.Element;
|
||||
hasNext: boolean;
|
||||
hasPrevious: boolean;
|
||||
label: string;
|
||||
};
|
||||
|
||||
type Props = Readonly<{
|
||||
initialOfferProfileValues?: OffersProfileFormData;
|
||||
profileId?: string;
|
||||
token?: string;
|
||||
}>;
|
||||
|
||||
export default function OffersSubmissionForm({
|
||||
initialOfferProfileValues = defaultOfferProfileValues,
|
||||
profileId,
|
||||
token,
|
||||
}: Props) {
|
||||
const [formStep, setFormStep] = useState(0);
|
||||
const [createProfileResponse, setCreateProfileResponse] =
|
||||
useState<CreateOfferProfileResponse>({
|
||||
id: profileId || '',
|
||||
token: token || '',
|
||||
});
|
||||
|
||||
const pageRef = useRef<HTMLDivElement>(null);
|
||||
const scrollToTop = () =>
|
||||
pageRef.current?.scrollTo({ behavior: 'smooth', top: 0 });
|
||||
const formMethods = useForm<OffersProfileFormData>({
|
||||
defaultValues: initialOfferProfileValues,
|
||||
mode: 'all',
|
||||
});
|
||||
const { handleSubmit, trigger } = formMethods;
|
||||
|
||||
const formSteps: Array<FormStep> = [
|
||||
{
|
||||
component: <OfferDetailsForm key={0} />,
|
||||
hasNext: true,
|
||||
hasPrevious: false,
|
||||
label: 'Offer details',
|
||||
},
|
||||
{
|
||||
component: <BackgroundForm key={1} />,
|
||||
hasNext: false,
|
||||
hasPrevious: true,
|
||||
label: 'Background',
|
||||
},
|
||||
{
|
||||
component: <OfferAnalysis key={2} profileId={createProfileResponse.id} />,
|
||||
hasNext: true,
|
||||
hasPrevious: false,
|
||||
label: 'Analysis',
|
||||
},
|
||||
{
|
||||
component: (
|
||||
<OfferProfileSave
|
||||
key={3}
|
||||
profileId={createProfileResponse.id || ''}
|
||||
token={createProfileResponse.token}
|
||||
/>
|
||||
),
|
||||
hasNext: false,
|
||||
hasPrevious: false,
|
||||
label: 'Save',
|
||||
},
|
||||
];
|
||||
|
||||
const formStepsLabels = formSteps.map((step) => step.label);
|
||||
|
||||
const nextStep = async (currStep: number) => {
|
||||
if (currStep === 0) {
|
||||
const result = await trigger('offers');
|
||||
if (!result) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
setFormStep(formStep + 1);
|
||||
scrollToTop();
|
||||
};
|
||||
|
||||
const previousStep = () => {
|
||||
setFormStep(formStep - 1);
|
||||
scrollToTop();
|
||||
};
|
||||
|
||||
const generateAnalysisMutation = trpc.useMutation(
|
||||
['offers.analysis.generate'],
|
||||
{
|
||||
onError(error) {
|
||||
console.error(error.message);
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
const mutationpath =
|
||||
profileId && token ? 'offers.profile.update' : 'offers.profile.create';
|
||||
|
||||
const createOrUpdateMutation = trpc.useMutation([mutationpath], {
|
||||
onError(error) {
|
||||
console.error(error.message);
|
||||
},
|
||||
onSuccess(data) {
|
||||
generateAnalysisMutation.mutate({
|
||||
profileId: data?.id || '',
|
||||
});
|
||||
setCreateProfileResponse(data);
|
||||
setFormStep(formStep + 1);
|
||||
scrollToTop();
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit: SubmitHandler<OffersProfileFormData> = async (data) => {
|
||||
const result = await trigger();
|
||||
if (!result) {
|
||||
return;
|
||||
}
|
||||
|
||||
data = removeInvalidMoneyData(data);
|
||||
|
||||
const background = cleanObject(data.background);
|
||||
background.specificYoes = data.background.specificYoes.filter(
|
||||
(specificYoe) => specificYoe.domain && specificYoe.yoe > 0,
|
||||
);
|
||||
if (Object.entries(background.experiences[0]).length === 1) {
|
||||
background.experiences = [];
|
||||
}
|
||||
|
||||
const offers = data.offers.map((offer: OfferFormData) => ({
|
||||
...offer,
|
||||
monthYearReceived: new Date(
|
||||
offer.monthYearReceived.year,
|
||||
offer.monthYearReceived.month - 1, // Convert month to monthIndex
|
||||
),
|
||||
}));
|
||||
|
||||
if (profileId && token) {
|
||||
createOrUpdateMutation.mutate({
|
||||
background,
|
||||
id: profileId,
|
||||
offers,
|
||||
token,
|
||||
});
|
||||
} else {
|
||||
createOrUpdateMutation.mutate({ background, offers });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div ref={pageRef} className="fixed h-full w-full overflow-y-scroll">
|
||||
<div className="mb-20 flex justify-center">
|
||||
<div className="my-5 block w-full max-w-screen-md rounded-lg bg-white py-10 px-10 shadow-lg">
|
||||
<div className="mb-4 flex justify-end">
|
||||
<Breadcrumbs currentStep={formStep} stepLabels={formStepsLabels} />
|
||||
</div>
|
||||
<FormProvider {...formMethods}>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
{formSteps[formStep].component}
|
||||
{/* <pre>{JSON.stringify(formMethods.watch(), null, 2)}</pre> */}
|
||||
{formSteps[formStep].hasNext && (
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
disabled={false}
|
||||
icon={ArrowRightIcon}
|
||||
label="Next"
|
||||
variant="secondary"
|
||||
onClick={() => nextStep(formStep)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{formStep === 1 && (
|
||||
<div className="flex items-center justify-between">
|
||||
<Button
|
||||
icon={ArrowLeftIcon}
|
||||
label="Previous"
|
||||
variant="secondary"
|
||||
onClick={previousStep}
|
||||
/>
|
||||
<Button label="Submit" type="submit" variant="primary" />{' '}
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
</FormProvider>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,79 @@
|
||||
import { useRouter } from 'next/router';
|
||||
import { useState } from 'react';
|
||||
|
||||
import OffersSubmissionForm from '~/components/offers/offersSubmission/OffersSubmissionForm';
|
||||
import type { OffersProfileFormData } from '~/components/offers/types';
|
||||
import { JobType } from '~/components/offers/types';
|
||||
|
||||
import { Spinner } from '~/../../../packages/ui/dist';
|
||||
import { getProfilePath } from '~/utils/offers/link';
|
||||
import { convertToMonthYear } from '~/utils/offers/time';
|
||||
import { trpc } from '~/utils/trpc';
|
||||
|
||||
export default function OffersEditPage() {
|
||||
const [initialData, setInitialData] = useState<OffersProfileFormData>();
|
||||
const router = useRouter();
|
||||
const { offerProfileId, token = '' } = router.query;
|
||||
|
||||
const getProfileResult = trpc.useQuery(
|
||||
[
|
||||
'offers.profile.listOne',
|
||||
{ profileId: offerProfileId as string, token: token as string },
|
||||
],
|
||||
{
|
||||
onError(error) {
|
||||
console.error(error.message);
|
||||
},
|
||||
onSuccess(data) {
|
||||
const { educations, experiences, specificYoes, totalYoe } =
|
||||
data.background!;
|
||||
|
||||
setInitialData({
|
||||
background: {
|
||||
educations,
|
||||
experiences:
|
||||
experiences.length === 0
|
||||
? [{ jobType: JobType.FullTime }]
|
||||
: experiences,
|
||||
specificYoes,
|
||||
totalYoe,
|
||||
},
|
||||
offers: data.offers.map((offer) => ({
|
||||
comments: offer.comments,
|
||||
companyId: offer.company.id,
|
||||
id: offer.id,
|
||||
jobType: offer.jobType,
|
||||
location: offer.location,
|
||||
monthYearReceived: convertToMonthYear(offer.monthYearReceived),
|
||||
negotiationStrategy: offer.negotiationStrategy,
|
||||
offersFullTime: offer.offersFullTime,
|
||||
offersIntern: offer.offersIntern,
|
||||
})),
|
||||
});
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
const profile = getProfileResult.data;
|
||||
|
||||
if (profile && !profile.isEditable) {
|
||||
router.push(getProfilePath(profile.id));
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{getProfileResult.isLoading && (
|
||||
<div className="flex w-full justify-center">
|
||||
<Spinner className="m-10" display="block" size="lg" />
|
||||
</div>
|
||||
)}
|
||||
{!getProfileResult.isLoading && (
|
||||
<OffersSubmissionForm
|
||||
initialOfferProfileValues={initialData}
|
||||
profileId={profile?.id}
|
||||
token={profile?.editToken || undefined}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,215 +1,5 @@
|
||||
import { useRef, useState } from 'react';
|
||||
import type { SubmitHandler } from 'react-hook-form';
|
||||
import { FormProvider, useForm } from 'react-hook-form';
|
||||
import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/20/solid';
|
||||
import { Button } from '@tih/ui';
|
||||
|
||||
import { Breadcrumbs } from '~/components/offers/Breadcrumb';
|
||||
import BackgroundForm from '~/components/offers/offers-submission/BackgroundForm';
|
||||
import OfferAnalysis from '~/components/offers/offers-submission/OfferAnalysis';
|
||||
import OfferDetailsForm from '~/components/offers/offers-submission/OfferDetailsForm';
|
||||
import OfferProfileSave from '~/components/offers/offers-submission/OfferProfileSave';
|
||||
import type {
|
||||
OfferFormData,
|
||||
OffersProfileFormData,
|
||||
} from '~/components/offers/types';
|
||||
import { JobType } from '~/components/offers/types';
|
||||
import type { Month } from '~/components/shared/MonthYearPicker';
|
||||
|
||||
import { cleanObject, removeInvalidMoneyData } from '~/utils/offers/form';
|
||||
import { getCurrentMonth, getCurrentYear } from '~/utils/offers/time';
|
||||
import { trpc } from '~/utils/trpc';
|
||||
|
||||
import type { CreateOfferProfileResponse } from '~/types/offers';
|
||||
|
||||
const defaultOfferValues = {
|
||||
comments: '',
|
||||
companyId: '',
|
||||
jobType: JobType.FullTime,
|
||||
location: '',
|
||||
monthYearReceived: {
|
||||
month: getCurrentMonth() as Month,
|
||||
year: getCurrentYear(),
|
||||
},
|
||||
negotiationStrategy: '',
|
||||
};
|
||||
|
||||
export const defaultFullTimeOfferValues = {
|
||||
...defaultOfferValues,
|
||||
jobType: JobType.FullTime,
|
||||
};
|
||||
|
||||
export const defaultInternshipOfferValues = {
|
||||
...defaultOfferValues,
|
||||
jobType: JobType.Intern,
|
||||
};
|
||||
|
||||
const defaultOfferProfileValues = {
|
||||
background: {
|
||||
educations: [],
|
||||
experiences: [{ jobType: JobType.FullTime }],
|
||||
specificYoes: [],
|
||||
},
|
||||
offers: [defaultOfferValues],
|
||||
};
|
||||
|
||||
type FormStep = {
|
||||
component: JSX.Element;
|
||||
hasNext: boolean;
|
||||
hasPrevious: boolean;
|
||||
label: string;
|
||||
};
|
||||
import OffersSubmissionForm from '~/components/offers/offersSubmission/OffersSubmissionForm';
|
||||
|
||||
export default function OffersSubmissionPage() {
|
||||
const [formStep, setFormStep] = useState(0);
|
||||
const [createProfileResponse, setCreateProfileResponse] =
|
||||
useState<CreateOfferProfileResponse>();
|
||||
|
||||
const pageRef = useRef<HTMLDivElement>(null);
|
||||
const scrollToTop = () =>
|
||||
pageRef.current?.scrollTo({ behavior: 'smooth', top: 0 });
|
||||
const formMethods = useForm<OffersProfileFormData>({
|
||||
defaultValues: defaultOfferProfileValues,
|
||||
mode: 'all',
|
||||
});
|
||||
const { handleSubmit, trigger } = formMethods;
|
||||
|
||||
const formSteps: Array<FormStep> = [
|
||||
{
|
||||
component: <OfferDetailsForm key={0} />,
|
||||
hasNext: true,
|
||||
hasPrevious: false,
|
||||
label: 'Offer details',
|
||||
},
|
||||
{
|
||||
component: <BackgroundForm key={1} />,
|
||||
hasNext: false,
|
||||
hasPrevious: true,
|
||||
label: 'Background',
|
||||
},
|
||||
{
|
||||
component: (
|
||||
<OfferAnalysis key={2} profileId={createProfileResponse?.id} />
|
||||
),
|
||||
hasNext: true,
|
||||
hasPrevious: false,
|
||||
label: 'Analysis',
|
||||
},
|
||||
{
|
||||
component: <OfferProfileSave key={3} />,
|
||||
hasNext: false,
|
||||
hasPrevious: false,
|
||||
label: 'Save',
|
||||
},
|
||||
];
|
||||
|
||||
const formStepsLabels = formSteps.map((step) => step.label);
|
||||
|
||||
const nextStep = async (currStep: number) => {
|
||||
if (currStep === 0) {
|
||||
const result = await trigger('offers');
|
||||
if (!result) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
setFormStep(formStep + 1);
|
||||
scrollToTop();
|
||||
};
|
||||
|
||||
const previousStep = () => {
|
||||
setFormStep(formStep - 1);
|
||||
scrollToTop();
|
||||
};
|
||||
|
||||
const generateAnalysisMutation = trpc.useMutation(
|
||||
['offers.analysis.generate'],
|
||||
{
|
||||
onError(error) {
|
||||
console.error(error.message);
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
const createMutation = trpc.useMutation(['offers.profile.create'], {
|
||||
onError(error) {
|
||||
console.error(error.message);
|
||||
},
|
||||
onSuccess(data) {
|
||||
generateAnalysisMutation.mutate({
|
||||
profileId: data?.id || '',
|
||||
});
|
||||
setCreateProfileResponse(data);
|
||||
setFormStep(formStep + 1);
|
||||
scrollToTop();
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit: SubmitHandler<OffersProfileFormData> = async (data) => {
|
||||
const result = await trigger();
|
||||
if (!result) {
|
||||
return;
|
||||
}
|
||||
|
||||
data = removeInvalidMoneyData(data);
|
||||
|
||||
const background = cleanObject(data.background);
|
||||
background.specificYoes = data.background.specificYoes.filter(
|
||||
(specificYoe) => specificYoe.domain && specificYoe.yoe > 0,
|
||||
);
|
||||
if (Object.entries(background.experiences[0]).length === 1) {
|
||||
background.experiences = [];
|
||||
}
|
||||
|
||||
const offers = data.offers.map((offer: OfferFormData) => ({
|
||||
...offer,
|
||||
monthYearReceived: new Date(
|
||||
offer.monthYearReceived.year,
|
||||
offer.monthYearReceived.month,
|
||||
),
|
||||
}));
|
||||
|
||||
const postData = { background, offers };
|
||||
|
||||
createMutation.mutate(postData);
|
||||
};
|
||||
|
||||
return (
|
||||
<div ref={pageRef} className="fixed h-full w-full overflow-y-scroll">
|
||||
<div className="mb-20 flex justify-center">
|
||||
<div className="my-5 block w-full max-w-screen-md rounded-lg bg-white py-10 px-10 shadow-lg">
|
||||
<div className="mb-4 flex justify-end">
|
||||
<Breadcrumbs currentStep={formStep} stepLabels={formStepsLabels} />
|
||||
</div>
|
||||
<FormProvider {...formMethods}>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
{formSteps[formStep].component}
|
||||
{/* <pre>{JSON.stringify(formMethods.watch(), null, 2)}</pre> */}
|
||||
{formSteps[formStep].hasNext && (
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
disabled={false}
|
||||
icon={ArrowRightIcon}
|
||||
label="Next"
|
||||
variant="secondary"
|
||||
onClick={() => nextStep(formStep)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{formStep === 1 && (
|
||||
<div className="flex items-center justify-between">
|
||||
<Button
|
||||
icon={ArrowLeftIcon}
|
||||
label="Previous"
|
||||
variant="secondary"
|
||||
onClick={previousStep}
|
||||
/>
|
||||
<Button label="Submit" type="submit" variant="primary" />{' '}
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
</FormProvider>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return <OffersSubmissionForm />;
|
||||
}
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
export function getProfileLink(profileId: string, token?: string) {
|
||||
return `${window.location.origin}${getProfilePath(profileId, token)}`;
|
||||
}
|
||||
|
||||
export function copyProfileLink(profileId: string, token?: string) {
|
||||
// TODO: Add notification
|
||||
navigator.clipboard.writeText(getProfileLink(profileId, token));
|
||||
}
|
||||
|
||||
export function getProfilePath(profileId: string, token?: string) {
|
||||
if (token) {
|
||||
return `/offers/profile/${profileId}?token=${token}`;
|
||||
}
|
||||
return `/offers/profile/${profileId}`;
|
||||
}
|
||||
|
||||
export function getProfileEditPath(profileId: string, token: string) {
|
||||
return `/offers/profile/edit/${profileId}?token=${token}`;
|
||||
}
|
||||
Loading…
Reference in new issue