[questions][feat] view, post answer comments

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

@@ -9,7 +9,6 @@ import CommentListItem from '~/components/questions/CommentListItem';
 import {
   SAMPLE_ANSWER,
   SAMPLE_ANSWER_COMMENT,
-  SAMPLE_QUESTION,
 } from '~/utils/questions/constants';
 import { useFormRegister } from '~/utils/questions/useFormRegister';
 import { trpc } from '~/utils/trpc';
@@ -23,28 +22,48 @@ export default function QuestionPage() {
 
   const {
     register: comRegister,
+    reset: resetComment,
     handleSubmit: handleCommentSubmit,
     formState: { isDirty: isCommentDirty, isValid: isCommentValid },
   } = useForm<AnswerCommentData>({ mode: 'onChange' });
   const commentRegister = useFormRegister(comRegister);
 
-  const question = SAMPLE_QUESTION;
-  const comment = SAMPLE_ANSWER_COMMENT;
-
   const { answerId } = router.query;
 
+  const utils = trpc.useContext();
+
   const { data: answer } = trpc.useQuery([
     'questions.answers.getAnswerById',
     { answerId: answerId as string },
   ]);
 
+  const { data: comments } = trpc.useQuery([
+    'questions.answers.comments.getAnswerComments',
+    { answerId: answerId as string },
+  ]);
+
+  const { mutate: addComment } = trpc.useMutation(
+    'questions.answers.comments.create',
+    {
+      onSuccess: () => {
+        utils.invalidateQuery([
+          'questions.answers.comments.getAnswerComments',
+          { answerId: answerId as string },
+        ]);
+      },
+    },
+  );
+
   const handleBackNavigation = () => {
     router.back();
   };
 
   const handleSubmitComment = (data: AnswerCommentData) => {
-    // eslint-disable-next-line no-console
+    resetComment();
-    console.log(data);
+    addComment({
+      answerId: answerId as string,
+      content: data.commentContent,
+    });
   };
 
   if (!answer) {
@@ -109,7 +128,8 @@ export default function QuestionPage() {
                     onChange={(value) => {
                       // eslint-disable-next-line no-console
                       console.log(value);
-                    }}></Select>
+                    }}
+                  />
                 </div>
 
                 <Button
@@ -121,11 +141,14 @@ export default function QuestionPage() {
               </div>
             </form>
 
-            {Array.from({ length: question.commentCount }).map((_, index) => (
+            {(comments ?? []).map((comment) => (
               <CommentListItem
-                // eslint-disable-next-line react/no-array-index-key
+                key={comment.id}
-                key={index}
+                authorImageUrl={SAMPLE_ANSWER_COMMENT.authorImageUrl}
-                {...comment}
+                authorName={comment.user}
+                content={comment.content}
+                createdAt={comment.createdAt}
+                upvoteCount={comment.numVotes}
               />
             ))}
           </div>

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

@@ -81,8 +81,6 @@ export default function QuestionPage() {
   };
 
   const handleSubmitAnswer = (data: AnswerQuestionData) => {
-    // eslint-disable-next-line no-console
-    console.log(data);
     addAnswer({
       content: data.answerContent,
       questionId: questionId as string,
@@ -98,7 +96,11 @@ export default function QuestionPage() {
   };
 
   if (!question) {
-    return <Spinner size="lg" />;
+    return (
+      <div className="flex h-full w-full items-center justify-center">
+        <Spinner size="lg" />
+      </div>
+    );
   }
 
   return (
@@ -159,7 +161,8 @@ export default function QuestionPage() {
                       onChange={(value) => {
                         // eslint-disable-next-line no-console
                         console.log(value);
-                      }}></Select>
+                      }}
+                    />
                   </div>
 
                   <Button
@@ -219,7 +222,8 @@ export default function QuestionPage() {
                     onChange={(value) => {
                       // eslint-disable-next-line no-console
                       console.log(value);
-                    }}></Select>
+                    }}
+                  />
                 </div>
               </div>
               <Button
@@ -235,13 +239,13 @@ export default function QuestionPage() {
               key={answer.id}
               authorImageUrl={SAMPLE_ANSWER.authorImageUrl}
               authorName={answer.user}
-              commentCount={0}
+              commentCount={answer.numComments}
               content={answer.content}
               createdAt={answer.createdAt}
               href={`${router.asPath}/answer/${answer.id}/${createSlug(
                 answer.content,
               )}`}
-              upvoteCount={0}
+              upvoteCount={answer.numVotes}
             />
           ))}
         </div>

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

@@ -12,57 +12,52 @@ export const questionsAnswerCommentRouter = createProtectedRouter()
       answerId: z.string(),
     }),
     async resolve({ ctx, input }) {
-      const questionAnswerCommentsData = await ctx.prisma.questionsAnswerComment.findMany({
+      const questionAnswerCommentsData =
-        include: {
+        await ctx.prisma.questionsAnswerComment.findMany({
-        user: {
+          include: {
-          select: {
+            user: {
-            name: true,
+              select: {
+                name: true,
+              },
+            },
+            votes: true,
           },
-        },
+          orderBy: {
-        votes: true,
+            createdAt: 'desc',
-        },
+          },
-        orderBy: {
+          where: {
-          createdAt: 'desc',
+            ...input,
-        },
+          },
-        where: {
+        });
-          ...input,
+      return questionAnswerCommentsData.map((data) => {
-        },
+        const votes: number = data.votes.reduce(
-    });
+          (previousValue: number, currentValue) => {
-    return questionAnswerCommentsData.map((data) => {
+            let result: number = previousValue;
-      const votes:number = data.votes.reduce(
+
-        (previousValue:number, currentValue) => {
+            switch (currentValue.vote) {
-          let result:number = previousValue;
+              case Vote.UPVOTE:
-
+                result += 1;
-          switch(currentValue.vote) {
+                break;
-          case Vote.UPVOTE:
+              case Vote.DOWNVOTE:
-            result += 1
+                result -= 1;
-            break;
+                break;
-          case Vote.DOWNVOTE:
+            }
-            result -= 1
+            return result;
-            break;
+          },
-          }
+          0,
-          return result;
-        },
-        0
         );
 
-      let userName = "";
+        const answerComment: AnswerComment = {
-
+          content: data.content,
-      if (data.user) {
+          createdAt: data.createdAt,
-        userName = data.user.name!;
+          id: data.id,
-      }
+          numVotes: votes,
-
+          updatedAt: data.updatedAt,
-
+          user: data.user?.name ?? '',
-      const answerComment: AnswerComment = {
+        };
-        content: data.content,
+        return answerComment;
-        id: data.id,
+      });
-        numVotes: votes,
+    },
-        updatedAt: data.updatedAt,
-        user: userName,
-      };
-      return answerComment;
-    });
-    }
   })
   .mutation('create', {
     input: z.object({
@@ -88,11 +83,12 @@ export const questionsAnswerCommentRouter = createProtectedRouter()
     async resolve({ ctx, input }) {
       const userId = ctx.session?.user?.id;
 
-      const answerCommentToUpdate = await ctx.prisma.questionsAnswerComment.findUnique({
+      const answerCommentToUpdate =
-        where: {
+        await ctx.prisma.questionsAnswerComment.findUnique({
-          id: input.id,
+          where: {
-        },
+            id: input.id,
-      });
+          },
+        });
 
       if (answerCommentToUpdate?.id !== userId) {
         throw new TRPCError({
@@ -118,11 +114,12 @@ export const questionsAnswerCommentRouter = createProtectedRouter()
     async resolve({ ctx, input }) {
       const userId = ctx.session?.user?.id;
 
-      const answerCommentToDelete = await ctx.prisma.questionsAnswerComment.findUnique({
+      const answerCommentToDelete =
-        where: {
+        await ctx.prisma.questionsAnswerComment.findUnique({
-          id: input.id,
+          where: {
-        },
+            id: input.id,
-      });
+          },
+        });
 
       if (answerCommentToDelete?.id !== userId) {
         throw new TRPCError({
@@ -144,11 +141,11 @@ export const questionsAnswerCommentRouter = createProtectedRouter()
     }),
     async resolve({ ctx, input }) {
       const userId = ctx.session?.user?.id;
-      const {answerCommentId} = input
+      const { answerCommentId } = input;
 
       return await ctx.prisma.questionsAnswerCommentVote.findUnique({
         where: {
-          answerCommentId_userId : {answerCommentId,userId },
+          answerCommentId_userId: { answerCommentId, userId },
         },
       });
     },
@@ -176,13 +173,14 @@ export const questionsAnswerCommentRouter = createProtectedRouter()
     }),
     async resolve({ ctx, input }) {
       const userId = ctx.session?.user?.id;
-      const {id, vote} = input
+      const { id, vote } = input;
 
-      const voteToUpdate = await ctx.prisma.questionsAnswerCommentVote.findUnique({
+      const voteToUpdate =
-        where: {
+        await ctx.prisma.questionsAnswerCommentVote.findUnique({
-          id: input.id,
+          where: {
-        },
+            id: input.id,
-      });
+          },
+        });
 
       if (voteToUpdate?.id !== userId) {
         throw new TRPCError({
@@ -208,10 +206,12 @@ export const questionsAnswerCommentRouter = createProtectedRouter()
     async resolve({ ctx, input }) {
       const userId = ctx.session?.user?.id;
 
-      const voteToDelete = await ctx.prisma.questionsAnswerCommentVote.findUnique({
+      const voteToDelete =
-        where: {
+        await ctx.prisma.questionsAnswerCommentVote.findUnique({
-          id: input.id,
+          where: {
-        },});
+            id: input.id,
+          },
+        });
 
       if (voteToDelete?.id !== userId) {
         throw new TRPCError({
@@ -226,4 +226,4 @@ export const questionsAnswerCommentRouter = createProtectedRouter()
         },
       });
     },
-  });
+  });

apps/portal/src/types/questions.d.ts

@@ -15,8 +15,11 @@ export type Question = {
 
 export type AnswerComment = {
   content: string;
+  createdAt: Date;
   id: string;
   numVotes: number;
+  updatedAt: Date;
+  user: string;
 };
 
 export type Answer = {