Refactor camera feed handling to support dynamic camera IDs and improve context management

src/app/providers/CameraFeedProvider.tsx

@@ -3,13 +3,12 @@ import { CameraFeedContext } from "../context/CameraFeedContext";
 import { initialState, reducer } from "../reducers/cameraFeedReducer";
 import { useBlackBoard } from "../../hooks/useBlackBoard";
 import type { CameraFeedState } from "../../types/types";
-import { useCameraZoom } from "../../features/cameras/hooks/useCameraZoom";
+
+import { CAMERA_IDS } from "../config/cameraConfig";
+import CameraZoomFetcher from "./CameraZoomFetcher";
 
 export const CameraFeedProvider = ({ children }: { children: ReactNode }) => {
   const { blackboardMutation } = useBlackBoard();
-  const { cameraZoomQuery: cameraZoomQueryA } = useCameraZoom("A");
-  const { cameraZoomQuery: cameraZoomQueryB } = useCameraZoom("B");
-  const { cameraZoomQuery: cameraZoomQueryC } = useCameraZoom("C");
 
   const [state, dispatch] = useReducer(reducer, initialState);
 
@@ -23,52 +22,25 @@ export const CameraFeedProvider = ({ children }: { children: ReactNode }) => {
       const cameraFeedData: CameraFeedState = result.result;
       const recontructedState = {
         ...cameraFeedData,
-        paintedCells: {
-          A: new Map(cameraFeedData.paintedCells.A),
-          B: new Map(cameraFeedData.paintedCells.B),
-          C: new Map(cameraFeedData.paintedCells.C),
-        },
+        paintedCells: CAMERA_IDS.reduce(
+          (acc, id) => {
+            acc[id] = new Map(cameraFeedData.paintedCells[id]);
+            return acc;
+          },
+          {} as typeof cameraFeedData.paintedCells,
+        ),
       };
       dispatch({ type: "SET_CAMERA_FEED_DATA", cameraState: recontructedState });
     };
     fetchBlackBoardData();
   }, []);
 
-  useEffect(() => {
-    const fetchZoomLevels = async () => {
-      const [resultA, resultB, resultC] = await Promise.all([
-        cameraZoomQueryA.refetch(),
-        cameraZoomQueryB.refetch(),
-        cameraZoomQueryC.refetch(),
-      ]);
-
-      const zoomLevelAnumber = parseFloat(resultA.data?.propPhysCurrent?.value);
-      const zoomLevelBnumber = parseFloat(resultB.data?.propPhysCurrent?.value);
-      const zoomLevelCnumber = parseFloat(resultC.data?.propPhysCurrent?.value);
-
-      if (resultA.data) {
-        dispatch({
-          type: "SET_ZOOM_LEVEL",
-          payload: { cameraFeedID: "A", zoomLevel: zoomLevelAnumber },
-        });
-      }
-
-      if (resultB.data) {
-        dispatch({
-          type: "SET_ZOOM_LEVEL",
-          payload: { cameraFeedID: "B", zoomLevel: zoomLevelBnumber },
-        });
-      }
-
-      if (resultC.data) {
-        dispatch({
-          type: "SET_ZOOM_LEVEL",
-          payload: { cameraFeedID: "C", zoomLevel: zoomLevelCnumber },
-        });
-      }
-    };
-    fetchZoomLevels();
-  }, []);
-
-  return <CameraFeedContext.Provider value={{ state, dispatch }}>{children}</CameraFeedContext.Provider>;
+  return (
+    <CameraFeedContext.Provider value={{ state, dispatch }}>
+      {CAMERA_IDS.map((cameraId) => (
+        <CameraZoomFetcher key={cameraId} cameraId={cameraId} dispatch={dispatch} />
+      ))}
+      {children}
+    </CameraFeedContext.Provider>
+  );
 };