From 728665ce545ab34395ceae0b50f703b4c2861d4a Mon Sep 17 00:00:00 2001
From: Tan Su Yin <e0425292@u.nus.edu>
Date: Mon, 10 Oct 2022 13:59:54 +0800
Subject: [PATCH] [resumes][feat] Add sign in buttons on browse page

---
 .../resumes/browse/ResumeListItems.tsx        | 22 ++++++------
 apps/portal/src/pages/resumes/index.tsx       | 35 ++++++++++++++-----
 2 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/apps/portal/src/components/resumes/browse/ResumeListItems.tsx b/apps/portal/src/components/resumes/browse/ResumeListItems.tsx
index 9e1203a5..5e834665 100644
--- a/apps/portal/src/components/resumes/browse/ResumeListItems.tsx
+++ b/apps/portal/src/components/resumes/browse/ResumeListItems.tsx
@@ -19,17 +19,15 @@ export default function ResumeListItems({ isLoading, resumes }: Props) {
   }
 
   return (
-    <div className="col-span-10 pr-8">
-      <ul role="list">
-        {resumes.map((resumeObj: Resume) => (
-          <li key={resumeObj.id}>
-            <ResumseListItem
-              href={`resumes/${resumeObj.id}`}
-              resumeInfo={resumeObj}
-            />
-          </li>
-        ))}
-      </ul>
-    </div>
+    <ul role="list">
+      {resumes.map((resumeObj: Resume) => (
+        <li key={resumeObj.id}>
+          <ResumseListItem
+            href={`resumes/${resumeObj.id}`}
+            resumeInfo={resumeObj}
+          />
+        </li>
+      ))}
+    </ul>
   );
 }
diff --git a/apps/portal/src/pages/resumes/index.tsx b/apps/portal/src/pages/resumes/index.tsx
index fab32bfe..824298c8 100644
--- a/apps/portal/src/pages/resumes/index.tsx
+++ b/apps/portal/src/pages/resumes/index.tsx
@@ -23,6 +23,7 @@ import {
 import FilterPill from '~/components/resumes/browse/FilterPill';
 import ResumeListItems from '~/components/resumes/browse/ResumeListItems';
 import ResumeReviewsTitle from '~/components/resumes/ResumeReviewsTitle';
+import SignInButton from '~/components/resumes/SignInButton';
 
 import { trpc } from '~/utils/trpc';
 
@@ -52,29 +53,44 @@ export default function ResumeHomePage() {
   const [tabsValue, setTabsValue] = useState(BROWSE_TABS_VALUES.ALL);
   const [searchValue, setSearchValue] = useState('');
   const [resumes, setResumes] = useState<Array<Resume>>([]);
+  const [renderSignInButton, setRenderSignInButton] = useState(false);
+  const [signInButtonText, setSignInButtonText] = useState('');
 
   const allResumesQuery = trpc.useQuery(['resumes.resume.findAll'], {
     enabled: tabsValue === BROWSE_TABS_VALUES.ALL,
     onSuccess: (data) => {
       setResumes(data);
+      setRenderSignInButton(false);
     },
   });
   const starredResumesQuery = trpc.useQuery(
     ['resumes.resume.user.findUserStarred'],
     {
       enabled: tabsValue === BROWSE_TABS_VALUES.STARRED,
+      onError: () => {
+        setResumes([]);
+        setRenderSignInButton(true);
+        setSignInButtonText('to view starred resumes');
+      },
       onSuccess: (data) => {
         setResumes(data);
       },
+      retry: false,
     },
   );
   const myResumesQuery = trpc.useQuery(
     ['resumes.resume.user.findUserCreated'],
     {
       enabled: tabsValue === BROWSE_TABS_VALUES.MY,
+      onError: () => {
+        setResumes([]);
+        setRenderSignInButton(true);
+        setSignInButtonText('to view your submitted resumes');
+      },
       onSuccess: (data) => {
         setResumes(data);
       },
+      retry: false,
     },
   );
 
@@ -270,14 +286,17 @@ export default function ResumeHomePage() {
                   </form>
                 </div>
               </div>
-              <ResumeListItems
-                isLoading={
-                  allResumesQuery.isFetching ||
-                  starredResumesQuery.isFetching ||
-                  myResumesQuery.isFetching
-                }
-                resumes={resumes}
-              />
+              <div className="col-span-10 pr-8">
+                {renderSignInButton && <SignInButton text={signInButtonText} />}
+                <ResumeListItems
+                  isLoading={
+                    allResumesQuery.isFetching ||
+                    starredResumesQuery.isFetching ||
+                    myResumesQuery.isFetching
+                  }
+                  resumes={resumes}
+                />
+              </div>
             </div>
           </div>
         </div>