mirror of
https://github.com/yangshun/tech-interview-handbook.git
synced 2025-07-28 04:33:42 +08:00
[offers][feat] save to user profile (#462)
This commit is contained in:
Zhang Ziqing
@ -9,7 +9,9 @@ import { Bars3BottomLeftIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
import GlobalNavigation from '~/components/global/GlobalNavigation';
|
||||
import HomeNavigation from '~/components/global/HomeNavigation';
|
||||
import OffersNavigation from '~/components/offers/OffersNavigation';
|
||||
import OffersNavigation, {
|
||||
OffersNavigationAuthenticated,
|
||||
} from '~/components/offers/OffersNavigation';
|
||||
import QuestionsNavigation from '~/components/questions/QuestionsNavigation';
|
||||
import ResumesNavigation from '~/components/resumes/ResumesNavigation';
|
||||
|
||||
@ -105,6 +107,7 @@ function ProfileJewel() {
|
||||
export default function AppShell({ children }: Props) {
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
const router = useRouter();
|
||||
const { data: session } = useSession();
|
||||
|
||||
const currentProductNavigation: Readonly<{
|
||||
googleAnalyticsMeasurementID: string;
|
||||
@ -120,7 +123,10 @@ export default function AppShell({ children }: Props) {
|
||||
}
|
||||
|
||||
if (path.startsWith('/offers')) {
|
||||
return OffersNavigation;
|
||||
if (session == null) {
|
||||
return OffersNavigation;
|
||||
}
|
||||
return OffersNavigationAuthenticated;
|
||||
}
|
||||
|
||||
if (path.startsWith('/questions')) {
|
||||
|
||||
@ -5,6 +5,12 @@ const navigation: ProductNavigationItems = [
|
||||
{ href: '/offers/features', name: 'Features' },
|
||||
];
|
||||
|
||||
const navigationAuthenticated: ProductNavigationItems = [
|
||||
{ href: '/offers/submit', name: 'Analyze your offers' },
|
||||
{ href: '/offers/dashboard', name: 'Your repository' },
|
||||
{ href: '/offers/features', name: 'Features' },
|
||||
];
|
||||
|
||||
const config = {
|
||||
// TODO: Change this to your own GA4 measurement ID.
|
||||
googleAnalyticsMeasurementID: 'G-34XRGLEVCF',
|
||||
@ -17,4 +23,9 @@ const config = {
|
||||
titleHref: '/offers',
|
||||
};
|
||||
|
||||
export const OffersNavigationAuthenticated = {
|
||||
...config,
|
||||
navigation: navigationAuthenticated,
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
||||
@ -0,0 +1,55 @@
|
||||
import { JobType } from '@prisma/client';
|
||||
import { HorizontalDivider } from '@tih/ui';
|
||||
|
||||
import type { JobTitleType } from '~/components/shared/JobTitles';
|
||||
import { getLabelForJobTitleType } from '~/components/shared/JobTitles';
|
||||
|
||||
import { convertMoneyToString } from '~/utils/offers/currency';
|
||||
import { formatDate } from '~/utils/offers/time';
|
||||
|
||||
import type { UserProfileOffer } from '~/types/offers';
|
||||
|
||||
type Props = Readonly<{
|
||||
disableTopDivider?: boolean;
|
||||
offer: UserProfileOffer;
|
||||
}>;
|
||||
|
||||
export default function DashboardProfileCard({
|
||||
disableTopDivider,
|
||||
offer: {
|
||||
company,
|
||||
income,
|
||||
jobType,
|
||||
level,
|
||||
location,
|
||||
monthYearReceived,
|
||||
title,
|
||||
},
|
||||
}: Props) {
|
||||
return (
|
||||
<>
|
||||
{!disableTopDivider && <HorizontalDivider />}
|
||||
<div className="flex items-end justify-between">
|
||||
<div className="col-span-1 row-span-3">
|
||||
<p className="font-bold">
|
||||
{getLabelForJobTitleType(title as JobTitleType)}
|
||||
</p>
|
||||
<p>
|
||||
{location
|
||||
? `Company: ${company.name}, ${location}`
|
||||
: `Company: ${company.name}`}
|
||||
</p>
|
||||
{level && <p>Level: {level}</p>}
|
||||
</div>
|
||||
<div className="col-span-1 row-span-3">
|
||||
<p className="text-end">{formatDate(monthYearReceived)}</p>
|
||||
<p className="text-end text-xl">
|
||||
{jobType === JobType.FULLTIME
|
||||
? `${convertMoneyToString(income)} / year`
|
||||
: `${convertMoneyToString(income)} / month`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,105 @@
|
||||
import { useRouter } from 'next/router';
|
||||
import { ArrowRightIcon, XMarkIcon } from '@heroicons/react/24/outline';
|
||||
import { Button, useToast } from '@tih/ui';
|
||||
|
||||
import DashboardOfferCard from '~/components/offers/dashboard/DashboardOfferCard';
|
||||
|
||||
import { formatDate } from '~/utils/offers/time';
|
||||
import { trpc } from '~/utils/trpc';
|
||||
|
||||
import ProfilePhotoHolder from '../profile/ProfilePhotoHolder';
|
||||
|
||||
import type { UserProfile, UserProfileOffer } from '~/types/offers';
|
||||
|
||||
type Props = Readonly<{
|
||||
profile: UserProfile;
|
||||
}>;
|
||||
|
||||
export default function DashboardProfileCard({
|
||||
profile: { createdAt, id, offers, profileName, token },
|
||||
}: Props) {
|
||||
const { showToast } = useToast();
|
||||
const router = useRouter();
|
||||
const trpcContext = trpc.useContext();
|
||||
const PROFILE_URL = `/offers/profile/${id}?token=${token}`;
|
||||
const removeSavedProfileMutation = trpc.useMutation(
|
||||
'offers.user.profile.removeFromUserProfile',
|
||||
{
|
||||
onError: () => {
|
||||
showToast({
|
||||
title: `Server error.`,
|
||||
variant: 'failure',
|
||||
});
|
||||
},
|
||||
onSuccess: () => {
|
||||
trpcContext.invalidateQueries(['offers.user.profile.getUserProfiles']);
|
||||
showToast({
|
||||
title: `Profile removed from your dashboard successfully!`,
|
||||
variant: 'success',
|
||||
});
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
function handleRemoveProfile() {
|
||||
removeSavedProfileMutation.mutate({ profileId: id });
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4 bg-white px-4 pt-5 sm:px-4">
|
||||
{/* Header */}
|
||||
<div className="-ml-4 -mt-2 flex flex-wrap items-center justify-between border-b border-gray-300 pb-4 sm:flex-nowrap">
|
||||
<div className="flex items-center gap-x-5">
|
||||
<div>
|
||||
<ProfilePhotoHolder size="sm" />
|
||||
</div>
|
||||
<div className="col-span-10">
|
||||
<p className="text-xl font-bold">{profileName}</p>
|
||||
|
||||
<div className="flex flex-row">
|
||||
<span>Created at {formatDate(createdAt)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex self-start">
|
||||
<Button
|
||||
disabled={removeSavedProfileMutation.isLoading}
|
||||
icon={XMarkIcon}
|
||||
isLabelHidden={true}
|
||||
label="Remove Profile"
|
||||
size="md"
|
||||
variant="tertiary"
|
||||
onClick={handleRemoveProfile}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Offers */}
|
||||
<div>
|
||||
{offers.map((offer: UserProfileOffer, index) =>
|
||||
index === 0 ? (
|
||||
<DashboardOfferCard
|
||||
key={offer.id}
|
||||
disableTopDivider={true}
|
||||
offer={offer}
|
||||
/>
|
||||
) : (
|
||||
<DashboardOfferCard key={offer.id} offer={offer} />
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
<div className="flex justify-end pt-1">
|
||||
<Button
|
||||
disabled={removeSavedProfileMutation.isLoading}
|
||||
icon={ArrowRightIcon}
|
||||
isLabelHidden={false}
|
||||
label="Read full profile"
|
||||
size="md"
|
||||
variant="secondary"
|
||||
onClick={() => router.push(PROFILE_URL)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -10,12 +10,15 @@ import {
|
||||
} from '@tih/ui';
|
||||
|
||||
import ExpandableCommentCard from '~/components/offers/profile/comments/ExpandableCommentCard';
|
||||
import Tooltip from '~/components/offers/util/Tooltip';
|
||||
|
||||
import { copyProfileLink } from '~/utils/offers/link';
|
||||
import { trpc } from '~/utils/trpc';
|
||||
|
||||
import type { OffersDiscussion, Reply } from '~/types/offers';
|
||||
|
||||
import 'react-popper-tooltip/dist/styles.css';
|
||||
|
||||
type ProfileHeaderProps = Readonly<{
|
||||
isDisabled: boolean;
|
||||
isEditable: boolean;
|
||||
@ -107,39 +110,43 @@ export default function ProfileComments({
|
||||
<div className="m-4 h-full">
|
||||
<div className="flex-end flex justify-end space-x-4">
|
||||
{isEditable && (
|
||||
<Tooltip tooltipContent="Copy this link to edit your profile later">
|
||||
<Button
|
||||
addonPosition="start"
|
||||
disabled={isDisabled}
|
||||
icon={ClipboardDocumentIcon}
|
||||
isLabelHidden={false}
|
||||
label="Copy profile edit link"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
onClick={() => {
|
||||
copyProfileLink(profileId, token);
|
||||
showToast({
|
||||
title: `Profile edit link copied to clipboard!`,
|
||||
variant: 'success',
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
)}
|
||||
<Tooltip tooltipContent="Share this profile with your friends">
|
||||
<Button
|
||||
addonPosition="start"
|
||||
disabled={isDisabled}
|
||||
icon={ClipboardDocumentIcon}
|
||||
icon={ShareIcon}
|
||||
isLabelHidden={false}
|
||||
label="Copy profile edit link"
|
||||
label="Copy public link"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
onClick={() => {
|
||||
copyProfileLink(profileId, token);
|
||||
copyProfileLink(profileId);
|
||||
showToast({
|
||||
title: `Profile edit link copied to clipboard!`,
|
||||
title: `Public profile link copied to clipboard!`,
|
||||
variant: 'success',
|
||||
});
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<Button
|
||||
addonPosition="start"
|
||||
disabled={isDisabled}
|
||||
icon={ShareIcon}
|
||||
isLabelHidden={false}
|
||||
label="Copy public link"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
onClick={() => {
|
||||
copyProfileLink(profileId);
|
||||
showToast({
|
||||
title: `Public profile link copied to clipboard!`,
|
||||
variant: 'success',
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<h2 className="mt-2 mb-6 text-2xl font-bold">Discussions</h2>
|
||||
{isEditable || session?.user?.name ? (
|
||||
|
||||
@ -1,27 +1,32 @@
|
||||
import { useRouter } from 'next/router';
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
BookmarkIcon as BookmarkIconOutline,
|
||||
BuildingOffice2Icon,
|
||||
CalendarDaysIcon,
|
||||
PencilSquareIcon,
|
||||
TrashIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
import { Button, Dialog, Spinner, Tabs } from '@tih/ui';
|
||||
import { BookmarkIcon as BookmarkIconSolid } from '@heroicons/react/24/solid';
|
||||
import { Button, Dialog, Spinner, Tabs, useToast } from '@tih/ui';
|
||||
|
||||
import ProfilePhotoHolder from '~/components/offers/profile/ProfilePhotoHolder';
|
||||
import type { BackgroundDisplayData } from '~/components/offers/types';
|
||||
import { JobTypeLabel } from '~/components/offers/types';
|
||||
|
||||
import { getProfileEditPath } from '~/utils/offers/link';
|
||||
import { trpc } from '~/utils/trpc';
|
||||
|
||||
import type { ProfileDetailTab } from '../constants';
|
||||
import { profileDetailTabs } from '../constants';
|
||||
import Tooltip from '../util/Tooltip';
|
||||
|
||||
type ProfileHeaderProps = Readonly<{
|
||||
background?: BackgroundDisplayData;
|
||||
handleDelete: () => void;
|
||||
isEditable: boolean;
|
||||
isLoading: boolean;
|
||||
isSaved?: boolean;
|
||||
selectedTab: ProfileDetailTab;
|
||||
setSelectedTab: (tab: ProfileDetailTab) => void;
|
||||
}>;
|
||||
@ -31,46 +36,112 @@ export default function ProfileHeader({
|
||||
handleDelete,
|
||||
isEditable,
|
||||
isLoading,
|
||||
isSaved = false,
|
||||
selectedTab,
|
||||
setSelectedTab,
|
||||
}: ProfileHeaderProps) {
|
||||
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||||
// Const [saved, setSaved] = useState(isSaved);
|
||||
const router = useRouter();
|
||||
const trpcContext = trpc.useContext();
|
||||
const { offerProfileId = '', token = '' } = router.query;
|
||||
|
||||
const { showToast } = useToast();
|
||||
const handleEditClick = () => {
|
||||
router.push(getProfileEditPath(offerProfileId as string, token as string));
|
||||
};
|
||||
|
||||
const saveMutation = trpc.useMutation(
|
||||
['offers.user.profile.addToUserProfile'],
|
||||
{
|
||||
onError: () => {
|
||||
showToast({
|
||||
title: `Failed to saved to dashboard!`,
|
||||
variant: 'failure',
|
||||
});
|
||||
},
|
||||
onSuccess: () => {
|
||||
// SetSaved(true);
|
||||
showToast({
|
||||
title: `Saved to dashboard!`,
|
||||
variant: 'success',
|
||||
});
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
const unsaveMutation = trpc.useMutation(
|
||||
['offers.user.profile.removeFromUserProfile'],
|
||||
{
|
||||
onError: () => {
|
||||
showToast({
|
||||
title: `Failed to saved to dashboard!`,
|
||||
variant: 'failure',
|
||||
});
|
||||
},
|
||||
onSuccess: () => {
|
||||
// SetSaved(false);
|
||||
showToast({
|
||||
title: `Removed from dashboard!`,
|
||||
variant: 'success',
|
||||
});
|
||||
trpcContext.invalidateQueries(['offers.profile.listOne']);
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
const toggleSaved = () => {
|
||||
if (isSaved) {
|
||||
unsaveMutation.mutate({ profileId: offerProfileId as string });
|
||||
} else {
|
||||
saveMutation.mutate({
|
||||
profileId: offerProfileId as string,
|
||||
token: token as string,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
function renderActionList() {
|
||||
return (
|
||||
<div className="space-x-2">
|
||||
{/* <Button
|
||||
disabled={isLoading}
|
||||
icon={BookmarkSquareIcon}
|
||||
isLabelHidden={true}
|
||||
label="Save to user account"
|
||||
size="md"
|
||||
variant="tertiary"
|
||||
/> */}
|
||||
<Button
|
||||
disabled={isLoading}
|
||||
icon={PencilSquareIcon}
|
||||
isLabelHidden={true}
|
||||
label="Edit"
|
||||
size="md"
|
||||
variant="tertiary"
|
||||
onClick={handleEditClick}
|
||||
/>
|
||||
<Button
|
||||
disabled={isLoading}
|
||||
icon={TrashIcon}
|
||||
isLabelHidden={true}
|
||||
label="Delete"
|
||||
size="md"
|
||||
variant="tertiary"
|
||||
onClick={() => setIsDialogOpen(true)}
|
||||
/>
|
||||
<div className="flex justify-center space-x-2">
|
||||
<Tooltip
|
||||
tooltipContent={
|
||||
isSaved ? 'Remove from account' : 'Save to your account'
|
||||
}>
|
||||
<Button
|
||||
disabled={
|
||||
isLoading || saveMutation.isLoading || unsaveMutation.isLoading
|
||||
}
|
||||
icon={isSaved ? BookmarkIconSolid : BookmarkIconOutline}
|
||||
isLabelHidden={true}
|
||||
isLoading={saveMutation.isLoading || unsaveMutation.isLoading}
|
||||
label={isSaved ? 'Remove from account' : 'Save to your account'}
|
||||
size="md"
|
||||
variant="tertiary"
|
||||
onClick={toggleSaved}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip tooltipContent="Edit profile">
|
||||
<Button
|
||||
disabled={isLoading}
|
||||
icon={PencilSquareIcon}
|
||||
isLabelHidden={true}
|
||||
label="Edit"
|
||||
size="md"
|
||||
variant="tertiary"
|
||||
onClick={handleEditClick}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip tooltipContent="Delete profile">
|
||||
<Button
|
||||
disabled={isLoading}
|
||||
icon={TrashIcon}
|
||||
isLabelHidden={true}
|
||||
label="Delete"
|
||||
size="md"
|
||||
variant="tertiary"
|
||||
onClick={() => setIsDialogOpen(true)}
|
||||
/>
|
||||
</Tooltip>
|
||||
{isDialogOpen && (
|
||||
<Dialog
|
||||
isShown={isDialogOpen}
|
||||
|
||||
42
apps/portal/src/components/offers/util/Tooltip.tsx
Normal file
42
apps/portal/src/components/offers/util/Tooltip.tsx
Normal file
@ -0,0 +1,42 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import { usePopperTooltip } from 'react-popper-tooltip';
|
||||
import type { Placement } from '@popperjs/core';
|
||||
|
||||
type TooltipProps = Readonly<{
|
||||
children: ReactNode;
|
||||
placement?: Placement;
|
||||
tooltipContent: ReactNode;
|
||||
}>;
|
||||
|
||||
export default function Tooltip({
|
||||
children,
|
||||
tooltipContent,
|
||||
placement = 'bottom-start',
|
||||
}: TooltipProps) {
|
||||
const {
|
||||
getTooltipProps,
|
||||
getArrowProps,
|
||||
setTooltipRef,
|
||||
setTriggerRef,
|
||||
visible,
|
||||
} = usePopperTooltip({
|
||||
interactive: true,
|
||||
placement,
|
||||
trigger: ['focus', 'hover'],
|
||||
});
|
||||
return (
|
||||
<>
|
||||
<div ref={setTriggerRef}>{children}</div>
|
||||
{visible && (
|
||||
<div
|
||||
ref={setTooltipRef}
|
||||
{...getTooltipProps({
|
||||
className: 'tooltip-container ',
|
||||
})}>
|
||||
{tooltipContent}
|
||||
<div {...getArrowProps({ className: 'tooltip-arrow' })} />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -35,7 +35,8 @@ import type {
|
||||
SpecificYoe,
|
||||
UserProfile,
|
||||
UserProfileOffer,
|
||||
Valuation} from '~/types/offers';
|
||||
Valuation,
|
||||
} from '~/types/offers';
|
||||
|
||||
const analysisOfferDtoMapper = (
|
||||
offer: OffersOffer & {
|
||||
@ -530,7 +531,7 @@ export const profileDtoMapper = (
|
||||
user: User | null;
|
||||
},
|
||||
inputToken: string | undefined,
|
||||
inputUserId: string | null | undefined
|
||||
inputUserId: string | null | undefined,
|
||||
) => {
|
||||
const profileDto: Profile = {
|
||||
analysis: profileAnalysisDtoMapper(profile.analysis),
|
||||
@ -547,7 +548,7 @@ export const profileDtoMapper = (
|
||||
profileDto.editToken = profile.editToken ?? null;
|
||||
profileDto.isEditable = true;
|
||||
|
||||
const users = profile.user
|
||||
const users = profile.user;
|
||||
|
||||
// TODO: BRYANN UNCOMMENT THIS ONCE U CHANGE THE SCHEMA
|
||||
// for (let i = 0; i < users.length; i++) {
|
||||
@ -558,7 +559,7 @@ export const profileDtoMapper = (
|
||||
|
||||
// TODO: REMOVE THIS ONCE U CHANGE THE SCHEMA
|
||||
if (users?.id === inputUserId) {
|
||||
profileDto.isSaved = true
|
||||
profileDto.isSaved = true;
|
||||
}
|
||||
}
|
||||
|
||||
@ -645,83 +646,95 @@ export const getOffersResponseMapper = (
|
||||
return getOffersResponse;
|
||||
};
|
||||
|
||||
export const getUserProfileResponseMapper = (res: User & {
|
||||
OffersProfile: Array<OffersProfile & {
|
||||
offers: Array<OffersOffer & {
|
||||
company: Company;
|
||||
offersFullTime: (OffersFullTime & { totalCompensation: OffersCurrency }) | null;
|
||||
offersIntern: (OffersIntern & { monthlySalary: OffersCurrency }) | null;
|
||||
}>;
|
||||
}>;
|
||||
} | null): Array<UserProfile> => {
|
||||
export const getUserProfileResponseMapper = (
|
||||
res:
|
||||
| (User & {
|
||||
OffersProfile: Array<
|
||||
OffersProfile & {
|
||||
offers: Array<
|
||||
OffersOffer & {
|
||||
company: Company;
|
||||
offersFullTime:
|
||||
| (OffersFullTime & { totalCompensation: OffersCurrency })
|
||||
| null;
|
||||
offersIntern:
|
||||
| (OffersIntern & { monthlySalary: OffersCurrency })
|
||||
| null;
|
||||
}
|
||||
>;
|
||||
}
|
||||
>;
|
||||
})
|
||||
| null,
|
||||
): Array<UserProfile> => {
|
||||
if (res) {
|
||||
return res.OffersProfile.map((profile) => {
|
||||
return {
|
||||
createdAt: profile.createdAt,
|
||||
id: profile.id,
|
||||
offers: profile.offers.map((offer) => {
|
||||
return userProfileOfferDtoMapper(offer)
|
||||
return userProfileOfferDtoMapper(offer);
|
||||
}),
|
||||
profileName: profile.profileName,
|
||||
token: profile.editToken
|
||||
}
|
||||
})
|
||||
token: profile.editToken,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
return []
|
||||
}
|
||||
return [];
|
||||
};
|
||||
|
||||
const userProfileOfferDtoMapper = (
|
||||
offer: OffersOffer & {
|
||||
company: Company;
|
||||
offersFullTime: (OffersFullTime & { totalCompensation: OffersCurrency }) | null;
|
||||
offersIntern: (OffersIntern & { monthlySalary: OffersCurrency }) | null;
|
||||
}): UserProfileOffer => {
|
||||
const mappedOffer: UserProfileOffer = {
|
||||
company: offersCompanyDtoMapper(offer.company),
|
||||
id: offer.id,
|
||||
income: {
|
||||
baseCurrency: '',
|
||||
baseValue: -1,
|
||||
currency: '',
|
||||
id: '',
|
||||
value: -1,
|
||||
},
|
||||
jobType: offer.jobType,
|
||||
level: offer.offersFullTime?.level ?? '',
|
||||
location: offer.location,
|
||||
monthYearReceived: offer.monthYearReceived,
|
||||
title:
|
||||
offer.jobType === JobType.FULLTIME
|
||||
? offer.offersFullTime?.title ?? ''
|
||||
: offer.offersIntern?.title ?? '',
|
||||
}
|
||||
company: Company;
|
||||
offersFullTime:
|
||||
| (OffersFullTime & { totalCompensation: OffersCurrency })
|
||||
| null;
|
||||
offersIntern: (OffersIntern & { monthlySalary: OffersCurrency }) | null;
|
||||
},
|
||||
): UserProfileOffer => {
|
||||
const mappedOffer: UserProfileOffer = {
|
||||
company: offersCompanyDtoMapper(offer.company),
|
||||
id: offer.id,
|
||||
income: {
|
||||
baseCurrency: '',
|
||||
baseValue: -1,
|
||||
currency: '',
|
||||
id: '',
|
||||
value: -1,
|
||||
},
|
||||
jobType: offer.jobType,
|
||||
level: offer.offersFullTime?.level ?? '',
|
||||
location: offer.location,
|
||||
monthYearReceived: offer.monthYearReceived,
|
||||
title:
|
||||
offer.jobType === JobType.FULLTIME
|
||||
? offer.offersFullTime?.title ?? ''
|
||||
: offer.offersIntern?.title ?? '',
|
||||
};
|
||||
|
||||
if (offer.offersFullTime?.totalCompensation) {
|
||||
mappedOffer.income.value =
|
||||
offer.offersFullTime.totalCompensation.value;
|
||||
mappedOffer.income.currency =
|
||||
offer.offersFullTime.totalCompensation.currency;
|
||||
mappedOffer.income.id = offer.offersFullTime.totalCompensation.id;
|
||||
mappedOffer.income.baseValue =
|
||||
offer.offersFullTime.totalCompensation.baseValue;
|
||||
mappedOffer.income.baseCurrency =
|
||||
offer.offersFullTime.totalCompensation.baseCurrency;
|
||||
} else if (offer.offersIntern?.monthlySalary) {
|
||||
mappedOffer.income.value = offer.offersIntern.monthlySalary.value;
|
||||
mappedOffer.income.currency =
|
||||
offer.offersIntern.monthlySalary.currency;
|
||||
mappedOffer.income.id = offer.offersIntern.monthlySalary.id;
|
||||
mappedOffer.income.baseValue =
|
||||
offer.offersIntern.monthlySalary.baseValue;
|
||||
mappedOffer.income.baseCurrency =
|
||||
offer.offersIntern.monthlySalary.baseCurrency;
|
||||
} else {
|
||||
throw new TRPCError({
|
||||
code: 'NOT_FOUND',
|
||||
message: 'Total Compensation or Salary not found',
|
||||
});
|
||||
}
|
||||
if (offer.offersFullTime?.totalCompensation) {
|
||||
mappedOffer.income.value = offer.offersFullTime.totalCompensation.value;
|
||||
mappedOffer.income.currency =
|
||||
offer.offersFullTime.totalCompensation.currency;
|
||||
mappedOffer.income.id = offer.offersFullTime.totalCompensation.id;
|
||||
mappedOffer.income.baseValue =
|
||||
offer.offersFullTime.totalCompensation.baseValue;
|
||||
mappedOffer.income.baseCurrency =
|
||||
offer.offersFullTime.totalCompensation.baseCurrency;
|
||||
} else if (offer.offersIntern?.monthlySalary) {
|
||||
mappedOffer.income.value = offer.offersIntern.monthlySalary.value;
|
||||
mappedOffer.income.currency = offer.offersIntern.monthlySalary.currency;
|
||||
mappedOffer.income.id = offer.offersIntern.monthlySalary.id;
|
||||
mappedOffer.income.baseValue = offer.offersIntern.monthlySalary.baseValue;
|
||||
mappedOffer.income.baseCurrency =
|
||||
offer.offersIntern.monthlySalary.baseCurrency;
|
||||
} else {
|
||||
throw new TRPCError({
|
||||
code: 'NOT_FOUND',
|
||||
message: 'Total Compensation or Salary not found',
|
||||
});
|
||||
}
|
||||
|
||||
return mappedOffer
|
||||
}
|
||||
return mappedOffer;
|
||||
};
|
||||
|
||||
95
apps/portal/src/pages/offers/dashboard.tsx
Normal file
95
apps/portal/src/pages/offers/dashboard.tsx
Normal file
@ -0,0 +1,95 @@
|
||||
import { useRouter } from 'next/router';
|
||||
import { signIn, useSession } from 'next-auth/react';
|
||||
import { useState } from 'react';
|
||||
import { Button, Spinner } from '@tih/ui';
|
||||
|
||||
import DashboardOfferCard from '~/components/offers/dashboard/DashboardProfileCard';
|
||||
|
||||
import { trpc } from '~/utils/trpc';
|
||||
|
||||
import type { UserProfile } from '~/types/offers';
|
||||
|
||||
export default function ProfilesDashboard() {
|
||||
const { status } = useSession();
|
||||
const router = useRouter();
|
||||
const [userProfiles, setUserProfiles] = useState<Array<UserProfile>>([]);
|
||||
|
||||
const userProfilesQuery = trpc.useQuery(
|
||||
['offers.user.profile.getUserProfiles'],
|
||||
{
|
||||
onError: (error) => {
|
||||
if (error.data?.code === 'UNAUTHORIZED') {
|
||||
signIn();
|
||||
}
|
||||
},
|
||||
onSuccess: (response: Array<UserProfile>) => {
|
||||
setUserProfiles(response);
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
if (status === 'loading' || userProfilesQuery.isLoading) {
|
||||
return (
|
||||
<div className="flex h-screen w-screen">
|
||||
<div className="m-auto mx-auto w-full justify-center">
|
||||
<Spinner className="m-10" display="block" size="lg" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (status === 'unauthenticated') {
|
||||
signIn();
|
||||
}
|
||||
if (userProfiles.length === 0) {
|
||||
return (
|
||||
<div className="flex h-screen w-screen">
|
||||
<div className="m-auto mx-auto w-full justify-center text-xl">
|
||||
<div className="mb-8 flex w-full flex-row justify-center">
|
||||
<h2>You have not saved any offer profiles yet.</h2>
|
||||
</div>
|
||||
<div className="flex flex-row justify-center">
|
||||
<Button
|
||||
label="Submit your offers now!"
|
||||
size="lg"
|
||||
variant="primary"
|
||||
onClick={() => router.push('/offers/submit')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{userProfilesQuery.isLoading && (
|
||||
<div className="flex h-screen w-screen">
|
||||
<div className="m-auto mx-auto w-full justify-center">
|
||||
<Spinner className="m-10" display="block" size="lg" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{!userProfilesQuery.isLoading && (
|
||||
<div className="mt-8 overflow-y-auto">
|
||||
<h1 className="mx-auto mb-4 w-3/4 text-start text-4xl font-bold text-slate-900">
|
||||
Your repository
|
||||
</h1>
|
||||
<p className="mx-auto w-3/4 text-start text-xl text-slate-900">
|
||||
Save your offer profiles to respository to easily access and edit
|
||||
them later.
|
||||
</p>
|
||||
<div className="justfy-center mt-8 flex w-screen">
|
||||
<ul className="mx-auto w-3/4 space-y-3" role="list">
|
||||
{userProfiles?.map((profile) => (
|
||||
<li
|
||||
key={profile.id}
|
||||
className="overflow-hidden bg-white px-4 py-4 shadow sm:rounded-md sm:px-6">
|
||||
<DashboardOfferCard key={profile.id} profile={profile} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -188,6 +188,7 @@ export default function OfferProfile() {
|
||||
handleDelete={handleDelete}
|
||||
isEditable={isEditable}
|
||||
isLoading={getProfileQuery.isLoading}
|
||||
isSaved={getProfileQuery.data?.isSaved}
|
||||
selectedTab={selectedTab}
|
||||
setSelectedTab={setSelectedTab}
|
||||
/>
|
||||
|
||||
4
apps/portal/src/types/offers.d.ts
vendored
4
apps/portal/src/types/offers.d.ts
vendored
@ -191,7 +191,7 @@ export type UserProfile = {
|
||||
offers: Array<UserProfileOffer>;
|
||||
profileName: string;
|
||||
token: string;
|
||||
}
|
||||
};
|
||||
|
||||
export type UserProfileOffer = {
|
||||
company: OffersCompany;
|
||||
@ -202,4 +202,4 @@ export type UserProfileOffer = {
|
||||
location: string;
|
||||
monthYearReceived: Date;
|
||||
title: string;
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user