Refactor SnapshotContainer to integrate camera zoom functionality and improve error handling

src/components/CameraOverview/SnapshotContainer.tsx

@@ -1,6 +1,8 @@
 import { useGetOverviewSnapshot } from "../../hooks/useGetOverviewSnapshot";
-import type { ZoomLevel } from "../../types/types";
+import type { ZoomInOptions, ZoomLevel } from "../../types/types";
 import NavigationArrow from "../UI/NavigationArrow";
+import { useCameraZoom } from "../../hooks/useCameraZoom";
+import { useEffect } from "react";
 
 type SnapshotContainerProps = {
   side: string;
@@ -16,8 +18,9 @@ export const SnapshotContainer = ({
   onZoomLevelChange,
 }: SnapshotContainerProps) => {
   const { canvasRef, isError, isPending } = useGetOverviewSnapshot(side);
-  if (isError) return <p className="h-100">An error occurred</p>;
+  const { mutation } = useCameraZoom();
-  if (isPending) return <p className="h-100">Loading...</p>;
+  const cameraControllerSide =
+    side === "CameraA" ? "CameraControllerA" : "CameraControllerB";
 
   const handleZoomClick = (event: React.MouseEvent<HTMLCanvasElement>) => {
     const bounds = canvasRef.current?.getBoundingClientRect();
@@ -45,8 +48,24 @@ export const SnapshotContainer = ({
         py,
         level: newLevel,
       });
+
+    if (!zoomLevel?.level) return;
   };
 
+  useEffect(() => {
+    if (zoomLevel?.level) {
+      const zoomInOptions: ZoomInOptions = {
+        camera: cameraControllerSide,
+        multiplier: zoomLevel.level,
+      };
+      mutation.mutate(zoomInOptions);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [zoomLevel?.level]);
+
+  if (isError) return <p className="h-100">An error occurred</p>;
+  if (isPending) return <p className="h-100">Loading...</p>;
+
   return (
     <div className="flex flex-col md:flex-row">
       <NavigationArrow side={side} settingsPage={settingsPage} />