From 283333e1ee197c470473046989203a46d70211d9 Mon Sep 17 00:00:00 2001
From: Wu Peirong <wupeirong294@gmail.com>
Date: Thu, 20 Oct 2022 19:26:26 +0800
Subject: [PATCH] [resumes][fix] browse tabs updates on tab shift

---
 .../resumes/browse/ResumeListItem.tsx         |  4 +-
 .../resumes/comments/ResumeCommentsForm.tsx   |  3 +
 apps/portal/src/pages/resumes/[resumeId].tsx  |  9 +++
 apps/portal/src/pages/resumes/browse.tsx      | 62 +++++++++----------
 4 files changed, 44 insertions(+), 34 deletions(-)

diff --git a/apps/portal/src/components/resumes/browse/ResumeListItem.tsx b/apps/portal/src/components/resumes/browse/ResumeListItem.tsx
index 10689062..b0ef8b4d 100644
--- a/apps/portal/src/components/resumes/browse/ResumeListItem.tsx
+++ b/apps/portal/src/components/resumes/browse/ResumeListItem.tsx
@@ -41,7 +41,9 @@ export default function ResumeListItem({ href, resumeInfo }: Props) {
           <div className="mt-4 flex justify-start text-xs text-slate-500">
             <div className="flex gap-2 pr-4">
               <ChatBubbleLeftIcon className="w-4" />
-              {resumeInfo.numComments} comments
+              {`${resumeInfo.numComments} comment${
+                resumeInfo.numComments > 0 ? 's' : ''
+              }`}
             </div>
             <div className="flex gap-2">
               {resumeInfo.isStarredByUser ? (
diff --git a/apps/portal/src/components/resumes/comments/ResumeCommentsForm.tsx b/apps/portal/src/components/resumes/comments/ResumeCommentsForm.tsx
index 31bade2f..584f88d0 100644
--- a/apps/portal/src/components/resumes/comments/ResumeCommentsForm.tsx
+++ b/apps/portal/src/components/resumes/comments/ResumeCommentsForm.tsx
@@ -47,6 +47,9 @@ export default function ResumeCommentsForm({
       onSuccess: () => {
         // New Comment added, invalidate query to trigger refetch
         trpcContext.invalidateQueries(['resumes.comments.list']);
+        trpcContext.invalidateQueries(['resumes.resume.findAll']);
+        trpcContext.invalidateQueries(['resumes.resume.user.findUserStarred']);
+        trpcContext.invalidateQueries(['resumes.resume.user.findUserCreated']);
       },
     },
   );
diff --git a/apps/portal/src/pages/resumes/[resumeId].tsx b/apps/portal/src/pages/resumes/[resumeId].tsx
index 002be9b6..4c66576e 100644
--- a/apps/portal/src/pages/resumes/[resumeId].tsx
+++ b/apps/portal/src/pages/resumes/[resumeId].tsx
@@ -42,11 +42,17 @@ export default function ResumeReviewPage() {
   const starMutation = trpc.useMutation('resumes.resume.star', {
     onSuccess() {
       utils.invalidateQueries(['resumes.resume.findOne']);
+      utils.invalidateQueries(['resumes.resume.findAll']);
+      utils.invalidateQueries(['resumes.resume.user.findUserStarred']);
+      utils.invalidateQueries(['resumes.resume.user.findUserCreated']);
     },
   });
   const unstarMutation = trpc.useMutation('resumes.resume.unstar', {
     onSuccess() {
       utils.invalidateQueries(['resumes.resume.findOne']);
+      utils.invalidateQueries(['resumes.resume.findAll']);
+      utils.invalidateQueries(['resumes.resume.user.findUserStarred']);
+      utils.invalidateQueries(['resumes.resume.user.findUserCreated']);
     },
   });
   const userIsOwner =
@@ -89,6 +95,9 @@ export default function ResumeReviewPage() {
         }}
         onClose={() => {
           utils.invalidateQueries(['resumes.resume.findOne']);
+          utils.invalidateQueries(['resumes.resume.findAll']);
+          utils.invalidateQueries(['resumes.resume.user.findUserStarred']);
+          utils.invalidateQueries(['resumes.resume.user.findUserCreated']);
           setIsEditMode(false);
         }}
       />
diff --git a/apps/portal/src/pages/resumes/browse.tsx b/apps/portal/src/pages/resumes/browse.tsx
index 3968d8a5..81948432 100644
--- a/apps/portal/src/pages/resumes/browse.tsx
+++ b/apps/portal/src/pages/resumes/browse.tsx
@@ -35,8 +35,6 @@ import ResumeSignInButton from '~/components/resumes/shared/ResumeSignInButton';
 
 import { trpc } from '~/utils/trpc';
 
-import type { Resume } from '~/types/resume';
-
 const filters: Array<Filter> = [
   {
     id: 'role',
@@ -63,11 +61,9 @@ export default function ResumeHomePage() {
   const [searchValue, setSearchValue] = useState('');
   const [userFilters, setUserFilters] = useState(INITIAL_FILTER_STATE);
   const [shortcutSelected, setShortcutSelected] = useState('All');
-  const [resumes, setResumes] = useState<Array<Resume>>([]);
   const [renderSignInButton, setRenderSignInButton] = useState(false);
   const [signInButtonText, setSignInButtonText] = useState('');
   const [currentPage, setCurrentPage] = useState(1);
-  const [totalPages, setTotalPages] = useState(1);
 
   const PAGE_LIMIT = 10;
   const skip = (currentPage - 1) * PAGE_LIMIT;
@@ -90,13 +86,7 @@ export default function ResumeHomePage() {
     ],
     {
       enabled: tabsValue === BROWSE_TABS_VALUES.ALL,
-      onSuccess: (data) => {
-        setTotalPages(
-          data.totalRecords % PAGE_LIMIT === 0
-            ? data.totalRecords / PAGE_LIMIT
-            : Math.floor(data.totalRecords / PAGE_LIMIT) + 1,
-        );
-        setResumes(data.mappedResumeData);
+      onSuccess: () => {
         setRenderSignInButton(false);
       },
       staleTime: 5 * 60 * 1000,
@@ -117,18 +107,9 @@ export default function ResumeHomePage() {
     {
       enabled: tabsValue === BROWSE_TABS_VALUES.STARRED,
       onError: () => {
-        setResumes([]);
         setRenderSignInButton(true);
         setSignInButtonText('to view starred resumes');
       },
-      onSuccess: (data) => {
-        setTotalPages(
-          data.totalRecords % PAGE_LIMIT === 0
-            ? data.totalRecords / PAGE_LIMIT
-            : Math.floor(data.totalRecords / PAGE_LIMIT) + 1,
-        );
-        setResumes(data.mappedResumeData);
-      },
       retry: false,
       staleTime: 5 * 60 * 1000,
     },
@@ -148,18 +129,9 @@ export default function ResumeHomePage() {
     {
       enabled: tabsValue === BROWSE_TABS_VALUES.MY,
       onError: () => {
-        setResumes([]);
         setRenderSignInButton(true);
         setSignInButtonText('to view your submitted resumes');
       },
-      onSuccess: (data) => {
-        setTotalPages(
-          data.totalRecords % PAGE_LIMIT === 0
-            ? data.totalRecords / PAGE_LIMIT
-            : Math.floor(data.totalRecords / PAGE_LIMIT) + 1,
-        );
-        setResumes(data.mappedResumeData);
-      },
       retry: false,
       staleTime: 5 * 60 * 1000,
     },
@@ -208,6 +180,30 @@ export default function ResumeHomePage() {
     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;
+  };
+
   return (
     <>
       <Head>
@@ -277,7 +273,7 @@ export default function ResumeHomePage() {
                     </div>
                     <div>
                       <button
-                        className="rounded-md bg-indigo-500 py-1 px-3 text-sm font-medium text-white"
+                        className="rounded-md bg-indigo-500 py-2 px-3 text-sm font-medium text-white"
                         type="button"
                         onClick={onSubmitResume}>
                         Submit Resume
@@ -374,7 +370,7 @@ export default function ResumeHomePage() {
                 {renderSignInButton && (
                   <ResumeSignInButton text={signInButtonText} />
                 )}
-                {totalPages === 0 && (
+                {getTabResumes().length === 0 && (
                   <div className="mt-4">Nothing to see here.</div>
                 )}
                 <ResumeListItems
@@ -383,12 +379,12 @@ export default function ResumeHomePage() {
                     starredResumesQuery.isFetching ||
                     myResumesQuery.isFetching
                   }
-                  resumes={resumes}
+                  resumes={getTabResumes()}
                 />
                 <div className="my-4 flex justify-center">
                   <Pagination
                     current={currentPage}
-                    end={totalPages}
+                    end={getTabTotalPages()}
                     label="pagination"
                     start={1}
                     onSelect={(page) => setCurrentPage(page)}