|
|
|
@ -180,10 +180,9 @@ export default function ResumeReviewPage() {
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const renderReviewButton = () => {
|
|
|
|
|
if (session === null) {
|
|
|
|
|
if (session == null) {
|
|
|
|
|
return (
|
|
|
|
|
<Button
|
|
|
|
|
className="h-10 shadow-md"
|
|
|
|
|
display="block"
|
|
|
|
|
href={loginPageHref()}
|
|
|
|
|
label="Log in to join discussion"
|
|
|
|
@ -191,9 +190,9 @@ export default function ResumeReviewPage() {
|
|
|
|
|
/>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<Button
|
|
|
|
|
className="h-10 shadow-md"
|
|
|
|
|
display="block"
|
|
|
|
|
label="Add your review"
|
|
|
|
|
variant="primary"
|
|
|
|
@ -224,182 +223,192 @@ export default function ResumeReviewPage() {
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
{(detailsQuery.isError || detailsQuery.data === null) && ErrorPage}
|
|
|
|
|
{(detailsQuery.isError || detailsQuery.data == null) && ErrorPage}
|
|
|
|
|
{detailsQuery.isLoading && (
|
|
|
|
|
<div className="w-full pt-4">
|
|
|
|
|
{' '}
|
|
|
|
|
<Spinner display="block" size="lg" />{' '}
|
|
|
|
|
<Spinner display="block" size="lg" />
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
{detailsQuery.isFetched && detailsQuery.data && (
|
|
|
|
|
<>
|
|
|
|
|
<Head>
|
|
|
|
|
<title>{detailsQuery.data.title}</title>
|
|
|
|
|
<title>{`${detailsQuery.data.title} | Resume Review`}</title>
|
|
|
|
|
</Head>
|
|
|
|
|
<main className="h-full flex-1 space-y-2 py-4 px-8 xl:px-12 2xl:pr-16">
|
|
|
|
|
<div className="flex flex-wrap justify-between">
|
|
|
|
|
<h1 className="w-[60%] pr-2 text-2xl font-semibold leading-7 text-slate-900">
|
|
|
|
|
{detailsQuery.data.title}
|
|
|
|
|
</h1>
|
|
|
|
|
<div className="flex gap-3 xl:pr-4">
|
|
|
|
|
{userIsOwner && (
|
|
|
|
|
<>
|
|
|
|
|
<Button
|
|
|
|
|
addonPosition="start"
|
|
|
|
|
className="h-10 shadow-md"
|
|
|
|
|
icon={PencilSquareIcon}
|
|
|
|
|
label="Edit"
|
|
|
|
|
variant="tertiary"
|
|
|
|
|
onClick={onEditButtonClick}
|
|
|
|
|
<main className="h-full w-full bg-white">
|
|
|
|
|
<div className="mx-auto space-y-4 border-b border-slate-200 px-4 py-6 sm:px-6 md:space-y-2 lg:px-8">
|
|
|
|
|
<div className="flex flex-wrap justify-between space-y-4 lg:space-y-0">
|
|
|
|
|
<h1 className="pr-2 text-xl font-medium leading-7 text-slate-900 sm:text-2xl lg:w-[60%]">
|
|
|
|
|
{detailsQuery.data.title}
|
|
|
|
|
</h1>
|
|
|
|
|
<div className="flex gap-3">
|
|
|
|
|
{userIsOwner && (
|
|
|
|
|
<>
|
|
|
|
|
<Button
|
|
|
|
|
addonPosition="start"
|
|
|
|
|
icon={PencilSquareIcon}
|
|
|
|
|
label="Edit"
|
|
|
|
|
variant="tertiary"
|
|
|
|
|
onClick={onEditButtonClick}
|
|
|
|
|
/>
|
|
|
|
|
<button
|
|
|
|
|
className="isolate inline-flex items-center space-x-4 rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 focus:ring-slate-600 disabled:hover:bg-white"
|
|
|
|
|
disabled={resolveMutation.isLoading}
|
|
|
|
|
type="button"
|
|
|
|
|
onClick={onResolveButtonClick}>
|
|
|
|
|
<div className="-ml-1 mr-2 h-5 w-5">
|
|
|
|
|
{resolveMutation.isLoading ? (
|
|
|
|
|
<Spinner className="mt-0.5" size="xs" />
|
|
|
|
|
) : (
|
|
|
|
|
<CheckCircleIcon
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
className={
|
|
|
|
|
isResumeResolved
|
|
|
|
|
? 'text-slate-500'
|
|
|
|
|
: 'text-success-600'
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
{isResumeResolved
|
|
|
|
|
? 'Reopen for review'
|
|
|
|
|
: 'Mark as reviewed'}
|
|
|
|
|
</button>
|
|
|
|
|
</>
|
|
|
|
|
)}
|
|
|
|
|
<button
|
|
|
|
|
className="isolate inline-flex h-10 items-center space-x-4 rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 focus:ring-slate-600 disabled:hover:bg-white"
|
|
|
|
|
disabled={
|
|
|
|
|
starMutation.isLoading || unstarMutation.isLoading
|
|
|
|
|
}
|
|
|
|
|
type="button"
|
|
|
|
|
onClick={onStarButtonClick}>
|
|
|
|
|
<div className="-ml-1 mr-2 h-5 w-5">
|
|
|
|
|
{starMutation.isLoading ||
|
|
|
|
|
unstarMutation.isLoading ||
|
|
|
|
|
detailsQuery.isLoading ? (
|
|
|
|
|
<Spinner className="mt-0.5" size="xs" />
|
|
|
|
|
) : (
|
|
|
|
|
<StarIcon
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
className={clsx(
|
|
|
|
|
detailsQuery.data?.stars.length
|
|
|
|
|
? 'text-orange-400'
|
|
|
|
|
: 'text-slate-400',
|
|
|
|
|
)}
|
|
|
|
|
/>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
{detailsQuery.data?.stars.length ? 'Starred' : 'Star'}
|
|
|
|
|
<span className="relative -ml-px inline-flex">
|
|
|
|
|
{detailsQuery.data?._count.stars}
|
|
|
|
|
</span>
|
|
|
|
|
</button>
|
|
|
|
|
<div className="hidden xl:block">{renderReviewButton()}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="space-y-2">
|
|
|
|
|
<div className="grid grid-cols-2 gap-2 md:flex md:flex-wrap md:space-x-8">
|
|
|
|
|
<div className="col-span-1 flex items-center text-xs text-slate-600 sm:text-sm">
|
|
|
|
|
<BriefcaseIcon
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
className="mr-1.5 h-5 w-5 flex-shrink-0 text-indigo-400"
|
|
|
|
|
/>
|
|
|
|
|
<button
|
|
|
|
|
className="isolate inline-flex h-10 items-center space-x-4 rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-md hover:bg-slate-50 focus:ring-slate-600 disabled:hover:bg-white"
|
|
|
|
|
disabled={resolveMutation.isLoading}
|
|
|
|
|
className="hover:text-primary-800 underline"
|
|
|
|
|
type="button"
|
|
|
|
|
onClick={onResolveButtonClick}>
|
|
|
|
|
<div className="-ml-1 mr-2 h-5 w-5">
|
|
|
|
|
{resolveMutation.isLoading ? (
|
|
|
|
|
<Spinner className="mt-0.5" size="xs" />
|
|
|
|
|
) : (
|
|
|
|
|
<CheckCircleIcon
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
className={
|
|
|
|
|
isResumeResolved
|
|
|
|
|
? 'text-slate-500'
|
|
|
|
|
: 'text-success-600'
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
{isResumeResolved
|
|
|
|
|
? 'Reopen for review'
|
|
|
|
|
: 'Mark as reviewed'}
|
|
|
|
|
onClick={() =>
|
|
|
|
|
onInfoTagClick({
|
|
|
|
|
roleLabel: detailsQuery.data?.role,
|
|
|
|
|
})
|
|
|
|
|
}>
|
|
|
|
|
{getFilterLabel(
|
|
|
|
|
ROLES,
|
|
|
|
|
detailsQuery.data.role as RoleFilter,
|
|
|
|
|
)}
|
|
|
|
|
</button>
|
|
|
|
|
</>
|
|
|
|
|
)}
|
|
|
|
|
<button
|
|
|
|
|
className="isolate inline-flex h-10 items-center space-x-4 rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-md hover:bg-slate-50 focus:ring-slate-600 disabled:hover:bg-white"
|
|
|
|
|
disabled={starMutation.isLoading || unstarMutation.isLoading}
|
|
|
|
|
type="button"
|
|
|
|
|
onClick={onStarButtonClick}>
|
|
|
|
|
<div className="-ml-1 mr-2 h-5 w-5">
|
|
|
|
|
{starMutation.isLoading ||
|
|
|
|
|
unstarMutation.isLoading ||
|
|
|
|
|
detailsQuery.isLoading ? (
|
|
|
|
|
<Spinner className="mt-0.5" size="xs" />
|
|
|
|
|
) : (
|
|
|
|
|
<StarIcon
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
className={clsx(
|
|
|
|
|
detailsQuery.data?.stars.length
|
|
|
|
|
? 'text-orange-400'
|
|
|
|
|
: 'text-slate-400',
|
|
|
|
|
)}
|
|
|
|
|
/>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
{detailsQuery.data?.stars.length ? 'Starred' : 'Star'}
|
|
|
|
|
<span className="relative -ml-px inline-flex">
|
|
|
|
|
{detailsQuery.data?._count.stars}
|
|
|
|
|
</span>
|
|
|
|
|
</button>
|
|
|
|
|
<div className="hidden xl:block">{renderReviewButton()}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="flex flex-col lg:mt-0 lg:flex-row lg:flex-wrap lg:space-x-8">
|
|
|
|
|
<div className="mt-2 flex items-center text-sm text-slate-600 xl:mt-1">
|
|
|
|
|
<BriefcaseIcon
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
className="mr-1.5 h-5 w-5 flex-shrink-0 text-indigo-400"
|
|
|
|
|
/>
|
|
|
|
|
<button
|
|
|
|
|
className="hover:text-primary-800 underline"
|
|
|
|
|
type="button"
|
|
|
|
|
onClick={() =>
|
|
|
|
|
onInfoTagClick({
|
|
|
|
|
roleLabel: detailsQuery.data?.role,
|
|
|
|
|
})
|
|
|
|
|
}>
|
|
|
|
|
{getFilterLabel(ROLES, detailsQuery.data.role as RoleFilter)}
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="flex items-center pt-2 text-sm text-slate-600 xl:pt-1">
|
|
|
|
|
<MapPinIcon
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
className="mr-1.5 h-5 w-5 flex-shrink-0 text-indigo-400"
|
|
|
|
|
/>
|
|
|
|
|
<button
|
|
|
|
|
className="hover:text-primary-800 underline"
|
|
|
|
|
type="button"
|
|
|
|
|
onClick={() =>
|
|
|
|
|
onInfoTagClick({
|
|
|
|
|
locationLabel: detailsQuery.data?.location,
|
|
|
|
|
})
|
|
|
|
|
}>
|
|
|
|
|
{getFilterLabel(
|
|
|
|
|
LOCATIONS,
|
|
|
|
|
detailsQuery.data.location as LocationFilter,
|
|
|
|
|
)}
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="flex items-center pt-2 text-sm text-slate-600 xl:pt-1">
|
|
|
|
|
<AcademicCapIcon
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
className="mr-1.5 h-5 w-5 flex-shrink-0 text-indigo-400"
|
|
|
|
|
/>
|
|
|
|
|
<button
|
|
|
|
|
className="hover:text-primary-800 underline"
|
|
|
|
|
type="button"
|
|
|
|
|
onClick={() =>
|
|
|
|
|
onInfoTagClick({
|
|
|
|
|
experienceLabel: detailsQuery.data?.experience,
|
|
|
|
|
})
|
|
|
|
|
}>
|
|
|
|
|
{getFilterLabel(
|
|
|
|
|
EXPERIENCES,
|
|
|
|
|
detailsQuery.data.experience as ExperienceFilter,
|
|
|
|
|
)}
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="flex items-center pt-2 text-sm text-slate-600 xl:pt-1">
|
|
|
|
|
<CalendarIcon
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
className="mr-1.5 h-5 w-5 flex-shrink-0 text-indigo-400"
|
|
|
|
|
/>
|
|
|
|
|
{`Uploaded ${formatDistanceToNow(detailsQuery.data.createdAt, {
|
|
|
|
|
addSuffix: true,
|
|
|
|
|
})} by ${detailsQuery.data.user.name}`}
|
|
|
|
|
<div className="col-span-1 flex items-center text-xs text-slate-600 sm:text-sm">
|
|
|
|
|
<MapPinIcon
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
className="mr-1.5 h-5 w-5 flex-shrink-0 text-indigo-400"
|
|
|
|
|
/>
|
|
|
|
|
<button
|
|
|
|
|
className="hover:text-primary-800 underline"
|
|
|
|
|
type="button"
|
|
|
|
|
onClick={() =>
|
|
|
|
|
onInfoTagClick({
|
|
|
|
|
locationLabel: detailsQuery.data?.location,
|
|
|
|
|
})
|
|
|
|
|
}>
|
|
|
|
|
{getFilterLabel(
|
|
|
|
|
LOCATIONS,
|
|
|
|
|
detailsQuery.data.location as LocationFilter,
|
|
|
|
|
)}
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="col-span-1 flex items-center text-xs text-slate-600 sm:text-sm">
|
|
|
|
|
<AcademicCapIcon
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
className="mr-1.5 h-5 w-5 flex-shrink-0 text-indigo-400"
|
|
|
|
|
/>
|
|
|
|
|
<button
|
|
|
|
|
className="hover:text-primary-800 underline"
|
|
|
|
|
type="button"
|
|
|
|
|
onClick={() =>
|
|
|
|
|
onInfoTagClick({
|
|
|
|
|
experienceLabel: detailsQuery.data?.experience,
|
|
|
|
|
})
|
|
|
|
|
}>
|
|
|
|
|
{getFilterLabel(
|
|
|
|
|
EXPERIENCES,
|
|
|
|
|
detailsQuery.data.experience as ExperienceFilter,
|
|
|
|
|
)}
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="col-span-1 flex items-center text-xs text-slate-600 sm:text-sm">
|
|
|
|
|
<CalendarIcon
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
className="mr-1.5 h-5 w-5 flex-shrink-0 text-indigo-400"
|
|
|
|
|
/>
|
|
|
|
|
{`Uploaded ${formatDistanceToNow(
|
|
|
|
|
detailsQuery.data.createdAt,
|
|
|
|
|
{
|
|
|
|
|
addSuffix: true,
|
|
|
|
|
},
|
|
|
|
|
)} by ${detailsQuery.data.user.name}`}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
{detailsQuery.data.additionalInfo && (
|
|
|
|
|
<div className="col-span-2 flex items-start whitespace-pre-wrap pt-2 text-slate-600 xl:pt-1">
|
|
|
|
|
<InformationCircleIcon
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
className="mr-1.5 h-5 w-5 flex-shrink-0 text-indigo-400"
|
|
|
|
|
/>
|
|
|
|
|
<ResumeExpandableText
|
|
|
|
|
key={detailsQuery.data.additionalInfo}
|
|
|
|
|
text={detailsQuery.data.additionalInfo}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
{detailsQuery.data.additionalInfo && (
|
|
|
|
|
<div className="flex items-start whitespace-pre-wrap pt-2 text-sm text-slate-600 xl:pt-1">
|
|
|
|
|
<InformationCircleIcon
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
className="mr-1.5 h-5 w-5 flex-shrink-0 text-indigo-400"
|
|
|
|
|
/>
|
|
|
|
|
<ResumeExpandableText
|
|
|
|
|
key={detailsQuery.data.additionalInfo}
|
|
|
|
|
text={detailsQuery.data.additionalInfo}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
|
|
<div className="flex w-full flex-col gap-6 py-4 xl:flex-row xl:py-0">
|
|
|
|
|
<div className="w-full xl:w-1/2">
|
|
|
|
|
<div className="flex w-full flex-col divide-x divide-slate-200 py-4 lg:flex-row xl:py-0">
|
|
|
|
|
<div className="w-full bg-slate-100 lg:w-1/2">
|
|
|
|
|
<ResumePdf url={detailsQuery.data.url} />
|
|
|
|
|
</div>
|
|
|
|
|
<div className="grow">
|
|
|
|
|
<div className="mb-6 space-y-4 xl:hidden">
|
|
|
|
|
{renderReviewButton()}
|
|
|
|
|
<div className="flex items-center space-x-2">
|
|
|
|
|
<hr className="flex-grow border-slate-300" />
|
|
|
|
|
<span className="bg-slate-50 px-3 text-lg font-medium text-slate-900">
|
|
|
|
|
Reviews
|
|
|
|
|
</span>
|
|
|
|
|
<hr className="flex-grow border-slate-300" />
|
|
|
|
|
<div className="grow border-t border-slate-200 bg-slate-50 lg:border-none">
|
|
|
|
|
<div className="divide-y divide-slate-200 lg:hidden">
|
|
|
|
|
<div className="bg-white p-4 lg:p-0">
|
|
|
|
|
{renderReviewButton()}
|
|
|
|
|
</div>
|
|
|
|
|
{!showCommentsForm && (
|
|
|
|
|
<div className="p-4 lg:p-0">
|
|
|
|
|
<h2 className="text-xl font-medium text-slate-900">
|
|
|
|
|
Reviews
|
|
|
|
|
</h2>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{showCommentsForm ? (
|
|
|
|
|
<ResumeCommentsForm
|
|
|
|
|
resumeId={resumeId as string}
|
|
|
|
|