algorithm/tech-interview-handbook
1
0
Fork 0
mirror of https://github.com/yangshun/tech-interview-handbook.git synced 2025-07-18 20:31:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

[resumes][feat] show pagination only when required

Browse Source
This commit is contained in:
Keane Chan
2022-10-23 01:01:34 +08:00
parent ce185607db
commit 6bf1a60bbd
3 changed files with 36 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/portal/src/components/resumes/ResumeReviewsTitle.tsx
View File

@ -3,7 +3,7 @@ import { Badge } from '@tih/ui';
export default function ResumeReviewsTitle() { export default function ResumeReviewsTitle() {
return ( return (
<div> <div>
<h1 className="text-2xl font-bold">Resume Reviews</h1> <h1 className="mb-1 text-2xl font-bold">Resume Reviews</h1>
<Badge <Badge
label="Check out reviewed resumes or look for resumes to review" label="Check out reviewed resumes or look for resumes to review"
variant="info" variant="info"

13
apps/portal/src/components/resumes/browse/ResumeListItems.tsx
View File

@ -1,23 +1,12 @@
import { Spinner } from '@tih/ui';
import ResumeListItem from './ResumeListItem'; import ResumeListItem from './ResumeListItem';
import type { Resume } from '~/types/resume'; import type { Resume } from '~/types/resume';
type Props = Readonly<{ type Props = Readonly<{
isLoading: boolean;
resumes: Array<Resume>; resumes: Array<Resume>;
}>; }>;
export default function ResumeListItems({ isLoading, resumes }: Props) { export default function ResumeListItems({ resumes }: Props) {
if (isLoading) {
return (
<div className="col-span-10 pt-4">
<Spinner display="block" size="lg" />
</div>
);
}
return ( return (
<ul role="list"> <ul role="list">
{resumes.map((resumeObj: Resume) => ( {resumes.map((resumeObj: Resume) => (

68
apps/portal/src/pages/resumes/browse.tsx
View File

@ -44,6 +44,8 @@ import { trpc } from '~/utils/trpc';
import type { FilterState } from '../../components/resumes/browse/resumeFilters'; import type { FilterState } from '../../components/resumes/browse/resumeFilters';
const STALE_TIME = 5 * 60 * 1000;
const DEBOUNCE_DELAY = 800;
const PAGE_LIMIT = 10; const PAGE_LIMIT = 10;
const filters: Array<Filter> = [ const filters: Array<Filter> = [
{ {
@ -122,14 +124,14 @@ export default function ResumeHomePage() {
locationFilters: userFilters.location, locationFilters: userFilters.location,
numComments: userFilters.numComments, numComments: userFilters.numComments,
roleFilters: userFilters.role, roleFilters: userFilters.role,
searchValue: useDebounceValue(searchValue, 800), searchValue: useDebounceValue(searchValue, DEBOUNCE_DELAY),
skip, skip,
sortOrder, sortOrder,
}, },
], ],
{ {
enabled: tabsValue === BROWSE_TABS_VALUES.ALL, enabled: tabsValue === BROWSE_TABS_VALUES.ALL,
staleTime: 5 * 60 * 1000, staleTime: STALE_TIME,
}, },
); );
const starredResumesQuery = trpc.useQuery( const starredResumesQuery = trpc.useQuery(
@ -140,7 +142,7 @@ export default function ResumeHomePage() {
locationFilters: userFilters.location, locationFilters: userFilters.location,
numComments: userFilters.numComments, numComments: userFilters.numComments,
roleFilters: userFilters.role, roleFilters: userFilters.role,
searchValue: useDebounceValue(searchValue, 800), searchValue: useDebounceValue(searchValue, DEBOUNCE_DELAY),
skip, skip,
sortOrder, sortOrder,
}, },
@ -148,7 +150,7 @@ export default function ResumeHomePage() {
{ {
enabled: tabsValue === BROWSE_TABS_VALUES.STARRED, enabled: tabsValue === BROWSE_TABS_VALUES.STARRED,
retry: false, retry: false,
staleTime: 5 * 60 * 1000, staleTime: STALE_TIME,
}, },
); );
const myResumesQuery = trpc.useQuery( const myResumesQuery = trpc.useQuery(
@ -159,7 +161,7 @@ export default function ResumeHomePage() {
locationFilters: userFilters.location, locationFilters: userFilters.location,
numComments: userFilters.numComments, numComments: userFilters.numComments,
roleFilters: userFilters.role, roleFilters: userFilters.role,
searchValue: useDebounceValue(searchValue, 800), searchValue: useDebounceValue(searchValue, DEBOUNCE_DELAY),
skip, skip,
sortOrder, sortOrder,
}, },
@ -167,7 +169,7 @@ export default function ResumeHomePage() {
{ {
enabled: tabsValue === BROWSE_TABS_VALUES.MY, enabled: tabsValue === BROWSE_TABS_VALUES.MY,
retry: false, retry: false,
staleTime: 5 * 60 * 1000, staleTime: STALE_TIME,
}, },
); );
@ -238,6 +240,11 @@ export default function ResumeHomePage() {
: Math.floor(numRecords / PAGE_LIMIT) + 1; : Math.floor(numRecords / PAGE_LIMIT) + 1;
}; };
const isFetchingResumes =
allResumesQuery.isFetching ||
starredResumesQuery.isFetching ||
myResumesQuery.isFetching;
return ( return (
<> <>
<Head> <Head>
@ -271,7 +278,7 @@ export default function ResumeHomePage() {
leave="transition ease-in-out duration-300 transform" leave="transition ease-in-out duration-300 transform"
leaveFrom="translate-x-0" leaveFrom="translate-x-0"
leaveTo="translate-x-full"> leaveTo="translate-x-full">
<Dialog.Panel className="relative ml-auto flex h-full w-full max-w-xs flex-col overflow-y-auto bg-white py-4 pb-12 shadow-xl"> <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"> <div className="flex items-center justify-between px-4">
<h2 className="text-lg font-medium text-gray-900"> <h2 className="text-lg font-medium text-gray-900">
Shortcuts Shortcuts
@ -362,20 +369,20 @@ export default function ResumeHomePage() {
</Transition.Root> </Transition.Root>
</div> </div>
<main className="h-[calc(100vh-4rem)] flex-1 overflow-y-auto"> <main className="h-[calc(100vh-4rem)] flex-1 overflow-y-scroll">
<div className="ml-4 py-4"> <div className="ml-8 py-4">
<ResumeReviewsTitle /> <ResumeReviewsTitle />
</div> </div>
<div className="mx-8 mt-4 flex justify-start"> <div className="mx-8 mt-4 flex justify-start">
<div className="hidden w-1/6 pt-2 lg:block"> <div className="hidden w-1/6 pt-2 lg:block">
<h3 className="text-md mb-4 font-medium tracking-tight text-gray-900"> <h3 className="text-md font-medium tracking-tight text-gray-900">
Shortcuts: Shortcuts
</h3> </h3>
<div className="w-100 pt-4 sm:pr-0 md:pr-4"> <div className="w-100 pt-4 sm:pr-0 md:pr-4">
<form> <form>
<ul <ul
className="flex flex-wrap justify-start gap-4 pb-6 text-sm font-medium text-gray-900" className="flex w-11/12 flex-wrap justify-start gap-2 pb-6 text-sm font-medium text-gray-900"
role="list"> role="list">
{SHORTCUTS.map((shortcut) => ( {SHORTCUTS.map((shortcut) => (
<li key={shortcut.name}> <li key={shortcut.name}>
@ -387,8 +394,8 @@ export default function ResumeHomePage() {
</li> </li>
))} ))}
</ul> </ul>
<h3 className="text-md my-4 font-medium tracking-tight text-gray-900"> <h3 className="text-md font-medium tracking-tight text-gray-900">
Explore these filters: Explore these filters
</h3> </h3>
{filters.map((filter) => ( {filters.map((filter) => (
<Disclosure <Disclosure
@ -529,9 +536,7 @@ export default function ResumeHomePage() {
</div> </div>
</div> </div>
<div className="mb-6"> <div className="mb-6">
{allResumesQuery.isLoading || {isFetchingResumes ? (
starredResumesQuery.isLoading ||
myResumesQuery.isLoading ? (
<div className="w-full pt-4"> <div className="w-full pt-4">
{' '} {' '}
<Spinner display="block" size="lg" />{' '} <Spinner display="block" size="lg" />{' '}
@ -553,23 +558,18 @@ export default function ResumeHomePage() {
</div> </div>
) : ( ) : (
<> <>
<ResumeListItems <ResumeListItems resumes={getTabResumes()} />
isLoading={ {getTabTotalPages() > 1 && (
allResumesQuery.isFetching || <div className="my-4 flex justify-center">
starredResumesQuery.isFetching || <Pagination
myResumesQuery.isFetching current={currentPage}
} end={getTabTotalPages()}
resumes={getTabResumes()} label="pagination"
/> start={1}
<div className="my-4 flex justify-center"> onSelect={(page) => setCurrentPage(page)}
<Pagination />
current={currentPage} </div>
end={getTabTotalPages()} )}
label="pagination"
start={1}
onSelect={(page) => setCurrentPage(page)}
/>
</div>
</> </>
)} )}
</div> </div>