updated the interaction api to have the new call to clear interactions, and am now using that call to clear the interactions from the pressure chain and when that response comes back successfully then will add the new set of interactions

package-lock.json

@@ -10953,7 +10953,7 @@
     },
     "node_modules/protobuf-ts": {
       "version": "1.0.0",
-      "resolved": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#580cb59c08f9895384b5adc4853c480bf3bf3165",
+      "resolved": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#09c1448af13950a76e9097c9b374680390039c48",
       "dependencies": {
         "protobufjs": "^6.8.8"
       }

src/gate/GateDeviceInteraction.tsx

@@ -39,7 +39,7 @@ const densityMap = new Map<number, number>([
 export default function GateDeviceInteraction(props: Props) {
   const { open, close, gate, compDevice, densityTemp } = props;
   const [{ user, as }] = useGlobalState();
-  const [device, setDevice] = useState<Device>()
+  const [device, setDevice] = useState<Device>(Device.create())
   const [lowDelta, setLowDelta] = useState(0);
   const [highDelta, setHighDelta] = useState(0);
   const [greenComponent, setGreenComponent] = useState<Component>();
@@ -52,6 +52,7 @@ export default function GateDeviceInteraction(props: Props) {
   //if the pressure is under this value then the red light should be off
   const [redThreshold, setRedThreshold] = useState("0")
   const { openSnack } = useSnackbar();
+  const [pressureSource, setPressureSource] = useState<quack.ComponentID>(quack.ComponentID.create())
 
   useEffect(() => {
     //math to determine what the delta pressures to set will be
@@ -102,6 +103,13 @@ export default function GateDeviceInteraction(props: Props) {
           gate.preferences[component.key()] === pond.GateComponentType.GATE_COMPONENT_TYPE_PRESSURE
         ) {
           setPressureComponent(component);
+          setPressureSource(
+              quack.ComponentID.create({
+              type: component.type(),
+              address: component.settings.address,
+              addressType: component.settings.addressType
+            })
+          )
         }
       }
     });
@@ -111,21 +119,6 @@ export default function GateDeviceInteraction(props: Props) {
     }
   }, [gate, densityTemp, user, compDevice]);
 
-  // useEffect(() => {
-  //   //load current interactions for the device
-  //   let deviceID = Device.any(compDevice.device).id();
-  //   interactionsAPI.listInteractionsByDevice(deviceID).then(resp => {
-  //     setCurrentInteractions(resp);
-  //   });
-  // }, [compDevice.device, interactionsAPI]);
-
-  // const removeCurrentInteractions = () => {
-  //   let deviceID = Device.any(compDevice.device).id();
-  //   currentInteractions.forEach(interaction => {
-  //     interactionsAPI.removeInteraction(deviceID, interaction.key());
-  //   });
-  // };
-
   const buttonDisabled = () => {
     if (greenComponent === undefined) return true
     if (redComponent === undefined) return true
@@ -157,12 +150,6 @@ export default function GateDeviceInteraction(props: Props) {
         addressType: greenComponent.settings.addressType
       })
 
-      const pressureSource = quack.ComponentID.create({
-        type: pressureComponent.type(),
-        address: pressureComponent.settings.address,
-        addressType: pressureComponent.settings.addressType
-      })
-
       const lightSchedule = pond.InteractionSchedule.create({
         timezone: moment.tz.guess(),
         weekdays: ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"],
@@ -360,7 +347,7 @@ export default function GateDeviceInteraction(props: Props) {
         <Typography>{greenComponent ? "" : "Green LED Component not found"}</Typography>
         <Typography>{redComponent ? "" : "Red LED Component not found"}</Typography> */}
         <Typography>
-          This will set interactions on the pressure chain to toggle the green light on and the red light off 
+          This will clear existing interactions on the pressure chain and set new ones to toggle the green light on and the red light off 
           when the difference between the pressures falls within this range and vice versa:
         </Typography>
         <br />
@@ -408,7 +395,11 @@ export default function GateDeviceInteraction(props: Props) {
             //TODO: Once we figure out how to fix the backend to handle rapid addition/removal of interactions
             //removeCurrentInteractions();
             setAdding(true);
+            interactionsAPI.clearInteractions(device.id(), [pressureSource]).then(resp => {
               createInteractions();
+            }).catch(err => {
+              console.error(err)
+            })
           }}
           disabled={buttonDisabled()}>
           {adding ? "Adding Interaction" : "Create Interaction"}

src/providers/pond/interactionsAPI.tsx

@@ -36,6 +36,7 @@ export interface IInteractionsAPIContext {
     alerts: pond.AlertData[],
     otherTeam?: string
   ) => Promise<AxiosResponse<pond.SetAlertInteractionsResponse>>;
+  clearInteractions: (device: number, sources?: quack.ComponentID[], otherTeam?: string) => Promise<AxiosResponse<pond.ClearInteractionsResponse>>
 }
 
 export const InteractionsAPIContext = createContext<IInteractionsAPIContext>(
@@ -285,6 +286,25 @@ export default function InteractionProvider(props: PropsWithChildren<Props>) {
     })
   };
 
+  const clearInteractions = (device: number, sources?: quack.ComponentID[], otherTeam?: string): Promise<AxiosResponse<pond.ClearInteractionsResponse>> => {
+    const view = otherTeam ? otherTeam : as
+    let sourceArray: string[] = []
+    if (sources){
+      sources.forEach(source => {
+        sourceArray.push(componentIDToString(source))
+      })
+    }
+    let url = pondURL("/devices/"+ device + "/interactions/clear" + (view ? "?as=" + view : "") + (sources ? "&sources=" + sourceArray.toString() : ""))
+    return new Promise<AxiosResponse<pond.ClearInteractionsResponse>>((resolve, reject) => {
+      post<pond.ClearInteractionsResponse>(url).then(resp => {
+        resp.data = pond.ClearInteractionsResponse.fromObject(resp.data)
+        return resolve(resp)
+      }).catch(err => {
+        return reject(err)
+      })
+    })
+  }
+
   return (
     <InteractionsAPIContext.Provider
       value={{
@@ -296,7 +316,8 @@ export default function InteractionProvider(props: PropsWithChildren<Props>) {
         updateInteractionPondSettings,
         removeInteraction,
         listInteractionsByDevice,
-        listInteractionsByComponent
+        listInteractionsByComponent,
+        clearInteractions
       }}>
       {children}
     </InteractionsAPIContext.Provider>