From 3186beaced7feafadd5d90ab6906183c60ccbba7 Mon Sep 17 00:00:00 2001
From: Ivan-Z <114458211+phootako630@users.noreply.github.com>
Date: Sun, 2 Apr 2023 04:50:28 -0400
Subject: [PATCH] Feature/Validation on answer page  (#127)

---
 .../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}