From 77fe825dfc2758e79b55977f9dbb81ab16b4e845 Mon Sep 17 00:00:00 2001
From: ivanzhang <ivanzhang220820@gmail.com>
Date: Fri, 31 Mar 2023 17:33:05 -0400
Subject: [PATCH 1/2] This pull request addresses the issue of Validation on
 answer page #124 The changes I made include removing buttonDisable and adding
 a useState hook to get emoji error.

---
 .../surveys/managers/surveyAnswerManager.ts         | 13 ++++++++++---
 src/pages/survey/[surveyId]/index.tsx               |  5 +++--
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/features/surveys/managers/surveyAnswerManager.ts b/src/features/surveys/managers/surveyAnswerManager.ts
index 02e41de3..921af5a5 100644
--- a/src/features/surveys/managers/surveyAnswerManager.ts
+++ b/src/features/surveys/managers/surveyAnswerManager.ts
@@ -6,7 +6,7 @@ import { db } from 'firebaseConfiguration';
 
 export const useSurveyAnswerManager = () => {
   const router = useRouter();
-
+  const [showEmojiError, setShowEmojiError] = useState(false);
   const { surveyId } = router.query as { surveyId: string };
 
   const [question, setQuestion] = useState('');
@@ -42,8 +42,14 @@ export const useSurveyAnswerManager = () => {
   };
 
   const handleSave = async () => {
-    setButtonDisable(true);
-    setIsAnswering(true);
+    if (!selectedIcon) {
+      setShowEmojiError(true);
+      return;
+    } else {
+      setShowEmojiError(false);
+      setButtonDisable(true);
+      setIsAnswering(true);
+    }
 
     try {
       if (!surveyId) {
@@ -80,5 +86,6 @@ export const useSurveyAnswerManager = () => {
     buttonDisable,
     handleSave,
     isAnswering,
+    showEmojiError,
   };
 };
diff --git a/src/pages/survey/[surveyId]/index.tsx b/src/pages/survey/[surveyId]/index.tsx
index 284bc501..008cb749 100644
--- a/src/pages/survey/[surveyId]/index.tsx
+++ b/src/pages/survey/[surveyId]/index.tsx
@@ -17,9 +17,9 @@ function AnswerPage() {
     handleIconClick,
     answer,
     handleInputAnswer,
-    buttonDisable,
     handleSave,
     isAnswering,
+    showEmojiError,
   } = useSurveyAnswerManager();
 
   return (
@@ -43,6 +43,8 @@ function AnswerPage() {
               />
             ))}
           </div>
+          {showEmojiError && (
+            <div className="mt-2 text-red-500">Please select an emoji before sending.</div>)}
           <div className="mt-8">
             <textarea
               className="h-56 w-[500px] max-w-[100%] resize-none rounded-lg p-4 shadow focus:outline-none"
@@ -53,7 +55,6 @@ function AnswerPage() {
           </div>
           <div className="flex justify-center">
             <Button
-              disabled={!selectedIcon || buttonDisable}
               onClick={handleSave}
               className="mt-6 w-full sm:w-auto"
               variant={ButtonVariant.PRIMARY}

From 61036ac9eee020b405e52ef273ccc64b6a3fad01 Mon Sep 17 00:00:00 2001
From: ivanzhang <ivanzhang220820@gmail.com>
Date: Fri, 31 Mar 2023 17:33:05 -0400
Subject: [PATCH 2/2] This pull request addresses the issue of Validation on
 answer page #124 The changes I made include removing buttonDisable and adding
 a useState hook to get emoji error.

---
 .../surveys/managers/surveyAnswerManager.ts        | 14 +++++++++++---
 src/pages/survey/[surveyId]/index.tsx              |  5 +++--
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/features/surveys/managers/surveyAnswerManager.ts b/src/features/surveys/managers/surveyAnswerManager.ts
index 02e41de3..879d7914 100644
--- a/src/features/surveys/managers/surveyAnswerManager.ts
+++ b/src/features/surveys/managers/surveyAnswerManager.ts
@@ -6,7 +6,7 @@ import { db } from 'firebaseConfiguration';
 
 export const useSurveyAnswerManager = () => {
   const router = useRouter();
-
+  const [showEmojiError, setShowEmojiError] = useState(false);
   const { surveyId } = router.query as { surveyId: string };
 
   const [question, setQuestion] = useState('');
@@ -39,11 +39,18 @@ export const useSurveyAnswerManager = () => {
 
   const handleIconClick = (icon: string) => {
     setSelectedIcon(icon);
+    setShowEmojiError(false);
   };
 
   const handleSave = async () => {
-    setButtonDisable(true);
-    setIsAnswering(true);
+    if (!selectedIcon) {
+      setShowEmojiError(true);
+      return;
+    } else {
+      setShowEmojiError(false);
+      setButtonDisable(true);
+      setIsAnswering(true);
+    }
 
     try {
       if (!surveyId) {
@@ -80,5 +87,6 @@ export const useSurveyAnswerManager = () => {
     buttonDisable,
     handleSave,
     isAnswering,
+    showEmojiError,
   };
 };
diff --git a/src/pages/survey/[surveyId]/index.tsx b/src/pages/survey/[surveyId]/index.tsx
index 284bc501..008cb749 100644
--- a/src/pages/survey/[surveyId]/index.tsx
+++ b/src/pages/survey/[surveyId]/index.tsx
@@ -17,9 +17,9 @@ function AnswerPage() {
     handleIconClick,
     answer,
     handleInputAnswer,
-    buttonDisable,
     handleSave,
     isAnswering,
+    showEmojiError,
   } = useSurveyAnswerManager();
 
   return (
@@ -43,6 +43,8 @@ function AnswerPage() {
               />
             ))}
           </div>
+          {showEmojiError && (
+            <div className="mt-2 text-red-500">Please select an emoji before sending.</div>)}
           <div className="mt-8">
             <textarea
               className="h-56 w-[500px] max-w-[100%] resize-none rounded-lg p-4 shadow focus:outline-none"
@@ -53,7 +55,6 @@ function AnswerPage() {
           </div>
           <div className="flex justify-center">
             <Button
-              disabled={!selectedIcon || buttonDisable}
               onClick={handleSave}
               className="mt-6 w-full sm:w-auto"
               variant={ButtonVariant.PRIMARY}