diff --git a/apps/portal/src/components/resumes/browse/resumeFilters.ts b/apps/portal/src/components/resumes/browse/resumeFilters.ts index 29d463a8..de40a371 100644 --- a/apps/portal/src/components/resumes/browse/resumeFilters.ts +++ b/apps/portal/src/components/resumes/browse/resumeFilters.ts @@ -139,3 +139,13 @@ export const SHORTCUTS: Array = [ sortOrder: 'latest', }, ]; + +export const isInitialFilterState = (filters: FilterState) => + Object.keys(filters).every((filter) => { + if (!['experience', 'location', 'role'].includes(filter)) { + return true; + } + return INITIAL_FILTER_STATE[filter as FilterId].every((value) => + filters[filter as FilterId].includes(value), + ); + }); diff --git a/apps/portal/src/pages/resumes/browse.tsx b/apps/portal/src/pages/resumes/browse.tsx index def47f95..0598b29c 100644 --- a/apps/portal/src/pages/resumes/browse.tsx +++ b/apps/portal/src/pages/resumes/browse.tsx @@ -4,7 +4,10 @@ import { useSession } from 'next-auth/react'; import { useEffect, useState } from 'react'; import { Disclosure } from '@headlessui/react'; import { MinusIcon, PlusIcon } from '@heroicons/react/20/solid'; -import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'; +import { + MagnifyingGlassIcon, + NewspaperIcon, +} from '@heroicons/react/24/outline'; import { CheckboxInput, CheckboxList, @@ -24,6 +27,7 @@ import { BROWSE_TABS_VALUES, EXPERIENCE, INITIAL_FILTER_STATE, + isInitialFilterState, LOCATION, ROLE, SHORTCUTS, @@ -36,6 +40,9 @@ import ResumeSignInButton from '~/components/resumes/shared/ResumeSignInButton'; import useDebounceValue from '~/utils/resumes/useDebounceValue'; import { trpc } from '~/utils/trpc'; +import type { FilterState } from '../../components/resumes/browse/resumeFilters'; + +const PAGE_LIMIT = 10; const filters: Array = [ { id: 'role', @@ -54,6 +61,29 @@ const filters: Array = [ }, ]; +const getEmptyDataText = ( + tabsValue: string, + searchValue: string, + userFilters: FilterState, +) => { + if (searchValue.length > 0) { + return 'Try tweaking your search text to see more resumes.'; + } + if (!isInitialFilterState(userFilters)) { + return 'Try tweaking your filters to see more resumes.'; + } + switch (tabsValue) { + case BROWSE_TABS_VALUES.ALL: + return 'Looks like SWEs are feeling lucky!'; + case BROWSE_TABS_VALUES.STARRED: + return 'You have not starred any resumes.\nStar one to see it here!'; + case BROWSE_TABS_VALUES.MY: + return 'Upload a resume to see it here!'; + default: + return null; + } +}; + export default function ResumeHomePage() { const { data: sessionData } = useSession(); const router = useRouter(); @@ -66,7 +96,6 @@ export default function ResumeHomePage() { const [signInButtonText, setSignInButtonText] = useState(''); const [currentPage, setCurrentPage] = useState(1); - const PAGE_LIMIT = 10; const skip = (currentPage - 1) * PAGE_LIMIT; useEffect(() => { @@ -374,26 +403,36 @@ export default function ResumeHomePage() { {renderSignInButton && ( )} - {getTabResumes().length === 0 && ( -
Nothing to see here.
+ {getTabResumes().length === 0 ? ( +
+ + {getEmptyDataText(tabsValue, searchValue, userFilters)} +
+ ) : ( + <> + +
+ setCurrentPage(page)} + /> +
+ )} - -
- setCurrentPage(page)} - /> -