🐛 Add useEffect for action state sync (#1600)

Resolves https://issues.redhat.com/browse/MTA-1826 - Uses a useEffect hook to synchronize the state of the action based on the assessment object. This way, whenever assessment changes, we can ensure that the action is recalculated. Signed-off-by: ibolton336 <[email protected]>
konveyor · Dec 11, 2023 · d5bb144 · d5bb144
1 parent ca600a3
commit d5bb144
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/...es/assessment/components/assessment-actions/components/dynamic-assessment-actions-row.tsx b/...es/assessment/components/assessment-actions/components/dynamic-assessment-actions-row.tsx
@@ -102,15 +102,21 @@ const DynamicAssessmentActionsRow: FunctionComponent<
     onDeleteError
   );
 
-  const determineAction = () => {
+  const determineAction = React.useCallback(() => {
     if (!assessment) {
       return AssessmentAction.Take;
     } else if (assessment.status === "started") {
       return AssessmentAction.Continue;
     } else {
       return AssessmentAction.Retake;
     }
-  };
+  }, [assessment]);
+
+  const [action, setAction] = React.useState(determineAction());
+
+  React.useEffect(() => {
+    setAction(determineAction());
+  }, [determineAction, assessment]);
 
   const determineButtonClassName = () => {
     const action = determineAction();
@@ -213,7 +219,7 @@ const DynamicAssessmentActionsRow: FunctionComponent<
                 onHandleAssessmentAction();
               }}
             >
-              {determineAction()}
+              {action}
             </Button>
           ) : (
             <Spinner role="status" size="md">

diff --git a/client/src/app/queries/assessments.ts b/client/src/app/queries/assessments.ts
@@ -182,7 +182,6 @@ export const useFetchAssessmentsByItemId = (
   };
   const assessmentsWithOrder: AssessmentWithSectionOrder[] =
     data?.map(addSectionOrderToQuestions) || [];
-
   return {
     assessments: assessmentsWithOrder,
     isFetching: isLoading,