diff --git a/apps/portal/src/components/resumes/ResumePdf.tsx b/apps/portal/src/components/resumes/ResumePdf.tsx index a992e1fb..5281a52b 100644 --- a/apps/portal/src/components/resumes/ResumePdf.tsx +++ b/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(); const onPdfLoadSuccess = (pdf: PDFDocumentProxy) => { @@ -38,9 +38,10 @@ export default function ResumePdf({ url }: Props) { return (
} + noData="" onLoadSuccess={onPdfLoadSuccess}> @@ -52,16 +53,18 @@ export default function ResumePdf({ url }: Props) { isLabelHidden={true} label="Previous" variant="tertiary" + onClick={() => setPageNumber(pageNumber - 1)} />

Page {pageNumber} of {numPages}

diff --git a/apps/portal/src/components/resumes/browse/constants.ts b/apps/portal/src/components/resumes/browse/constants.ts index 18448cee..19f3035b 100644 --- a/apps/portal/src/components/resumes/browse/constants.ts +++ b/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 = [ diff --git a/apps/portal/src/components/resumes/comments/CommentsSection.tsx b/apps/portal/src/components/resumes/comments/CommentsSection.tsx index b4e5f535..6df9c4cf 100644 --- a/apps/portal/src/components/resumes/comments/CommentsSection.tsx +++ b/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 ? ( - - ) : ( - + return ( + <> +
+ + {showCommentsForm ? ( + + ) : ( + + )} + ); } diff --git a/apps/portal/src/pages/resumes/[resumeId].tsx b/apps/portal/src/pages/resumes/[resumeId].tsx index 7103655b..d56c1135 100644 --- a/apps/portal/src/pages/resumes/[resumeId].tsx +++ b/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,88 +60,98 @@ export default function ResumeReviewPage() { return ( <> {detailsQuery.isError && ErrorPage} - {detailsQuery.isLoading && } + {detailsQuery.isLoading && ( +
+ {' '} + {' '} +
+ )} {detailsQuery.isFetched && detailsQuery.data && ( -
-
-

- {detailsQuery.data.title} -

- +
+
+
+
-
-
-
+
+
+
+
+
+
-
-
- {detailsQuery.data.additionalInfo && ( -
-
- )} -
-
- -
-
- -
-
-
+ + )} ); diff --git a/apps/portal/src/pages/resumes/index.tsx b/apps/portal/src/pages/resumes/index.tsx index 99891d5e..fd0a304f 100644 --- a/apps/portal/src/pages/resumes/index.tsx +++ b/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()); + const [resumes, setResumes] = useState>([]); 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()); + setResumes(allResumesQuery.data ?? []); break; } case BROWSE_TABS_VALUES.STARRED: { - setResumes(starredResumesQuery.data ?? Array()); + setResumes(starredResumesQuery.data ?? []); break; } case BROWSE_TABS_VALUES.MY: { - setResumes(myResumesQuery.data ?? Array()); + setResumes(myResumesQuery.data ?? []); break; } default: { - setResumes(Array()); + setResumes([]); } } }, [ @@ -96,205 +97,212 @@ export default function ResumeHomePage() { }; return ( -
-
- -
-
-
-
-
-

Filters

-
-
-
-
- -
-
-
- + + Resume Review Portal + +
+
+ +
+
+
+
+
+

Filters

+
+
+
+
+ - -
-
- -
- - Sort - -
+
+
+
+ + +
+
+ +
+ + Sort + +
- - -
- {SORT_OPTIONS.map((option) => ( - - {({ active }) => ( - - {option.name} - - )} - - ))} -
- - - -
-
- + + +
+ {SORT_OPTIONS.map((option) => ( + + {({ active }) => ( + + {option.name} + + )} + + ))} +
+ + + +
+
+ +
-
-
-
-
-
-

Categories

-
    - {TOP_HITS.map((category) => ( -
  • - {/* TODO: Replace onClick with filtering function */} - true} +
    +
    +
    + +

    Categories

    +
      + {TOP_HITS.map((category) => ( +
    • + {/* TODO: Replace onClick with filtering function */} + true} + /> +
      • + ))} +
    + + {filters.map((section) => ( + + {({ open }) => ( + <> +

    + + + {section.name} + + + {open ? ( + + +

    + +
    + {section.options.map((option, optionIdx) => ( +
    + + +
    + ))} +
    +     + + )} +     + ))} + +
    +
    + {allResumesQuery.isLoading || + starredResumesQuery.isLoading || + myResumesQuery.isLoading ? ( +
    + +
    + ) : ( +
    +
      + {resumes.map((resumeObj) => ( +
    • +
      • ))}
    - - {filters.map((section) => ( - - {({ open }) => ( - <> -

    - - - {section.name} - - - {open ? ( - - -

    - -
    - {section.options.map((option, optionIdx) => ( -
    - - -
    - ))} -
    -     - - )} -     - ))} - -
    +
    + )}
- {allResumesQuery.isLoading || - starredResumesQuery.isLoading || - myResumesQuery.isLoading ? ( -
Loading...
- ) : ( -
-
    - {resumes.map((resumeObj) => ( -
  • - -
    • - ))} -
-
- )}
-
-
+
+ ); } diff --git a/apps/portal/src/pages/resumes/submit.tsx b/apps/portal/src/pages/resumes/submit.tsx index 819f6e6f..fc573f14 100644 --- a/apps/portal/src/pages/resumes/submit.tsx +++ b/apps/portal/src/pages/resumes/submit.tsx @@ -103,7 +103,7 @@ export default function SubmitResumeForm() { return ( <> - Upload a resume + Upload a Resume