From 5a281031d4dcfbf9552e56328ff729427f1ed4b3 Mon Sep 17 00:00:00 2001
From: Jeff Sieu <jeffsy00@gmail.com>
Date: Thu, 3 Nov 2022 15:36:50 +0800
Subject: [PATCH] [questions][ui] add thank you message

---
 .../card/question/BaseQuestionCard.tsx        |  7 ++--
 .../forms/CreateQuestionEncounterForm.tsx     | 41 ++++++++++++++-----
 .../[questionId]/[questionSlug]/index.tsx     |  6 +--
 3 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/apps/portal/src/components/questions/card/question/BaseQuestionCard.tsx b/apps/portal/src/components/questions/card/question/BaseQuestionCard.tsx
index 7b50c1a9..2eb2c194 100644
--- a/apps/portal/src/components/questions/card/question/BaseQuestionCard.tsx
+++ b/apps/portal/src/components/questions/card/question/BaseQuestionCard.tsx
@@ -90,7 +90,7 @@ type ReceivedStatisticsProps =
 type CreateEncounterProps =
   | {
       createEncounterButtonText: string;
-      onReceivedSubmit: (data: CreateQuestionEncounterData) => void;
+      onReceivedSubmit: (data: CreateQuestionEncounterData) => Promise<void>;
       showCreateEncounterButton: true;
     }
   | {
@@ -263,9 +263,8 @@ export default function BaseQuestionCard({
             onCancel={() => {
               setShowReceivedForm(false);
             }}
-            onSubmit={(data) => {
-              onReceivedSubmit?.(data);
-              setShowReceivedForm(false);
+            onSubmit={async (data) => {
+              await onReceivedSubmit?.(data);
             }}
           />
         )}
diff --git a/apps/portal/src/components/questions/forms/CreateQuestionEncounterForm.tsx b/apps/portal/src/components/questions/forms/CreateQuestionEncounterForm.tsx
index 453733c8..6f65bf22 100644
--- a/apps/portal/src/components/questions/forms/CreateQuestionEncounterForm.tsx
+++ b/apps/portal/src/components/questions/forms/CreateQuestionEncounterForm.tsx
@@ -1,5 +1,6 @@
 import { startOfMonth } from 'date-fns';
 import { useState } from 'react';
+import { CheckIcon } from '@heroicons/react/20/solid';
 import { Button } from '@tih/ui';
 
 import type { Month } from '~/components/shared/MonthYearPicker';
@@ -22,7 +23,7 @@ export type CreateQuestionEncounterData = {
 
 export type CreateQuestionEncounterFormProps = {
   onCancel: () => void;
-  onSubmit: (data: CreateQuestionEncounterData) => void;
+  onSubmit: (data: CreateQuestionEncounterData) => Promise<void>;
 };
 
 export default function CreateQuestionEncounterForm({
@@ -30,6 +31,8 @@ export default function CreateQuestionEncounterForm({
   onSubmit,
 }: CreateQuestionEncounterFormProps) {
   const [step, setStep] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
 
   const [selectedCompany, setSelectedCompany] = useState<string | null>(null);
   const [selectedLocation, setSelectedLocation] = useState<Location | null>(
@@ -40,9 +43,18 @@ export default function CreateQuestionEncounterForm({
     startOfMonth(new Date()),
   );
 
+  if (submitted) {
+    return (
+      <div className="font-md flex items-center gap-1 rounded-full border bg-slate-50 py-1 pl-2 pr-3 text-sm text-slate-500">
+        <CheckIcon className="h-5 w-5" />
+        <p>Thank you for your response</p>
+      </div>
+    );
+  }
+
   return (
     <div className="flex items-center gap-2">
-      <p className="font-md text-md text-slate-600">
+      <p className="text-md text-slate-600">
         I saw this question {step <= 1 ? 'at' : step === 2 ? 'for' : 'on'}
       </p>
       {step === 0 && (
@@ -128,9 +140,10 @@ export default function CreateQuestionEncounterForm({
       )}
       {step === 3 && (
         <Button
+          isLoading={loading}
           label="Submit"
           variant="primary"
-          onClick={() => {
+          onClick={async () => {
             if (
               selectedCompany &&
               selectedLocation &&
@@ -138,14 +151,20 @@ export default function CreateQuestionEncounterForm({
               selectedDate
             ) {
               const { cityId, stateId, countryId } = selectedLocation;
-              onSubmit({
-                cityId,
-                company: selectedCompany,
-                countryId,
-                role: selectedRole,
-                seenAt: selectedDate,
-                stateId,
-              });
+              setLoading(true);
+              try {
+                await onSubmit({
+                  cityId,
+                  company: selectedCompany,
+                  countryId,
+                  role: selectedRole,
+                  seenAt: selectedDate,
+                  stateId,
+                });
+                setSubmitted(true);
+              } finally {
+                setLoading(false);
+              }
             }
           }}
         />
diff --git a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx
index c383a550..ea753afc 100644
--- a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx
+++ b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx
@@ -139,7 +139,7 @@ export default function QuestionPage() {
     },
   );
 
-  const { mutate: addEncounter } = trpc.useMutation(
+  const { mutateAsync: addEncounterAsync } = trpc.useMutation(
     'questions.questions.encounters.user.create',
     {
       onSuccess: () => {
@@ -208,8 +208,8 @@ export default function QuestionPage() {
                 year: 'numeric',
               })}
               upvoteCount={question.numVotes}
-              onReceivedSubmit={(data) => {
-                addEncounter({
+              onReceivedSubmit={async (data) => {
+                await addEncounterAsync({
                   cityId: data.cityId,
                   companyId: data.company,
                   countryId: data.countryId,