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>
       )}