interactions are being added to the components correctly

src/bin/conditioning/modeChangeDialog.tsx

@@ -54,7 +54,7 @@ export default function ModeChangeDialog(props: Props){
     grain
   } = props
   const [{as}] = useGlobalState()
-  const [componentSets, setComponentSets] = useState<ComponentSet[]>([])
+  // const [componentSets, setComponentSets] = useState<ComponentSet[]>([])
   const interactionAPI = useInteractionsAPI()
   const componentAPI = useComponentAPI();
   const [selectedDevice, setSelectedDevice] = useState<Device | undefined>()
@@ -71,6 +71,8 @@ export default function ModeChangeDialog(props: Props){
   const [fans, setFans] = useState<Controller[]>([])
   const [selectedPreset, setSelectedPreset] = useState<DevicePreset | undefined>(undefined);
   const grainExtensionMap = GetGrainExtensionMap();
+  const [conflictingSetInteractions, setConflictingSetInteractions] = useState<Interaction[]>([])
+  const [interactionsToAdd, setInteractionsToAdd] = useState<pond.MultiInteractionSettings>()
   
   //get the interactions and components for the device when it is selected from the dropdown
   useEffect(()=>{
@@ -95,7 +97,6 @@ export default function ModeChangeDialog(props: Props){
             newDComponents.push(c);
             dComponents.set(deviceNumber.toString(), newDComponents);
           });
-          console.log(dComponents)
           setDeviceComponents(dComponents);
           setExistingInteractions(interactionResp);
         })
@@ -335,18 +336,41 @@ if (!selectedDevice) return;
     return interaction;
   };
 
+  //this is what will use the conflicting interactions
+  const execute = () => {
+    if(!selectedDevice || !interactionsToAdd) return //if there is no device selected or there are no interactions to add, do nothing
+    //create an array of promises to delete the conflicting interactions
+    let conflictingInteractionsPromise = conflictingSetInteractions.map(i => {
+      return interactionAPI.removeInteraction(selectedDevice.id(), i.key(), as);
+    });
+    Promise.all([...conflictingInteractionsPromise]).then(() => {
+      //the conflicting interactions were removed now add the new ones
+      interactionAPI.addMultiInteractions(selectedDevice.id(), interactionsToAdd)
+    }).catch(err => {
+      //there was a problem removing any conflicting interactions
+    })
+  }
 
-  //function to loop through the interaction sets building the settings
+
-  const createInteractions = () => {
+  /**
-    if(!selectedDevice) return //if there is no device that was selected, do nothing
+   * this function takes in the sets that are passed in and returns the promises needed for removing conflicting interactions and adding the new ones
+   * IT DOES NOT EXECUTE THEM ONLY CREATES THE PROMISES
+   * returns an object containing two values, 
+   * one is an array of promises for conflicting interactions to remove and the other is the promise for adding the new interactions
+   * @param sets 
+   * @returns 
+   */
+  const createInteractions = (sets: ComponentSet[]) => {
+    if(!selectedDevice) return undefined //if there is no device that was selected, do nothing
     let multiInteractionSettings: pond.MultiInteractionSettings = pond.MultiInteractionSettings.create()
+    let conflictingInteractions: Interaction[] = []
     let linkedComponents = deviceComponents.get(selectedDevice.id().toString());
     //loop through the sets
-    componentSets.forEach(async (set) => {
+    sets.forEach(async (set) => {
       //loop through the controllers
       set.controllers.forEach(controller => {
         //filter the conflicting interactions for that controller
-        let conflictingInteractions = existingInteractions.filter(i => {
+        let c = existingInteractions.filter(i => {
           let conflicting = false;
           if (linkedComponents) {
             linkedComponents.forEach(comp => {
@@ -357,13 +381,7 @@ if (!selectedDevice) return;
           }
           return conflicting;
         });
-        //create an array of promises to delete them
+        conflictingInteractions = conflictingInteractions.concat(c)
-        let deleteConflictingInteractions = conflictingInteractions.map(i => {
-          return interactionAPI.removeInteraction(selectedDevice.id(), i.key(), as);
-        });
-        //execute the promises
-        Promise.all([...deleteConflictingInteractions]).finally(() => {
-          //and one they are done make the new interaction to be added for the sensor and controller pair
         switch(binMode){
           case pond.BinMode.BIN_MODE_COOLDOWN:
             // if the controller is a heater create heater interaction
@@ -388,7 +406,6 @@ if (!selectedDevice) return;
                   //otherwise make a fan interaction
                   multiInteractionSettings.interactions.push(buildFanInteraction(set.sensor, controller, "greater", "less"))
                 }
-
             }
             break;
           case pond.BinMode.BIN_MODE_HYDRATING:
@@ -400,18 +417,12 @@ if (!selectedDevice) return;
               }
             break;
         }
-          console.log(multiInteractionSettings)
-        })
-        
       })
     })
-    //add all of the interactions that were created (multiInteraction)
+    return {
-    interactionAPI.addMultiInteractions(selectedDevice.id(), multiInteractionSettings).then(resp => {
+      conflicting: conflictingInteractions,
-      //then once the interactions are added update the controllers to the proper states
+      toAdd: multiInteractionSettings
-
+    }
-    }).catch(err => {
-      //there was a problem adding the interactions
-    })
   }
 
   const deviceSelector = () => {
@@ -513,8 +524,14 @@ if (!selectedDevice) return;
                 heaters={heaters} 
                 updateSets={(sets) => {
                   //update the component sets that will be used for the interactions
-                  console.log(sets)
+                  //when the sets change it will create the interactions and any conflicting ones that need to be removed will be put into a list
-                  setComponentSets(sets)
+                  //then when the submit button gets clicked it will use the conflicting list and toAdd to remove conflicting interactions and add the new ones
+                  let i = createInteractions(sets)
+                  if(i !== undefined){
+                    console.log(i)
+                    setConflictingSetInteractions(i.conflicting)
+                    setInteractionsToAdd(i.toAdd)
+                  }
                 }}/>
             </DialogContent>
             <DialogActions>
@@ -525,7 +542,7 @@ if (!selectedDevice) return;
               </Button>
               <Button variant="contained" color="primary" onClick={()=>{
                 //add new interactions to the component sets
-                createInteractions()
+                execute()
                 close(true)
               }}>
                 Submit