From 9c84b87d5af6d919c6bc9f30fcc2a9f9939ce793 Mon Sep 17 00:00:00 2001
From: Jeff Sieu <jeffsy00@gmail.com>
Date: Wed, 9 Nov 2022 12:06:57 +0800
Subject: [PATCH] [questions][fix] update comment count after posting comment

---
 .../answer/[answerId]/[answerSlug]/index.tsx  | 18 ++++++++
 .../[questionId]/[questionSlug]/index.tsx     | 43 ++++++++++++++++++-
 2 files changed, 59 insertions(+), 2 deletions(-)

diff --git a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/answer/[answerId]/[answerSlug]/index.tsx b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/answer/[answerId]/[answerSlug]/index.tsx
index a76a9a1f..9c7f9d19 100644
--- a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/answer/[answerId]/[answerSlug]/index.tsx
+++ b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/answer/[answerId]/[answerSlug]/index.tsx
@@ -81,6 +81,24 @@ export default function QuestionPage() {
             sortType: SortType.NEW,
           },
         ]);
+
+        const previousData = utils.getQueryData([
+          'questions.answers.getAnswerById',
+          { answerId: answerId as string },
+        ]);
+
+        if (previousData === undefined) {
+          return;
+        }
+
+        utils.setQueryData(
+          ['questions.answers.getAnswerById', { answerId: answerId as string }],
+          {
+            ...previousData,
+            numComments: previousData.numComments + 1,
+          },
+        );
+
         event({
           action: 'questions.comment',
           category: 'engagement',
diff --git a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx
index c526a9be..b38e4024 100644
--- a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx
+++ b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx
@@ -110,6 +110,24 @@ export default function QuestionPage() {
         utils.invalidateQueries(
           'questions.questions.comments.getQuestionComments',
         );
+
+        const previousData = utils.getQueryData([
+          'questions.questions.getQuestionById',
+          { id: questionId as string },
+        ]);
+
+        if (previousData === undefined) {
+          return;
+        }
+
+        utils.setQueryData(
+          ['questions.questions.getQuestionById', { id: questionId as string }],
+          {
+            ...previousData,
+            numComments: previousData.numComments + 1,
+          },
+        );
+
         event({
           action: 'questions.comment',
           category: 'engagement',
@@ -142,6 +160,23 @@ export default function QuestionPage() {
     {
       onSuccess: () => {
         utils.invalidateQueries('questions.answers.getAnswers');
+
+        const previousData = utils.getQueryData([
+          'questions.questions.getQuestionById',
+          { id: questionId as string },
+        ]);
+
+        if (previousData === undefined) {
+          return;
+        }
+
+        utils.setQueryData(
+          ['questions.questions.getQuestionById', { id: questionId as string }],
+          {
+            ...previousData,
+            numAnswers: previousData.numAnswers + 1,
+          },
+        );
         event({
           action: 'questions.answer',
           category: 'engagement',
@@ -228,7 +263,10 @@ export default function QuestionPage() {
               <Collapsible
                 defaultOpen={true}
                 label={
-                  <div className="text-primary-700">{`${question.numComments} comment(s)`}</div>
+                  <div className="text-primary-700">
+                    {question.numComments}{' '}
+                    {question.numComments === 1 ? 'comment' : 'comments'}
+                  </div>
                 }>
                 <div className="flex flex-col gap-4 text-black">
                   <div className="flex justify-end gap-2">
@@ -310,7 +348,8 @@ export default function QuestionPage() {
           </form>
           <div className="flex items-center justify-between gap-4">
             <p className="text-xl font-semibold">
-              {question.numAnswers} answers
+              {question.numAnswers}{' '}
+              {question.numAnswers === 1 ? 'answer' : 'answers'}
             </p>
             <div className="flex items-end gap-4">
               <SortOptionsSelect