From 4eeb3684847526ae967924a1b3af08f1d40a1fb5 Mon Sep 17 00:00:00 2001
From: Toba Ojo <toba.ojo@mav-systems.com>
Date: Wed, 1 Oct 2025 11:30:06 +0100
Subject: [PATCH] Refactor SnapshotContainer to integrate camera zoom
 functionality and improve error handling

---
 .../CameraOverview/SnapshotContainer.tsx      | 25 ++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/CameraOverview/SnapshotContainer.tsx b/src/components/CameraOverview/SnapshotContainer.tsx
index 5e1698f..7d85dad 100644
--- a/src/components/CameraOverview/SnapshotContainer.tsx
+++ b/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>;
-  if (isPending) return <p className="h-100">Loading...</p>;
+  const { mutation } = useCameraZoom();
+  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} />