set button conditionally disabled (add challenge)

amplimindcc · Jun 11, 2024 · dca9494 · dca9494
1 parent 2bd7a37
commit dca9494
Showing 1 changed file with 19 additions and 1 deletion.
diff --git a/src/pages/Admin/components/Challenges/Challenges.tsx b/src/pages/Admin/components/Challenges/Challenges.tsx
@@ -92,6 +92,14 @@ export default function Challenges() {
      */
     const [editorValue, setEditorValue] = useState<string>('');
 
+     /**
+     * State for the editor value of the challenge description
+     * @author Matthias Roy
+     *
+     * @type {boolean}
+     */
+    const [isInputEmpty, setIsInputEmpty] = useState<boolean>(true);
+
     useEffect(() => {
         let hasBeenExecuted = false;
         /**
@@ -236,6 +244,11 @@ export default function Challenges() {
      */
     function handleTitleOnChange(event: React.ChangeEvent<HTMLInputElement>) {
         setNewTitle(event.target.value);
+        if (event.target.value === '' || editorValue === '') {
+            setIsInputEmpty(true);
+        } else {
+            setIsInputEmpty(false);
+        }
     }
 
     /**
@@ -476,6 +489,11 @@ export default function Challenges() {
      */
     const handleEditorChange = (content: string) => {
         setEditorValue(content);
+        if (content === '' || newTitle === '') {
+            setIsInputEmpty(true);
+        } else {
+            setIsInputEmpty(false);
+        }
     };
 
     return (
@@ -536,7 +554,7 @@ export default function Challenges() {
                     <form data-testid="add-challenge-form" onSubmit={handleAddChallenge}>
                         <div data-testid="add-challenge-form-container" className="form-container">
                             <div data-testid="add-challenge-submit-section" className="form-submit-section">
-                                <Button data-testid="add-challenge-button" text={t('addChallenge')} />
+                                <Button data-testid="add-challenge-button" text={t('addChallenge')} disabled={isInputEmpty} />
                             </div>
                         </div>
                     </form>