From cc462ab6ab0d1cfd38d2cde148c54b694e524414 Mon Sep 17 00:00:00 2001
From: Su Yin <53945359+tnsyn@users.noreply.github.com>
Date: Mon, 10 Oct 2022 14:09:01 +0800
Subject: [PATCH] [resumes][feat] Add sign in buttons on browse page (#350)

* [resumes][fix] Add gap between sections in resume list item

* [resumes][refactor] Abstract out sign in button

* [resumes][feat] Add sign in buttons on browse page
---
 .../src/components/resumes/SignInButton.tsx   | 24 ++++++++++
 .../resumes/browse/ResumeListItem.tsx         |  2 +-
 .../resumes/browse/ResumeListItems.tsx        | 22 ++++-----
 .../resumes/comments/CommentsList.tsx         | 20 +++++++-
 .../resumes/comments/CommentsListButton.tsx   | 48 -------------------
 apps/portal/src/pages/resumes/index.tsx       | 35 ++++++++++----
 6 files changed, 80 insertions(+), 71 deletions(-)
 create mode 100644 apps/portal/src/components/resumes/SignInButton.tsx
 delete mode 100644 apps/portal/src/components/resumes/comments/CommentsListButton.tsx

diff --git a/apps/portal/src/components/resumes/SignInButton.tsx b/apps/portal/src/components/resumes/SignInButton.tsx
new file mode 100644
index 00000000..8718e588
--- /dev/null
+++ b/apps/portal/src/components/resumes/SignInButton.tsx
@@ -0,0 +1,24 @@
+import { signIn } from 'next-auth/react';
+
+type Props = Readonly<{
+  text: string;
+}>;
+
+export default function SignInButton({ text }: Props) {
+  return (
+    <div className="flex justify-center pt-4">
+      <p>
+        <a
+          className="text-primary-800 hover:text-primary-500"
+          href="/api/auth/signin"
+          onClick={(event) => {
+            event.preventDefault();
+            signIn();
+          }}>
+          Sign in
+        </a>{' '}
+        {text}
+      </p>
+    </div>
+  );
+}
diff --git a/apps/portal/src/components/resumes/browse/ResumeListItem.tsx b/apps/portal/src/components/resumes/browse/ResumeListItem.tsx
index a76a503a..53c33e78 100644
--- a/apps/portal/src/components/resumes/browse/ResumeListItem.tsx
+++ b/apps/portal/src/components/resumes/browse/ResumeListItem.tsx
@@ -14,7 +14,7 @@ type Props = Readonly<{
 export default function BrowseListItem({ href, resumeInfo }: Props) {
   return (
     <Link href={href}>
-      <div className="grid grid-cols-8 border-b border-slate-200 p-4">
+      <div className="grid grid-cols-8 gap-4 border-b border-slate-200 p-4">
         <div className="col-span-4">
           {resumeInfo.title}
           <div className="mt-2 flex items-center justify-start text-xs text-indigo-500">
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/components/resumes/comments/CommentsList.tsx b/apps/portal/src/components/resumes/comments/CommentsList.tsx
index d40b500a..e3d9f532 100644
--- a/apps/portal/src/components/resumes/comments/CommentsList.tsx
+++ b/apps/portal/src/components/resumes/comments/CommentsList.tsx
@@ -1,11 +1,13 @@
+import { useSession } from 'next-auth/react';
 import { useState } from 'react';
 import { Tabs } from '@tih/ui';
+import { Button } from '@tih/ui';
 
 import { trpc } from '~/utils/trpc';
 
 import CommentListItems from './CommentListItems';
-import CommentsListButton from './CommentsListButton';
 import { COMMENTS_SECTIONS } from './constants';
+import SignInButton from '../SignInButton';
 
 type CommentsListProps = Readonly<{
   resumeId: string;
@@ -16,13 +18,27 @@ export default function CommentsList({
   resumeId,
   setShowCommentsForm,
 }: CommentsListProps) {
+  const { data: sessionData } = useSession();
   const [tab, setTab] = useState(COMMENTS_SECTIONS[0].value);
 
   const commentsQuery = trpc.useQuery(['resumes.reviews.list', { resumeId }]);
+  const renderButton = () => {
+    if (sessionData === null) {
+      return <SignInButton text="to join discussion" />;
+    }
+    return (
+      <Button
+        display="block"
+        label="Add your review"
+        variant="tertiary"
+        onClick={() => setShowCommentsForm(true)}
+      />
+    );
+  };
 
   return (
     <div className="space-y-3">
-      <CommentsListButton setShowCommentsForm={setShowCommentsForm} />
+      {renderButton()}
       <Tabs
         label="comments"
         tabs={COMMENTS_SECTIONS}
diff --git a/apps/portal/src/components/resumes/comments/CommentsListButton.tsx b/apps/portal/src/components/resumes/comments/CommentsListButton.tsx
deleted file mode 100644
index 3df23889..00000000
--- a/apps/portal/src/components/resumes/comments/CommentsListButton.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { signIn, useSession } from 'next-auth/react';
-import { Button } from '@tih/ui';
-
-type CommentsListButtonProps = {
-  setShowCommentsForm: (show: boolean) => void;
-};
-
-export default function CommentsListButton({
-  setShowCommentsForm,
-}: CommentsListButtonProps) {
-  const { data: session, status } = useSession();
-  const isSessionLoading = status === 'loading';
-
-  // Don't render anything
-  if (isSessionLoading) {
-    return null;
-  }
-
-  // Not signed in
-  if (session == null) {
-    return (
-      <div className="flex justify-center">
-        <p>
-          <a
-            className="text-primary-800 hover:text-primary-500"
-            href="/api/auth/signin"
-            onClick={(event) => {
-              event.preventDefault();
-              signIn();
-            }}>
-            Sign in
-          </a>{' '}
-          to join discussion
-        </p>
-      </div>
-    );
-  }
-
-  // Signed in. Return Add review button
-  return (
-    <Button
-      display="block"
-      label="Add your review"
-      variant="tertiary"
-      onClick={() => setShowCommentsForm(true)}
-    />
-  );
-}
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>