addition: removed alert, added show steps toggle state

src/Addition.js

@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useRef } from "react";
 import DataGrid, {Column} from "devextreme-react/data-grid";
-import {Alert} from "./AlertDialog.js";
 import {addNumbersToGrid, numbersToArrOfArr, afterCommaLen, handleKeyDown} from "./helpers.js";
 import "./App.css";
 
@@ -15,11 +14,12 @@ function Addition() {
   const [carryArr, setCarryArr] = useState([]); // array of carries ["1","0"]
   const [commaIdx, setCommaIdx] = useState(0); // int: comma position
   const [numbers, setNumbers] = useState(0); // array of arrays with input numbers
-  const [showAlert, setShowAlert] = useState(false);
   const [numbersGrid, setNumbersGrid] = useState([{id: 1, number: ""}]);
   const [resultsGrid, setResultsGrid] = useState([{id: 1, number: ""}]);
   const [stepsGrid, setStepsGrid] = useState([{id: 1, step: ""}]);
 
+  const [showSteps, setShowSteps] = useState(true);
+
   // focus the input field
   let calculationInput = useRef(null);
   useEffect(()=>{
@@ -63,8 +63,12 @@ function Addition() {
       }
 
       if(nosLeft === 0){
-        createIdmtResults(carryArrCopy);
-        setShowAlert(true);
+        if(showSteps){
+          showIdmtResults(carryArrCopy);
+          addButtonsToImdtSteps();
+        }else{
+          finishCalculation();
+        }
       }
     }
   }
@@ -173,34 +177,26 @@ function Addition() {
   }
 
   const addButtonsToImdtSteps = () => {
-    if(stepsGrid[0]["step"]!==""){
-      // workaround to access DOM td after grid values are set
-      setTimeout(() => {
-        let table = document.getElementById("idmtResultSteps").getElementsByTagName("table")[0]
-        let trs = table.getElementsByTagName("tr");
-        for(let trIdx in trs){
-          let tr = trs[trIdx];
-          if(tr instanceof HTMLElement && trIdx < trs.length-1){
-            let td = tr.getElementsByTagName("td")[0];
-            let btn = document.createElement("button");
-            btn.innerHTML = "hier starten";
-            btn.classList = "btn btn-secondary btn-sm";
-            btn.id = "btn-" + trIdx;
-            btn.addEventListener("click", () => startOver(trIdx));
-            td.appendChild(btn);
-          }
+    // workaround to access DOM td after grid values are set
+    setTimeout(() => {
+      let table = document.getElementById("idmtResultSteps").getElementsByTagName("table")[0]
+      let trs = table.getElementsByTagName("tr");
+      for(let trIdx in trs){
+        let tr = trs[trIdx];
+        if(tr instanceof HTMLElement && trIdx < trs.length-1){
+          let td = tr.getElementsByTagName("td")[0];
+          let btn = document.createElement("button");
+          btn.innerHTML = "hier starten";
+          btn.classList = "btn btn-secondary btn-sm";
+          btn.id = "btn-" + trIdx;
+          btn.addEventListener("click", () => startOver(trIdx));
+          td.appendChild(btn);
         }
-      }, 100);
-    }
-  }
-
-  const showIdmtResults = () => {
-    setShowAlert(false);
-    document.getElementById("idmtResultSteps").style.display = "inline-block";
-    addButtonsToImdtSteps();
+      }
+    }, 300);
   }
 
-  const createIdmtResults = (carryArrCopy) => {
+  const showIdmtResults = (carryArrCopy) => {
     let realResArr = realResult.toString().split("");
     while(realResArr.length < resArr.length){
       realResArr.unshift("&nbsp;"); // add " " before
@@ -283,10 +279,9 @@ function Addition() {
     btnSubmit2.id = "btnSubmitSteps2";
     document.getElementById("idmtResultSteps").appendChild(btnSubmit2);
 
+    document.getElementById("idmtResultSteps").style.display = "inline-block";
     document.getElementById("idmtResultSteps").tabIndex = 0;
     document.getElementById("idmtResultSteps").focus();
-
-    document.getElementById("idmtResultSteps").style.display = "none";
   }
 
   const startOver = (idx) => {
@@ -319,7 +314,6 @@ function Addition() {
   }
 
   const finishCalculation = () => {
-    setShowAlert(false);
     document.getElementById("idmtResultSteps").innerHTML = "";
     let resCalc = resArr.filter(n => n !== "&nbsp;").join("");
     setResultsGrid([{number: resCalc}]);
@@ -400,12 +394,6 @@ function Addition() {
         </DataGrid>
       </div>
 
-      <Alert
-        showAlert={showAlert}
-        finishCalc={finishCalculation}
-        showIdmtResults={showIdmtResults}
-      />
-
     </main>
   );
 }