[resumes][feat] Fetch resume details from database (#322)
* [resumes][feat] Add resume details router * [resumes][feat] Change review page to dynamic routing * [resumes][feat] Toggle resume star button * [resumes][refactor] Revert routers to User modelpull/320/head
Peirong
3 years ago
committed by
GitHub
parent
5507c6a9d2
commit
2e947f5fb0
@ -0,0 +1,73 @@
|
|||||||
|
/*
|
||||||
|
Warnings:
|
||||||
|
|
||||||
|
- You are about to drop the column `resumesProfileId` on the `ResumesComment` table. All the data in the column will be lost.
|
||||||
|
- You are about to drop the column `resumesProfileId` on the `ResumesCommentVote` table. All the data in the column will be lost.
|
||||||
|
- You are about to drop the column `resumesProfileId` on the `ResumesResume` table. All the data in the column will be lost.
|
||||||
|
- You are about to drop the column `resumesProfileId` on the `ResumesStar` table. All the data in the column will be lost.
|
||||||
|
- You are about to drop the `ResumesProfile` table. If the table is not empty, all the data it contains will be lost.
|
||||||
|
- A unique constraint covering the columns `[userId,commentId]` on the table `ResumesCommentVote` will be added. If there are existing duplicate values, this will fail.
|
||||||
|
- A unique constraint covering the columns `[userId,resumeId]` on the table `ResumesStar` will be added. If there are existing duplicate values, this will fail.
|
||||||
|
- Added the required column `userId` to the `ResumesComment` table without a default value. This is not possible if the table is not empty.
|
||||||
|
- Added the required column `userId` to the `ResumesCommentVote` table without a default value. This is not possible if the table is not empty.
|
||||||
|
- Added the required column `userId` to the `ResumesResume` table without a default value. This is not possible if the table is not empty.
|
||||||
|
- Added the required column `userId` to the `ResumesStar` table without a default value. This is not possible if the table is not empty.
|
||||||
|
|
||||||
|
*/
|
||||||
|
-- DropForeignKey
|
||||||
|
ALTER TABLE "ResumesComment" DROP CONSTRAINT "ResumesComment_resumesProfileId_fkey";
|
||||||
|
|
||||||
|
-- DropForeignKey
|
||||||
|
ALTER TABLE "ResumesCommentVote" DROP CONSTRAINT "ResumesCommentVote_resumesProfileId_fkey";
|
||||||
|
|
||||||
|
-- DropForeignKey
|
||||||
|
ALTER TABLE "ResumesProfile" DROP CONSTRAINT "ResumesProfile_userId_fkey";
|
||||||
|
|
||||||
|
-- DropForeignKey
|
||||||
|
ALTER TABLE "ResumesResume" DROP CONSTRAINT "ResumesResume_resumesProfileId_fkey";
|
||||||
|
|
||||||
|
-- DropForeignKey
|
||||||
|
ALTER TABLE "ResumesStar" DROP CONSTRAINT "ResumesStar_resumesProfileId_fkey";
|
||||||
|
|
||||||
|
-- DropIndex
|
||||||
|
DROP INDEX "ResumesCommentVote_commentId_resumesProfileId_key";
|
||||||
|
|
||||||
|
-- DropIndex
|
||||||
|
DROP INDEX "ResumesStar_resumeId_resumesProfileId_key";
|
||||||
|
|
||||||
|
-- AlterTable
|
||||||
|
ALTER TABLE "ResumesComment" DROP COLUMN "resumesProfileId",
|
||||||
|
ADD COLUMN "userId" TEXT NOT NULL;
|
||||||
|
|
||||||
|
-- AlterTable
|
||||||
|
ALTER TABLE "ResumesCommentVote" DROP COLUMN "resumesProfileId",
|
||||||
|
ADD COLUMN "userId" TEXT NOT NULL;
|
||||||
|
|
||||||
|
-- AlterTable
|
||||||
|
ALTER TABLE "ResumesResume" DROP COLUMN "resumesProfileId",
|
||||||
|
ADD COLUMN "userId" TEXT NOT NULL;
|
||||||
|
|
||||||
|
-- AlterTable
|
||||||
|
ALTER TABLE "ResumesStar" DROP COLUMN "resumesProfileId",
|
||||||
|
ADD COLUMN "userId" TEXT NOT NULL;
|
||||||
|
|
||||||
|
-- DropTable
|
||||||
|
DROP TABLE "ResumesProfile";
|
||||||
|
|
||||||
|
-- CreateIndex
|
||||||
|
CREATE UNIQUE INDEX "ResumesCommentVote_userId_commentId_key" ON "ResumesCommentVote"("userId", "commentId");
|
||||||
|
|
||||||
|
-- CreateIndex
|
||||||
|
CREATE UNIQUE INDEX "ResumesStar_userId_resumeId_key" ON "ResumesStar"("userId", "resumeId");
|
||||||
|
|
||||||
|
-- AddForeignKey
|
||||||
|
ALTER TABLE "ResumesResume" ADD CONSTRAINT "ResumesResume_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
|
||||||
|
|
||||||
|
-- AddForeignKey
|
||||||
|
ALTER TABLE "ResumesStar" ADD CONSTRAINT "ResumesStar_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
|
||||||
|
|
||||||
|
-- AddForeignKey
|
||||||
|
ALTER TABLE "ResumesComment" ADD CONSTRAINT "ResumesComment_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
|
||||||
|
|
||||||
|
-- AddForeignKey
|
||||||
|
ALTER TABLE "ResumesCommentVote" ADD CONSTRAINT "ResumesCommentVote_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
|
||||||
@ -0,0 +1,148 @@
|
|||||||
|
import clsx from 'clsx';
|
||||||
|
import formatDistanceToNow from 'date-fns/formatDistanceToNow';
|
||||||
|
import Error from 'next/error';
|
||||||
|
import { useRouter } from 'next/router';
|
||||||
|
import { useSession } from 'next-auth/react';
|
||||||
|
import { useEffect } from 'react';
|
||||||
|
import {
|
||||||
|
AcademicCapIcon,
|
||||||
|
BriefcaseIcon,
|
||||||
|
CalendarIcon,
|
||||||
|
InformationCircleIcon,
|
||||||
|
MapPinIcon,
|
||||||
|
StarIcon,
|
||||||
|
} from '@heroicons/react/20/solid';
|
||||||
|
import { Spinner } from '@tih/ui';
|
||||||
|
|
||||||
|
import CommentsSection from '~/components/resumes/comments/CommentsSection';
|
||||||
|
import ResumePdf from '~/components/resumes/ResumePdf';
|
||||||
|
|
||||||
|
import { trpc } from '~/utils/trpc';
|
||||||
|
|
||||||
|
export default function ResumeReviewPage() {
|
||||||
|
const ErrorPage = (
|
||||||
|
<Error statusCode={404} title="Requested resume does not exist." />
|
||||||
|
);
|
||||||
|
const { data: session } = useSession();
|
||||||
|
const router = useRouter();
|
||||||
|
const { resumeId } = router.query;
|
||||||
|
const utils = trpc.useContext();
|
||||||
|
// Safe to assert resumeId type as string because query is only sent if so
|
||||||
|
const detailsQuery = trpc.useQuery(
|
||||||
|
['resumes.details.find', { resumeId: resumeId as string }],
|
||||||
|
{
|
||||||
|
enabled: typeof resumeId === 'string' && session?.user?.id !== undefined,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
const starMutation = trpc.useMutation('resumes.details.update_star', {
|
||||||
|
onSuccess() {
|
||||||
|
utils.invalidateQueries();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (detailsQuery.data?.stars.length) {
|
||||||
|
document.getElementById('star-button')?.focus();
|
||||||
|
} else {
|
||||||
|
document.getElementById('star-button')?.blur();
|
||||||
|
}
|
||||||
|
}, [detailsQuery.data?.stars]);
|
||||||
|
|
||||||
|
const onStarButtonClick = () => {
|
||||||
|
// Star button only rendered if resume exists
|
||||||
|
// Star button only clickable if user exists
|
||||||
|
starMutation.mutate({
|
||||||
|
resumeId: resumeId as string,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{detailsQuery.isError && ErrorPage}
|
||||||
|
{detailsQuery.isLoading && <Spinner display="block" label="" size="lg" />}
|
||||||
|
{detailsQuery.isFetched && detailsQuery.data && (
|
||||||
|
<main className="flex-1 p-4">
|
||||||
|
<div className="flex flex-row md:space-x-8">
|
||||||
|
<h1 className="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">
|
||||||
|
{detailsQuery.data.title}
|
||||||
|
</h1>
|
||||||
|
<button
|
||||||
|
className="isolate inline-flex max-h-10 items-center space-x-4 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
|
||||||
|
disabled={session?.user === null}
|
||||||
|
id="star-button"
|
||||||
|
type="button"
|
||||||
|
onClick={onStarButtonClick}>
|
||||||
|
<span className="relative inline-flex">
|
||||||
|
<StarIcon
|
||||||
|
aria-hidden="true"
|
||||||
|
className={clsx(
|
||||||
|
detailsQuery.data?.stars.length
|
||||||
|
? 'text-orange-400'
|
||||||
|
: 'text-gray-400',
|
||||||
|
'-ml-1 mr-2 h-5 w-5',
|
||||||
|
)}
|
||||||
|
id="star-icon"
|
||||||
|
/>
|
||||||
|
Star
|
||||||
|
</span>
|
||||||
|
<span className="relative -ml-px inline-flex">
|
||||||
|
{detailsQuery.data._count.stars}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col pt-1 sm:mt-0 sm:flex-row sm:flex-wrap sm:space-x-8">
|
||||||
|
<div className="mt-2 flex items-center text-sm text-gray-500">
|
||||||
|
<BriefcaseIcon
|
||||||
|
aria-hidden="true"
|
||||||
|
className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
|
||||||
|
/>
|
||||||
|
{detailsQuery.data.role}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center pt-2 text-sm text-gray-500">
|
||||||
|
<MapPinIcon
|
||||||
|
aria-hidden="true"
|
||||||
|
className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
|
||||||
|
/>
|
||||||
|
{detailsQuery.data.location}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center pt-2 text-sm text-gray-500">
|
||||||
|
<AcademicCapIcon
|
||||||
|
aria-hidden="true"
|
||||||
|
className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
|
||||||
|
/>
|
||||||
|
{detailsQuery.data.experience}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center pt-2 text-sm text-gray-500">
|
||||||
|
<CalendarIcon
|
||||||
|
aria-hidden="true"
|
||||||
|
className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
|
||||||
|
/>
|
||||||
|
{`Uploaded ${formatDistanceToNow(
|
||||||
|
new Date(detailsQuery.data.createdAt),
|
||||||
|
{ addSuffix: true },
|
||||||
|
)} by ${detailsQuery.data.user.name}`}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{detailsQuery.data.additionalInfo && (
|
||||||
|
<div className="flex items-center pt-2 text-sm text-gray-500">
|
||||||
|
<InformationCircleIcon
|
||||||
|
aria-hidden="true"
|
||||||
|
className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
|
||||||
|
/>
|
||||||
|
{detailsQuery.data.additionalInfo}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="flex h-full w-full flex-row py-4">
|
||||||
|
<div className="w-1/2">
|
||||||
|
<ResumePdf url={detailsQuery.data.url} />
|
||||||
|
</div>
|
||||||
|
<div className="mx-8 w-1/2">
|
||||||
|
{/* TODO: Update resumeId */}
|
||||||
|
<CommentsSection resumeId="cl8y6gtez0009yedbne9qp5zi" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,82 +0,0 @@
|
|||||||
import {
|
|
||||||
AcademicCapIcon,
|
|
||||||
BriefcaseIcon,
|
|
||||||
CalendarIcon,
|
|
||||||
InformationCircleIcon,
|
|
||||||
MapPinIcon,
|
|
||||||
StarIcon,
|
|
||||||
} from '@heroicons/react/20/solid';
|
|
||||||
|
|
||||||
import CommentsSection from '~/components/resumes/comments/CommentsSection';
|
|
||||||
import ResumePdf from '~/components/resumes/ResumePdf';
|
|
||||||
|
|
||||||
export default function ResumeReviewPage() {
|
|
||||||
return (
|
|
||||||
<main className="flex-1 p-4">
|
|
||||||
<div className="flex flex-row md:space-x-8">
|
|
||||||
<h1 className="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">
|
|
||||||
Please help moi, applying for medtech startups in Singapore
|
|
||||||
</h1>
|
|
||||||
<button
|
|
||||||
className="isolate inline-flex max-h-10 items-center space-x-4 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
|
|
||||||
type="button">
|
|
||||||
<span className="relative inline-flex">
|
|
||||||
<StarIcon
|
|
||||||
aria-hidden="true"
|
|
||||||
className="-ml-1 mr-2 h-5 w-5 text-gray-400"
|
|
||||||
/>
|
|
||||||
Star
|
|
||||||
</span>
|
|
||||||
<span className="relative -ml-px inline-flex">12k</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col pt-1 sm:mt-0 sm:flex-row sm:flex-wrap sm:space-x-8">
|
|
||||||
<div className="mt-2 flex items-center text-sm text-gray-500">
|
|
||||||
<BriefcaseIcon
|
|
||||||
aria-hidden="true"
|
|
||||||
className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
|
|
||||||
/>
|
|
||||||
Software Engineer (Backend)
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center pt-2 text-sm text-gray-500">
|
|
||||||
<MapPinIcon
|
|
||||||
aria-hidden="true"
|
|
||||||
className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
|
|
||||||
/>
|
|
||||||
Singapore
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center pt-2 text-sm text-gray-500">
|
|
||||||
<AcademicCapIcon
|
|
||||||
aria-hidden="true"
|
|
||||||
className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
|
|
||||||
/>
|
|
||||||
Fresh Grad
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center pt-2 text-sm text-gray-500">
|
|
||||||
<CalendarIcon
|
|
||||||
aria-hidden="true"
|
|
||||||
className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
|
|
||||||
/>
|
|
||||||
Uploaded 2 days ago by Git Ji Ra
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center pt-2 text-sm text-gray-500">
|
|
||||||
<InformationCircleIcon
|
|
||||||
aria-hidden="true"
|
|
||||||
className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
|
|
||||||
/>
|
|
||||||
Looking to break into SWE roles after doing engineering for the past 2
|
|
||||||
years
|
|
||||||
</div>
|
|
||||||
<div className="flex h-full w-full flex-row py-4">
|
|
||||||
<div className="w-1/2">
|
|
||||||
<ResumePdf />
|
|
||||||
</div>
|
|
||||||
<div className="mx-8 w-1/2">
|
|
||||||
{/* TODO: Update resumeId */}
|
|
||||||
<CommentsSection resumeId="cl8y6gtez0009yedbne9qp5zi" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -0,0 +1,79 @@
|
|||||||
|
import { z } from 'zod';
|
||||||
|
|
||||||
|
import { createRouter } from './context';
|
||||||
|
|
||||||
|
export const resumesDetailsRouter = createRouter()
|
||||||
|
.query('find', {
|
||||||
|
input: z.object({
|
||||||
|
resumeId: z.string(),
|
||||||
|
}),
|
||||||
|
async resolve({ ctx, input }) {
|
||||||
|
const { resumeId } = input;
|
||||||
|
const userId = ctx.session?.user?.id;
|
||||||
|
|
||||||
|
// Use the resumeId to query all related information of a single resume
|
||||||
|
// from Resumesresume:
|
||||||
|
return await ctx.prisma.resumesResume.findUnique({
|
||||||
|
include: {
|
||||||
|
_count: {
|
||||||
|
select: {
|
||||||
|
stars: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
stars: {
|
||||||
|
where: {
|
||||||
|
userId,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
user: {
|
||||||
|
select: {
|
||||||
|
name: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
where: {
|
||||||
|
id: resumeId,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.mutation('update_star', {
|
||||||
|
input: z.object({
|
||||||
|
resumeId: z.string(),
|
||||||
|
}),
|
||||||
|
async resolve({ ctx, input }) {
|
||||||
|
const { resumeId } = input;
|
||||||
|
// Update_star will only be called if user is logged in
|
||||||
|
const userId = ctx.session!.user!.id;
|
||||||
|
|
||||||
|
// Use the resumeId and resumeProfileId to check if star exists
|
||||||
|
const resumesStar = await ctx.prisma.resumesStar.findUnique({
|
||||||
|
select: {
|
||||||
|
id: true,
|
||||||
|
},
|
||||||
|
where: {
|
||||||
|
userId_resumeId: {
|
||||||
|
resumeId,
|
||||||
|
userId,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (resumesStar === null) {
|
||||||
|
return await ctx.prisma.resumesStar.create({
|
||||||
|
data: {
|
||||||
|
resumeId,
|
||||||
|
userId,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return await ctx.prisma.resumesStar.delete({
|
||||||
|
where: {
|
||||||
|
userId_resumeId: {
|
||||||
|
resumeId,
|
||||||
|
userId,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
Loading…
Reference in new issue