Add camera zoom functionality and refactor blackboard data fetching

- Introduced `useCameraZoom` hook for managing camera zoom operations.
- Refactored `useCameraBlackboard` to improve data fetching function naming.
- Updated `CameraSettingFields` to utilize new zoom functionality and handle zoom level changes.
- Removed unnecessary console logs from `Dashboard`.

src/components/CameraSettings/CameraSettingFields.tsx

@@ -3,12 +3,15 @@ import type {
   CameraConfig,
   CameraSettingErrorValues,
   CameraSettingValues,
+  ZoomInOptions,
   ZoomLevel,
 } from "../../types/types";
 import { useMemo, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faEye, faEyeSlash } from "@fortawesome/free-regular-svg-icons";
 import CardHeader from "../UI/CardHeader";
+import { useCameraZoom } from "../../hooks/useCameraZoom";
+import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
 
 type CameraSettingsProps = {
   initialData: CameraConfig;
@@ -24,7 +27,9 @@ const CameraSettingFields = ({
   onZoomLevelChange,
 }: CameraSettingsProps) => {
   const [showPwd, setShowPwd] = useState(false);
-  console.log(initialData);
+  const { mutation } = useCameraZoom();
+  const { mutation: blackboardMuation, query: blackboardQuery } =
+    useCameraBlackboard();
   const initialValues = useMemo<CameraSettingValues>(
     () => ({
       friendlyName: initialData?.id ?? "",
@@ -32,6 +37,7 @@ const CameraSettingFields = ({
       userName: "",
       password: "",
       id: initialData?.id,
+      //TODO: update zoomlevel to query data
       zoom: zoomLevel?.level ? zoomLevel.level : 1,
     }),
     [initialData?.id, initialData?.propURI?.value, zoomLevel?.level]
@@ -41,23 +47,42 @@ const CameraSettingFields = ({
     const errors: CameraSettingErrorValues = {};
     if (!values.friendlyName) errors.friendlyName = "Required";
     if (!values.cameraAddress) errors.cameraAddress = "Required";
-    if (!values.userName) errors.userName = "Required";
-    if (!values.password) errors.password = "Required";
-
     return errors;
   };
 
   const handleSubmit = (values: CameraSettingValues) => {
-    console.log(values);
     updateCameraConfig(values);
   };
 
-  const handleRadioButtonChange = (levelNumber: number) => {
+  const handleRadioButtonChange = async (levelNumber: number) => {
     if (!onZoomLevelChange || !zoomLevel) return;
     onZoomLevelChange({
       ...zoomLevel,
       level: zoomLevel?.level !== levelNumber ? levelNumber : zoomLevel?.level,
     });
+    const cameraControllerSide =
+      initialData?.id === "CameraA" ? "CameraControllerA" : "CameraControllerB";
+
+    const zoomInOptions: ZoomInOptions = {
+      camera: cameraControllerSide,
+      multiplier: levelNumber,
+    };
+
+    mutation.mutate(zoomInOptions);
+
+    if (!blackboardQuery.data.cameraZoom) {
+      blackboardMuation.mutate({
+        operation: "INSERT",
+        path: "cameraZoom",
+        value: zoomInOptions,
+      });
+    } else {
+      blackboardMuation.mutate({
+        operation: "APPEND",
+        path: "cameraZoom",
+        value: zoomInOptions,
+      });
+    }
   };
 
   return (

src/hooks/useCameraBlackboard.ts

@@ -2,7 +2,7 @@ import { useMutation, useQuery } from "@tanstack/react-query";
 import { CAM_BASE } from "../utils/config";
 import type { CameraBlackBoardOptions } from "../types/types";
 
-const getBlackboardData = async () => {
+const getAllBlackboardData = async () => {
   const response = await fetch(`${CAM_BASE}/api/blackboard`);
   if (!response.ok) {
     throw new Error("Failed to fetch blackboard data");
@@ -25,7 +25,7 @@ const viewBlackboardData = async (options: CameraBlackBoardOptions) => {
 export const useCameraBlackboard = () => {
   const query = useQuery({
     queryKey: ["cameraBlackboard"],
-    queryFn: getBlackboardData,
+    queryFn: getAllBlackboardData,
   });
 
   const mutation = useMutation({

src/hooks/useCameraZoom.ts

@@ -0,0 +1,22 @@
+import { useMutation } from "@tanstack/react-query";
+import { CAM_BASE } from "../utils/config";
+import type { ZoomInOptions } from "../types/types";
+
+async function zoomIn(options: ZoomInOptions) {
+  const response = await fetch(
+    `${CAM_BASE}/Ip${options.camera}-command?magnification=${options.multiplier}x`
+  );
+  if (!response.ok) {
+    throw new Error("Cannot reach camera zoom endpoint");
+  }
+  return;
+}
+
+export const useCameraZoom = () => {
+  const mutation = useMutation({
+    mutationKey: ["zoomIn"],
+    mutationFn: (options: ZoomInOptions) => zoomIn(options),
+  });
+
+  return { mutation };
+};

src/pages/Dashboard.tsx

@@ -7,7 +7,6 @@ const Dashboard = () => {
   const mode = import.meta.env.MODE;
   const base_url = `${CAM_BASE}/SightingList/sightingSummary?mostRecentRef=`;
   console.log(mode);
-  console.log(base_url);
   return (
     <SightingFeedProvider url={base_url}>
       <div className="mx-auto flex flex-col lg:flex-row gap-2 px-1 sm:px-2 lg:px-0 w-full min-h-screen">

src/types/types.ts

@@ -261,3 +261,8 @@ export type ZoomLevel = {
   py: number;
   level?: number;
 };
+
+export type ZoomInOptions = {
+  camera: string;
+  multiplier: number;
+};