Feature/Add input validation for create survey page (#107)

Ryczko · Mar 23, 2023 · efc0634 · efc0634
1 parent eee9bc8
commit efc0634
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/src/features/surveys/managers/createSurveyManager.ts b/src/features/surveys/managers/createSurveyManager.ts
@@ -9,9 +9,9 @@ import useCopyToClipboard from 'shared/hooks/useCopyToClipboard';
 export const useCreateSurveyManager = () => {
   const [title, setTitle] = useState('');
   const [pack, setPack] = useState<string[]>([]);
+  const [error, setError] = useState('');
 
   const { user } = useApplicationContext();
-  const [buttonDisable, setButtonDisable] = useState(false);
   const [isCreating, setIsCreating] = useState(false);
 
   const router = useRouter();
@@ -47,7 +47,8 @@ export const useCreateSurveyManager = () => {
   }, [startDate, endDate]);
 
   const createSurvey = async () => {
-    setButtonDisable(true);
+    if (!title) return setError('Required field');
+
     setIsCreating(true);
 
     try {
@@ -72,7 +73,6 @@ export const useCreateSurveyManager = () => {
       toast.error('Survey creation failed');
     }
     setIsCreating(false);
-    setButtonDisable(false);
   };
 
   const filterPassedTime = (time: string | number | Date) => {
@@ -90,6 +90,7 @@ export const useCreateSurveyManager = () => {
   };
   return {
     title,
+    error,
     pack,
     handleChangeTitle,
     startDate,
@@ -100,7 +101,6 @@ export const useCreateSurveyManager = () => {
     filterPassedSelectedTime,
     handleEmotePick,
     createSurvey,
-    buttonDisable,
     isCreating,
   };
 };
diff --git a/src/pages/survey/create/index.tsx b/src/pages/survey/create/index.tsx
@@ -12,6 +12,7 @@ function SurveyCreatePage() {
   const {
     title,
     pack,
+    error,
     handleChangeTitle,
     startDate,
     setStartDate,
@@ -21,7 +22,6 @@ function SurveyCreatePage() {
     filterPassedSelectedTime,
     handleEmotePick,
     createSurvey,
-    buttonDisable,
     isCreating,
   } = useCreateSurveyManager();
 
@@ -39,6 +39,7 @@ function SurveyCreatePage() {
             label="Survey title"
             placeholder="Title..."
             value={title}
+            error={!title ? error : undefined}
             onChange={handleChangeTitle}
           />
           <div className="mt-10 mb-4 block text-left font-semibold">
@@ -106,7 +107,6 @@ function SurveyCreatePage() {
             <Button
               onClick={createSurvey}
               className="z-0 mt-12 w-full sm:w-auto"
-              disabled={!title.length || buttonDisable}
               variant={ButtonVariant.PRIMARY}
               isLoading={isCreating}
             >

diff --git a/src/shared/components/Input/Input.tsx b/src/shared/components/Input/Input.tsx
@@ -36,7 +36,7 @@ function Input({
         )}
       />
       {!!error && (
-        <p className="mb-2 max-w-sm text-right text-sm text-red-400">{error}</p>
+        <p className="mb-2 text-right text-sm text-red-400">{error}</p>
       )}
     </>
   );
-Original file line number
+Diff line change
@@ Expand Up / @@ -36,7 +36,7 @@ function Input({ @@
             )}
           />
           {!!error && (
-            <p className="mb-2 max-w-sm text-right text-sm text-red-400">{error}</p>
+            <p className="mb-2 text-right text-sm text-red-400">{error}</p>
           )}
         </>
       );
@@ Expand Down @@