src/app/reducers/cameraFeedReducer.ts

@@ -1,7 +1,12 @@
-import type { CameraFeedAction, CameraFeedState } from "../../types/types";
+import type { CameraFeedAction, CameraFeedState, PaintedCell } from "../../types/types";
 
 export const initialState: CameraFeedState = {
   cameraFeedID: "A",
+  paintedCells: {
+    A: new Map<string, PaintedCell>(),
+    B: new Map<string, PaintedCell>(),
+    C: new Map<string, PaintedCell>(),
+  },
 };
 
 export function reducer(state: CameraFeedState, action: CameraFeedAction) {

src/features/cameras/components/CameraSettings/CameraPanel.tsx

@@ -7,24 +7,25 @@ type CameraPanelProps = {
 
 const CameraPanel = ({ tabIndex }: CameraPanelProps) => {
   const { dispatch } = useCameraFeedContext();
-  const mapIndextoCameraId = () => {
-    switch (tabIndex) {
-      case 1:
-        return "A";
-      case 2:
-        return "B";
-      case 3:
-        return "C";
-      default:
-        return null;
-    }
-  };
 
   useEffect(() => {
-    const cameraId = mapIndextoCameraId();
+    const mapIndextoCameraId = () => {
+      switch (tabIndex) {
+        case 1:
+          return "A";
+        case 2:
+          return "B";
+        case 3:
+          return "C";
+        default:
+          return null;
+      }
+    };
 
+    const cameraId = mapIndextoCameraId();
+    console.log(cameraId);
     dispatch({ type: "SET_CAMERA_FEED", payload: cameraId });
-  }, [tabIndex]);
+  }, [dispatch, tabIndex]);
 
   return <div>CameraPanel</div>;
 };

src/features/cameras/components/Video/VideoFeedGridPainter.tsx

@@ -4,6 +4,7 @@ import type { KonvaEventObject } from "konva/lib/Node";
 import { useCreateVideoSnapshot } from "../../hooks/useGetvideoSnapshots";
 import type { PaintedCell, Region } from "../../../../types/types";
 import Card from "../../../../ui/Card";
+import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
 
 const rows = 40;
 const cols = 40;
@@ -17,7 +18,10 @@ type VideoFeedGridPainterProps = {
   paintedCells: RefObject<Map<string, PaintedCell>>;
 };
 
-const VideoFeedGridPainter = ({ regions, selectedRegionIndex, mode, paintedCells }: VideoFeedGridPainterProps) => {
+const VideoFeedGridPainter = ({ regions, selectedRegionIndex, mode }: VideoFeedGridPainterProps) => {
+  const { state, dispatch } = useCameraFeedContext();
+  const cameraFeedID = state.cameraFeedID;
+  const paintedCells = state.paintedCells[cameraFeedID];
   const { latestBitmapRef, isloading } = useCreateVideoSnapshot();
   const [stageSize, setStageSize] = useState({ width: 740, height: 460 });
   const isDrawingRef = useRef(false);
@@ -47,7 +51,7 @@ const VideoFeedGridPainter = ({ regions, selectedRegionIndex, mode, paintedCells
     const key = `${row}-${col}`;
     const currentColour = regions[selectedRegionIndex].brushColour;
 
-    const map = paintedCells.current;
+    const map = paintedCells;
     const existing = map.get(key);
 
     if (mode === "eraser") {
@@ -121,7 +125,7 @@ const VideoFeedGridPainter = ({ regions, selectedRegionIndex, mode, paintedCells
         <Layer ref={paintLayerRef} opacity={0.6}>
           <Shape
             sceneFunc={(ctx, shape) => {
-              const cells = paintedCells.current;
+              const cells = paintedCells;
               cells.forEach((cell, key) => {
                 const [rowStr, colStr] = key.split("-");
                 const row = Number(rowStr);

src/types/types.ts

@@ -97,10 +97,15 @@ export type OptionalBOF2LaneIDs = {
 };
 
 export type CameraFeedState = {
-  cameraFeedID: "A" | "B" | "C" | null;
+  cameraFeedID: "A" | "B" | "C";
+  paintedCells: {
+    A: Map<string, PaintedCell>;
+    B: Map<string, PaintedCell>;
+    C: Map<string, PaintedCell>;
+  };
 };
 
 export type CameraFeedAction = {
   type: string;
-  payload: "A" | "B" | "C" | null;
+  payload: "A" | "B" | "C";
 };