[resumes][chore] move browse page to home (#453)
Keane Chan
2 years ago
committed by
GitHub
parent
766bee0e0c
commit
774acae664
@ -1,677 +0,0 @@
|
|||||||
import Head from 'next/head';
|
|
||||||
import Router, { useRouter } from 'next/router';
|
|
||||||
import { useSession } from 'next-auth/react';
|
|
||||||
import { Fragment, useEffect, useMemo, useState } from 'react';
|
|
||||||
import { Dialog, Disclosure, Transition } from '@headlessui/react';
|
|
||||||
import { FunnelIcon, MinusIcon, PlusIcon } from '@heroicons/react/20/solid';
|
|
||||||
import {
|
|
||||||
MagnifyingGlassIcon,
|
|
||||||
NewspaperIcon,
|
|
||||||
XMarkIcon,
|
|
||||||
} from '@heroicons/react/24/outline';
|
|
||||||
import {
|
|
||||||
Button,
|
|
||||||
CheckboxInput,
|
|
||||||
CheckboxList,
|
|
||||||
DropdownMenu,
|
|
||||||
Pagination,
|
|
||||||
Spinner,
|
|
||||||
Tabs,
|
|
||||||
TextInput,
|
|
||||||
} from '@tih/ui';
|
|
||||||
|
|
||||||
import ResumeFilterPill from '~/components/resumes/browse/ResumeFilterPill';
|
|
||||||
import ResumeListItems from '~/components/resumes/browse/ResumeListItems';
|
|
||||||
import ResumeSignInButton from '~/components/resumes/shared/ResumeSignInButton';
|
|
||||||
|
|
||||||
import type {
|
|
||||||
Filter,
|
|
||||||
FilterId,
|
|
||||||
FilterLabel,
|
|
||||||
Shortcut,
|
|
||||||
} from '~/utils/resumes/resumeFilters';
|
|
||||||
import {
|
|
||||||
BROWSE_TABS_VALUES,
|
|
||||||
EXPERIENCES,
|
|
||||||
getFilterLabel,
|
|
||||||
INITIAL_FILTER_STATE,
|
|
||||||
isInitialFilterState,
|
|
||||||
LOCATIONS,
|
|
||||||
ROLES,
|
|
||||||
SHORTCUTS,
|
|
||||||
SORT_OPTIONS,
|
|
||||||
} from '~/utils/resumes/resumeFilters';
|
|
||||||
import useDebounceValue from '~/utils/resumes/useDebounceValue';
|
|
||||||
import useSearchParams from '~/utils/resumes/useSearchParams';
|
|
||||||
import { trpc } from '~/utils/trpc';
|
|
||||||
|
|
||||||
import type { FilterState, SortOrder } from '../../utils/resumes/resumeFilters';
|
|
||||||
|
|
||||||
const STALE_TIME = 5 * 60 * 1000;
|
|
||||||
const DEBOUNCE_DELAY = 800;
|
|
||||||
const PAGE_LIMIT = 10;
|
|
||||||
const filters: Array<Filter> = [
|
|
||||||
{
|
|
||||||
id: 'role',
|
|
||||||
label: 'Role',
|
|
||||||
options: ROLES,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'experience',
|
|
||||||
label: 'Experience',
|
|
||||||
options: EXPERIENCES,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'location',
|
|
||||||
label: 'Location',
|
|
||||||
options: LOCATIONS,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const getLoggedOutText = (tabsValue: string) => {
|
|
||||||
switch (tabsValue) {
|
|
||||||
case BROWSE_TABS_VALUES.STARRED:
|
|
||||||
return 'to view starred resumes!';
|
|
||||||
case BROWSE_TABS_VALUES.MY:
|
|
||||||
return 'to view your submitted resumes!';
|
|
||||||
default:
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
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. Star one to see it here!';
|
|
||||||
case BROWSE_TABS_VALUES.MY:
|
|
||||||
return 'Upload a resume to see it here!';
|
|
||||||
default:
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function ResumeHomePage() {
|
|
||||||
const { data: sessionData } = useSession();
|
|
||||||
const router = useRouter();
|
|
||||||
const [tabsValue, setTabsValue, isTabsValueInit] = useSearchParams(
|
|
||||||
'tabsValue',
|
|
||||||
BROWSE_TABS_VALUES.ALL,
|
|
||||||
);
|
|
||||||
const [sortOrder, setSortOrder, isSortOrderInit] = useSearchParams<SortOrder>(
|
|
||||||
'sortOrder',
|
|
||||||
'latest',
|
|
||||||
);
|
|
||||||
const [searchValue, setSearchValue, isSearchValueInit] = useSearchParams(
|
|
||||||
'searchValue',
|
|
||||||
'',
|
|
||||||
);
|
|
||||||
const [shortcutSelected, setShortcutSelected, isShortcutInit] =
|
|
||||||
useSearchParams('shortcutSelected', 'All');
|
|
||||||
const [currentPage, setCurrentPage, isCurrentPageInit] = useSearchParams(
|
|
||||||
'currentPage',
|
|
||||||
1,
|
|
||||||
);
|
|
||||||
const [userFilters, setUserFilters, isUserFiltersInit] = useSearchParams(
|
|
||||||
'userFilters',
|
|
||||||
INITIAL_FILTER_STATE,
|
|
||||||
);
|
|
||||||
const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false);
|
|
||||||
|
|
||||||
const skip = (currentPage - 1) * PAGE_LIMIT;
|
|
||||||
const isSearchOptionsInit = useMemo(() => {
|
|
||||||
return (
|
|
||||||
isTabsValueInit &&
|
|
||||||
isSortOrderInit &&
|
|
||||||
isSearchValueInit &&
|
|
||||||
isShortcutInit &&
|
|
||||||
isCurrentPageInit &&
|
|
||||||
isUserFiltersInit
|
|
||||||
);
|
|
||||||
}, [
|
|
||||||
isTabsValueInit,
|
|
||||||
isSortOrderInit,
|
|
||||||
isSearchValueInit,
|
|
||||||
isShortcutInit,
|
|
||||||
isCurrentPageInit,
|
|
||||||
isUserFiltersInit,
|
|
||||||
]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setCurrentPage(1);
|
|
||||||
}, [userFilters, sortOrder, setCurrentPage, searchValue]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
// Router.replace used instead of router.replace to avoid
|
|
||||||
// the page reloading itself since the router.replace
|
|
||||||
// callback changes on every page load
|
|
||||||
if (!isSearchOptionsInit) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
Router.replace({
|
|
||||||
pathname: router.pathname,
|
|
||||||
query: {
|
|
||||||
currentPage: JSON.stringify(currentPage),
|
|
||||||
searchValue: JSON.stringify(searchValue),
|
|
||||||
shortcutSelected: JSON.stringify(shortcutSelected),
|
|
||||||
sortOrder: JSON.stringify(sortOrder),
|
|
||||||
tabsValue: JSON.stringify(tabsValue),
|
|
||||||
userFilters: JSON.stringify(userFilters),
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}, [
|
|
||||||
tabsValue,
|
|
||||||
sortOrder,
|
|
||||||
searchValue,
|
|
||||||
userFilters,
|
|
||||||
shortcutSelected,
|
|
||||||
currentPage,
|
|
||||||
router.pathname,
|
|
||||||
isSearchOptionsInit,
|
|
||||||
]);
|
|
||||||
|
|
||||||
const filterCountsQuery = trpc.useQuery(
|
|
||||||
['resumes.resume.getTotalFilterCounts'],
|
|
||||||
{
|
|
||||||
staleTime: STALE_TIME,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
const allResumesQuery = trpc.useQuery(
|
|
||||||
[
|
|
||||||
'resumes.resume.findAll',
|
|
||||||
{
|
|
||||||
experienceFilters: userFilters.experience,
|
|
||||||
locationFilters: userFilters.location,
|
|
||||||
numComments: userFilters.numComments,
|
|
||||||
roleFilters: userFilters.role,
|
|
||||||
searchValue: useDebounceValue(searchValue, DEBOUNCE_DELAY),
|
|
||||||
skip,
|
|
||||||
sortOrder,
|
|
||||||
take: PAGE_LIMIT,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
{
|
|
||||||
enabled: tabsValue === BROWSE_TABS_VALUES.ALL,
|
|
||||||
staleTime: STALE_TIME,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
const starredResumesQuery = trpc.useQuery(
|
|
||||||
[
|
|
||||||
'resumes.resume.user.findUserStarred',
|
|
||||||
{
|
|
||||||
experienceFilters: userFilters.experience,
|
|
||||||
locationFilters: userFilters.location,
|
|
||||||
numComments: userFilters.numComments,
|
|
||||||
roleFilters: userFilters.role,
|
|
||||||
searchValue: useDebounceValue(searchValue, DEBOUNCE_DELAY),
|
|
||||||
skip,
|
|
||||||
sortOrder,
|
|
||||||
take: PAGE_LIMIT,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
{
|
|
||||||
enabled: tabsValue === BROWSE_TABS_VALUES.STARRED,
|
|
||||||
retry: false,
|
|
||||||
staleTime: STALE_TIME,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
const myResumesQuery = trpc.useQuery(
|
|
||||||
[
|
|
||||||
'resumes.resume.user.findUserCreated',
|
|
||||||
{
|
|
||||||
experienceFilters: userFilters.experience,
|
|
||||||
locationFilters: userFilters.location,
|
|
||||||
numComments: userFilters.numComments,
|
|
||||||
roleFilters: userFilters.role,
|
|
||||||
searchValue: useDebounceValue(searchValue, DEBOUNCE_DELAY),
|
|
||||||
skip,
|
|
||||||
sortOrder,
|
|
||||||
take: PAGE_LIMIT,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
{
|
|
||||||
enabled: tabsValue === BROWSE_TABS_VALUES.MY,
|
|
||||||
retry: false,
|
|
||||||
staleTime: STALE_TIME,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
const getFilterCount = (filter: FilterLabel, value: string) => {
|
|
||||||
if (filterCountsQuery.isLoading) {
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
const filterCountsData = filterCountsQuery.data!;
|
|
||||||
return filterCountsData[filter][value];
|
|
||||||
};
|
|
||||||
|
|
||||||
const onSubmitResume = () => {
|
|
||||||
if (sessionData === null) {
|
|
||||||
router.push('/api/auth/signin');
|
|
||||||
} else {
|
|
||||||
router.push('/resumes/submit');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const onFilterCheckboxChange = (
|
|
||||||
isChecked: boolean,
|
|
||||||
filterSection: FilterId,
|
|
||||||
filterValue: string,
|
|
||||||
) => {
|
|
||||||
if (isChecked) {
|
|
||||||
setUserFilters({
|
|
||||||
...userFilters,
|
|
||||||
[filterSection]: [...userFilters[filterSection], filterValue],
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
setUserFilters({
|
|
||||||
...userFilters,
|
|
||||||
[filterSection]: userFilters[filterSection].filter(
|
|
||||||
(value) => value !== filterValue,
|
|
||||||
),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const onClearFilterClick = (filterSection: FilterId) => {
|
|
||||||
setUserFilters({
|
|
||||||
...userFilters,
|
|
||||||
[filterSection]: [],
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const onShortcutChange = ({
|
|
||||||
sortOrder: shortcutSortOrder,
|
|
||||||
filters: shortcutFilters,
|
|
||||||
name: shortcutName,
|
|
||||||
}: Shortcut) => {
|
|
||||||
setShortcutSelected(shortcutName);
|
|
||||||
setSortOrder(shortcutSortOrder);
|
|
||||||
setUserFilters(shortcutFilters);
|
|
||||||
};
|
|
||||||
|
|
||||||
const onTabChange = (tab: string) => {
|
|
||||||
setTabsValue(tab);
|
|
||||||
setCurrentPage(1);
|
|
||||||
};
|
|
||||||
|
|
||||||
const getTabQueryData = () => {
|
|
||||||
switch (tabsValue) {
|
|
||||||
case BROWSE_TABS_VALUES.ALL:
|
|
||||||
return allResumesQuery.data;
|
|
||||||
case BROWSE_TABS_VALUES.STARRED:
|
|
||||||
return starredResumesQuery.data;
|
|
||||||
case BROWSE_TABS_VALUES.MY:
|
|
||||||
return myResumesQuery.data;
|
|
||||||
default:
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const getTabResumes = () => {
|
|
||||||
return getTabQueryData()?.mappedResumeData ?? [];
|
|
||||||
};
|
|
||||||
|
|
||||||
const getTabTotalPages = () => {
|
|
||||||
const numRecords = getTabQueryData()?.totalRecords ?? 0;
|
|
||||||
return numRecords % PAGE_LIMIT === 0
|
|
||||||
? numRecords / PAGE_LIMIT
|
|
||||||
: Math.floor(numRecords / PAGE_LIMIT) + 1;
|
|
||||||
};
|
|
||||||
|
|
||||||
const isFetchingResumes =
|
|
||||||
allResumesQuery.isFetching ||
|
|
||||||
starredResumesQuery.isFetching ||
|
|
||||||
myResumesQuery.isFetching;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Head>
|
|
||||||
<title>Resume Review Portal</title>
|
|
||||||
</Head>
|
|
||||||
|
|
||||||
{/* Mobile Filters */}
|
|
||||||
<div>
|
|
||||||
<Transition.Root as={Fragment} show={mobileFiltersOpen}>
|
|
||||||
<Dialog
|
|
||||||
as="div"
|
|
||||||
className="relative z-40 lg:hidden"
|
|
||||||
onClose={setMobileFiltersOpen}>
|
|
||||||
<Transition.Child
|
|
||||||
as={Fragment}
|
|
||||||
enter="transition-opacity ease-linear duration-300"
|
|
||||||
enterFrom="opacity-0"
|
|
||||||
enterTo="opacity-100"
|
|
||||||
leave="transition-opacity ease-linear duration-300"
|
|
||||||
leaveFrom="opacity-100"
|
|
||||||
leaveTo="opacity-0">
|
|
||||||
<div className="fixed inset-0 bg-black bg-opacity-25" />
|
|
||||||
</Transition.Child>
|
|
||||||
|
|
||||||
<div className="fixed inset-0 z-40 flex">
|
|
||||||
<Transition.Child
|
|
||||||
as={Fragment}
|
|
||||||
enter="transition ease-in-out duration-300 transform"
|
|
||||||
enterFrom="translate-x-full"
|
|
||||||
enterTo="translate-x-0"
|
|
||||||
leave="transition ease-in-out duration-300 transform"
|
|
||||||
leaveFrom="translate-x-0"
|
|
||||||
leaveTo="translate-x-full">
|
|
||||||
<Dialog.Panel className="relative ml-auto flex h-full w-full max-w-xs flex-col overflow-y-scroll bg-white py-4 pb-12 shadow-xl">
|
|
||||||
<div className="flex items-center justify-between px-4">
|
|
||||||
<h2 className="text-lg font-medium text-slate-900">
|
|
||||||
Quick access
|
|
||||||
</h2>
|
|
||||||
<button
|
|
||||||
className="-mr-2 flex h-10 w-10 items-center justify-center rounded-md bg-white p-2 text-slate-400"
|
|
||||||
type="button"
|
|
||||||
onClick={() => setMobileFiltersOpen(false)}>
|
|
||||||
<span className="sr-only">Close menu</span>
|
|
||||||
<XMarkIcon aria-hidden="true" className="h-6 w-6" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form className="mt-4 border-t border-slate-200">
|
|
||||||
<ul
|
|
||||||
className="flex w-11/12 flex-wrap justify-start gap-2 px-4 py-4 font-medium text-slate-900"
|
|
||||||
role="list">
|
|
||||||
{SHORTCUTS.map((shortcut) => (
|
|
||||||
<li key={shortcut.name}>
|
|
||||||
<ResumeFilterPill
|
|
||||||
isSelected={shortcutSelected === shortcut.name}
|
|
||||||
title={shortcut.name}
|
|
||||||
onClick={() => onShortcutChange(shortcut)}
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
{filters.map((filter) => (
|
|
||||||
<Disclosure
|
|
||||||
key={filter.id}
|
|
||||||
as="div"
|
|
||||||
className="border-t border-slate-200 px-4 pt-6 pb-4">
|
|
||||||
{({ open }) => (
|
|
||||||
<>
|
|
||||||
<h3 className="-mx-2 -my-3 flow-root">
|
|
||||||
<Disclosure.Button className="flex w-full items-center justify-between bg-white px-2 py-3 text-slate-400 hover:text-slate-500">
|
|
||||||
<span className="font-medium text-slate-900">
|
|
||||||
{filter.label}
|
|
||||||
</span>
|
|
||||||
<span className="ml-6 flex items-center">
|
|
||||||
{open ? (
|
|
||||||
<MinusIcon
|
|
||||||
aria-hidden="true"
|
|
||||||
className="h-5 w-5"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<PlusIcon
|
|
||||||
aria-hidden="true"
|
|
||||||
className="h-5 w-5"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
</Disclosure.Button>
|
|
||||||
</h3>
|
|
||||||
<Disclosure.Panel className="space-y-4 pt-6">
|
|
||||||
<div className="space-y-3">
|
|
||||||
{filter.options.map((option) => (
|
|
||||||
<div
|
|
||||||
key={option.value}
|
|
||||||
className="[&>div>div:nth-child(1)>input]:text-primary-600 [&>div>div:nth-child(1)>input]:ring-primary-500 [&>div>div:nth-child(2)>label]:font-normal">
|
|
||||||
<CheckboxInput
|
|
||||||
label={`${option.label} (${getFilterCount(
|
|
||||||
filter.label,
|
|
||||||
option.label,
|
|
||||||
)})`}
|
|
||||||
value={userFilters[filter.id].includes(
|
|
||||||
option.value,
|
|
||||||
)}
|
|
||||||
onChange={(isChecked) =>
|
|
||||||
onFilterCheckboxChange(
|
|
||||||
isChecked,
|
|
||||||
filter.id,
|
|
||||||
option.value,
|
|
||||||
)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<p
|
|
||||||
className="cursor-pointer text-sm text-slate-500 underline"
|
|
||||||
onClick={() => onClearFilterClick(filter.id)}>
|
|
||||||
Clear
|
|
||||||
</p>
|
|
||||||
</Disclosure.Panel>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Disclosure>
|
|
||||||
))}
|
|
||||||
</form>
|
|
||||||
</Dialog.Panel>
|
|
||||||
</Transition.Child>
|
|
||||||
</div>
|
|
||||||
</Dialog>
|
|
||||||
</Transition.Root>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<main className="h-full flex-auto px-8 pb-4">
|
|
||||||
<div className="flex justify-start">
|
|
||||||
<div className="fixed top-0 bottom-0 mt-24 hidden w-64 overflow-auto lg:block">
|
|
||||||
{/* Quick Access Section */}
|
|
||||||
<h3 className="text-md font-medium tracking-tight text-gray-900">
|
|
||||||
Quick access
|
|
||||||
</h3>
|
|
||||||
<div className="w-100 pt-4 sm:pr-0 md:pr-4">
|
|
||||||
<form>
|
|
||||||
<ul
|
|
||||||
className="flex w-11/12 flex-wrap justify-start gap-2 pb-6 text-sm font-medium text-slate-900"
|
|
||||||
role="list">
|
|
||||||
{SHORTCUTS.map((shortcut) => (
|
|
||||||
<li key={shortcut.name}>
|
|
||||||
<ResumeFilterPill
|
|
||||||
isSelected={shortcutSelected === shortcut.name}
|
|
||||||
title={shortcut.name}
|
|
||||||
onClick={() => onShortcutChange(shortcut)}
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
{/* Filter Section */}
|
|
||||||
<h3 className="text-md font-medium tracking-tight text-slate-900">
|
|
||||||
Explore these filters
|
|
||||||
</h3>
|
|
||||||
{filters.map((filter) => (
|
|
||||||
<Disclosure
|
|
||||||
key={filter.id}
|
|
||||||
as="div"
|
|
||||||
className="border-b border-slate-200 pt-6 pb-4">
|
|
||||||
{({ open }) => (
|
|
||||||
<>
|
|
||||||
<h3 className="-my-3 flow-root">
|
|
||||||
<Disclosure.Button className="flex w-full items-center justify-between py-3 text-sm text-slate-400 hover:text-slate-500">
|
|
||||||
<span className="font-medium text-slate-900">
|
|
||||||
{filter.label}
|
|
||||||
</span>
|
|
||||||
<span className="ml-6 flex items-center">
|
|
||||||
{open ? (
|
|
||||||
<MinusIcon
|
|
||||||
aria-hidden="true"
|
|
||||||
className="h-5 w-5"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<PlusIcon
|
|
||||||
aria-hidden="true"
|
|
||||||
className="h-5 w-5"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
</Disclosure.Button>
|
|
||||||
</h3>
|
|
||||||
<Disclosure.Panel className="space-y-4 pt-4">
|
|
||||||
<CheckboxList
|
|
||||||
description=""
|
|
||||||
isLabelHidden={true}
|
|
||||||
label=""
|
|
||||||
orientation="vertical">
|
|
||||||
{filter.options.map((option) => (
|
|
||||||
<div
|
|
||||||
key={option.value}
|
|
||||||
className="[&>div>div:nth-child(1)>input]:text-primary-600 [&>div>div:nth-child(1)>input]:ring-primary-500 px-1 [&>div>div:nth-child(2)>label]:font-normal">
|
|
||||||
<CheckboxInput
|
|
||||||
label={`${option.label} (${getFilterCount(
|
|
||||||
filter.label,
|
|
||||||
option.label,
|
|
||||||
)})`}
|
|
||||||
value={userFilters[filter.id].includes(
|
|
||||||
option.value,
|
|
||||||
)}
|
|
||||||
onChange={(isChecked) =>
|
|
||||||
onFilterCheckboxChange(
|
|
||||||
isChecked,
|
|
||||||
filter.id,
|
|
||||||
option.value,
|
|
||||||
)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</CheckboxList>
|
|
||||||
<p
|
|
||||||
className="cursor-pointer text-sm text-slate-500 underline"
|
|
||||||
onClick={() => onClearFilterClick(filter.id)}>
|
|
||||||
Clear
|
|
||||||
</p>
|
|
||||||
</Disclosure.Panel>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Disclosure>
|
|
||||||
))}
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="relative lg:left-64 lg:w-[calc(100%-16rem)]">
|
|
||||||
<div className="lg:border-grey-200 sticky top-0 z-10 flex flex-wrap items-center justify-between pt-6 pb-2 lg:border-b">
|
|
||||||
<div className="border-grey-200 mb-4 flex w-full justify-between border-b pb-2 lg:mb-0 lg:w-auto lg:border-none xl:pb-0">
|
|
||||||
<div>
|
|
||||||
<Tabs
|
|
||||||
label="Resume Browse Tabs"
|
|
||||||
tabs={[
|
|
||||||
{
|
|
||||||
label: 'All Resumes',
|
|
||||||
value: BROWSE_TABS_VALUES.ALL,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Starred Resumes',
|
|
||||||
value: BROWSE_TABS_VALUES.STARRED,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'My Resumes',
|
|
||||||
value: BROWSE_TABS_VALUES.MY,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
value={tabsValue}
|
|
||||||
onChange={onTabChange}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-wrap items-center justify-start gap-4 lg:gap-6">
|
|
||||||
<div className="w-64">
|
|
||||||
<TextInput
|
|
||||||
isLabelHidden={true}
|
|
||||||
label="search"
|
|
||||||
placeholder="Search Resumes"
|
|
||||||
startAddOn={MagnifyingGlassIcon}
|
|
||||||
startAddOnType="icon"
|
|
||||||
type="text"
|
|
||||||
value={searchValue}
|
|
||||||
onChange={setSearchValue}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<DropdownMenu
|
|
||||||
align="end"
|
|
||||||
label={getFilterLabel(SORT_OPTIONS, sortOrder)}>
|
|
||||||
{SORT_OPTIONS.map(({ label, value }) => (
|
|
||||||
<DropdownMenu.Item
|
|
||||||
key={value}
|
|
||||||
isSelected={sortOrder === value}
|
|
||||||
label={label}
|
|
||||||
onClick={() => setSortOrder(value)}></DropdownMenu.Item>
|
|
||||||
))}
|
|
||||||
</DropdownMenu>
|
|
||||||
<Button
|
|
||||||
className="lg:hidden"
|
|
||||||
icon={FunnelIcon}
|
|
||||||
isLabelHidden={true}
|
|
||||||
label="Filters"
|
|
||||||
variant="tertiary"
|
|
||||||
onClick={() => setMobileFiltersOpen(true)}
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
className="whitespace-pre-wrap px-2 lg:block"
|
|
||||||
label="Submit Resume"
|
|
||||||
variant="primary"
|
|
||||||
onClick={onSubmitResume}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{isFetchingResumes ? (
|
|
||||||
<div className="w-full pt-4">
|
|
||||||
{' '}
|
|
||||||
<Spinner display="block" size="lg" />{' '}
|
|
||||||
</div>
|
|
||||||
) : sessionData === null && tabsValue !== BROWSE_TABS_VALUES.ALL ? (
|
|
||||||
<ResumeSignInButton
|
|
||||||
className="mt-8"
|
|
||||||
text={getLoggedOutText(tabsValue)}
|
|
||||||
/>
|
|
||||||
) : getTabResumes().length === 0 ? (
|
|
||||||
<div className="mt-24 flex flex-wrap justify-center">
|
|
||||||
<NewspaperIcon
|
|
||||||
className="mb-12 basis-full"
|
|
||||||
height={196}
|
|
||||||
width={196}
|
|
||||||
/>
|
|
||||||
{getEmptyDataText(tabsValue, searchValue, userFilters)}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="h-[calc(100vh-9rem)] pb-10 lg:h-[calc(100vh-6rem)]">
|
|
||||||
<div className="h-[85%] overflow-y-auto">
|
|
||||||
<div>
|
|
||||||
<ResumeListItems resumes={getTabResumes()} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex h-[15%] items-center justify-center">
|
|
||||||
{getTabTotalPages() > 1 && (
|
|
||||||
<div>
|
|
||||||
<Pagination
|
|
||||||
current={currentPage}
|
|
||||||
end={getTabTotalPages()}
|
|
||||||
label="pagination"
|
|
||||||
start={1}
|
|
||||||
onSelect={(page) => setCurrentPage(page)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
import Head from 'next/head';
|
||||||
|
|
||||||
|
import { CallToAction } from '~/components/resumes/landing/CallToAction';
|
||||||
|
import { Hero } from '~/components/resumes/landing/Hero';
|
||||||
|
import { PrimaryFeatures } from '~/components/resumes/landing/PrimaryFeatures';
|
||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Head>
|
||||||
|
<title>Resume Review Portal</title>
|
||||||
|
</Head>
|
||||||
|
|
||||||
|
<main className="h-full w-full overflow-y-auto">
|
||||||
|
<Hero />
|
||||||
|
<PrimaryFeatures />
|
||||||
|
<CallToAction />
|
||||||
|
</main>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in new issue