From 9834637b9cf51ea339500a335f3d09b473fef45c Mon Sep 17 00:00:00 2001
From: "peirong.wu" <wupeirong294@gmail.com>
Date: Thu, 27 Oct 2022 16:45:15 +0800
Subject: [PATCH] [resumes][chore] add uni years to labels

---
 .../src/components/resumes/ResumePdf.tsx      | 22 ++++++++----------
 .../resumes/browse/ResumeListItem.tsx         | 23 ++++++++++++++++---
 apps/portal/src/pages/resumes/[resumeId].tsx  | 19 +++++++++------
 apps/portal/src/pages/resumes/browse.tsx      |  6 ++---
 .../portal/src/utils/resumes/resumeFilters.ts | 13 ++++++-----
 5 files changed, 51 insertions(+), 32 deletions(-)

diff --git a/apps/portal/src/components/resumes/ResumePdf.tsx b/apps/portal/src/components/resumes/ResumePdf.tsx
index 514c061a..8caf0cb5 100644
--- a/apps/portal/src/components/resumes/ResumePdf.tsx
+++ b/apps/portal/src/components/resumes/ResumePdf.tsx
@@ -35,7 +35,7 @@ export default function ResumePdf({ url }: Props) {
   }, [pageWidth]);
 
   return (
-    <div id="pdfView">
+    <div className="w-full" id="pdfView">
       <div className="group relative">
         <Document
           className="flex h-[calc(100vh-16rem)] flex-row justify-center overflow-auto"
@@ -79,17 +79,15 @@ export default function ResumePdf({ url }: Props) {
           </div>
         </Document>
       </div>
-      {numPages > 1 && (
-        <div className="flex justify-center p-4">
-          <Pagination
-            current={pageNumber}
-            end={numPages}
-            label="pagination"
-            start={1}
-            onSelect={(page) => setPageNumber(page)}
-          />
-        </div>
-      )}
+      <div className="flex justify-center p-4">
+        <Pagination
+          current={pageNumber}
+          end={numPages}
+          label="pagination"
+          start={1}
+          onSelect={(page) => setPageNumber(page)}
+        />
+      </div>
     </div>
   );
 }
diff --git a/apps/portal/src/components/resumes/browse/ResumeListItem.tsx b/apps/portal/src/components/resumes/browse/ResumeListItem.tsx
index e886b9f8..9db65f49 100644
--- a/apps/portal/src/components/resumes/browse/ResumeListItem.tsx
+++ b/apps/portal/src/components/resumes/browse/ResumeListItem.tsx
@@ -9,6 +9,18 @@ import {
 } from '@heroicons/react/20/solid';
 import { ChatBubbleLeftIcon, StarIcon } from '@heroicons/react/24/outline';
 
+import type {
+  ExperienceFilter,
+  LocationFilter,
+  RoleFilter,
+} from '~/utils/resumes/resumeFilters';
+import {
+  EXPERIENCES,
+  getFilterLabel,
+  LOCATIONS,
+  ROLES,
+} from '~/utils/resumes/resumeFilters';
+
 import type { Resume } from '~/types/resume';
 
 type Props = Readonly<{
@@ -29,14 +41,17 @@ export default function ResumeListItem({ href, resumeInfo }: Props) {
                   aria-hidden="true"
                   className="mr-1.5 h-4 w-4 flex-shrink-0"
                 />
-                {resumeInfo.role}
+                {getFilterLabel(ROLES, resumeInfo.role as RoleFilter)}
               </div>
               <div className="ml-4 flex">
                 <AcademicCapIcon
                   aria-hidden="true"
                   className="mr-1.5 h-4 w-4 flex-shrink-0"
                 />
-                {resumeInfo.experience}
+                {getFilterLabel(
+                  EXPERIENCES,
+                  resumeInfo.experience as ExperienceFilter,
+                )}
               </div>
             </div>
             <div className="mt-4 flex justify-start text-xs text-slate-500">
@@ -64,7 +79,9 @@ export default function ResumeListItem({ href, resumeInfo }: Props) {
                 addSuffix: true,
               })} by ${resumeInfo.user}`}
             </div>
-            <div className="mt-2 text-slate-400">{resumeInfo.location}</div>
+            <div className="mt-2 text-slate-400">
+              {getFilterLabel(LOCATIONS, resumeInfo.location as LocationFilter)}
+            </div>
           </div>
         </div>
         <ChevronRightIcon className="col-span-1 w-8 self-center justify-self-center text-slate-400" />
diff --git a/apps/portal/src/pages/resumes/[resumeId].tsx b/apps/portal/src/pages/resumes/[resumeId].tsx
index a7bfe84c..d3af7450 100644
--- a/apps/portal/src/pages/resumes/[resumeId].tsx
+++ b/apps/portal/src/pages/resumes/[resumeId].tsx
@@ -23,12 +23,15 @@ import ResumePdf from '~/components/resumes/ResumePdf';
 import ResumeExpandableText from '~/components/resumes/shared/ResumeExpandableText';
 
 import type {
+  ExperienceFilter,
   FilterOption,
   LocationFilter,
+  RoleFilter,
 } from '~/utils/resumes/resumeFilters';
 import {
   BROWSE_TABS_VALUES,
   EXPERIENCES,
+  getFilterLabel,
   INITIAL_FILTER_STATE,
   LOCATIONS,
   ROLES,
@@ -36,10 +39,6 @@ import {
 import { trpc } from '~/utils/trpc';
 
 import SubmitResumeForm from './submit';
-import type {
-  ExperienceFilter,
-  RoleFilter,
-} from '../../utils/resumes/resumeFilters';
 
 export default function ResumeReviewPage() {
   const ErrorPage = (
@@ -293,7 +292,7 @@ export default function ResumeReviewPage() {
                       roleLabel: detailsQuery.data?.role,
                     })
                   }>
-                  {detailsQuery.data.role}
+                  {getFilterLabel(ROLES, detailsQuery.data.role as RoleFilter)}
                 </button>
               </div>
               <div className="flex items-center pt-2 text-sm text-slate-600 xl:pt-1">
@@ -309,7 +308,10 @@ export default function ResumeReviewPage() {
                       locationLabel: detailsQuery.data?.location,
                     })
                   }>
-                  {detailsQuery.data.location}
+                  {getFilterLabel(
+                    LOCATIONS,
+                    detailsQuery.data.location as LocationFilter,
+                  )}
                 </button>
               </div>
               <div className="flex items-center pt-2 text-sm text-slate-600 xl:pt-1">
@@ -325,7 +327,10 @@ export default function ResumeReviewPage() {
                       experienceLabel: detailsQuery.data?.experience,
                     })
                   }>
-                  {detailsQuery.data.experience}
+                  {getFilterLabel(
+                    EXPERIENCES,
+                    detailsQuery.data.experience as ExperienceFilter,
+                  )}
                 </button>
               </div>
               <div className="flex items-center pt-2 text-sm text-slate-600 xl:pt-1">
diff --git a/apps/portal/src/pages/resumes/browse.tsx b/apps/portal/src/pages/resumes/browse.tsx
index 2c20a27e..e09972f4 100644
--- a/apps/portal/src/pages/resumes/browse.tsx
+++ b/apps/portal/src/pages/resumes/browse.tsx
@@ -27,6 +27,7 @@ import type { Filter, FilterId, Shortcut } from '~/utils/resumes/resumeFilters';
 import {
   BROWSE_TABS_VALUES,
   EXPERIENCES,
+  getFilterLabel,
   INITIAL_FILTER_STATE,
   isInitialFilterState,
   LOCATIONS,
@@ -557,10 +558,7 @@ export default function ResumeHomePage() {
                 <div>
                   <DropdownMenu
                     align="end"
-                    label={
-                      SORT_OPTIONS.find(({ value }) => value === sortOrder)
-                        ?.label
-                    }>
+                    label={getFilterLabel(SORT_OPTIONS, sortOrder)}>
                     {SORT_OPTIONS.map(({ label, value }) => (
                       <DropdownMenu.Item
                         key={value}
diff --git a/apps/portal/src/utils/resumes/resumeFilters.ts b/apps/portal/src/utils/resumes/resumeFilters.ts
index a87a384c..31ab5a3f 100644
--- a/apps/portal/src/utils/resumes/resumeFilters.ts
+++ b/apps/portal/src/utils/resumes/resumeFilters.ts
@@ -51,12 +51,6 @@ export const BROWSE_TABS_VALUES = {
   STARRED: 'starred',
 };
 
-// Export const SORT_OPTIONS: Record<string, SortOrder> = {
-//   LATEST: 'latest',
-//   POPULAR: 'popular',
-//   TOPCOMMENTS: 'topComments',
-// };
-
 export const SORT_OPTIONS: Array<FilterOption<SortOrder>> = [
   { label: 'Latest', value: 'latest' },
   { label: 'Popular', value: 'popular' },
@@ -149,3 +143,10 @@ export const isInitialFilterState = (filters: FilterState) =>
       filters[filter as FilterId].includes(value),
     );
   });
+
+export const getFilterLabel = (
+  filters: Array<
+    FilterOption<ExperienceFilter | LocationFilter | RoleFilter | SortOrder>
+  >,
+  filterValue: ExperienceFilter | LocationFilter | RoleFilter | SortOrder,
+) => filters.find(({ value }) => value === filterValue)?.label ?? filterValue;