[resumes][feat] clickable button from review info tags

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

@@ -21,9 +21,25 @@ import ResumeCommentsList from '~/components/resumes/comments/ResumeCommentsList
 import ResumePdf from '~/components/resumes/ResumePdf';
 import ResumeExpandableText from '~/components/resumes/shared/ResumeExpandableText';
 
+import type {
+  FilterOption,
+  LocationFilter,
+} from '~/utils/resumes/resumeFilters';
+import {
+  BROWSE_TABS_VALUES,
+  EXPERIENCES,
+  INITIAL_FILTER_STATE,
+  LOCATIONS,
+  ROLES,
+  SORT_OPTIONS,
+} from '~/utils/resumes/resumeFilters';
 import { trpc } from '~/utils/trpc';
 
 import SubmitResumeForm from './submit';
+import type {
+  ExperienceFilter,
+  RoleFilter,
+} from '../../utils/resumes/resumeFilters';
 
 export default function ResumeReviewPage() {
   const ErrorPage = (
@@ -57,7 +73,8 @@ export default function ResumeReviewPage() {
     },
   });
   const userIsOwner =
-    session?.user?.id != null && session.user.id === detailsQuery.data?.userId;
+    session?.user?.id !== undefined &&
+    session.user.id === detailsQuery.data?.userId;
 
   const [isEditMode, setIsEditMode] = useState(false);
   const [showCommentsForm, setShowCommentsForm] = useState(false);
@@ -79,6 +96,46 @@ export default function ResumeReviewPage() {
     }
   };
 
+  const onInfoTagClick = ({
+    locationLabel,
+    experienceLabel,
+    roleLabel,
+  }: {
+    experienceLabel?: string;
+    locationLabel?: string;
+    roleLabel?: string;
+  }) => {
+    const getFilterValue = (
+      label: string,
+      filterOptions: Array<
+        FilterOption<ExperienceFilter | LocationFilter | RoleFilter>
+      >,
+    ) => filterOptions.find((option) => option.label === label)?.value;
+
+    router.push({
+      pathname: '/resumes/browse',
+      query: {
+        currentPage: JSON.stringify(1),
+        searchValue: JSON.stringify(''),
+        shortcutSelected: JSON.stringify('all'),
+        sortOrder: JSON.stringify(SORT_OPTIONS.LATEST),
+        tabsValue: JSON.stringify(BROWSE_TABS_VALUES.ALL),
+        userFilters: JSON.stringify({
+          ...INITIAL_FILTER_STATE,
+          ...(locationLabel && {
+            location: [getFilterValue(locationLabel, LOCATIONS)],
+          }),
+          ...(roleLabel && {
+            role: [getFilterValue(roleLabel, ROLES)],
+          }),
+          ...(experienceLabel && {
+            experience: [getFilterValue(experienceLabel, EXPERIENCES)],
+          }),
+        }),
+      },
+    });
+  };
+
   const onEditButtonClick = () => {
     setIsEditMode(true);
   };
@@ -199,21 +256,48 @@ export default function ResumeReviewPage() {
                   aria-hidden="true"
                   className="mr-1.5 h-5 w-5 flex-shrink-0 text-indigo-400"
                 />
+                <button
+                  className="hover:text-primary-800 underline"
+                  type="button"
+                  onClick={() =>
+                    onInfoTagClick({
+                      roleLabel: detailsQuery.data?.role,
+                    })
+                  }>
                   {detailsQuery.data.role}
+                </button>
               </div>
               <div className="flex items-center pt-2 text-sm text-slate-600 xl:pt-1">
                 <MapPinIcon
                   aria-hidden="true"
                   className="mr-1.5 h-5 w-5 flex-shrink-0 text-indigo-400"
                 />
+                <button
+                  className="hover:text-primary-800 underline"
+                  type="button"
+                  onClick={() =>
+                    onInfoTagClick({
+                      locationLabel: detailsQuery.data?.location,
+                    })
+                  }>
                   {detailsQuery.data.location}
+                </button>
               </div>
               <div className="flex items-center pt-2 text-sm text-slate-600 xl:pt-1">
                 <AcademicCapIcon
                   aria-hidden="true"
                   className="mr-1.5 h-5 w-5 flex-shrink-0 text-indigo-400"
                 />
+                <button
+                  className="hover:text-primary-800 underline"
+                  type="button"
+                  onClick={() =>
+                    onInfoTagClick({
+                      experienceLabel: detailsQuery.data?.experience,
+                    })
+                  }>
                   {detailsQuery.data.experience}
+                </button>
               </div>
               <div className="flex items-center pt-2 text-sm text-slate-600 xl:pt-1">
                 <CalendarIcon

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

@@ -20,11 +20,10 @@ import {
 } from '@tih/ui';
 
 import ResumeFilterPill from '~/components/resumes/browse/ResumeFilterPill';
-import type {
+import ResumeListItems from '~/components/resumes/browse/ResumeListItems';
-  Filter,
+import ResumeSignInButton from '~/components/resumes/shared/ResumeSignInButton';
-  FilterId,
+
-  Shortcut,
+import type { Filter, FilterId, Shortcut } from '~/utils/resumes/resumeFilters';
-} from '~/components/resumes/browse/resumeFilters';
 import {
   BROWSE_TABS_VALUES,
   EXPERIENCES,
@@ -34,15 +33,12 @@ import {
   ROLES,
   SHORTCUTS,
   SORT_OPTIONS,
-} from '~/components/resumes/browse/resumeFilters';
+} from '~/utils/resumes/resumeFilters';
-import ResumeListItems from '~/components/resumes/browse/ResumeListItems';
-import ResumeSignInButton from '~/components/resumes/shared/ResumeSignInButton';
-
 import useDebounceValue from '~/utils/resumes/useDebounceValue';
 import useSearchParams from '~/utils/resumes/useSearchParams';
 import { trpc } from '~/utils/trpc';
 
-import type { FilterState } from '../../components/resumes/browse/resumeFilters';
+import type { FilterState } from '../../utils/resumes/resumeFilters';
 
 const STALE_TIME = 5 * 60 * 1000;
 const DEBOUNCE_DELAY = 800;
@@ -108,7 +104,7 @@ export default function ResumeHomePage() {
   );
   const [sortOrder, setSortOrder, isSortOrderInit] = useSearchParams(
     'sortOrder',
-    'latest',
+    SORT_OPTIONS.LATEST,
   );
   const [searchValue, setSearchValue, isSearchValueInit] = useSearchParams(
     'searchValue',
@@ -573,7 +569,7 @@ export default function ResumeHomePage() {
                         key={key}
                         isSelected={sortOrder === key}
                         label={value}
-                        onClick={() => setSortOrder(key)}></DropdownMenu.Item>
+                        onClick={() => setSortOrder(value)}></DropdownMenu.Item>
                     ))}
                   </DropdownMenu>
                 </div>

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

@@ -19,14 +19,10 @@ import {
   TextInput,
 } from '@tih/ui';
 
-import {
-  EXPERIENCES,
-  LOCATIONS,
-  ROLES,
-} from '~/components/resumes/browse/resumeFilters';
 import SubmissionGuidelines from '~/components/resumes/submit-form/SubmissionGuidelines';
 
 import { RESUME_STORAGE_KEY } from '~/constants/file-storage-keys';
+import { EXPERIENCES, LOCATIONS, ROLES } from '~/utils/resumes/resumeFilters';
 import { trpc } from '~/utils/trpc';
 
 const FILE_SIZE_LIMIT_MB = 3;

apps/portal/src/utils/resumes/resumeFilters.ts

@@ -4,7 +4,7 @@ export type CustomFilter = {
   numComments: number;
 };
 
-type RoleFilter =
+export type RoleFilter =
   | 'Android Engineer'
   | 'Backend Engineer'
   | 'DevOps Engineer'
@@ -12,7 +12,7 @@ type RoleFilter =
   | 'Full-Stack Engineer'
   | 'iOS Engineer';
 
-type ExperienceFilter =
+export type ExperienceFilter =
   | 'Entry Level (0 - 2 years)'
   | 'Freshman'
   | 'Junior'
@@ -21,7 +21,7 @@ type ExperienceFilter =
   | 'Senior'
   | 'Sophomore';
 
-type LocationFilter = 'India' | 'Singapore' | 'United States';
+export type LocationFilter = 'India' | 'Singapore' | 'United States';
 
 export type FilterValue = ExperienceFilter | LocationFilter | RoleFilter;
 
@@ -54,10 +54,10 @@ export const BROWSE_TABS_VALUES = {
   STARRED: 'starred',
 };
 
-export const SORT_OPTIONS: Record<string, string> = {
+export const SORT_OPTIONS: Record<string, SortOrder> = {
-  latest: 'Latest',
+  LATEST: 'latest',
-  popular: 'Popular',
+  POPULAR: 'popular',
-  topComments: 'Most Comments',
+  TOPCOMMENTS: 'topComments',
 };
 
 export const ROLES: Array<FilterOption<RoleFilter>> = [