[resumes][fix] add spinners and responsive UI for review + browse pages (#334)

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

@@ -7,7 +7,7 @@ import { Button, Spinner } from '@tih/ui';
 
 import { RESUME_STORAGE_KEY } from '~/constants/file-storage-keys';
 
-pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;
+pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;
 
 type Props = Readonly<{
   url: string;
@@ -15,7 +15,7 @@ type Props = Readonly<{
 
 export default function ResumePdf({ url }: Props) {
   const [numPages, setNumPages] = useState(0);
-  const [pageNumber] = useState(1);
+  const [pageNumber, setPageNumber] = useState(1);
   const [file, setFile] = useState<File>();
 
   const onPdfLoadSuccess = (pdf: PDFDocumentProxy) => {
@@ -38,9 +38,10 @@ export default function ResumePdf({ url }: Props) {
   return (
     <div>
       <Document
-        className="h-[calc(100vh-17rem)] overflow-scroll"
+        className="flex h-[calc(100vh-17rem)] flex-row justify-center overflow-scroll"
         file={file}
         loading={<Spinner display="block" label="" size="lg" />}
+        noData=""
         onLoadSuccess={onPdfLoadSuccess}>
         <Page pageNumber={pageNumber} />
       </Document>
@@ -52,16 +53,18 @@ export default function ResumePdf({ url }: Props) {
           isLabelHidden={true}
           label="Previous"
           variant="tertiary"
+          onClick={() => setPageNumber(pageNumber - 1)}
         />
         <p className="text-md text-gray-600">
           Page {pageNumber} of {numPages}
         </p>
         <Button
-          disabled={pageNumber === numPages}
+          disabled={pageNumber >= numPages}
           icon={ArrowRightIcon}
           isLabelHidden={true}
           label="Next"
           variant="tertiary"
+          onClick={() => setPageNumber(pageNumber + 1)}
         />
       </div>
     </div>

apps/portal/src/components/resumes/browse/constants.ts

@@ -53,9 +53,9 @@ export const EXPERIENCE = [
 ];
 
 export const LOCATION = [
-  { checked: false, label: 'Singapore', value: 'singapore' },
-  { checked: false, label: 'United States', value: 'usa' },
-  { checked: false, label: 'India', value: 'india' },
+  { checked: false, label: 'Singapore', value: 'Singapore' },
+  { checked: false, label: 'United States', value: 'Usa' },
+  { checked: false, label: 'India', value: 'India' },
 ];
 
 export const TEST_RESUMES = [

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

@@ -10,7 +10,19 @@ type ICommentsSectionProps = {
 export default function CommentsSection({ resumeId }: ICommentsSectionProps) {
   const [showCommentsForm, setShowCommentsForm] = useState(false);
 
-  return showCommentsForm ? (
+  return (
+    <>
+      <div className="relative p-2 lg:hidden">
+        <div aria-hidden="true" className="absolute inset-0 flex items-center">
+          <div className="w-full border-t border-gray-300" />
+        </div>
+        <div className="relative flex justify-center">
+          <span className="bg-gray-50 px-3 text-lg font-medium text-gray-900">
+            Comments
+          </span>
+        </div>
+      </div>
+      {showCommentsForm ? (
         <CommentsForm
           resumeId={resumeId}
           setShowCommentsForm={setShowCommentsForm}
@@ -20,5 +32,7 @@ export default function CommentsSection({ resumeId }: ICommentsSectionProps) {
           resumeId={resumeId}
           setShowCommentsForm={setShowCommentsForm}
         />
+      )}
+    </>
   );
 }

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

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import formatDistanceToNow from 'date-fns/formatDistanceToNow';
 import Error from 'next/error';
+import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { useSession } from 'next-auth/react';
 import { useEffect } from 'react';
@@ -59,10 +60,19 @@ export default function ResumeReviewPage() {
   return (
     <>
       {detailsQuery.isError && ErrorPage}
-      {detailsQuery.isLoading && <Spinner display="block" label="" size="lg" />}
+      {detailsQuery.isLoading && (
+        <div className="w-full pt-4">
+          {' '}
+          <Spinner display="block" size="lg" />{' '}
+        </div>
+      )}
       {detailsQuery.isFetched && detailsQuery.data && (
-        <main className="flex-1 p-4">
-          <div className="flex flex-row md:space-x-8">
+        <>
+          <Head>
+            <title>{detailsQuery.data.title}</title>
+          </Head>
+          <main className="h-[calc(100vh-2rem)] flex-1 overflow-y-scroll 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>
@@ -90,7 +100,7 @@ export default function ResumeReviewPage() {
                 </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="flex flex-col pt-1 lg:mt-0 lg:flex-row lg:flex-wrap lg:space-x-8">
               <div className="mt-2 flex items-center text-sm text-gray-500">
                 <BriefcaseIcon
                   aria-hidden="true"
@@ -132,15 +142,16 @@ export default function ResumeReviewPage() {
                 {detailsQuery.data.additionalInfo}
               </div>
             )}
-          <div className="flex h-full w-full flex-row py-4">
-            <div className="w-1/2">
+            <div className="flex w-full flex-col py-4 lg:flex-row">
+              <div className="w-full lg:w-[800px]">
                 <ResumePdf url={detailsQuery.data.url} />
               </div>
-            <div className="mx-8 w-1/2">
+              <div className="mx-8 grow">
                 <CommentsSection resumeId={resumeId as string} />
               </div>
             </div>
           </main>
+        </>
       )}
     </>
   );

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

@@ -1,4 +1,5 @@
 import clsx from 'clsx';
+import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { useSession } from 'next-auth/react';
 import { Fragment, useEffect, useState } from 'react';
@@ -9,7 +10,7 @@ import {
   PlusIcon,
 } from '@heroicons/react/20/solid';
 import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
-import { Tabs, TextInput } from '@tih/ui';
+import { Spinner, Tabs, TextInput } from '@tih/ui';
 
 import BrowseListItem from '~/components/resumes/browse/BrowseListItem';
 import {
@@ -50,7 +51,7 @@ export default function ResumeHomePage() {
   const router = useRouter();
   const [tabsValue, setTabsValue] = useState(BROWSE_TABS_VALUES.ALL);
   const [searchValue, setSearchValue] = useState('');
-  const [resumes, setResumes] = useState(Array<Resume>());
+  const [resumes, setResumes] = useState<Array<Resume>>([]);
 
   const allResumesQuery = trpc.useQuery(['resumes.resume.all'], {
     enabled: tabsValue === BROWSE_TABS_VALUES.ALL,
@@ -65,19 +66,19 @@ export default function ResumeHomePage() {
   useEffect(() => {
     switch (tabsValue) {
       case BROWSE_TABS_VALUES.ALL: {
-        setResumes(allResumesQuery.data ?? Array<Resume>());
+        setResumes(allResumesQuery.data ?? []);
         break;
       }
       case BROWSE_TABS_VALUES.STARRED: {
-        setResumes(starredResumesQuery.data ?? Array<Resume>());
+        setResumes(starredResumesQuery.data ?? []);
         break;
       }
       case BROWSE_TABS_VALUES.MY: {
-        setResumes(myResumesQuery.data ?? Array<Resume>());
+        setResumes(myResumesQuery.data ?? []);
         break;
       }
       default: {
-        setResumes(Array<Resume>());
+        setResumes([]);
       }
     }
   }, [
@@ -96,6 +97,10 @@ export default function ResumeHomePage() {
   };
 
   return (
+    <>
+      <Head>
+        <title>Resume Review Portal</title>
+      </Head>
       <main className="h-[calc(100vh-4rem)] flex-1 overflow-y-scroll">
         <div className="ml-4 py-4">
           <ResumeReviewsTitle />
@@ -277,7 +282,9 @@ export default function ResumeHomePage() {
               {allResumesQuery.isLoading ||
               starredResumesQuery.isLoading ||
               myResumesQuery.isLoading ? (
-              <div>Loading...</div>
+                <div className="col-span-10 pt-4">
+                  <Spinner display="block" size="lg" />
+                </div>
               ) : (
                 <div className="col-span-10 pr-8">
                   <ul role="list">
@@ -296,5 +303,6 @@ export default function ResumeHomePage() {
           </div>
         </div>
       </main>
+    </>
   );
 }

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

@@ -103,7 +103,7 @@ export default function SubmitResumeForm() {
   return (
     <>
       <Head>
-        <title>Upload a resume</title>
+        <title>Upload a Resume</title>
       </Head>
       <main className="h-[calc(100vh-4rem)] flex-1 overflow-y-scroll">
         <section