From d5bb1446cf410619edaf774ceac727de9b9854a3 Mon Sep 17 00:00:00 2001
From: Ian Bolton <ibolton@redhat.com>
Date: Mon, 11 Dec 2023 11:46:15 -0500
Subject: [PATCH] :bug: 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 <ibolton@redhat.com>
---
 .../components/dynamic-assessment-actions-row.tsx    | 12 +++++++++---
 client/src/app/queries/assessments.ts                |  1 -
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/client/src/app/pages/assessment/components/assessment-actions/components/dynamic-assessment-actions-row.tsx b/client/src/app/pages/assessment/components/assessment-actions/components/dynamic-assessment-actions-row.tsx
index a5491825f8..f6f85cce6e 100644
--- a/client/src/app/pages/assessment/components/assessment-actions/components/dynamic-assessment-actions-row.tsx
+++ b/client/src/app/pages/assessment/components/assessment-actions/components/dynamic-assessment-actions-row.tsx
@@ -102,7 +102,7 @@ const DynamicAssessmentActionsRow: FunctionComponent<
     onDeleteError
   );
 
-  const determineAction = () => {
+  const determineAction = React.useCallback(() => {
     if (!assessment) {
       return AssessmentAction.Take;
     } else if (assessment.status === "started") {
@@ -110,7 +110,13 @@ const DynamicAssessmentActionsRow: FunctionComponent<
     } 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
index 2b24138b7e..b3796cbe07 100644
--- 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,