[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,7 +12,8 @@ export const questionsQuestionCommentRouter = createProtectedRouter()
       questionId: z.string(),
     }),
     async resolve({ ctx, input }) {
-      const questionCommentsData = await ctx.prisma.questionsQuestionComment.findMany({
+      const questionCommentsData =
+        await ctx.prisma.questionsQuestionComment.findMany({
           include: {
             user: {
               select: {
@@ -35,18 +36,18 @@ export const questionsQuestionCommentRouter = createProtectedRouter()
 
             switch (currentValue.vote) {
               case Vote.UPVOTE:
-            result += 1
+                result += 1;
                 break;
               case Vote.DOWNVOTE:
-            result -= 1
+                result -= 1;
                 break;
             }
             return result;
           },
-        0
+          0,
         );
 
-      let userName = "";
+        let userName = '';
 
         if (data.user) {
           userName = data.user.name!;
@@ -61,7 +62,7 @@ export const questionsQuestionCommentRouter = createProtectedRouter()
         };
         return questionComment;
       });
-    }
+    },
   })
   .mutation('create', {
     input: z.object({
@@ -87,7 +88,8 @@ export const questionsQuestionCommentRouter = createProtectedRouter()
     async resolve({ ctx, input }) {
       const userId = ctx.session?.user?.id;
 
-      const questionCommentToUpdate = await ctx.prisma.questionsQuestionComment.findUnique({
+      const questionCommentToUpdate =
+        await ctx.prisma.questionsQuestionComment.findUnique({
           where: {
             id: input.id,
           },
@@ -117,7 +119,8 @@ export const questionsQuestionCommentRouter = createProtectedRouter()
     async resolve({ ctx, input }) {
       const userId = ctx.session?.user?.id;
 
-      const questionCommentToDelete = await ctx.prisma.questionsQuestionComment.findUnique({
+      const questionCommentToDelete =
+        await ctx.prisma.questionsQuestionComment.findUnique({
           where: {
             id: input.id,
           },
@@ -143,7 +146,7 @@ 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: {
@@ -175,9 +178,10 @@ 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({
+      const voteToUpdate =
+        await ctx.prisma.questionsQuestionCommentVote.findUnique({
           where: {
             id: input.id,
           },
@@ -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({
+      const voteToDelete =
+        await ctx.prisma.questionsQuestionCommentVote.findUnique({
           where: {
             id: input.id,
-        },});
+          },
+        });
 
       if (voteToDelete?.id !== userId) {
         throw new TRPCError({