From c41669ee0adae77114898a6822e328e084929951 Mon Sep 17 00:00:00 2001
From: Terence Ho <>
Date: Fri, 7 Oct 2022 14:11:22 +0800
Subject: [PATCH] [resumes][refactor] Add check for user session in comments

---
 .../resumes/comments/CommentsForm.tsx         |  7 ++-
 .../resumes/comments/CommentsList.tsx         | 14 ++----
 .../resumes/comments/CommentsListButton.tsx   | 48 +++++++++++++++++++
 3 files changed, 58 insertions(+), 11 deletions(-)
 create mode 100644 apps/portal/src/components/resumes/comments/CommentsListButton.tsx

diff --git a/apps/portal/src/components/resumes/comments/CommentsForm.tsx b/apps/portal/src/components/resumes/comments/CommentsForm.tsx
index da8f7c59..98ff8d82 100644
--- a/apps/portal/src/components/resumes/comments/CommentsForm.tsx
+++ b/apps/portal/src/components/resumes/comments/CommentsForm.tsx
@@ -65,8 +65,11 @@ export default function CommentsForm({
   };
 
   return (
-    <>
+    <div className="h-[calc(100vh-13rem)] overflow-y-scroll">
       <h2 className="text-xl font-semibold text-gray-800">Add your review</h2>
+      <p className="text-gray-800">
+        Please fill in at least one section to submit your review
+      </p>
 
       <form
         className="w-full space-y-8 divide-y divide-gray-200"
@@ -155,6 +158,6 @@ export default function CommentsForm({
         }}>
         <div>Note that your review will not be saved!</div>
       </Dialog>
-    </>
+    </div>
   );
 }
diff --git a/apps/portal/src/components/resumes/comments/CommentsList.tsx b/apps/portal/src/components/resumes/comments/CommentsList.tsx
index 924a5011..0b1d2d35 100644
--- a/apps/portal/src/components/resumes/comments/CommentsList.tsx
+++ b/apps/portal/src/components/resumes/comments/CommentsList.tsx
@@ -1,8 +1,9 @@
 import { useState } from 'react';
-import { Button, Tabs } from '@tih/ui';
+import { Tabs } from '@tih/ui';
 
 import { trpc } from '~/utils/trpc';
 
+import CommentsListButton from './CommentsListButton';
 import { COMMENTS_SECTIONS } from './constants';
 
 type CommentsListProps = Readonly<{
@@ -23,13 +24,8 @@ export default function CommentsList({
   /* eslint-enable no-console */
 
   return (
-    <>
-      <Button
-        display="block"
-        label="Add your review"
-        variant="tertiary"
-        onClick={() => setShowCommentsForm(true)}
-      />
+    <div className="space-y-3">
+      <CommentsListButton setShowCommentsForm={setShowCommentsForm} />
       <Tabs
         label="comments"
         tabs={COMMENTS_SECTIONS}
@@ -37,6 +33,6 @@ export default function CommentsList({
         onChange={(value) => setTab(value)}
       />
       {/* TODO: Add comments lists */}
-    </>
+    </div>
   );
 }
diff --git a/apps/portal/src/components/resumes/comments/CommentsListButton.tsx b/apps/portal/src/components/resumes/comments/CommentsListButton.tsx
new file mode 100644
index 00000000..3df23889
--- /dev/null
+++ b/apps/portal/src/components/resumes/comments/CommentsListButton.tsx
@@ -0,0 +1,48 @@
+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)}
+    />
+  );
+}