- more addition bugfixes

src/components/CameraOverview/SnapshotContainer.tsx

@@ -5,7 +5,7 @@ import { useCameraZoom } from "../../hooks/useCameraZoom";
 import { useEffect } from "react";
 import Loading from "../UI/Loading";
 import ErrorState from "../UI/ErrorState";
-import { zoomMapping } from "../../utils/utils";
+import { reverseZoomMapping, zoomMapping } from "../../utils/utils";
 
 type SnapshotContainerProps = {
   side: string;
@@ -17,7 +17,9 @@ type SnapshotContainerProps = {
 export const SnapshotContainer = ({ side, settingsPage, zoomLevel, onZoomLevelChange }: SnapshotContainerProps) => {
   const { canvasRef, isError, isPending } = useGetOverviewSnapshot(side);
   const cameraControllerSide = side === "CameraA" ? "CameraControllerA" : "CameraControllerB";
-  const { mutation } = useCameraZoom({ camera: cameraControllerSide });
+  const { mutation, query } = useCameraZoom({ camera: cameraControllerSide });
+  const magnification = query?.data?.propMagnification?.value;
+  const apiZoom = reverseZoomMapping(magnification);
 
   const handleZoomClick = () => {
     const baseLevel = zoomLevel ?? 1;
@@ -30,16 +32,16 @@ export const SnapshotContainer = ({ side, settingsPage, zoomLevel, onZoomLevelCh
 
   useEffect(() => {
     if (zoomLevel) {
-      const text = zoomMapping(zoomLevel);
+      const text = zoomMapping(apiZoom);
       const zoomInOptions: ZoomInOptions = {
         camera: cameraControllerSide,
         multiplier: zoomLevel,
         multiplierText: text,
       };
+      console.log(zoomInOptions);
       mutation.mutate(zoomInOptions);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [zoomLevel]);
+  }, [cameraControllerSide, apiZoom, zoomLevel]);
 
   return (
     <div className="flex flex-col md:flex-row">