[questions][feat] view, post question comments

apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx

@@ -34,6 +34,7 @@ export default function QuestionPage() {
   const {
     register: comRegister,
     handleSubmit: handleCommentSubmit,
+    reset: resetComment,
     formState: { isDirty: isCommentDirty, isValid: isCommentValid },
   } = useForm<QuestionCommentData>({ mode: 'onChange' });
   const commentRegister = useFormRegister(comRegister);
@@ -45,7 +46,24 @@ export default function QuestionPage() {
     { id: questionId as string },
   ]);
 
-  const comment = SAMPLE_QUESTION_COMMENT;
+  const utils = trpc.useContext();
+
+  const { data: comments } = trpc.useQuery([
+    'questions.questions.comments.getQuestionComments',
+    { questionId: questionId as string },
+  ]);
+
+  const { mutate: addComment } = trpc.useMutation(
+    'questions.questions.comments.create',
+    {
+      onSuccess: () => {
+        utils.invalidateQueries(
+          'questions.questions.comments.getQuestionComments',
+        );
+      },
+    },
+  );
+
   const handleBackNavigation = () => {
     router.back();
   };
@@ -56,8 +74,11 @@ export default function QuestionPage() {
   };
 
   const handleSubmitComment = (data: QuestionCommentData) => {
-    // eslint-disable-next-line no-console
-    console.log(data);
+    addComment({
+      content: data.commentContent,
+      questionId: questionId as string,
+    });
+    resetComment();
   };
 
   if (!question) {
@@ -134,11 +155,14 @@ export default function QuestionPage() {
                 </div>
               </form>
 
-              {Array.from({ length: question.numComments }).map((_, index) => (
+              {(comments ?? []).map((comment) => (
                 <CommentListItem
-                  // eslint-disable-next-line react/no-array-index-key
-                  key={index}
-                  {...comment}
+                  key={comment.id}
+                  authorImageUrl={SAMPLE_QUESTION_COMMENT.authorImageUrl}
+                  authorName={comment.user}
+                  content={comment.content}
+                  createdAt={comment.createdAt}
+                  upvoteCount={0}
                 />
               ))}
             </Collapsible>

apps/portal/src/server/router/questions-question-comment-router.ts

@@ -12,56 +12,57 @@ export const questionsQuestionCommentRouter = createProtectedRouter()
       questionId: z.string(),
     }),
     async resolve({ ctx, input }) {
-      const questionCommentsData = await ctx.prisma.questionsQuestionComment.findMany({
-        include: {
-        user: {
-          select: {
-            name: true,
+      const questionCommentsData =
+        await ctx.prisma.questionsQuestionComment.findMany({
+          include: {
+            user: {
+              select: {
+                name: true,
+              },
+            },
+            votes: true,
           },
-        },
-        votes: true,
-        },
-        orderBy: {
-          createdAt: 'desc',
-        },
-        where: {
-          ...input,
-        },
-    });
-    return questionCommentsData.map((data) => {
-      const votes:number = data.votes.reduce(
-        (previousValue:number, currentValue) => {
-          let result:number = previousValue;
-
-          switch(currentValue.vote) {
-          case Vote.UPVOTE:
-            result += 1
-            break;
-          case Vote.DOWNVOTE:
-            result -= 1
-            break;
-          }
-          return result;
-        },
-        0
+          orderBy: {
+            createdAt: 'desc',
+          },
+          where: {
+            ...input,
+          },
+        });
+      return questionCommentsData.map((data) => {
+        const votes: number = data.votes.reduce(
+          (previousValue: number, currentValue) => {
+            let result: number = previousValue;
+
+            switch (currentValue.vote) {
+              case Vote.UPVOTE:
+                result += 1;
+                break;
+              case Vote.DOWNVOTE:
+                result -= 1;
+                break;
+            }
+            return result;
+          },
+          0,
         );
 
-      let userName = "";
+        let userName = '';
 
-      if (data.user) {
-        userName = data.user.name!;
-      }
+        if (data.user) {
+          userName = data.user.name!;
+        }
 
-      const questionComment: QuestionComment = {
-        content: data.content,
-        createdAt: data.createdAt,
-        id: data.id,
-        numVotes: votes,
-        user: userName,
-      };
-      return questionComment;
-    });
-    }
+        const questionComment: QuestionComment = {
+          content: data.content,
+          createdAt: data.createdAt,
+          id: data.id,
+          numVotes: votes,
+          user: userName,
+        };
+        return questionComment;
+      });
+    },
   })
   .mutation('create', {
     input: z.object({
@@ -87,11 +88,12 @@ export const questionsQuestionCommentRouter = createProtectedRouter()
     async resolve({ ctx, input }) {
       const userId = ctx.session?.user?.id;
 
-      const questionCommentToUpdate = await ctx.prisma.questionsQuestionComment.findUnique({
-        where: {
-          id: input.id,
-        },
-      });
+      const questionCommentToUpdate =
+        await ctx.prisma.questionsQuestionComment.findUnique({
+          where: {
+            id: input.id,
+          },
+        });
 
       if (questionCommentToUpdate?.id !== userId) {
         throw new TRPCError({
@@ -117,11 +119,12 @@ export const questionsQuestionCommentRouter = createProtectedRouter()
     async resolve({ ctx, input }) {
       const userId = ctx.session?.user?.id;
 
-      const questionCommentToDelete = await ctx.prisma.questionsQuestionComment.findUnique({
-        where: {
-          id: input.id,
-        },
-      });
+      const questionCommentToDelete =
+        await ctx.prisma.questionsQuestionComment.findUnique({
+          where: {
+            id: input.id,
+          },
+        });
 
       if (questionCommentToDelete?.id !== userId) {
         throw new TRPCError({
@@ -143,11 +146,11 @@ export const questionsQuestionCommentRouter = createProtectedRouter()
     }),
     async resolve({ ctx, input }) {
       const userId = ctx.session?.user?.id;
-      const {questionCommentId} = input
+      const { questionCommentId } = input;
 
       return await ctx.prisma.questionsQuestionCommentVote.findUnique({
         where: {
-          questionCommentId_userId : {questionCommentId,userId },
+          questionCommentId_userId: { questionCommentId, userId },
         },
       });
     },
@@ -175,13 +178,14 @@ export const questionsQuestionCommentRouter = createProtectedRouter()
     }),
     async resolve({ ctx, input }) {
       const userId = ctx.session?.user?.id;
-      const {id, vote} = input
+      const { id, vote } = input;
 
-      const voteToUpdate = await ctx.prisma.questionsQuestionCommentVote.findUnique({
-        where: {
-          id: input.id,
-        },
-      });
+      const voteToUpdate =
+        await ctx.prisma.questionsQuestionCommentVote.findUnique({
+          where: {
+            id: input.id,
+          },
+        });
 
       if (voteToUpdate?.id !== userId) {
         throw new TRPCError({
@@ -207,10 +211,12 @@ export const questionsQuestionCommentRouter = createProtectedRouter()
     async resolve({ ctx, input }) {
       const userId = ctx.session?.user?.id;
 
-      const voteToDelete = await ctx.prisma.questionsQuestionCommentVote.findUnique({
-        where: {
-          id: input.id,
-        },});
+      const voteToDelete =
+        await ctx.prisma.questionsQuestionCommentVote.findUnique({
+          where: {
+            id: input.id,
+          },
+        });
 
       if (voteToDelete?.id !== userId) {
         throw new TRPCError({
@@ -225,4 +231,4 @@ export const questionsQuestionCommentRouter = createProtectedRouter()
         },
       });
     },
-  });
+  });