[resumes][feat] fetch comments from database (#320)

* [resumes][feat] Add resume-comments type

* [resumes][feat] Add resume-comments type

* [resumes][feat] Filter comments

* [resumes][feat] Add comments render

* [resumes][refactor] rename variables

* [resumes][refactor] update invalidateQueries

* [resumes][refactor] Use resumeId in [resumeId].tsx

* [resumes][fix] fix invalidateQuery

Co-authored-by: Terence Ho <>

apps/portal/src/components/resumes/comments/CommentsForm.tsx

@@ -39,17 +39,29 @@ export default function CommentsForm({
       skills: '',
     },
   });
-  const reviewCreateMutation = trpc.useMutation('resumes.reviews.user.create');
+
+  const trpcContext = trpc.useContext();
+  const reviewCreateMutation = trpc.useMutation('resumes.reviews.user.create', {
+    onSuccess: () => {
+      // New review added, invalidate query to trigger refetch
+      trpcContext.invalidateQueries(['resumes.reviews.list']);
+    },
+  });
 
   // TODO: Give a feedback to the user if the action succeeds/fails
   const onSubmit: SubmitHandler<IFormInput> = async (data) => {
-    await reviewCreateMutation.mutate({
-      resumeId,
-      ...data,
-    });
-
-    // Redirect back to comments section
-    setShowCommentsForm(false);
+    return await reviewCreateMutation.mutate(
+      {
+        resumeId,
+        ...data,
+      },
+      {
+        onSuccess: () => {
+          // Redirect back to comments section
+          setShowCommentsForm(false);
+        },
+      },
+    );
   };
 
   const onCancel = () => {

apps/portal/src/components/resumes/comments/CommentsList.tsx

@@ -1,8 +1,10 @@
+import { useSession } from 'next-auth/react';
 import { useState } from 'react';
 import { Tabs } from '@tih/ui';
 
 import { trpc } from '~/utils/trpc';
 
+import Comment from './comment/Comment';
 import CommentsListButton from './CommentsListButton';
 import { COMMENTS_SECTIONS } from './constants';
 
@@ -16,12 +18,15 @@ export default function CommentsList({
   setShowCommentsForm,
 }: CommentsListProps) {
   const [tab, setTab] = useState(COMMENTS_SECTIONS[0].value);
+  const { data: session } = useSession();
 
-  const commentsQuery = trpc.useQuery(['resumes.reviews.list', { resumeId }]);
+  // Fetch the most updated comments to render
+  const commentsQuery = trpc.useQuery([
+    'resumes.reviews.list',
+    { resumeId, section: tab },
+  ]);
 
-  /* eslint-disable no-console */
-  console.log(commentsQuery.data);
-  /* eslint-enable no-console */
+  // TODO: Add loading prompt
 
   return (
     <div className="space-y-3">
@@ -32,7 +37,18 @@ export default function CommentsList({
         value={tab}
         onChange={(value) => setTab(value)}
       />
-      {/* TODO: Add comments lists */}
+
+      <div className="m-2 flow-root h-[calc(100vh-20rem)] w-full flex-col space-y-3 overflow-y-scroll">
+        {commentsQuery.data?.map((comment) => {
+          return (
+            <Comment
+              key={comment.id}
+              comment={comment}
+              userId={session?.user?.id}
+            />
+          );
+        })}
+      </div>
     </div>
   );
 }

apps/portal/src/components/resumes/comments/comment/Comment.tsx

@@ -0,0 +1,18 @@
+import CommentBody from './CommentBody';
+import CommentCard from './CommentCard';
+
+import type { ResumeComment } from '~/types/resume-comments';
+
+type CommentProps = {
+  comment: ResumeComment;
+  userId?: string;
+};
+
+export default function Comment({ comment, userId }: CommentProps) {
+  const isCommentOwner = userId === comment.user.userId;
+  return (
+    <CommentCard isCommentOwner={isCommentOwner}>
+      <CommentBody comment={comment} isCommentOwner={isCommentOwner} />
+    </CommentCard>
+  );
+}

apps/portal/src/components/resumes/comments/comment/CommentBody.tsx

@@ -0,0 +1,64 @@
+import {
+  ArrowDownCircleIcon,
+  ArrowUpCircleIcon,
+} from '@heroicons/react/20/solid';
+import { FaceSmileIcon } from '@heroicons/react/24/outline';
+
+import type { ResumeComment } from '~/types/resume-comments';
+
+type CommentBodyProps = {
+  comment: ResumeComment;
+  isCommentOwner?: boolean;
+};
+
+export default function CommentBody({
+  comment,
+  isCommentOwner,
+}: CommentBodyProps) {
+  return (
+    <div className="flex w-full flex-row space-x-2 p-1 align-top">
+      {comment.user.image ? (
+        <img
+          alt={comment.user.name ?? 'Reviewer'}
+          className="mt-1 h-8 w-8 rounded-full"
+          src={comment.user.image!}
+        />
+      ) : (
+        <FaceSmileIcon className="h-8 w-8 rounded-full" />
+      )}
+
+      <div className="flex w-full flex-col space-y-1">
+        {/* Name and creation time */}
+        <div className="flex flex-row justify-between">
+          <div className="font-medium">
+            {comment.user.name ?? 'Reviewer ABC'}
+          </div>
+          <div className="text-xs text-gray-600">
+            {comment.createdAt.toLocaleString('en-US', {
+              dateStyle: 'medium',
+              timeStyle: 'short',
+            })}
+          </div>
+        </div>
+
+        {/* Description */}
+        <div className="text-sm">{comment.description}</div>
+
+        {/* Upvote and edit */}
+        <div className="flex flex-row space-x-1 pt-1 align-middle">
+          {/* TODO: Implement upvote */}
+          <ArrowUpCircleIcon className="h-4 w-4 fill-gray-400" />
+          <div className="text-xs">{comment.numVotes}</div>
+          <ArrowDownCircleIcon className="h-4 w-4 fill-gray-400" />
+
+          {/* TODO: Implement edit */}
+          {isCommentOwner ? (
+            <div className="text-primary-800 hover:text-primary-400 px-1 text-xs">
+              Edit
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}

apps/portal/src/components/resumes/comments/comment/CommentCard.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+
+type CommentCardProps = {
+  children: ReactNode;
+  isCommentOwner?: boolean;
+};
+
+export default function CommentCard({
+  isCommentOwner,
+  children,
+}: CommentCardProps) {
+  // Used two different <div> to allow customisation of owner comments
+  return isCommentOwner ? (
+    <div className="border-primary-300 float-right w-3/4 rounded-md border-2 bg-white p-2 drop-shadow-md">
+      {children}
+    </div>
+  ) : (
+    <div className="border-primary-300 float-left w-3/4 rounded-md border-2 bg-white p-2 drop-shadow-md">
+      {children}
+    </div>
+  );
+}