[resumes][feat] add zoom controls for pdf

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

@@ -1,7 +1,12 @@
 import { useState } from 'react';
 import { Document, Page, pdfjs } from 'react-pdf';
 import type { PDFDocumentProxy } from 'react-pdf/node_modules/pdfjs-dist';
-import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/20/solid';
+import {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  MagnifyingGlassMinusIcon,
+  MagnifyingGlassPlusIcon,
+} from '@heroicons/react/20/solid';
 import { Button, Spinner } from '@tih/ui';
 
 pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;
@@ -13,6 +18,7 @@ type Props = Readonly<{
 export default function ResumePdf({ url }: Props) {
   const [numPages, setNumPages] = useState(0);
   const [pageNumber, setPageNumber] = useState(1);
+  const [scale, setScale] = useState(1);
 
   const onPdfLoadSuccess = (pdf: PDFDocumentProxy) => {
     setNumPages(pdf.numPages);
@@ -20,14 +26,36 @@ export default function ResumePdf({ url }: Props) {
 
   return (
     <div>
-      <Document
+      <div className="group relative">
-        className="flex h-[calc(100vh-17rem)] flex-row justify-center overflow-scroll"
+        <Document
-        file={url}
+          className="flex h-[calc(100vh-17rem)] flex-row justify-center overflow-auto"
-        loading={<Spinner display="block" label="" size="lg" />}
+          file={url}
-        noData=""
+          loading={<Spinner display="block" size="lg" />}
-        onLoadSuccess={onPdfLoadSuccess}>
+          noData=""
-        <Page pageNumber={pageNumber} />
+          onLoadSuccess={onPdfLoadSuccess}>
-      </Document>
+          <Page pageNumber={pageNumber} scale={scale} width={750} />
+          <div className="absolute top-2 right-5 hidden hover:block group-hover:block">
+            <Button
+              className="rounded-r-none focus:ring-0 focus:ring-offset-0"
+              disabled={scale === 0.5}
+              icon={MagnifyingGlassMinusIcon}
+              isLabelHidden={true}
+              label="Zoom Out"
+              variant="tertiary"
+              onClick={() => setScale(scale - 0.25)}
+            />
+            <Button
+              className="rounded-l-none focus:ring-0 focus:ring-offset-0"
+              disabled={scale === 1.5}
+              icon={MagnifyingGlassPlusIcon}
+              isLabelHidden={true}
+              label="Zoom In"
+              variant="tertiary"
+              onClick={() => setScale(scale + 0.25)}
+            />
+          </div>
+        </Document>
+      </div>
 
       <div className="flex flex-row items-center justify-between p-4">
         <Button

apps/portal/src/components/resumes/comments/CommentListItems.tsx

@@ -22,7 +22,7 @@ export default function CommentListItems({ comments, isLoading }: Props) {
   }
 
   return (
-    <div className="m-2 flow-root h-[calc(100vh-20rem)] w-full flex-col space-y-3 overflow-y-scroll">
+    <div className="m-2 flow-root h-[calc(100vh-20rem)] w-full flex-col space-y-3 overflow-y-auto">
       {comments.map((comment) => (
         <Comment
           key={comment.id}

apps/portal/src/components/resumes/comments/CommentsForm.tsx

@@ -77,7 +77,7 @@ export default function CommentsForm({
   };
 
   return (
-    <div className="h-[calc(100vh-13rem)] overflow-y-scroll">
+    <div className="h-[calc(100vh-13rem)] overflow-y-auto">
       <h2 className="text-xl font-semibold text-gray-800">Add your review</h2>
       <p className="text-gray-800">
         Please fill in at least one section to submit your review

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

@@ -22,7 +22,7 @@ import { trpc } from '~/utils/trpc';
 
 export default function ResumeReviewPage() {
   const ErrorPage = (
-    <Error statusCode={404} title="Requested resume does not exist." />
+    <Error statusCode={404} title="Requested resume does not exist" />
   );
   const { data: session } = useSession();
   const router = useRouter();
@@ -55,14 +55,6 @@ export default function ResumeReviewPage() {
     numStars: 0,
   });
 
-  useEffect(() => {
-    if (starDetails.isStarred) {
-      document.getElementById('star-button')?.focus();
-    } else {
-      document.getElementById('star-button')?.blur();
-    }
-  }, [starDetails]);
-
   useEffect(() => {
     if (detailsQuery?.data !== undefined) {
       setStarDetails({
@@ -73,14 +65,14 @@ export default function ResumeReviewPage() {
   }, [detailsQuery.data]);
 
   const onStarButtonClick = () => {
-    // Star button only rendered if resume exists
-    // Star button only clickable if user exists
     setStarDetails({
       isStarred: !starDetails.isStarred,
       numStars: starDetails.isStarred
         ? starDetails.numStars - 1
         : starDetails.numStars + 1,
     });
+    // Star button only rendered if resume exists
+    // Star button only clickable if user exists
     if (starDetails.isStarred) {
       unstarMutation.mutate({
         resumeId: resumeId as string,
@@ -94,7 +86,7 @@ export default function ResumeReviewPage() {
 
   return (
     <>
-      {detailsQuery.isError && ErrorPage}
+      {(detailsQuery.isError || detailsQuery.data === null) && ErrorPage}
       {detailsQuery.isLoading && (
         <div className="w-full pt-4">
           {' '}
@@ -106,13 +98,18 @@ export default function ResumeReviewPage() {
           <Head>
             <title>{detailsQuery.data.title}</title>
           </Head>
-          <main className="h-[calc(100vh-2rem)] flex-1 overflow-y-scroll p-4">
+          <main className="h-[calc(100vh-2rem)] flex-1 overflow-y-auto p-4">
             <div className="flex flex-row 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"
+                className={clsx(
+                  starDetails.isStarred
+                    ? 'z-10 border-indigo-500 outline-none ring-1 ring-indigo-500'
+                    : '',
+                  '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  disabled:hover:bg-white',
+                )}
                 disabled={session?.user === undefined}
                 id="star-button"
                 type="button"