camera zoom handling across components; unify zoom level type and improve state management

src/hooks/useCameraZoom.ts

@@ -1,6 +1,10 @@
-import { useMutation } from "@tanstack/react-query";
+import {
+  useMutation,
+  useQuery,
+  type QueryFunctionContext,
+} from "@tanstack/react-query";
 import { CAM_BASE } from "../utils/config";
-import type { ZoomInOptions } from "../types/types";
+import type { zoomConfig, ZoomInOptions } from "../types/types";
 
 async function zoomIn(options: ZoomInOptions) {
   const response = await fetch(
@@ -9,14 +13,32 @@ async function zoomIn(options: ZoomInOptions) {
   if (!response.ok) {
     throw new Error("Cannot reach camera zoom endpoint");
   }
+  const data = await response.json();
+  console.log(data);
   return;
 }
 
-export const useCameraZoom = () => {
+async function fetchZoomInConfig({
+  queryKey,
+}: QueryFunctionContext<[string, zoomConfig]>) {
+  const [, { camera }] = queryKey;
+  console.log(camera);
+  const response = await fetch(`${CAM_BASE}/Ip${camera}-inspect`);
+  if (!response.ok) {
+    throw new Error("Cannot get camera zoom settings");
+  }
+  return response.text();
+}
+//change to string
+export const useCameraZoom = (options: zoomConfig) => {
   const mutation = useMutation({
     mutationKey: ["zoomIn"],
     mutationFn: (options: ZoomInOptions) => zoomIn(options),
   });
 
-  return { mutation };
+  const query = useQuery({
+    queryKey: ["fetchZoomInConfig", options],
+    queryFn: fetchZoomInConfig,
+  });
+  return { mutation, query };
 };