[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 model

apps/portal/src/components/resumes/ResumePdf.tsx

@@ -6,7 +6,11 @@ import { Button, Spinner } from '@tih/ui';
 
 pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;
 
-export default function ResumePdf() {
+type Props = Readonly<{
+  url: string;
+}>;
+
+export default function ResumePdf({ url }: Props) {
   const [numPages, setNumPages] = useState(0);
   const [pageNumber] = useState(1);
 
@@ -18,7 +22,7 @@ export default function ResumePdf() {
     <div>
       <Document
         className="h-[calc(100vh-17rem)] overflow-scroll"
-        file="/test_resume.pdf"
+        file={url}
         loading={<Spinner display="block" label="" size="lg" />}
         onLoadSuccess={onPdfLoadSuccess}>
         <Page pageNumber={pageNumber} />

apps/portal/src/pages/resumes/[resumeId].tsx

@@ -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>
+      )}
+    </>
+  );
+}

apps/portal/src/pages/resumes/review.tsx

@@ -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>
-  );
-}

apps/portal/src/server/router/index.ts

@@ -2,6 +2,7 @@ import superjson from 'superjson';
 
 import { createRouter } from './context';
 import { protectedExampleRouter } from './protected-example-router';
+import { resumesDetailsRouter } from './resumes-details-router';
 import { resumesResumeUserRouter } from './resumes-resume-user-router';
 import { resumeReviewsRouter } from './resumes-reviews-router';
 import { resumesReviewsUserRouter } from './resumes-reviews-user-router';
@@ -16,6 +17,7 @@ export const appRouter = createRouter()
   .merge('auth.', protectedExampleRouter)
   .merge('todos.', todosRouter)
   .merge('todos.user.', todosUserRouter)
+  .merge('resumes.details.', resumesDetailsRouter)
   .merge('resumes.resume.user.', resumesResumeUserRouter)
   .merge('resumes.reviews.', resumeReviewsRouter)
   .merge('resumes.reviews.user.', resumesReviewsUserRouter);

apps/portal/src/server/router/resumes-details-router.ts

@@ -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,
+          },
+        },
+      });
+    },
+  });

apps/portal/src/server/router/resumes-resume-user-router.ts

@@ -15,23 +15,12 @@ export const resumesResumeUserRouter = createProtectedRouter().mutation(
     }),
     async resolve({ ctx, input }) {
       const userId = ctx.session?.user.id;
-      const resumeProfile = await ctx.prisma.resumesProfile.upsert({
-        create: {
-          userId,
-        },
-        update: {},
-        where: {
-          userId,
-        },
-      });
-
       // TODO: Store file in file storage and retrieve URL
-
       return await ctx.prisma.resumesResume.create({
         data: {
           ...input,
-          resumesProfileId: resumeProfile.id,
           url: '',
+          userId,
         },
       });
     },

apps/portal/src/server/router/resumes-reviews-router.ts

@@ -7,18 +7,9 @@ export const resumeReviewsRouter = createRouter().query('list', {
     resumeId: z.string(),
   }),
   async resolve({ ctx, input }) {
+    const userId = ctx.session?.user?.id;
     const { resumeId } = input;
 
-    const { resumesProfileId } =
-      await ctx.prisma.resumesResume.findUniqueOrThrow({
-        select: {
-          resumesProfileId: true,
-        },
-        where: {
-          id: resumeId,
-        },
-      });
-
     // For this resume, we retrieve every comment's information, along with:
     // The user's name and image to render
     // Number of votes, and whether the user (if-any) has voted
@@ -29,20 +20,16 @@ export const resumeReviewsRouter = createRouter().query('list', {
             votes: true,
           },
         },
-        resumesProfile: {
-          include: {
-            user: {
-              select: {
-                image: true,
-                name: true,
-              },
-            },
+        user: {
+          select: {
+            image: true,
+            name: true,
           },
         },
         votes: {
           take: 1,
           where: {
-            resumesProfileId,
+            userId,
           },
         },
       },

apps/portal/src/server/router/resumes-reviews-user-router.ts

@@ -6,8 +6,8 @@ import { createProtectedRouter } from './context';
 type IResumeCommentInput = Readonly<{
   description: string;
   resumeId: string;
-  resumesProfileId: string;
   section: ResumesSection;
+  userId: string;
 }>;
 
 export const resumesReviewsUserRouter = createProtectedRouter().mutation(
@@ -22,19 +22,10 @@ export const resumesReviewsUserRouter = createProtectedRouter().mutation(
       skills: z.string(),
     }),
     async resolve({ ctx, input }) {
+      const userId = ctx.session?.user?.id;
       const { resumeId, education, experience, general, projects, skills } =
         input;
 
-      const { resumesProfileId } =
-        await ctx.prisma.resumesResume.findUniqueOrThrow({
-          select: {
-            resumesProfileId: true,
-          },
-          where: {
-            id: resumeId,
-          },
-        });
-
       // For each section, convert them into ResumesComment model if provided
       const comments: Array<IResumeCommentInput> = [
         { description: education, section: ResumesSection.EDUCATION },
@@ -50,8 +41,8 @@ export const resumesReviewsUserRouter = createProtectedRouter().mutation(
           return {
             description,
             resumeId,
-            resumesProfileId,
             section,
+            userId,
           };
         });