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 (
-
+
- {numPages > 1 && (
-
-
setPageNumber(page)}
- />
-
- )}
+
+
setPageNumber(page)}
+ />
+
);
}
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)}
- {resumeInfo.experience}
+ {getFilterLabel(
+ EXPERIENCES,
+ resumeInfo.experience as ExperienceFilter,
+ )}
@@ -64,7 +79,9 @@ export default function ResumeListItem({ href, resumeInfo }: Props) {
addSuffix: true,
})} by ${resumeInfo.user}`}
- {resumeInfo.location}
+
+ {getFilterLabel(LOCATIONS, resumeInfo.location as LocationFilter)}
+
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)}
@@ -309,7 +308,10 @@ export default function ResumeReviewPage() {
locationLabel: detailsQuery.data?.location,
})
}>
- {detailsQuery.data.location}
+ {getFilterLabel(
+ LOCATIONS,
+ detailsQuery.data.location as LocationFilter,
+ )}
@@ -325,7 +327,10 @@ export default function ResumeReviewPage() {
experienceLabel: detailsQuery.data?.experience,
})
}>
- {detailsQuery.data.experience}
+ {getFilterLabel(
+ EXPERIENCES,
+ detailsQuery.data.experience as ExperienceFilter,
+ )}
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() {
value === sortOrder)
- ?.label
- }>
+ label={getFilterLabel(SORT_OPTIONS, sortOrder)}>
{SORT_OPTIONS.map(({ label, value }) => (
= {
-// LATEST: 'latest',
-// POPULAR: 'popular',
-// TOPCOMMENTS: 'topComments',
-// };
-
export const SORT_OPTIONS: Array> = [
{ 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
+ >,
+ filterValue: ExperienceFilter | LocationFilter | RoleFilter | SortOrder,
+) => filters.find(({ value }) => value === filterValue)?.label ?? filterValue;