Feature/Validation on answer page (#127)

Ryczko · Apr 2, 2023 · 3186bea · 3186bea
1 parent 2b66a64
commit 3186bea
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git 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
@@ -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}