r- efactored reboots api to use useMutation for maintainability and readability.

- updated zoom debug

src/components/CameraSettings/CameraSettingFields.tsx

@@ -36,10 +36,10 @@ const CameraSettingFields = ({
   const parsed = parseRTSPUrl(initialData?.propURI?.value);
 
   useEffect(() => {
-    if (!query.data) return;
+    if (!query?.data) return;
     const apiZoom = getZoomLevel(query.data);
     onZoomLevelChange?.(apiZoom);
-  }, [query.data, onZoomLevelChange]);
+  }, [query?.data, onZoomLevelChange]);
 
   const getZoomLevel = (levelstring: string | undefined) => {
     switch (levelstring) {

src/components/SettingForms/System/Reboots.tsx

@@ -1,15 +0,0 @@
-export async function handleSoftReboot() {
-const response = await fetch(
-    `http://192.168.75.11/api/restart-flexiai`
-);
-if (!response.ok) throw new Error("Failed to Software Reboot");
-else alert("Software reboot triggered!");
-}
-
-export async function handleHardReboot() {
-const response = await fetch(
-    `http://192.168.75.11/api/restart-hardware`
-);
-if (!response.ok) throw new Error("Failed to Hardware Reboot");
-else alert("Hardware reboot triggered!");
-}

src/components/SettingForms/System/SystemConfigFields.tsx

@@ -1,6 +1,6 @@
 import { Formik, Field, Form } from "formik";
 import FormGroup from "../components/FormGroup";
-import { handleSoftReboot, handleHardReboot } from "./Reboots";
+import { useReboots } from "../../../hooks/useReboots";
 import { timezones } from "./timezones";
 import SystemFileUpload from "./SystemFileUpload";
 import type { SystemValues, SystemValuesErrors } from "../../../types/types";
@@ -9,6 +9,8 @@ import { useSystemConfig } from "../../../hooks/useSystemConfig";
 const SystemConfigFields = () => {
   const { saveSystemSettings, systemSettingsData, saveSystemSettingsLoading } =
     useSystemConfig();
+  const { softRebootMutation, hardRebootMutation } = useReboots();
+
   const initialvalues: SystemValues = {
     deviceName: systemSettingsData?.deviceName ?? "",
     timeZone: systemSettingsData?.timeZone ?? "",
@@ -18,6 +20,7 @@ const SystemConfigFields = () => {
   };
 
   const handleSubmit = (values: SystemValues) => saveSystemSettings(values);
+
   const validateValues = (values: SystemValues) => {
     const errors: SystemValuesErrors = {};
     const interval = Number(values.sntpInterval);
@@ -29,6 +32,14 @@ const SystemConfigFields = () => {
     return errors;
   };
 
+  const handleSoftReboot = async () => {
+    await softRebootMutation.mutate();
+  };
+
+  const handleHardReboot = async () => {
+    await hardRebootMutation.mutate();
+  };
+
   return (
     <Formik
       initialValues={initialvalues}
@@ -149,14 +160,18 @@ const SystemConfigFields = () => {
             className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition  w-full md:w-[50%]"
             onClick={handleSoftReboot}
           >
-            Software Reboot
+            {softRebootMutation.isPending || isSubmitting
+              ? "Rebooting..."
+              : "Software Reboot"}
           </button>
           <button
             type="button"
             className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition w-full md:w-[50%]"
             onClick={handleHardReboot}
           >
-            Hardware Reboot
+            {hardRebootMutation.isPending || isSubmitting
+              ? "Rebooting"
+              : "Hardware Reboot"}
           </button>
         </Form>
       )}

src/hooks/useCameraZoom.ts

@@ -6,6 +6,7 @@ import {
 import { CAM_BASE } from "../utils/config";
 import type { zoomConfig, ZoomInOptions } from "../types/types";
 import { toast } from "sonner";
+import { useEffect } from "react";
 
 async function zoomIn(options: ZoomInOptions) {
   const response = await fetch(
@@ -38,8 +39,10 @@ export const useCameraZoom = (options: zoomConfig) => {
   const mutation = useMutation({
     mutationKey: ["zoomIn"],
     mutationFn: (options: ZoomInOptions) => zoomIn(options),
-    onError: () => {
+    onError: (err) => {
-      toast.error("Failed to update zoom settings", { id: "zoom" });
+      toast.error(`Failed to update zoom settings: ${err.message}`, {
+        id: "zoom",
+      });
     },
   });
 
@@ -47,5 +50,10 @@ export const useCameraZoom = (options: zoomConfig) => {
     queryKey: ["fetchZoomInConfig", options],
     queryFn: fetchZoomInConfig,
   });
+
+  useEffect(() => {
+    if (query.isError) toast.error(query.error.message, { id: "hardReboot" });
+  }, [query?.error?.message, query.isError]);
+
   return { mutation, query };
 };

src/hooks/useReboots.ts

@@ -0,0 +1,35 @@
+import { CAM_BASE } from "../utils/config";
+import { useMutation } from "@tanstack/react-query";
+import { toast } from "sonner";
+
+async function handleSoftReboot() {
+  const response = await fetch(`${CAM_BASE}/api/restart-flexiai`);
+  if (!response.ok) throw new Error("Failed to Software Reboot");
+  return "Software reboot triggered!";
+}
+
+async function handleHardReboot() {
+  const response = await fetch(`${CAM_BASE}/api/restart-hardware`);
+  if (!response.ok) throw new Error("Failed to Hardware Reboot");
+  return "Hardware reboot triggered!";
+}
+
+export const useReboots = () => {
+  const softRebootMutation = useMutation({
+    mutationKey: ["softReboot"],
+    mutationFn: handleSoftReboot,
+
+    onSuccess: () => toast.success("Software reboot triggered!"),
+    onError: (error) => toast.error(error.message),
+  });
+
+  const hardRebootMutation = useMutation({
+    mutationKey: ["hardReboot"],
+    mutationFn: handleHardReboot,
+
+    onSuccess: () => toast.success("Harware reboot triggered!"),
+    onError: (error) => toast.error(error.message),
+  });
+
+  return { softRebootMutation, hardRebootMutation };
+};