fix: glowing next navigation button

it was being set after completing all required fields, instead of at the end of the form. now it correctly sets at the end
complexdatacollective · Jan 24, 2024 · e3d1456 · e3d1456
1 parent 01c7e4a
commit e3d1456
Showing 1 changed file with 30 additions and 26 deletions.
diff --git a/lib/interviewer/containers/Interfaces/EgoForm.js b/lib/interviewer/containers/Interfaces/EgoForm.js
@@ -1,9 +1,4 @@
-import React, {
-  useEffect,
-  useState,
-  useCallback,
-  useMemo,
-} from 'react';
+import React, { useEffect, useState, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useDispatch, useSelector } from 'react-redux';
@@ -37,21 +32,24 @@ const confirmDialog = {
 const getFormName = (index) => `EGO_FORM_${index}`;
 
 const EgoForm = (props) => {
-  const {
-    registerBeforeNext,
-    stage,
-  } = props;
-
-  const {
-    form,
-    introductionPanel,
-  } = stage;
+  const { registerBeforeNext, stage } = props;
 
+  const { form, introductionPanel } = stage;
 
   const dispatch = useDispatch();
-  const openDialog = useCallback((dialog) => dispatch(dialogActions.openDialog(dialog)), [dispatch]);
-  const submitFormRedux = useCallback((formName) => dispatch(submit(formName)), [dispatch]);
-  const updateEgo = useCallback((modelData, attributeData) => dispatch(sessionActions.updateEgo(modelData, attributeData)), [dispatch]);
+  const openDialog = useCallback(
+    (dialog) => dispatch(dialogActions.openDialog(dialog)),
+    [dispatch],
+  );
+  const submitFormRedux = useCallback(
+    (formName) => dispatch(submit(formName)),
+    [dispatch],
+  );
+  const updateEgo = useCallback(
+    (modelData, attributeData) =>
+      dispatch(sessionActions.updateEgo(modelData, attributeData)),
+    [dispatch],
+  );
 
   const [scrollProgress, setScrollProgress] = useState(0);
   const [showScrollStatus, setShowScrollStatus] = useFlipflop(
@@ -116,24 +114,30 @@ const EgoForm = (props) => {
     updateEgo({}, formData);
   };
 
-  const handleScroll = useCallback(() => debounce((_, progress) => {
-    setScrollProgress(progress);
-    const nextIsReady = isFormValid && progress === 1;
+  const handleScroll = useCallback(
+    () =>
+      debounce((_, progress) => {
+        setScrollProgress(progress);
+        const nextIsReady = isFormValid && progress === 1;
 
-    setIsReadyForNext(nextIsReady);
-  }, 200), [setIsReadyForNext, setScrollProgress, isFormValid]);
+        setIsReadyForNext(nextIsReady);
+      }, 200),
+    [setIsReadyForNext, setScrollProgress, isFormValid],
+  );
 
   useEffect(() => {
     setIsReadyForNext(false);
 
     if (isFormDirty && !isFormValid) {
       return;
     }
+  }, [isFormDirty, isFormValid, setIsReadyForNext]);
 
-    if (isFormValid) {
-      setIsReadyForNext(true);
+  useEffect(() => {
+    if (!isFormValid) {
+      setIsReadyForNext(false);
     }
-  }, [isFormDirty, isFormValid, setIsReadyForNext]);
+  }, [isFormValid, setIsReadyForNext]);
 
   // Todo: fix show scroll nudge.
   const showScrollNudge = useMemo(