fixed issue with automatic start causing it to add interactions repeatedly

src/bin/conditioning/modeChangeDialog.tsx

@@ -436,7 +436,9 @@ if (!selectedDevice) return;
       }
       stage1.steps.push(newStep);
     });
-    stages.push(stage1)
+    if(stage1.steps.length > 0){
+      stages.push(stage1)
+    }
     //stage two is to add the new interactions
     let stage2: Stage = {
       title: "Add New Interactions",
@@ -447,7 +449,9 @@ if (!selectedDevice) return;
         }
       ]
     }
-    stages.push(stage2)
+    if(stage2.steps.length > 0){
+      stages.push(stage2)
+    }
 
     //stage three is to update the controller components
     let stage3: Stage = {
@@ -463,7 +467,9 @@ if (!selectedDevice) return;
         stage3.steps.push(newStep)
       })
     })
-    stages.push(stage3)
+    if(stage3.steps.length > 0){
+      stages.push(stage3)
+    }
     //set those stages to a state variable
     setPromiseStages(stages)
   }
@@ -721,7 +727,7 @@ if (!selectedDevice) return;
       <Box>
         <PromiseProgress 
           stages={promiseStages}
-          automaticStart
+          description="These are the changes that will occur in order to change your bin mode with the given options. Press start to begin."
           failFast 
           onStart={() => {
             startChange()

src/common/PromiseProgress.tsx

@@ -1,5 +1,5 @@
 import { AxiosResponse } from "axios"
-import { Box, Button, CircularProgress, DialogActions, DialogContent, DialogTitle, Typography } from "@mui/material"
+import { Box, Button, CircularProgress, DialogActions, DialogContent, DialogTitle, Divider, Typography } from "@mui/material"
 import { useEffect, useState } from "react"
 import { CheckCircle, Error, Pending } from "@mui/icons-material"
 import React from "react"
@@ -18,7 +18,7 @@ export interface Step {
 
 interface Props {
   stages: Stage[]
-  automaticStart: boolean
+  description?: string
   failFast?: boolean
   onStart?: () => void
   onComplete?: () => void
@@ -32,10 +32,11 @@ enum progress {
 }
 
 export function PromiseProgress(props: Props){
-  const {stages, failFast, onStart, onComplete, automaticStart} = props
+  const {stages, failFast, onStart, onComplete, description } = props
   const [completion, setCompletion] = useState<Map<string, progress>>(new Map())
 
   const execute = () => {
+    console.log("executing")
     let completionMap: Map<string, progress> = new Map()
     stages.forEach((stage, i) => {
       stage.steps.forEach((_, k) => {
@@ -47,6 +48,7 @@ export function PromiseProgress(props: Props){
     const runStages = async () => {
       let progMap = new Map(completionMap)
       for (const [i, stage] of stages.entries()) {
+        console.log("the for loop:" + i)
         // For each stage, map the steps into their own promise chains
         const stepPromises = stage.steps.map((step, k) => {
           // mark step as in progress
@@ -84,12 +86,6 @@ export function PromiseProgress(props: Props){
     });
   }
 
-  useEffect(() => {
-    if(automaticStart){
-      execute()
-    }
-  },[automaticStart, execute])
-
   const getCompletion = (completion?: progress) => {
     switch(completion){
       case progress.InProgress:
@@ -123,16 +119,17 @@ export function PromiseProgress(props: Props){
         Progress
       </DialogTitle>
       <DialogContent>
-        {stages.map((stage, number) => displayStage(stage, number))}
+        <Typography>{description}</Typography>
+        <Box marginTop={2}>
+          {stages.map((stage, number) => displayStage(stage, number))}
+        </Box>
       </DialogContent>
       <DialogActions>
-        {!automaticStart &&
+      <Button variant="contained" color="primary" onClick={() => {
-          <Button onClick={() => {
+        execute()
-            execute()
+      }}>
-          }}>
+          Start
-              Start
+      </Button>
-          </Button>
-        }
       </DialogActions>
     </React.Fragment>
   )