confirmation message when defence is configured (#165)

* confirmation message when defence is configured * add timeout to configuration message
ScottLogic · Aug 17, 2023 · bc3ff1e · bc3ff1e
1 parent c2ce6ea
commit bc3ff1e
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 12 deletions.
diff --git a/frontend/src/components/DefenceBox/DefenceBox.tsx b/frontend/src/components/DefenceBox/DefenceBox.tsx
@@ -101,16 +101,22 @@ function DefenceBox({
     defenceId: string,
     config: DefenceConfig[]
   ) => {
-    configureDefence(defenceId, config).then(() => {
-      // update state
-      const newDefences = defenceDetails.map((defence) => {
-        if (defence.id === defenceId) {
-          defence.config = config;
+    const configSuccess = configureDefence(defenceId, config).then(
+      (success) => {
+        if (success) {
+          // update state
+          const newDefences = defenceDetails.map((defence) => {
+            if (defence.id === defenceId) {
+              defence.config = config;
+            }
+            return defence;
+          });
+          setDefenceDetails(newDefences);
         }
-        return defence;
-      });
-      setDefenceDetails(newDefences);
-    });
+        return success;
+      }
+    );
+    return configSuccess;
   };
 
   return (

diff --git a/frontend/src/components/DefenceBox/DefenceMechanism.css b/frontend/src/components/DefenceBox/DefenceMechanism.css
@@ -17,6 +17,16 @@
   margin-top: 4px;
 }
 
+.defence-mechanism-config-validated {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.validation-text {
+  font-size: 14px;
+  font-weight: 600;
+}
+
 @keyframes flash-red-active {
   0% {
     background-color: #eef;

diff --git a/frontend/src/components/DefenceBox/DefenceMechanism.tsx b/frontend/src/components/DefenceBox/DefenceMechanism.tsx
@@ -3,6 +3,7 @@ import { DefenceConfig, DefenceInfo } from "../../models/defence";
 import "./DefenceMechanism.css";
 import "../StrategyBox/StrategyMechanism.css";
 import DefenceConfiguration from "./DefenceConfiguration";
+const { TiTick, TiTimes } = require("react-icons/ti");
 
 function DefenceMechanism({
   defenceDetail,
@@ -13,21 +14,35 @@ function DefenceMechanism({
   defenceDetail: DefenceInfo;
   setDefenceActive: (defenceId: string) => void;
   setDefenceInactive: (defenceId: string) => void;
-  setDefenceConfiguration: (defenceId: string, config: DefenceConfig[]) => void;
+  setDefenceConfiguration: (
+    defenceId: string,
+    config: DefenceConfig[]
+  ) => Promise<boolean>;
 }) {
   const [isInfoBoxVisible, setIsInfoBoxVisible] = useState<boolean>(false);
+  const [isConfigured, setIsConfigured] = useState<boolean>(false);
+  const [configValidated, setConfigValidated] = useState<boolean>(true);
 
   const ANIMATION_FLASH_TIME_SECONDS = 1;
   const ANIMATION_FLASH_REPEAT = 3;
 
-  const setConfigurationValue = (configId: string, value: string) => {
+  const setConfigurationValue = async (configId: string, value: string) => {
     const newConfiguration = defenceDetail.config.map((config) => {
       if (config.id === configId) {
         config.value = value;
       }
       return config;
     });
-    setDefenceConfiguration(defenceDetail.id, newConfiguration);
+    setDefenceConfiguration(defenceDetail.id, newConfiguration).then(
+      (configured) => {
+        setIsConfigured(true);
+        setConfigValidated(configured);
+      }
+    );
+    // hide the message after 3 seconds
+    setTimeout(() => {
+      setIsConfigured(false);
+    }, 3000);
   };
 
   return (
@@ -90,6 +105,19 @@ function DefenceMechanism({
                 })}
               </div>
             ) : null}
+            {isConfigured ? (
+              <div className="defence-mechanism-config-validated">
+                {configValidated ? (
+                  <p className="validation-text">
+                    <TiTick /> defence successfully configured
+                  </p>
+                ) : (
+                  <p className="validation-text">
+                    <TiTimes /> invalid input - configuration failed
+                  </p>
+                )}
+              </div>
+            ) : null}
           </div>
         ) : null}
       </div>