deleting items syncing

src/bapsicle.ts

@@ -1,8 +1,9 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { Dispatch, Middleware } from "redux";
+import { TimeslotItem } from "./api";
 import { load, pause, play, seek, stop } from "./mixer/state";
 import { RootState } from "./rootReducer";
-import { PlanItem } from "./showplanner/state";
+import { PlanItem, removeItem } from "./showplanner/state";
 import { AppThunk } from "./store";
 
 interface Connection {
@@ -65,6 +66,23 @@ export const bapsicleMiddleware: Middleware<{}, RootState, Dispatch<any>> = (
             });
             store.dispatch(load(message.channel, itemToLoad!));
             break;
+          case "REMOVE":
+            var itemToRemove: PlanItem;
+            store.getState().showplan.plan?.forEach((item) => {
+              if (
+                item.channel === message.channel &&
+                item.weight === message.weight
+              ) {
+                itemToRemove = item;
+              }
+            });
+            store.dispatch(
+              removeItem(
+                store.getState().session.currentTimeslot!.timeslot_id,
+                (itemToRemove! as TimeslotItem).timeslotitemid
+              )
+            );
+            break;
         }
       } else if ("message" in message) {
         if (message.message === "Hello") {

src/showplanner/Item.tsx

@@ -70,7 +70,7 @@ export const Item = memo(function Item({
         >
           <ContextMenuTrigger
             id={isReal ? TS_ITEM_MENU_ID : ""}
-            collect={() => ({ id })}
+            collect={() => ({ id, column, index })}
           >
             <span className={"icon " + x.type} />
             &nbsp;

src/showplanner/index.tsx

@@ -40,6 +40,7 @@ import { Player } from "./Player";
 import { CombinedNavAlertBar } from "../navbar";
 import "./channel.scss";
 import Modal from "react-modal";
+import { sendBAPSicleChannel } from "../bapsicle";
 
 function Channel({ id, data }: { id: number; data: PlanItem[] }) {
   return (
@@ -231,7 +232,15 @@ const Showplanner: React.FC<{ timeslotId: number }> = function({ timeslotId }) {
     }
   }
 
-  async function onCtxRemoveClick(e: any, data: { id: string }) {
+  async function onCtxRemoveClick(
+    e: any,
+    data: { id: string; column: number; index: number }
+  ) {
+    sendBAPSicleChannel({
+      channel: data.column,
+      command: "REMOVE",
+      weight: data.index,
+    });
     dispatch(removeItem(timeslotId, data.id));
   }
   async function onCtxUnPlayedClick(e: any, data: { id: string }) {