[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,15 +10,29 @@ type ICommentsSectionProps = {
 export default function CommentsSection({ resumeId }: ICommentsSectionProps) {
   const [showCommentsForm, setShowCommentsForm] = useState(false);
 
-  return showCommentsForm ? (
-    <CommentsForm
-      resumeId={resumeId}
-      setShowCommentsForm={setShowCommentsForm}
-    />
-  ) : (
-    <CommentsList
-      resumeId={resumeId}
-      setShowCommentsForm={setShowCommentsForm}
-    />
+  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}
+        />
+      ) : (
+        <CommentsList
+          resumeId={resumeId}
+          setShowCommentsForm={setShowCommentsForm}
+        />
+      )}
+    </>
   );
 }