mirror of
https://github.com/yangshun/tech-interview-handbook.git
synced 2025-07-28 12:43:12 +08:00
[offers][fix] Refactor and fix offer analysis (#413)
This commit is contained in:
Ai Ling
@ -84,7 +84,7 @@ export default function OfferProfileSave({
|
||||
onClick={saveProfile}
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-10">
|
||||
<div>
|
||||
<Button
|
||||
icon={EyeIcon}
|
||||
label="View your profile"
|
||||
|
||||
@ -2,6 +2,7 @@ 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 { JobType } from '@prisma/client';
|
||||
import { Button } from '@tih/ui';
|
||||
|
||||
import { Breadcrumbs } from '~/components/offers/Breadcrumb';
|
||||
@ -13,7 +14,6 @@ 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';
|
||||
@ -25,7 +25,7 @@ import type { CreateOfferProfileResponse } from '~/types/offers';
|
||||
const defaultOfferValues = {
|
||||
comments: '',
|
||||
companyId: '',
|
||||
jobType: JobType.FullTime,
|
||||
jobType: JobType.FULLTIME,
|
||||
location: '',
|
||||
monthYearReceived: {
|
||||
month: getCurrentMonth() as Month,
|
||||
@ -36,18 +36,18 @@ const defaultOfferValues = {
|
||||
|
||||
export const defaultFullTimeOfferValues = {
|
||||
...defaultOfferValues,
|
||||
jobType: JobType.FullTime,
|
||||
jobType: JobType.FULLTIME,
|
||||
};
|
||||
|
||||
export const defaultInternshipOfferValues = {
|
||||
...defaultOfferValues,
|
||||
jobType: JobType.Intern,
|
||||
jobType: JobType.INTERN,
|
||||
};
|
||||
|
||||
const defaultOfferProfileValues = {
|
||||
background: {
|
||||
educations: [],
|
||||
experiences: [{ jobType: JobType.FullTime }],
|
||||
experiences: [{ jobType: JobType.FULLTIME }],
|
||||
specificYoes: [],
|
||||
totalYoe: 0,
|
||||
},
|
||||
@ -90,7 +90,12 @@ export default function OffersSubmissionForm({
|
||||
|
||||
const formSteps: Array<FormStep> = [
|
||||
{
|
||||
component: <OfferDetailsForm key={0} />,
|
||||
component: (
|
||||
<OfferDetailsForm
|
||||
key={0}
|
||||
defaultJobType={initialOfferProfileValues.offers[0].jobType}
|
||||
/>
|
||||
),
|
||||
hasNext: true,
|
||||
hasPrevious: false,
|
||||
label: 'Offer details',
|
||||
|
||||
@ -4,7 +4,7 @@ import { HorizontalDivider, Spinner, Tabs } from '@tih/ui';
|
||||
|
||||
import { trpc } from '~/utils/trpc';
|
||||
|
||||
import OfferPercentileAnalysis from './OfferPercentileAnalysis';
|
||||
import OfferPercentileAnalysisText from './OfferPercentileAnalysisText';
|
||||
import OfferProfileCard from './OfferProfileCard';
|
||||
import { OVERALL_TAB } from '../../constants';
|
||||
|
||||
@ -38,11 +38,12 @@ function OfferAnalysisContent({
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<OfferPercentileAnalysis
|
||||
<OfferPercentileAnalysisText
|
||||
companyName={offer.company.name}
|
||||
offerAnalysis={offerAnalysis}
|
||||
tab={tab}
|
||||
/>
|
||||
<p className="mt-5">Here are some of the top offers relevant to you:</p>
|
||||
{offerAnalysis.topPercentileOffers.map((topPercentileOffer) => (
|
||||
<OfferProfileCard
|
||||
key={topPercentileOffer.id}
|
||||
|
||||
@ -1,27 +0,0 @@
|
||||
import type { Analysis } from '~/types/offers';
|
||||
|
||||
type OfferPercentileAnalysisProps = Readonly<{
|
||||
companyName: string;
|
||||
offerAnalysis: Analysis;
|
||||
tab: string;
|
||||
}>;
|
||||
|
||||
export default function OfferPercentileAnalysis({
|
||||
tab,
|
||||
companyName,
|
||||
offerAnalysis: { noOfOffers, percentile },
|
||||
}: OfferPercentileAnalysisProps) {
|
||||
return tab === 'Overall' ? (
|
||||
<p>
|
||||
Your highest offer is from {companyName}, which is {percentile} percentile
|
||||
out of {noOfOffers} offers received for the same job type, same level, and
|
||||
same YOE(+/-1) in the last year.
|
||||
</p>
|
||||
) : (
|
||||
<p>
|
||||
Your offer from {companyName} is {percentile} percentile out of{' '}
|
||||
{noOfOffers} offers received in {companyName} for the same job type, same
|
||||
level, and same YOE(+/-1) in the last year.
|
||||
</p>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
import type { Analysis } from '~/types/offers';
|
||||
|
||||
type OfferPercentileAnalysisTextProps = Readonly<{
|
||||
companyName: string;
|
||||
offerAnalysis: Analysis;
|
||||
tab: string;
|
||||
}>;
|
||||
|
||||
export default function OfferPercentileAnalysisText({
|
||||
tab,
|
||||
companyName,
|
||||
offerAnalysis: { noOfOffers, percentile },
|
||||
}: OfferPercentileAnalysisTextProps) {
|
||||
return tab === 'Overall' ? (
|
||||
<p>
|
||||
Your highest offer is from <b>{companyName}</b>, which is{' '}
|
||||
<b>{percentile}</b> percentile out of <b>{noOfOffers}</b> offers received
|
||||
for the same job title and YOE(+/-1) in the last year.
|
||||
</p>
|
||||
) : (
|
||||
<p>
|
||||
Your offer from <b>{companyName}</b> is <b>{percentile}</b> percentile out
|
||||
of <b>{noOfOffers}</b> offers received in {companyName} for the same job
|
||||
title and YOE(+/-1) in the last year.
|
||||
</p>
|
||||
);
|
||||
}
|
||||
@ -1,9 +1,10 @@
|
||||
import { UserCircleIcon } from '@heroicons/react/24/outline';
|
||||
import { JobType } from '@prisma/client';
|
||||
|
||||
import { HorizontalDivider } from '~/../../../packages/ui/dist';
|
||||
import { convertMoneyToString } from '~/utils/offers/currency';
|
||||
import { formatDate } from '~/utils/offers/time';
|
||||
|
||||
import { JobType } from '../../types';
|
||||
import ProfilePhotoHolder from '../../profile/ProfilePhotoHolder';
|
||||
|
||||
import type { AnalysisOffer } from '~/types/offers';
|
||||
|
||||
@ -29,7 +30,7 @@ export default function OfferProfileCard({
|
||||
<div className="my-5 block rounded-lg border p-4">
|
||||
<div className="grid grid-flow-col grid-cols-12 gap-x-10">
|
||||
<div className="col-span-1">
|
||||
<UserCircleIcon width={50} />
|
||||
<ProfilePhotoHolder size="sm" />
|
||||
</div>
|
||||
<div className="col-span-10">
|
||||
<p className="text-sm font-semibold">{profileName}</p>
|
||||
@ -50,9 +51,9 @@ export default function OfferProfileCard({
|
||||
<div className="col-span-1 row-span-3">
|
||||
<p className="text-end text-sm">{formatDate(monthYearReceived)}</p>
|
||||
<p className="text-end text-xl">
|
||||
{jobType === JobType.FullTime
|
||||
? `$${income} / year`
|
||||
: `$${income} / month`}
|
||||
{jobType === JobType.FULLTIME
|
||||
? `${convertMoneyToString(income)} / year`
|
||||
: `${convertMoneyToString(income)} / month`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { useFormContext, useWatch } from 'react-hook-form';
|
||||
import { JobType } from '@prisma/client';
|
||||
import { Collapsible, RadioList } from '@tih/ui';
|
||||
|
||||
import {
|
||||
@ -10,7 +11,6 @@ import {
|
||||
titleOptions,
|
||||
} from '~/components/offers/constants';
|
||||
import type { BackgroundPostData } from '~/components/offers/types';
|
||||
import { JobType } from '~/components/offers/types';
|
||||
import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead';
|
||||
|
||||
import { CURRENCY_OPTIONS } from '~/utils/offers/currency/CurrencyEnum';
|
||||
@ -239,7 +239,7 @@ function InternshipJobFields() {
|
||||
function CurrentJobSection() {
|
||||
const { register } = useFormContext();
|
||||
const watchJobType = useWatch({
|
||||
defaultValue: JobType.FullTime,
|
||||
defaultValue: JobType.FULLTIME,
|
||||
name: 'background.experiences.0.jobType',
|
||||
});
|
||||
|
||||
@ -251,7 +251,7 @@ function CurrentJobSection() {
|
||||
<div className="mb-5 rounded-lg border border-gray-200 px-10 py-5">
|
||||
<div className="mb-5">
|
||||
<FormRadioList
|
||||
defaultValue={JobType.FullTime}
|
||||
defaultValue={JobType.FULLTIME}
|
||||
isLabelHidden={true}
|
||||
label="Job Type"
|
||||
orientation="horizontal"
|
||||
@ -259,16 +259,16 @@ function CurrentJobSection() {
|
||||
<RadioList.Item
|
||||
key="Full-time"
|
||||
label="Full-time"
|
||||
value={JobType.FullTime}
|
||||
value={JobType.FULLTIME}
|
||||
/>
|
||||
<RadioList.Item
|
||||
key="Internship"
|
||||
label="Internship"
|
||||
value={JobType.Intern}
|
||||
value={JobType.INTERN}
|
||||
/>
|
||||
</FormRadioList>
|
||||
</div>
|
||||
{watchJobType === JobType.FullTime ? (
|
||||
{watchJobType === JobType.FULLTIME ? (
|
||||
<FullTimeJobFields />
|
||||
) : (
|
||||
<InternshipJobFields />
|
||||
|
||||
@ -9,6 +9,7 @@ import { useFormContext } from 'react-hook-form';
|
||||
import { useFieldArray } from 'react-hook-form';
|
||||
import { PlusIcon } from '@heroicons/react/20/solid';
|
||||
import { TrashIcon } from '@heroicons/react/24/outline';
|
||||
import { JobType } from '@prisma/client';
|
||||
import { Button, Dialog } from '@tih/ui';
|
||||
|
||||
import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead';
|
||||
@ -31,7 +32,6 @@ import FormTextArea from '../../forms/FormTextArea';
|
||||
import FormTextInput from '../../forms/FormTextInput';
|
||||
import type { OfferFormData } from '../../types';
|
||||
import { JobTypeLabel } from '../../types';
|
||||
import { JobType } from '../../types';
|
||||
import { CURRENCY_OPTIONS } from '../../../../utils/offers/currency/CurrencyEnum';
|
||||
|
||||
type FullTimeOfferDetailsFormProps = Readonly<{
|
||||
@ -448,7 +448,7 @@ function OfferDetailsFormArray({
|
||||
{fields.map((item, index) => {
|
||||
return (
|
||||
<div key={item.id}>
|
||||
{jobType === JobType.FullTime ? (
|
||||
{jobType === JobType.FULLTIME ? (
|
||||
<FullTimeOfferDetailsForm index={index} remove={remove} />
|
||||
) : (
|
||||
<InternshipOfferDetailsForm index={index} remove={remove} />
|
||||
@ -464,7 +464,7 @@ function OfferDetailsFormArray({
|
||||
variant="tertiary"
|
||||
onClick={() =>
|
||||
append(
|
||||
jobType === JobType.FullTime
|
||||
jobType === JobType.FULLTIME
|
||||
? defaultFullTimeOfferValues
|
||||
: defaultInternshipOfferValues,
|
||||
)
|
||||
@ -474,8 +474,14 @@ function OfferDetailsFormArray({
|
||||
);
|
||||
}
|
||||
|
||||
export default function OfferDetailsForm() {
|
||||
const [jobType, setJobType] = useState(JobType.FullTime);
|
||||
type OfferDetailsFormProps = Readonly<{
|
||||
defaultJobType?: JobType;
|
||||
}>;
|
||||
|
||||
export default function OfferDetailsForm({
|
||||
defaultJobType = JobType.FULLTIME,
|
||||
}: OfferDetailsFormProps) {
|
||||
const [jobType, setJobType] = useState(defaultJobType);
|
||||
const [isDialogOpen, setDialogOpen] = useState(false);
|
||||
const { control } = useFormContext();
|
||||
const fieldArrayValues = useFieldArray({ control, name: 'offers' });
|
||||
@ -483,17 +489,17 @@ export default function OfferDetailsForm() {
|
||||
|
||||
const toggleJobType = () => {
|
||||
remove();
|
||||
if (jobType === JobType.FullTime) {
|
||||
setJobType(JobType.Intern);
|
||||
if (jobType === JobType.FULLTIME) {
|
||||
setJobType(JobType.INTERN);
|
||||
append(defaultInternshipOfferValues);
|
||||
} else {
|
||||
setJobType(JobType.FullTime);
|
||||
setJobType(JobType.FULLTIME);
|
||||
append(defaultFullTimeOfferValues);
|
||||
}
|
||||
};
|
||||
|
||||
const switchJobTypeLabel = () =>
|
||||
jobType === JobType.FullTime ? JobTypeLabel.INTERN : JobTypeLabel.FULLTIME;
|
||||
jobType === JobType.FULLTIME ? JobTypeLabel.INTERN : JobTypeLabel.FULLTIME;
|
||||
|
||||
return (
|
||||
<div className="mb-5">
|
||||
@ -506,9 +512,9 @@ export default function OfferDetailsForm() {
|
||||
display="block"
|
||||
label={JobTypeLabel.FULLTIME}
|
||||
size="md"
|
||||
variant={jobType === JobType.FullTime ? 'secondary' : 'tertiary'}
|
||||
variant={jobType === JobType.FULLTIME ? 'secondary' : 'tertiary'}
|
||||
onClick={() => {
|
||||
if (jobType === JobType.FullTime) {
|
||||
if (jobType === JobType.FULLTIME) {
|
||||
return;
|
||||
}
|
||||
setDialogOpen(true);
|
||||
@ -520,9 +526,9 @@ export default function OfferDetailsForm() {
|
||||
display="block"
|
||||
label={JobTypeLabel.INTERN}
|
||||
size="md"
|
||||
variant={jobType === JobType.Intern ? 'secondary' : 'tertiary'}
|
||||
variant={jobType === JobType.INTERN ? 'secondary' : 'tertiary'}
|
||||
onClick={() => {
|
||||
if (jobType === JobType.Intern) {
|
||||
if (jobType === JobType.INTERN) {
|
||||
return;
|
||||
}
|
||||
setDialogOpen(true);
|
||||
|
||||
@ -3,18 +3,10 @@ import {
|
||||
LightBulbIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
|
||||
import type { EducationBackgroundType } from '~/components/offers/types';
|
||||
|
||||
type EducationEntity = {
|
||||
endDate?: string;
|
||||
field?: string;
|
||||
school?: string;
|
||||
startDate?: string;
|
||||
type?: EducationBackgroundType;
|
||||
};
|
||||
import type { EducationDisplayData } from '~/components/offers/types';
|
||||
|
||||
type Props = Readonly<{
|
||||
education: EducationEntity;
|
||||
education: EducationDisplayData;
|
||||
}>;
|
||||
|
||||
export default function EducationCard({
|
||||
@ -39,9 +31,7 @@ export default function EducationCard({
|
||||
</div>
|
||||
{(startDate || endDate) && (
|
||||
<div className="font-light text-gray-400">
|
||||
<p>{`${startDate ? startDate : 'N/A'} - ${
|
||||
endDate ? endDate : 'N/A'
|
||||
}`}</p>
|
||||
<p>{`${startDate || 'N/A'} - ${endDate || 'N/A'}`}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -6,10 +6,10 @@ import {
|
||||
} from '@heroicons/react/24/outline';
|
||||
import { HorizontalDivider } from '@tih/ui';
|
||||
|
||||
import type { OfferEntity } from '~/components/offers/types';
|
||||
import type { OfferDisplayData } from '~/components/offers/types';
|
||||
|
||||
type Props = Readonly<{
|
||||
offer: OfferEntity;
|
||||
offer: OfferDisplayData;
|
||||
}>;
|
||||
|
||||
export default function OfferCard({
|
||||
|
||||
@ -3,13 +3,18 @@ import { Spinner } from '@tih/ui';
|
||||
|
||||
import EducationCard from '~/components/offers/profile/EducationCard';
|
||||
import OfferCard from '~/components/offers/profile/OfferCard';
|
||||
import type { BackgroundCard, OfferEntity } from '~/components/offers/types';
|
||||
import { EducationBackgroundType } from '~/components/offers/types';
|
||||
import type {
|
||||
BackgroundDisplayData,
|
||||
OfferDisplayData,
|
||||
} from '~/components/offers/types';
|
||||
|
||||
import type { ProfileAnalysis } from '~/types/offers';
|
||||
|
||||
type ProfileHeaderProps = Readonly<{
|
||||
background?: BackgroundCard;
|
||||
analysis?: ProfileAnalysis;
|
||||
background?: BackgroundDisplayData;
|
||||
isLoading: boolean;
|
||||
offers: Array<OfferEntity>;
|
||||
offers: Array<OfferDisplayData>;
|
||||
selectedTab: string;
|
||||
}>;
|
||||
|
||||
@ -52,7 +57,7 @@ export default function ProfileDetails({
|
||||
<BriefcaseIcon className="mr-1 h-5" />
|
||||
<span className="font-bold">Work Experience</span>
|
||||
</div>
|
||||
<OfferCard offer={background?.experiences[0]} />
|
||||
<OfferCard offer={background.experiences[0]} />
|
||||
</>
|
||||
)}
|
||||
{background?.educations && background?.educations.length > 0 && (
|
||||
@ -61,15 +66,7 @@ export default function ProfileDetails({
|
||||
<AcademicCapIcon className="mr-1 h-5" />
|
||||
<span className="font-bold">Education</span>
|
||||
</div>
|
||||
<EducationCard
|
||||
education={{
|
||||
endDate: background.educations[0].endDate,
|
||||
field: background.educations[0].field,
|
||||
school: background.educations[0].school,
|
||||
startDate: background.educations[0].startDate,
|
||||
type: EducationBackgroundType.Bachelor,
|
||||
}}
|
||||
/>
|
||||
<EducationCard education={background.educations[0]} />
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { useRouter } from 'next/router';
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
BookmarkSquareIcon,
|
||||
BuildingOffice2Icon,
|
||||
CalendarDaysIcon,
|
||||
PencilSquareIcon,
|
||||
@ -10,12 +9,12 @@ import {
|
||||
import { Button, Dialog, Spinner, Tabs } from '@tih/ui';
|
||||
|
||||
import ProfilePhotoHolder from '~/components/offers/profile/ProfilePhotoHolder';
|
||||
import type { BackgroundCard } from '~/components/offers/types';
|
||||
import type { BackgroundDisplayData } from '~/components/offers/types';
|
||||
|
||||
import { getProfileEditPath } from '~/utils/offers/link';
|
||||
|
||||
type ProfileHeaderProps = Readonly<{
|
||||
background?: BackgroundCard;
|
||||
background?: BackgroundDisplayData;
|
||||
handleDelete: () => void;
|
||||
isEditable: boolean;
|
||||
isLoading: boolean;
|
||||
@ -42,14 +41,14 @@ export default function ProfileHeader({
|
||||
function renderActionList() {
|
||||
return (
|
||||
<div className="space-x-2">
|
||||
<Button
|
||||
{/* <Button
|
||||
disabled={isLoading}
|
||||
icon={BookmarkSquareIcon}
|
||||
isLabelHidden={true}
|
||||
label="Save to user account"
|
||||
size="md"
|
||||
variant="tertiary"
|
||||
/>
|
||||
/> */}
|
||||
<Button
|
||||
disabled={isLoading}
|
||||
icon={PencilSquareIcon}
|
||||
@ -109,6 +108,13 @@ export default function ProfileHeader({
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!background) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { experiences, totalYoe, specificYoes, profileName } = background;
|
||||
|
||||
return (
|
||||
<div className="h-40 bg-white p-4">
|
||||
<div className="justify-left flex h-1/2">
|
||||
@ -118,7 +124,7 @@ export default function ProfileHeader({
|
||||
<div className="w-full">
|
||||
<div className="justify-left flex flex-1">
|
||||
<h2 className="flex w-4/5 text-2xl font-bold">
|
||||
{background?.profileName ?? 'anonymous'}
|
||||
{profileName ?? 'anonymous'}
|
||||
</h2>
|
||||
{isEditable && (
|
||||
<div className="flex h-8 w-1/5 justify-end">
|
||||
@ -126,22 +132,26 @@ export default function ProfileHeader({
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{(experiences[0]?.companyName ||
|
||||
experiences[0]?.jobLevel ||
|
||||
experiences[0]?.jobTitle) && (
|
||||
<div className="flex flex-row">
|
||||
<BuildingOffice2Icon className="mr-2.5 h-5" />
|
||||
<span className="mr-2 font-bold">Current:</span>
|
||||
<span>
|
||||
{`${background?.experiences[0]?.companyName ?? '-'} ${
|
||||
background?.experiences[0]?.jobLevel || ''
|
||||
} ${background?.experiences[0]?.jobTitle || ''}`}
|
||||
{`${experiences[0]?.companyName || ''} ${
|
||||
experiences[0]?.jobLevel || ''
|
||||
} ${experiences[0]?.jobTitle || ''}`}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-row">
|
||||
<CalendarDaysIcon className="mr-2.5 h-5" />
|
||||
<span className="mr-2 font-bold">YOE:</span>
|
||||
<span className="mr-4">{background?.totalYoe}</span>
|
||||
{background?.specificYoes &&
|
||||
background?.specificYoes.length > 0 &&
|
||||
background?.specificYoes.map(({ domain, yoe }) => {
|
||||
<span className="mr-4">{totalYoe}</span>
|
||||
{specificYoes &&
|
||||
specificYoes.length > 0 &&
|
||||
specificYoes.map(({ domain, yoe }) => {
|
||||
return (
|
||||
<span
|
||||
key={domain}
|
||||
|
||||
@ -1,6 +1,14 @@
|
||||
export default function ProfilePhotoHolder() {
|
||||
type ProfilePhotoHolderProps = {
|
||||
size?: 'lg' | 'sm';
|
||||
};
|
||||
|
||||
export default function ProfilePhotoHolder({
|
||||
size = 'lg',
|
||||
}: ProfilePhotoHolderProps) {
|
||||
const sizeMap = { lg: '16', sm: '12' };
|
||||
return (
|
||||
<span className="inline-block h-16 w-16 overflow-hidden rounded-full bg-gray-100">
|
||||
<span
|
||||
className={`inline-block h-${sizeMap[size]} w-${sizeMap[size]} overflow-hidden rounded-full bg-gray-100`}>
|
||||
<svg
|
||||
className="h-full w-full text-gray-300"
|
||||
fill="currentColor"
|
||||
|
||||
@ -1,14 +1,11 @@
|
||||
import type { JobType } from '@prisma/client';
|
||||
|
||||
import type { MonthYear } from '~/components/shared/MonthYearPicker';
|
||||
|
||||
/*
|
||||
* Offer Profile
|
||||
*/
|
||||
|
||||
export enum JobType {
|
||||
FullTime = 'FULLTIME',
|
||||
Intern = 'INTERN',
|
||||
}
|
||||
|
||||
export const JobTypeLabel = {
|
||||
FULLTIME: 'Full-time',
|
||||
INTERN: 'Internship',
|
||||
@ -26,17 +23,20 @@ export enum EducationBackgroundType {
|
||||
|
||||
export type OffersProfilePostData = {
|
||||
background: BackgroundPostData;
|
||||
id?: string;
|
||||
offers: Array<OfferPostData>;
|
||||
};
|
||||
|
||||
export type OffersProfileFormData = {
|
||||
background: BackgroundPostData;
|
||||
id?: string;
|
||||
offers: Array<OfferFormData>;
|
||||
};
|
||||
|
||||
export type BackgroundPostData = {
|
||||
educations: Array<EducationPostData>;
|
||||
experiences: Array<ExperiencePostData>;
|
||||
id?: string;
|
||||
specificYoes: Array<SpecificYoePostData>;
|
||||
totalYoe: number;
|
||||
};
|
||||
@ -44,6 +44,7 @@ export type BackgroundPostData = {
|
||||
type ExperiencePostData = {
|
||||
companyId?: string | null;
|
||||
durationInMonths?: number | null;
|
||||
id?: string;
|
||||
jobType?: string | null;
|
||||
level?: string | null;
|
||||
location?: string | null;
|
||||
@ -57,6 +58,7 @@ type ExperiencePostData = {
|
||||
type EducationPostData = {
|
||||
endDate?: Date | null;
|
||||
field?: string | null;
|
||||
id?: string;
|
||||
school?: string | null;
|
||||
startDate?: Date | null;
|
||||
type?: string | null;
|
||||
@ -64,6 +66,7 @@ type EducationPostData = {
|
||||
|
||||
type SpecificYoePostData = {
|
||||
domain: string;
|
||||
id?: string;
|
||||
yoe: number;
|
||||
};
|
||||
|
||||
@ -72,7 +75,8 @@ type SpecificYoe = SpecificYoePostData;
|
||||
export type OfferPostData = {
|
||||
comments: string;
|
||||
companyId: string;
|
||||
jobType: string;
|
||||
id?: string;
|
||||
jobType: JobType;
|
||||
location: string;
|
||||
monthYearReceived: Date;
|
||||
negotiationStrategy: string;
|
||||
@ -87,6 +91,7 @@ export type OfferFormData = Omit<OfferPostData, 'monthYearReceived'> & {
|
||||
export type OfferFullTimePostData = {
|
||||
baseSalary: Money;
|
||||
bonus: Money;
|
||||
id?: string;
|
||||
level: string;
|
||||
specialization: string;
|
||||
stocks: Money;
|
||||
@ -95,6 +100,7 @@ export type OfferFullTimePostData = {
|
||||
};
|
||||
|
||||
export type OfferInternPostData = {
|
||||
id?: string;
|
||||
internshipCycle: string;
|
||||
monthlySalary: Money;
|
||||
specialization: string;
|
||||
@ -104,40 +110,41 @@ export type OfferInternPostData = {
|
||||
|
||||
export type Money = {
|
||||
currency: string;
|
||||
id?: string;
|
||||
value: number;
|
||||
};
|
||||
|
||||
type EducationDisplay = {
|
||||
endDate?: string;
|
||||
field: string;
|
||||
school: string;
|
||||
startDate?: string;
|
||||
type: string;
|
||||
export type EducationDisplayData = {
|
||||
endDate?: string | null;
|
||||
field?: string | null;
|
||||
school?: string | null;
|
||||
startDate?: string | null;
|
||||
type?: string | null;
|
||||
};
|
||||
|
||||
export type OfferEntity = {
|
||||
base?: string;
|
||||
bonus?: string;
|
||||
companyName?: string;
|
||||
duration?: string;
|
||||
export type OfferDisplayData = {
|
||||
base?: string | null;
|
||||
bonus?: string | null;
|
||||
companyName?: string | null;
|
||||
duration?: number | null;
|
||||
id?: string;
|
||||
jobLevel?: string;
|
||||
jobTitle?: string;
|
||||
location?: string;
|
||||
monthlySalary?: string;
|
||||
negotiationStrategy?: string;
|
||||
otherComment?: string;
|
||||
receivedMonth?: string;
|
||||
stocks?: string;
|
||||
totalCompensation?: string;
|
||||
jobLevel?: string | null;
|
||||
jobTitle?: string | null;
|
||||
location?: string | null;
|
||||
monthlySalary?: string | null;
|
||||
negotiationStrategy?: string | null;
|
||||
otherComment?: string | null;
|
||||
receivedMonth?: string | null;
|
||||
stocks?: string | null;
|
||||
totalCompensation?: string | null;
|
||||
};
|
||||
|
||||
export type BackgroundCard = {
|
||||
educations: Array<EducationDisplay>;
|
||||
experiences: Array<OfferEntity>;
|
||||
export type BackgroundDisplayData = {
|
||||
educations: Array<EducationDisplayData>;
|
||||
experiences: Array<OfferDisplayData>;
|
||||
profileName: string;
|
||||
specificYoes: Array<SpecificYoe>;
|
||||
totalYoe: string;
|
||||
totalYoe: number;
|
||||
};
|
||||
|
||||
export type CommentEntity = {
|
||||
|
||||
@ -56,7 +56,13 @@ const analysisOfferDtoMapper = (
|
||||
const analysisOfferDto: AnalysisOffer = {
|
||||
company: offersCompanyDtoMapper(offer.company),
|
||||
id: offer.id,
|
||||
income: { baseCurrency: '', baseValue: -1, currency: '', value: -1 },
|
||||
income: {
|
||||
baseCurrency: '',
|
||||
baseValue: -1,
|
||||
currency: '',
|
||||
id: '',
|
||||
value: -1,
|
||||
},
|
||||
jobType: offer.jobType,
|
||||
level: offer.offersFullTime?.level ?? '',
|
||||
location: offer.location,
|
||||
@ -83,6 +89,7 @@ const analysisOfferDtoMapper = (
|
||||
offer.offersFullTime.totalCompensation.value;
|
||||
analysisOfferDto.income.currency =
|
||||
offer.offersFullTime.totalCompensation.currency;
|
||||
analysisOfferDto.income.id = offer.offersFullTime.totalCompensation.id;
|
||||
analysisOfferDto.income.baseValue =
|
||||
offer.offersFullTime.totalCompensation.baseValue;
|
||||
analysisOfferDto.income.baseCurrency =
|
||||
@ -91,6 +98,7 @@ const analysisOfferDtoMapper = (
|
||||
analysisOfferDto.income.value = offer.offersIntern.monthlySalary.value;
|
||||
analysisOfferDto.income.currency =
|
||||
offer.offersIntern.monthlySalary.currency;
|
||||
analysisOfferDto.income.id = offer.offersIntern.monthlySalary.id;
|
||||
analysisOfferDto.income.baseValue =
|
||||
offer.offersIntern.monthlySalary.baseValue;
|
||||
analysisOfferDto.income.baseCurrency =
|
||||
@ -255,13 +263,14 @@ export const valuationDtoMapper = (currency: {
|
||||
baseCurrency: string;
|
||||
baseValue: number;
|
||||
currency: string;
|
||||
id?: string;
|
||||
id: string;
|
||||
value: number;
|
||||
}) => {
|
||||
const valuationDto: Valuation = {
|
||||
baseCurrency: currency.baseCurrency,
|
||||
baseValue: currency.baseValue,
|
||||
currency: currency.currency,
|
||||
id: currency.id,
|
||||
value: currency.value,
|
||||
};
|
||||
return valuationDto;
|
||||
@ -595,11 +604,12 @@ export const dashboardOfferDtoMapper = (
|
||||
baseCurrency: '',
|
||||
baseValue: -1,
|
||||
currency: '',
|
||||
id: '',
|
||||
value: -1,
|
||||
}),
|
||||
monthYearReceived: offer.monthYearReceived,
|
||||
profileId: offer.profileId,
|
||||
title: offer.offersFullTime?.title ?? '',
|
||||
title: offer.offersFullTime?.title || offer.offersIntern?.title || '',
|
||||
totalYoe: offer.profile.background?.totalYoe ?? -1,
|
||||
};
|
||||
|
||||
|
||||
@ -5,14 +5,17 @@ import { useState } from 'react';
|
||||
import ProfileComments from '~/components/offers/profile/ProfileComments';
|
||||
import ProfileDetails from '~/components/offers/profile/ProfileDetails';
|
||||
import ProfileHeader from '~/components/offers/profile/ProfileHeader';
|
||||
import type { BackgroundCard, OfferEntity } from '~/components/offers/types';
|
||||
import type {
|
||||
BackgroundDisplayData,
|
||||
OfferDisplayData,
|
||||
} from '~/components/offers/types';
|
||||
|
||||
import { convertMoneyToString } from '~/utils/offers/currency';
|
||||
import { getProfilePath } from '~/utils/offers/link';
|
||||
import { formatDate } from '~/utils/offers/time';
|
||||
import { trpc } from '~/utils/trpc';
|
||||
|
||||
import type { Profile, ProfileOffer } from '~/types/offers';
|
||||
import type { Profile, ProfileAnalysis, ProfileOffer } from '~/types/offers';
|
||||
|
||||
export default function OfferProfile() {
|
||||
const ErrorPage = (
|
||||
@ -21,10 +24,11 @@ export default function OfferProfile() {
|
||||
const router = useRouter();
|
||||
const { offerProfileId, token = '' } = router.query;
|
||||
const [isEditable, setIsEditable] = useState(false);
|
||||
const [background, setBackground] = useState<BackgroundCard>();
|
||||
const [offers, setOffers] = useState<Array<OfferEntity>>([]);
|
||||
const [background, setBackground] = useState<BackgroundDisplayData>();
|
||||
const [offers, setOffers] = useState<Array<OfferDisplayData>>([]);
|
||||
|
||||
const [selectedTab, setSelectedTab] = useState('offers');
|
||||
const [analysis, setAnalysis] = useState<ProfileAnalysis>();
|
||||
|
||||
const getProfileQuery = trpc.useQuery(
|
||||
[
|
||||
@ -44,11 +48,10 @@ export default function OfferProfile() {
|
||||
|
||||
setIsEditable(data?.isEditable ?? false);
|
||||
|
||||
if (data?.offers) {
|
||||
const filteredOffers: Array<OfferEntity> = data
|
||||
const filteredOffers: Array<OfferDisplayData> = data
|
||||
? data?.offers.map((res: ProfileOffer) => {
|
||||
if (res.offersFullTime) {
|
||||
const filteredOffer: OfferEntity = {
|
||||
const filteredOffer: OfferDisplayData = {
|
||||
base: convertMoneyToString(res.offersFullTime.baseSalary),
|
||||
bonus: convertMoneyToString(res.offersFullTime.bonus),
|
||||
companyName: res.company.name,
|
||||
@ -56,8 +59,8 @@ export default function OfferProfile() {
|
||||
jobLevel: res.offersFullTime.level,
|
||||
jobTitle: res.offersFullTime.title,
|
||||
location: res.location,
|
||||
negotiationStrategy: res.negotiationStrategy || '',
|
||||
otherComment: res.comments || '',
|
||||
negotiationStrategy: res.negotiationStrategy,
|
||||
otherComment: res.comments,
|
||||
receivedMonth: formatDate(res.monthYearReceived),
|
||||
stocks: convertMoneyToString(res.offersFullTime.stocks),
|
||||
totalCompensation: convertMoneyToString(
|
||||
@ -66,7 +69,7 @@ export default function OfferProfile() {
|
||||
};
|
||||
return filteredOffer;
|
||||
}
|
||||
const filteredOffer: OfferEntity = {
|
||||
const filteredOffer: OfferDisplayData = {
|
||||
companyName: res.company.name,
|
||||
id: res.offersIntern!.id,
|
||||
jobTitle: res.offersIntern!.title,
|
||||
@ -74,45 +77,50 @@ export default function OfferProfile() {
|
||||
monthlySalary: convertMoneyToString(
|
||||
res.offersIntern!.monthlySalary,
|
||||
),
|
||||
negotiationStrategy: res.negotiationStrategy || '',
|
||||
otherComment: res.comments || '',
|
||||
negotiationStrategy: res.negotiationStrategy,
|
||||
otherComment: res.comments,
|
||||
receivedMonth: formatDate(res.monthYearReceived),
|
||||
};
|
||||
return filteredOffer;
|
||||
})
|
||||
: [];
|
||||
setOffers(filteredOffers);
|
||||
}
|
||||
|
||||
if (data?.background) {
|
||||
const transformedBackground = {
|
||||
educations: data.background.educations.map((education) => ({
|
||||
endDate: education.endDate ? formatDate(education.endDate) : '-',
|
||||
field: education.field || '-',
|
||||
school: education.school || '-',
|
||||
endDate: education.endDate ? formatDate(education.endDate) : null,
|
||||
field: education.field,
|
||||
school: education.school,
|
||||
startDate: education.startDate
|
||||
? formatDate(education.startDate)
|
||||
: '-',
|
||||
type: education.type || '-',
|
||||
: null,
|
||||
type: education.type,
|
||||
})),
|
||||
experiences: data.background.experiences.map((experience) => ({
|
||||
companyName: experience.company?.name ?? '-',
|
||||
duration: String(experience.durationInMonths) ?? '-',
|
||||
jobLevel: experience.level ?? '',
|
||||
jobTitle: experience.title ?? '-',
|
||||
experiences: data.background.experiences.map(
|
||||
(experience): OfferDisplayData => ({
|
||||
companyName: experience.company?.name,
|
||||
duration: experience.durationInMonths,
|
||||
jobLevel: experience.level,
|
||||
jobTitle: experience.title,
|
||||
monthlySalary: experience.monthlySalary
|
||||
? convertMoneyToString(experience.monthlySalary)
|
||||
: '-',
|
||||
: null,
|
||||
totalCompensation: experience.totalCompensation
|
||||
? convertMoneyToString(experience.totalCompensation)
|
||||
: '-',
|
||||
})),
|
||||
: null,
|
||||
}),
|
||||
),
|
||||
profileName: data.profileName,
|
||||
specificYoes: data.background.specificYoes,
|
||||
totalYoe: String(data.background.totalYoe) || '-',
|
||||
totalYoe: data.background.totalYoe,
|
||||
};
|
||||
setBackground(transformedBackground);
|
||||
}
|
||||
|
||||
if (data.analysis) {
|
||||
setAnalysis(data.analysis);
|
||||
}
|
||||
},
|
||||
},
|
||||
);
|
||||
@ -153,6 +161,7 @@ export default function OfferProfile() {
|
||||
/>
|
||||
<div className="h-4/5 w-full overflow-y-scroll pb-32">
|
||||
<ProfileDetails
|
||||
analysis={analysis}
|
||||
background={background}
|
||||
isLoading={getProfileQuery.isLoading}
|
||||
offers={offers}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { useRouter } from 'next/router';
|
||||
import { useState } from 'react';
|
||||
import { JobType } from '@prisma/client';
|
||||
|
||||
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';
|
||||
@ -25,7 +25,7 @@ export default function OffersEditPage() {
|
||||
console.error(error.message);
|
||||
},
|
||||
onSuccess(data) {
|
||||
const { educations, experiences, specificYoes, totalYoe } =
|
||||
const { educations, experiences, specificYoes, totalYoe, id } =
|
||||
data.background!;
|
||||
|
||||
setInitialData({
|
||||
@ -33,11 +33,13 @@ export default function OffersEditPage() {
|
||||
educations,
|
||||
experiences:
|
||||
experiences.length === 0
|
||||
? [{ jobType: JobType.FullTime }]
|
||||
? [{ jobType: JobType.FULLTIME }]
|
||||
: experiences,
|
||||
id,
|
||||
specificYoes,
|
||||
totalYoe,
|
||||
},
|
||||
id: data.id,
|
||||
offers: data.offers.map((offer) => ({
|
||||
comments: offer.comments,
|
||||
companyId: offer.company.id,
|
||||
@ -67,7 +69,7 @@ export default function OffersEditPage() {
|
||||
<Spinner className="m-10" display="block" size="lg" />
|
||||
</div>
|
||||
)}
|
||||
{!getProfileResult.isLoading && (
|
||||
{!getProfileResult.isLoading && initialData && (
|
||||
<OffersSubmissionForm
|
||||
initialOfferProfileValues={initialData}
|
||||
profileId={profile?.id}
|
||||
|
||||
@ -285,7 +285,6 @@ export const offersAnalysisRouter = createRouter()
|
||||
OR: [
|
||||
{
|
||||
offersFullTime: {
|
||||
level: overallHighestOffer.offersFullTime?.level,
|
||||
title: overallHighestOffer.offersFullTime?.title,
|
||||
},
|
||||
offersIntern: {
|
||||
|
||||
@ -385,7 +385,7 @@ export const offersProfileRouter = createRouter()
|
||||
|
||||
throw new trpc.TRPCError({
|
||||
code: 'BAD_REQUEST',
|
||||
message: 'Missing fields.',
|
||||
message: 'Missing fields in background experiences.',
|
||||
});
|
||||
}),
|
||||
},
|
||||
@ -533,7 +533,7 @@ export const offersProfileRouter = createRouter()
|
||||
// Throw error
|
||||
throw new trpc.TRPCError({
|
||||
code: 'BAD_REQUEST',
|
||||
message: 'Missing fields.',
|
||||
message: 'Missing fields in offers.',
|
||||
});
|
||||
}),
|
||||
),
|
||||
|
||||
1
apps/portal/src/types/offers.d.ts
vendored
1
apps/portal/src/types/offers.d.ts
vendored
@ -45,6 +45,7 @@ export type Valuation = {
|
||||
baseCurrency: string;
|
||||
baseValue: number;
|
||||
currency: string;
|
||||
id: string;
|
||||
value: number;
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user