From 6bf1a60bbd19ecad48152037b294af0e80b6ee1d Mon Sep 17 00:00:00 2001
From: Keane Chan <e0425601@u.nus.edu>
Date: Sun, 23 Oct 2022 01:01:34 +0800
Subject: [PATCH] [resumes][feat] show pagination only when required

---
 .../components/resumes/ResumeReviewsTitle.tsx |  2 +-
 .../resumes/browse/ResumeListItems.tsx        | 13 +---
 apps/portal/src/pages/resumes/browse.tsx      | 68 +++++++++----------
 3 files changed, 36 insertions(+), 47 deletions(-)

diff --git a/apps/portal/src/components/resumes/ResumeReviewsTitle.tsx b/apps/portal/src/components/resumes/ResumeReviewsTitle.tsx
index 5e9cfda7..34c18c0a 100644
--- a/apps/portal/src/components/resumes/ResumeReviewsTitle.tsx
+++ b/apps/portal/src/components/resumes/ResumeReviewsTitle.tsx
@@ -3,7 +3,7 @@ import { Badge } from '@tih/ui';
 export default function ResumeReviewsTitle() {
   return (
     <div>
-      <h1 className="text-2xl font-bold">Resume Reviews</h1>
+      <h1 className="mb-1 text-2xl font-bold">Resume Reviews</h1>
       <Badge
         label="Check out reviewed resumes or look for resumes to review"
         variant="info"
diff --git a/apps/portal/src/components/resumes/browse/ResumeListItems.tsx b/apps/portal/src/components/resumes/browse/ResumeListItems.tsx
index 07f61770..e61d4369 100644
--- a/apps/portal/src/components/resumes/browse/ResumeListItems.tsx
+++ b/apps/portal/src/components/resumes/browse/ResumeListItems.tsx
@@ -1,23 +1,12 @@
-import { Spinner } from '@tih/ui';
-
 import ResumeListItem from './ResumeListItem';
 
 import type { Resume } from '~/types/resume';
 
 type Props = Readonly<{
-  isLoading: boolean;
   resumes: Array<Resume>;
 }>;
 
-export default function ResumeListItems({ isLoading, resumes }: Props) {
-  if (isLoading) {
-    return (
-      <div className="col-span-10 pt-4">
-        <Spinner display="block" size="lg" />
-      </div>
-    );
-  }
-
+export default function ResumeListItems({ resumes }: Props) {
   return (
     <ul role="list">
       {resumes.map((resumeObj: Resume) => (
diff --git a/apps/portal/src/pages/resumes/browse.tsx b/apps/portal/src/pages/resumes/browse.tsx
index 4182fd63..a094fb5b 100644
--- a/apps/portal/src/pages/resumes/browse.tsx
+++ b/apps/portal/src/pages/resumes/browse.tsx
@@ -44,6 +44,8 @@ import { trpc } from '~/utils/trpc';
 
 import type { FilterState } from '../../components/resumes/browse/resumeFilters';
 
+const STALE_TIME = 5 * 60 * 1000;
+const DEBOUNCE_DELAY = 800;
 const PAGE_LIMIT = 10;
 const filters: Array<Filter> = [
   {
@@ -122,14 +124,14 @@ export default function ResumeHomePage() {
         locationFilters: userFilters.location,
         numComments: userFilters.numComments,
         roleFilters: userFilters.role,
-        searchValue: useDebounceValue(searchValue, 800),
+        searchValue: useDebounceValue(searchValue, DEBOUNCE_DELAY),
         skip,
         sortOrder,
       },
     ],
     {
       enabled: tabsValue === BROWSE_TABS_VALUES.ALL,
-      staleTime: 5 * 60 * 1000,
+      staleTime: STALE_TIME,
     },
   );
   const starredResumesQuery = trpc.useQuery(
@@ -140,7 +142,7 @@ export default function ResumeHomePage() {
         locationFilters: userFilters.location,
         numComments: userFilters.numComments,
         roleFilters: userFilters.role,
-        searchValue: useDebounceValue(searchValue, 800),
+        searchValue: useDebounceValue(searchValue, DEBOUNCE_DELAY),
         skip,
         sortOrder,
       },
@@ -148,7 +150,7 @@ export default function ResumeHomePage() {
     {
       enabled: tabsValue === BROWSE_TABS_VALUES.STARRED,
       retry: false,
-      staleTime: 5 * 60 * 1000,
+      staleTime: STALE_TIME,
     },
   );
   const myResumesQuery = trpc.useQuery(
@@ -159,7 +161,7 @@ export default function ResumeHomePage() {
         locationFilters: userFilters.location,
         numComments: userFilters.numComments,
         roleFilters: userFilters.role,
-        searchValue: useDebounceValue(searchValue, 800),
+        searchValue: useDebounceValue(searchValue, DEBOUNCE_DELAY),
         skip,
         sortOrder,
       },
@@ -167,7 +169,7 @@ export default function ResumeHomePage() {
     {
       enabled: tabsValue === BROWSE_TABS_VALUES.MY,
       retry: false,
-      staleTime: 5 * 60 * 1000,
+      staleTime: STALE_TIME,
     },
   );
 
@@ -238,6 +240,11 @@ export default function ResumeHomePage() {
       : Math.floor(numRecords / PAGE_LIMIT) + 1;
   };
 
+  const isFetchingResumes =
+    allResumesQuery.isFetching ||
+    starredResumesQuery.isFetching ||
+    myResumesQuery.isFetching;
+
   return (
     <>
       <Head>
@@ -271,7 +278,7 @@ export default function ResumeHomePage() {
                 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-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">
                     <h2 className="text-lg font-medium text-gray-900">
                       Shortcuts
@@ -362,20 +369,20 @@ export default function ResumeHomePage() {
         </Transition.Root>
       </div>
 
-      <main className="h-[calc(100vh-4rem)] flex-1 overflow-y-auto">
-        <div className="ml-4 py-4">
+      <main className="h-[calc(100vh-4rem)] flex-1 overflow-y-scroll">
+        <div className="ml-8 py-4">
           <ResumeReviewsTitle />
         </div>
 
         <div className="mx-8 mt-4 flex justify-start">
           <div className="hidden w-1/6 pt-2 lg:block">
-            <h3 className="text-md mb-4 font-medium tracking-tight text-gray-900">
-              Shortcuts:
+            <h3 className="text-md font-medium tracking-tight text-gray-900">
+              Shortcuts
             </h3>
             <div className="w-100 pt-4 sm:pr-0 md:pr-4">
               <form>
                 <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">
                   {SHORTCUTS.map((shortcut) => (
                     <li key={shortcut.name}>
@@ -387,8 +394,8 @@ export default function ResumeHomePage() {
                     </li>
                   ))}
                 </ul>
-                <h3 className="text-md my-4 font-medium tracking-tight text-gray-900">
-                  Explore these filters:
+                <h3 className="text-md font-medium tracking-tight text-gray-900">
+                  Explore these filters
                 </h3>
                 {filters.map((filter) => (
                   <Disclosure
@@ -529,9 +536,7 @@ export default function ResumeHomePage() {
               </div>
             </div>
             <div className="mb-6">
-              {allResumesQuery.isLoading ||
-              starredResumesQuery.isLoading ||
-              myResumesQuery.isLoading ? (
+              {isFetchingResumes ? (
                 <div className="w-full pt-4">
                   {' '}
                   <Spinner display="block" size="lg" />{' '}
@@ -553,23 +558,18 @@ export default function ResumeHomePage() {
                 </div>
               ) : (
                 <>
-                  <ResumeListItems
-                    isLoading={
-                      allResumesQuery.isFetching ||
-                      starredResumesQuery.isFetching ||
-                      myResumesQuery.isFetching
-                    }
-                    resumes={getTabResumes()}
-                  />
-                  <div className="my-4 flex justify-center">
-                    <Pagination
-                      current={currentPage}
-                      end={getTabTotalPages()}
-                      label="pagination"
-                      start={1}
-                      onSelect={(page) => setCurrentPage(page)}
-                    />
-                  </div>
+                  <ResumeListItems resumes={getTabResumes()} />
+                  {getTabTotalPages() > 1 && (
+                    <div className="my-4 flex justify-center">
+                      <Pagination
+                        current={currentPage}
+                        end={getTabTotalPages()}
+                        label="pagination"
+                        start={1}
+                        onSelect={(page) => setCurrentPage(page)}
+                      />
+                    </div>
+                  )}
                 </>
               )}
             </div>