Skip to content

Commit 6bf1a60

Browse files
keanecjykeanecjy
committed
[resumes][feat] show pagination only when required
1 parent ce18560 commit 6bf1a60

File tree

3 files changed

+36
-47
lines changed

3 files changed

+36
-47
lines changed

‎apps/portal/src/components/resumes/ResumeReviewsTitle.tsx

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

‎apps/portal/src/components/resumes/browse/ResumeListItems.tsx

+1-12
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,12 @@
1-
import { Spinner } from '@tih/ui';
2-
31
import ResumeListItem from './ResumeListItem';
42

53
import type { Resume } from '~/types/resume';
64

75
type Props = Readonly<{
8-
isLoading: boolean;
96
resumes: Array<Resume>;
107
}>;
118

12-
export default function ResumeListItems({ isLoading, resumes }: Props) {
13-
if (isLoading) {
14-
return (
15-
<div className="col-span-10 pt-4">
16-
<Spinner display="block" size="lg" />
17-
</div>
18-
);
19-
}
20-
9+
export default function ResumeListItems({ resumes }: Props) {
2110
return (
2211
<ul role="list">
2312
{resumes.map((resumeObj: Resume) => (

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

+34-34
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,8 @@ import { trpc } from '~/utils/trpc';
4444

4545
import type { FilterState } from '../../components/resumes/browse/resumeFilters';
4646

47+
const STALE_TIME = 5 * 60 * 1000;
48+
const DEBOUNCE_DELAY = 800;
4749
const PAGE_LIMIT = 10;
4850
const filters: Array<Filter> = [
4951
{
@@ -122,14 +124,14 @@ export default function ResumeHomePage() {
122124
locationFilters: userFilters.location,
123125
numComments: userFilters.numComments,
124126
roleFilters: userFilters.role,
125-
searchValue: useDebounceValue(searchValue, 800),
127+
searchValue: useDebounceValue(searchValue, DEBOUNCE_DELAY),
126128
skip,
127129
sortOrder,
128130
},
129131
],
130132
{
131133
enabled: tabsValue === BROWSE_TABS_VALUES.ALL,
132-
staleTime: 5 * 60 * 1000,
134+
staleTime: STALE_TIME,
133135
},
134136
);
135137
const starredResumesQuery = trpc.useQuery(
@@ -140,15 +142,15 @@ export default function ResumeHomePage() {
140142
locationFilters: userFilters.location,
141143
numComments: userFilters.numComments,
142144
roleFilters: userFilters.role,
143-
searchValue: useDebounceValue(searchValue, 800),
145+
searchValue: useDebounceValue(searchValue, DEBOUNCE_DELAY),
144146
skip,
145147
sortOrder,
146148
},
147149
],
148150
{
149151
enabled: tabsValue === BROWSE_TABS_VALUES.STARRED,
150152
retry: false,
151-
staleTime: 5 * 60 * 1000,
153+
staleTime: STALE_TIME,
152154
},
153155
);
154156
const myResumesQuery = trpc.useQuery(
@@ -159,15 +161,15 @@ export default function ResumeHomePage() {
159161
locationFilters: userFilters.location,
160162
numComments: userFilters.numComments,
161163
roleFilters: userFilters.role,
162-
searchValue: useDebounceValue(searchValue, 800),
164+
searchValue: useDebounceValue(searchValue, DEBOUNCE_DELAY),
163165
skip,
164166
sortOrder,
165167
},
166168
],
167169
{
168170
enabled: tabsValue === BROWSE_TABS_VALUES.MY,
169171
retry: false,
170-
staleTime: 5 * 60 * 1000,
172+
staleTime: STALE_TIME,
171173
},
172174
);
173175

@@ -238,6 +240,11 @@ export default function ResumeHomePage() {
238240
: Math.floor(numRecords / PAGE_LIMIT) + 1;
239241
};
240242

243+
const isFetchingResumes =
244+
allResumesQuery.isFetching ||
245+
starredResumesQuery.isFetching ||
246+
myResumesQuery.isFetching;
247+
241248
return (
242249
<>
243250
<Head>
@@ -271,7 +278,7 @@ export default function ResumeHomePage() {
271278
leave="transition ease-in-out duration-300 transform"
272279
leaveFrom="translate-x-0"
273280
leaveTo="translate-x-full">
274-
<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">
281+
<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">
275282
<div className="flex items-center justify-between px-4">
276283
<h2 className="text-lg font-medium text-gray-900">
277284
Shortcuts
@@ -362,20 +369,20 @@ export default function ResumeHomePage() {
362369
</Transition.Root>
363370
</div>
364371

365-
<main className="h-[calc(100vh-4rem)] flex-1 overflow-y-auto">
366-
<div className="ml-4 py-4">
372+
<main className="h-[calc(100vh-4rem)] flex-1 overflow-y-scroll">
373+
<div className="ml-8 py-4">
367374
<ResumeReviewsTitle />
368375
</div>
369376

370377
<div className="mx-8 mt-4 flex justify-start">
371378
<div className="hidden w-1/6 pt-2 lg:block">
372-
<h3 className="text-md mb-4 font-medium tracking-tight text-gray-900">
373-
Shortcuts:
379+
<h3 className="text-md font-medium tracking-tight text-gray-900">
380+
Shortcuts
374381
</h3>
375382
<div className="w-100 pt-4 sm:pr-0 md:pr-4">
376383
<form>
377384
<ul
378-
className="flex flex-wrap justify-start gap-4 pb-6 text-sm font-medium text-gray-900"
385+
className="flex w-11/12 flex-wrap justify-start gap-2 pb-6 text-sm font-medium text-gray-900"
379386
role="list">
380387
{SHORTCUTS.map((shortcut) => (
381388
<li key={shortcut.name}>
@@ -387,8 +394,8 @@ export default function ResumeHomePage() {
387394
</li>
388395
))}
389396
</ul>
390-
<h3 className="text-md my-4 font-medium tracking-tight text-gray-900">
391-
Explore these filters:
397+
<h3 className="text-md font-medium tracking-tight text-gray-900">
398+
Explore these filters
392399
</h3>
393400
{filters.map((filter) => (
394401
<Disclosure
@@ -529,9 +536,7 @@ export default function ResumeHomePage() {
529536
</div>
530537
</div>
531538
<div className="mb-6">
532-
{allResumesQuery.isLoading ||
533-
starredResumesQuery.isLoading ||
534-
myResumesQuery.isLoading ? (
539+
{isFetchingResumes ? (
535540
<div className="w-full pt-4">
536541
{' '}
537542
<Spinner display="block" size="lg" />{' '}
@@ -553,23 +558,18 @@ export default function ResumeHomePage() {
553558
</div>
554559
) : (
555560
<>
556-
<ResumeListItems
557-
isLoading={
558-
allResumesQuery.isFetching ||
559-
starredResumesQuery.isFetching ||
560-
myResumesQuery.isFetching
561-
}
562-
resumes={getTabResumes()}
563-
/>
564-
<div className="my-4 flex justify-center">
565-
<Pagination
566-
current={currentPage}
567-
end={getTabTotalPages()}
568-
label="pagination"
569-
start={1}
570-
onSelect={(page) => setCurrentPage(page)}
571-
/>
572-
</div>
561+
<ResumeListItems resumes={getTabResumes()} />
562+
{getTabTotalPages() > 1 && (
563+
<div className="my-4 flex justify-center">
564+
<Pagination
565+
current={currentPage}
566+
end={getTabTotalPages()}
567+
label="pagination"
568+
start={1}
569+
onSelect={(page) => setCurrentPage(page)}
570+
/>
571+
</div>
572+
)}
573573
</>
574574
)}
575575
</div>

0 commit comments

Comments
 (0)