Calculate complete status inside ManagementForm

opensafely-core · Jan 13, 2025 · aed359b · aed359b
1 parent bf0c28c
commit aed359b
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 11 deletions.
diff --git a/assets/src/scripts/components/CodelistBuilder.jsx b/assets/src/scripts/components/CodelistBuilder.jsx
@@ -137,11 +137,6 @@ class CodelistBuilder extends React.Component {
     return counts;
   }
 
-  complete() {
-    const counts = this.counts();
-    return counts["!"] === 0 && counts["?"] === 0;
-  }
-
   render() {
     const moreInfoModal =
       this.state.moreInfoModalCode &&
@@ -151,9 +146,7 @@ class CodelistBuilder extends React.Component {
       <>
         <Row>
           <Col md="3">
-            {this.props.isEditable && (
-              <ManagementForm complete={this.complete()} />
-            )}
+            {this.props.isEditable && <ManagementForm counts={this.counts()} />}
 
             <h3 className="h6">Summary</h3>
             <Filter filter={this.props.filter} />

diff --git a/assets/src/scripts/components/ManagementForm.jsx b/assets/src/scripts/components/ManagementForm.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
   Button,
   ButtonGroup,
@@ -9,8 +9,19 @@ import {
 } from "react-bootstrap";
 import { getCookie } from "../_utils";
 
-export default function ManagementForm({ complete }) {
+export default function ManagementForm({ counts }) {
   const [showDiscardModal, setShowDiscardModal] = useState(false);
+  const [isComplete, setIsComplete] = useState(false);
+
+  useEffect(
+    function calculateCounts() {
+      if (counts["!"] === 0 && counts["?"] === 0) {
+        return setIsComplete(true);
+      }
+      return setIsComplete(false);
+    },
+    [counts],
+  );
 
   return (
     <>
@@ -23,7 +34,7 @@ export default function ManagementForm({ complete }) {
         />
         <Form.Control id="action" name="action" type="hidden" value="" />
         <ButtonGroup aria-label="Codelist actions" className="d-block" vertical>
-          {complete ? (
+          {isComplete ? (
             <Button
               block
               name="action"