[questions][feat] post, view question answers

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

@@ -12,6 +12,7 @@ import {
   SAMPLE_QUESTION,
 } from '~/utils/questions/constants';
 import { useFormRegister } from '~/utils/questions/useFormRegister';
+import { trpc } from '~/utils/trpc';
 
 export type AnswerCommentData = {
   commentContent: string;
@@ -29,6 +30,14 @@ export default function QuestionPage() {
 
   const question = SAMPLE_QUESTION;
   const comment = SAMPLE_ANSWER_COMMENT;
+
+  const { answerId } = router.query;
+
+  const { data: answer } = trpc.useQuery([
+    'questions.answers.getAnswerById',
+    { answerId: answerId as string },
+  ]);
+
   const handleBackNavigation = () => {
     router.back();
   };
@@ -38,6 +47,11 @@ export default function QuestionPage() {
     console.log(data);
   };
 
+  if (!answer) {
+    // TODO: Make this look nicer
+    return <div>Answer not found</div>;
+  }
+
   return (
     <div className="flex w-full flex-1 items-stretch pb-4">
       <div className="flex items-baseline gap-2 py-4 pl-4">
@@ -51,7 +65,13 @@ export default function QuestionPage() {
       </div>
       <div className="flex w-full  justify-center overflow-y-auto py-4 px-5">
         <div className="flex max-w-7xl flex-1 flex-col gap-2">
-          <FullAnswerCard {...SAMPLE_ANSWER} />
+          <FullAnswerCard
+            authorImageUrl={SAMPLE_ANSWER.authorImageUrl}
+            authorName={answer.user}
+            content={answer.content}
+            createdAt={answer.createdAt}
+            upvoteCount={0}
+          />
           <div className="mx-2">
             <form
               className="mb-2"

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

@@ -11,6 +11,7 @@ import {
   SAMPLE_ANSWER,
   SAMPLE_QUESTION_COMMENT,
 } from '~/utils/questions/constants';
+import createSlug from '~/utils/questions/createSlug';
 import { useFormRegister } from '~/utils/questions/useFormRegister';
 import { trpc } from '~/utils/trpc';
 
@@ -64,6 +65,17 @@ export default function QuestionPage() {
     },
   );
 
+  const { data: answers } = trpc.useQuery([
+    'questions.answers.getAnswers',
+    { questionId: questionId as string },
+  ]);
+
+  const { mutate: addAnswer } = trpc.useMutation('questions.answers.create', {
+    onSuccess: () => {
+      utils.invalidateQueries('questions.answers.getAnswers');
+    },
+  });
+
   const handleBackNavigation = () => {
     router.back();
   };
@@ -71,6 +83,10 @@ 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,
+    });
   };
 
   const handleSubmitComment = (data: QuestionCommentData) => {
@@ -214,13 +230,18 @@ export default function QuestionPage() {
               />
             </div>
           </form>
-
-          {Array.from({ length: question.numAnswers }).map((_, index) => (
+          {(answers ?? []).map((answer) => (
             <AnswerCard
-              // eslint-disable-next-line react/no-array-index-key
-              key={index}
-              {...SAMPLE_ANSWER}
-              href={`${router.asPath}/answer/1/1`}
+              key={answer.id}
+              authorImageUrl={SAMPLE_ANSWER.authorImageUrl}
+              authorName={answer.user}
+              commentCount={0}
+              content={answer.content}
+              createdAt={answer.createdAt}
+              href={`${router.asPath}/answer/${answer.id}/${createSlug(
+                answer.content,
+              )}`}
+              upvoteCount={0}
             />
           ))}
         </div>

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

@@ -14,17 +14,17 @@ export const questionsAnswerRouter = createProtectedRouter()
     async resolve({ ctx, input }) {
       const answersData = await ctx.prisma.questionsAnswer.findMany({
         include: {
-        _count: {
-          select: {
-            comments: true,
+          _count: {
+            select: {
+              comments: true,
+            },
           },
-        },
-        user: {
-          select: {
-            name: true,
+          user: {
+            select: {
+              name: true,
+            },
           },
-        },
-        votes: true,
+          votes: true,
         },
         orderBy: {
           createdAt: 'desc',
@@ -32,43 +32,93 @@ export const questionsAnswerRouter = createProtectedRouter()
         where: {
           ...input,
         },
-    });
-    return answersData.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
-        );
+      });
+      return answersData.map((data) => {
+        const votes: number = data.votes.reduce(
+          (previousValue: number, currentValue) => {
+            let result: number = previousValue;
 
-      let userName = "";
+            switch (currentValue.vote) {
+              case Vote.UPVOTE:
+                result += 1;
+                break;
+              case Vote.DOWNVOTE:
+                result -= 1;
+                break;
+            }
+            return result;
+          },
+          0,
+        );
 
-      if (data.user) {
-        userName = data.user.name!;
+        const answer: Answer = {
+          content: data.content,
+          createdAt: data.createdAt,
+          id: data.id,
+          numComments: data._count.comments,
+          numVotes: votes,
+          user: data.user?.name ?? '',
+        };
+        return answer;
+      });
+    },
+  })
+  .query('getAnswerById', {
+    input: z.object({
+      answerId: z.string(),
+    }),
+    async resolve({ ctx, input }) {
+      const answerData = await ctx.prisma.questionsAnswer.findUnique({
+        include: {
+          _count: {
+            select: {
+              comments: true,
+            },
+          },
+          user: {
+            select: {
+              name: true,
+            },
+          },
+          votes: true,
+        },
+        where: {
+          id: input.answerId,
+        },
+      });
+      if (!answerData) {
+        throw new TRPCError({
+          code: 'NOT_FOUND',
+          message: 'Answer not found',
+        });
       }
+      const votes: number = answerData.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,
+      );
 
       const answer: Answer = {
-        content: data.content,
-        createdAt: data.createdAt,
-        id: data.id,
-        numComments: data._count.comments,
+        content: answerData.content,
+        createdAt: answerData.createdAt,
+        id: answerData.id,
+        numComments: answerData._count.comments,
         numVotes: votes,
-        user: userName,
+        user: answerData.user?.name ?? '',
       };
       return answer;
-    });
-    }
+    },
   })
   .mutation('create', {
     input: z.object({
@@ -93,7 +143,7 @@ export const questionsAnswerRouter = createProtectedRouter()
     }),
     async resolve({ ctx, input }) {
       const userId = ctx.session?.user?.id;
-      const {content, id} = input
+      const { content, id } = input;
 
       const answerToUpdate = await ctx.prisma.questionsAnswer.findUnique({
         where: {
@@ -128,7 +178,8 @@ export const questionsAnswerRouter = createProtectedRouter()
       const answerToDelete = await ctx.prisma.questionsAnswer.findUnique({
         where: {
           id: input.id,
-        },});
+        },
+      });
 
       if (answerToDelete?.id !== userId) {
         throw new TRPCError({
@@ -150,11 +201,11 @@ export const questionsAnswerRouter = createProtectedRouter()
     }),
     async resolve({ ctx, input }) {
       const userId = ctx.session?.user?.id;
-      const {answerId} = input
+      const { answerId } = input;
 
       return await ctx.prisma.questionsAnswerVote.findUnique({
         where: {
-          answerId_userId : { answerId, userId },
+          answerId_userId: { answerId, userId },
         },
       });
     },
@@ -182,7 +233,7 @@ export const questionsAnswerRouter = createProtectedRouter()
     }),
     async resolve({ ctx, input }) {
       const userId = ctx.session?.user?.id;
-      const {id, vote} = input
+      const { id, vote } = input;
 
       const voteToUpdate = await ctx.prisma.questionsAnswerVote.findUnique({
         where: {
@@ -217,7 +268,8 @@ export const questionsAnswerRouter = createProtectedRouter()
       const voteToDelete = await ctx.prisma.questionsAnswerVote.findUnique({
         where: {
           id: input.id,
-        },});
+        },
+      });
 
       if (voteToDelete?.id !== userId) {
         throw new TRPCError({

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

@@ -47,18 +47,12 @@ export const questionsQuestionCommentRouter = createProtectedRouter()
           0,
         );
 
-        let userName = '';
-
-        if (data.user) {
-          userName = data.user.name!;
-        }
-
         const questionComment: QuestionComment = {
           content: data.content,
           createdAt: data.createdAt,
           id: data.id,
           numVotes: votes,
-          user: userName,
+          user: data.user?.name ?? '',
         };
         return questionComment;
       });

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

@@ -78,12 +78,6 @@ export const questionsQuestionRouter = createProtectedRouter()
             0,
           );
 
-          let userName = '';
-
-          if (data.user) {
-            userName = data.user.name!;
-          }
-
           const question: Question = {
             company: data.encounters[0].company,
             content: data.content,
@@ -95,7 +89,7 @@ export const questionsQuestionRouter = createProtectedRouter()
             role: data.encounters[0].role ?? 'Unknown role',
             seenAt: data.encounters[0].seenAt,
             updatedAt: data.updatedAt,
-            user: userName,
+            user: data.user?.name ?? '',
           };
           return question;
         });
@@ -156,12 +150,6 @@ export const questionsQuestionRouter = createProtectedRouter()
         0,
       );
 
-      let userName = '';
-
-      if (questionData.user) {
-        userName = questionData.user.name!;
-      }
-
       const question: Question = {
         company: questionData.encounters[0].company,
         content: questionData.content,
@@ -173,7 +161,7 @@ export const questionsQuestionRouter = createProtectedRouter()
         role: questionData.encounters[0].role ?? 'Unknown role',
         seenAt: questionData.encounters[0].seenAt,
         updatedAt: questionData.updatedAt,
-        user: userName,
+        user: questionData.user?.name ?? '',
       };
       return question;
     },

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

@@ -25,6 +25,7 @@ export type Answer = {
   id: string;
   numComments: number;
   numVotes: number;
+  user: string;
 };
 
 export type QuestionComment = {