- Enhanced camera feed state management with region handling and mode changes

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

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState, type RefObject } from "react";
 import { Stage, Layer, Image, Shape } from "react-konva";
 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";
 
@@ -11,17 +11,13 @@ const cols = 40;
 const size = 20;
 const gap = 0;
 
-type VideoFeedGridPainterProps = {
-  regions: Region[];
-  selectedRegionIndex: number;
-  mode: string;
-  paintedCells: RefObject<Map<string, PaintedCell>>;
-};
-
-const VideoFeedGridPainter = ({ regions, selectedRegionIndex, mode }: VideoFeedGridPainterProps) => {
-  const { state, dispatch } = useCameraFeedContext();
+const VideoFeedGridPainter = () => {
+  const { state } = useCameraFeedContext();
   const cameraFeedID = state.cameraFeedID;
   const paintedCells = state.paintedCells[cameraFeedID];
+  const regions = state.regionsByCamera[cameraFeedID];
+  const selectedRegionIndex = state.selectedRegionIndex;
+  const mode = state.modeByCamera[cameraFeedID];
   const { latestBitmapRef, isloading } = useCreateVideoSnapshot();
   const [stageSize, setStageSize] = useState({ width: 740, height: 460 });
   const isDrawingRef = useRef(false);