modem settings management: integrate ModemSettings and ModemToggle components, update hooks for modem configuration, and enhance WiFiSettingsForm submission handling.

src/components/SettingForms/WiFi&Modem/ModemCard.tsx

@@ -1,96 +1,13 @@
 import Card from "../../UI/Card";
 import CardHeader from "../../UI/CardHeader";
-import { useState } from "react";
+import ModemSettings from "./ModemSettings";
-import FormGroup from "../components/FormGroup";
 
 const ModemCard = () => {
-  const [apn, setApn] = useState("");
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
-  const [authType, setAuthType] = useState("PAP");
-
   return (
-    // TODO: Add switch for Auto vs Manual settings
     <Card className="p-4">
       <CardHeader title={"Modem"} />
-      <div className="flex flex-col gap-4 px-2">
+
-        <FormGroup>
+      <ModemSettings />
-          <label
-            htmlFor="apn"
-            className="font-medium whitespace-nowrap md:w-2/3"
-          >
-            APN
-          </label>
-          <input
-            id="apn"
-            name="apn"
-            type="text"
-            className="p-2 border border-gray-400 rounded-lg flex-1 md:w-2/3"
-            placeholder="Enter APN"
-            value={apn}
-            onChange={(e) => setApn(e.target.value)}
-          />
-        </FormGroup>
-        <FormGroup>
-          <label
-            htmlFor="modemUsername"
-            className="font-medium whitespace-nowrap md:w-2/3"
-          >
-            Username
-          </label>
-          <input
-            id="modemUsername"
-            name="modemUsername"
-            type="text"
-            className="p-2 border border-gray-400 rounded-lg flex-1 md:w-2/3"
-            placeholder="Enter Username"
-            value={username}
-            onChange={(e) => setUsername(e.target.value)}
-          />
-        </FormGroup>
-        <FormGroup>
-          <label
-            htmlFor="modemPassword"
-            className="font-medium whitespace-nowrap md:w-2/3"
-          >
-            Password
-          </label>
-          <input
-            id="modemPassword"
-            name="modemPassword"
-            type="password"
-            className="p-2 border border-gray-400 rounded-lg flex-1 md:w-2/3"
-            placeholder="Enter Password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-          />
-        </FormGroup>
-        <FormGroup>
-          <label
-            htmlFor="authType"
-            className="font-medium whitespace-nowrap md:w-2/3"
-          >
-            Authentication Type
-          </label>
-          <select
-            id="authType"
-            name="authType"
-            className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] flex-1 md:w-2/3"
-            value={authType}
-            onChange={(e) => setAuthType(e.target.value)}
-          >
-            <option value="PAP">PAP</option>
-            <option value="CHAP">CHAP</option>
-            <option value="None">None</option>
-          </select>
-        </FormGroup>
-        <button
-          className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
-          //onClick={() => handleModemSave(apn, username, password, authType)}
-        >
-          Save Modem Settings
-        </button>
-      </div>
     </Card>
   );
 };

src/components/SettingForms/WiFi&Modem/ModemSettings.tsx

@@ -0,0 +1,148 @@
+import { Formik, Form, Field } from "formik";
+import FormGroup from "../components/FormGroup";
+import type { ModemSettingsType } from "../../../types/types";
+import { useWifiAndModem } from "../../../hooks/useCameraWifiandModem";
+import { useEffect, useState } from "react";
+import ModemToggle from "./ModemToggle";
+import { toast } from "sonner";
+
+const ModemSettings = () => {
+  const [showSettings, setShowSettings] = useState(false);
+  const { modemQuery, modemMutation } = useWifiAndModem();
+
+  const apn = modemQuery?.data?.propAPN?.value;
+  const username = modemQuery?.data?.propUsername.value;
+  const password = modemQuery?.data?.propPassword?.value;
+  const mode = modemQuery?.data?.propMode?.value;
+
+  useEffect(() => {
+    setShowSettings(mode === "AUTO");
+  }, [mode]);
+
+  const inititalValues = {
+    apn: apn ?? "",
+    username: username ?? "",
+    password: password ?? "",
+    authenticationType: "PAP",
+  };
+
+  const handleSubmit = (values: ModemSettingsType) => {
+    const modemConfig = {
+      id: "ModemAndWifiManager-modem",
+      fields: [
+        {
+          property: "propAPN",
+          value: values.apn,
+        },
+        {
+          property: "propPassword",
+          value: values.password,
+        },
+        {
+          property: "propUsername",
+          value: values.username,
+        },
+
+        {
+          property: "propMode",
+          value: showSettings ? "AUTO" : "MANUAL",
+        },
+      ],
+    };
+    modemMutation.mutate(modemConfig);
+    if (modemMutation.error) {
+      toast.error("Failed to update modem settings");
+      return;
+    }
+    toast.success("Modem settings updated");
+  };
+
+  return (
+    <>
+      <ModemToggle
+        showSettings={showSettings}
+        onShowSettings={setShowSettings}
+      />
+      {!showSettings && (
+        <Formik
+          initialValues={inititalValues}
+          onSubmit={handleSubmit}
+          enableReinitialize
+        >
+          <Form className="flex flex-col space-y-5 px-2">
+            <FormGroup>
+              <label
+                htmlFor="apn"
+                className="font-medium whitespace-nowrap md:w-2/3"
+              >
+                APN
+              </label>
+              <Field
+                placeholder="Enter APN"
+                name="apn"
+                id="apn"
+                type="text"
+                className="p-1.5 border border-gray-400 rounded-lg"
+              />
+            </FormGroup>
+            <FormGroup>
+              <label
+                htmlFor="username"
+                className="font-medium whitespace-nowrap md:w-2/3"
+              >
+                Username
+              </label>
+              <Field
+                placeholder="Enter Username"
+                name="username"
+                id="username"
+                type="text"
+                className="p-1.5 border border-gray-400 rounded-lg"
+              />
+            </FormGroup>
+            <FormGroup>
+              <label
+                htmlFor="password"
+                className="font-medium whitespace-nowrap md:w-2/3"
+              >
+                Password
+              </label>
+              <Field
+                placeholder="Enter Password"
+                name="password"
+                id="password"
+                type="text"
+                className="p-1.5 border border-gray-400 rounded-lg"
+              />
+            </FormGroup>
+            <FormGroup>
+              <label
+                htmlFor="password"
+                className="font-medium whitespace-nowrap md:w-2/3"
+              >
+                Password
+              </label>
+              <Field
+                name="authenticationType"
+                as="select"
+                className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] flex-1 w-2/3"
+              >
+                <option value="PAP">PAP</option>
+                <option value="CHAP">CHAP</option>
+                <option value="none">None</option>
+              </Field>
+            </FormGroup>
+            <button
+              type="submit"
+              className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
+            >
+              Save Modem settings
+            </button>
+          </Form>
+        </Formik>
+      )}
+    </>
+  );
+};
+
+export default ModemSettings;

src/components/SettingForms/WiFi&Modem/ModemToggle.tsx

@@ -0,0 +1,30 @@
+type ModemToggleProps = {
+  showSettings: boolean;
+  onShowSettings: (showSettings: boolean) => void;
+};
+
+const ModemToggle = ({ showSettings, onShowSettings }: ModemToggleProps) => {
+  return (
+    <div className=" text-xl items-center m-2">
+      <label className="flex flex-row space-x-2 items-center w-[70%] md:w-[50%]">
+        <span>Automatically set</span>
+        <input
+          name="advancedSettings"
+          type="checkbox"
+          checked={showSettings}
+          onChange={(e) => onShowSettings(e.target.checked)}
+          id="advancedSettings"
+          className="sr-only peer"
+          value=""
+        />
+        <div
+          className="relative w-10 h-5 rounded-full bg-gray-300 transition peer-checked:bg-blue-500 after:content-[''] 
+      after:absolute after:top-0.5 after:left-0.5 after:w-4 after:h-4 after:rounded-full after:bg-white after:shadow after:transition 
+      after:duration-300 peer-checked:after:translate-x-5"
+        ></div>
+      </label>
+    </div>
+  );
+};
+
+export default ModemToggle;

src/components/SettingForms/WiFi&Modem/WiFiSettingsForm.tsx

@@ -19,19 +19,24 @@ const WiFiSettingsForm = () => {
   const handleSubmit = (values: WifiSettingValues) => {
     const wifiConfig = {
       id: "ModemAndWifiManager-wifi",
-      configHash: "206890572",
+      fields: [
-      propSSID: {
+        {
-        value: values.ssid,
+          property: "propSSID",
-        datatype: "java.lang.String",
+          value: values.ssid,
-      },
+        },
-      propPassword: {
+        {
-        value: values.password,
+          property: "propPassword",
-        datatype: "java.lang.String",
+          value: values.password,
-      },
+        },
+      ],
     };
 
     wifiMutation.mutate(wifiConfig);
     //todo: check what response is
+    if (wifiMutation.error) {
+      toast.error("Failed to update WiFi settings");
+      return;
+    }
     toast.success("WiFi settings updated");
   };
   return (

src/components/UI/Header.tsx

@@ -32,7 +32,7 @@ export default function Header() {
   };
 
   return (
-    <div className="relative bg-[#253445] border-b border-gray-500 items-center mx-auto px-2 sm:px-6 lg:px-8 p-4 flex flex-col md:flex-row justify-between mb-7">
+    <div className="relative bg-[#253445] border-b border-gray-500 items-center mx-auto px-2 sm:px-6 lg:px-8 p-4 flex flex-col md:flex-row justify-between mb-7 space-y-6 md:space-y-0">
       <div className="w-30">
         <Link to={"/"}>
           <img src={Logo} alt="Logo" width={150} height={150} />

src/hooks/useCameraWifiandModem.ts

@@ -1,6 +1,6 @@
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { CAM_BASE } from "../utils/config";
-import type { WifiConfig } from "../types/types";
+import type { ModemConfig, WifiConfig } from "../types/types";
 
 const getWiFiSettings = async () => {
   const response = await fetch(
@@ -27,6 +27,31 @@ const updateWifiSettings = async (wifiConfig: WifiConfig) => {
   return response.json();
 };
 
+const getModemSettings = async () => {
+  const response = await fetch(
+    `${CAM_BASE}/api/fetch-config?id=ModemAndWifiManager-modem`
+  );
+  if (!response.ok) {
+    throw new Error("Cannot fetch modem settings");
+  }
+  return response.json();
+};
+
+const updateModemSettings = async (modemConfig: ModemConfig) => {
+  const response = await fetch(
+    `${CAM_BASE}/api/update-config?id=ModemAndWifiManager-modem`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(modemConfig),
+    }
+  );
+  if (!response.ok) {
+    throw new Error("cannot update modem settings");
+  }
+  return response.json();
+};
+
 export const useWifiAndModem = () => {
   const wifiQuery = useQuery({
     queryKey: ["getWifiSettings"],
@@ -36,10 +61,23 @@ export const useWifiAndModem = () => {
   const wifiMutation = useMutation({
     mutationKey: ["updateWifiSettings"],
     mutationFn: (wifiConfig: WifiConfig) => updateWifiSettings(wifiConfig),
+    onError: (error) => console.log(error),
+  });
+
+  const modemQuery = useQuery({
+    queryKey: ["getModemSettings"],
+    queryFn: getModemSettings,
+  });
+
+  const modemMutation = useMutation({
+    mutationKey: ["updateModemSettings"],
+    mutationFn: (modemConfig: ModemConfig) => updateModemSettings(modemConfig),
   });
 
   return {
     wifiQuery,
     wifiMutation,
+    modemQuery,
+    modemMutation,
   };
 };

src/types/types.ts

@@ -267,19 +267,25 @@ export type WifiSettingValues = {
   password: string;
   encryption: string;
 };
+export type ModemConfigPayload = {
+  property: string;
+  value: string;
+};
+export type WifiConfigPayload = {
+  property: string;
+  value: string;
+};
 
 export type WifiConfig = {
   id: string;
-  configHash: string;
+  fields: WifiConfigPayload[];
-  propSSID: {
-    value: string;
-    datatype: string;
-  };
-  propPassword: {
-    value: string;
-    datatype: string;
-  };
 };
+
+export type ModemConfig = {
+  id: string;
+  fields: ModemConfigPayload[];
+};
+
 export type ZoomInOptions = {
   camera: string;
   multiplier: number;
@@ -288,3 +294,10 @@ export type ZoomInOptions = {
 export type zoomConfig = {
   camera: string;
 };
+
+export type ModemSettingsType = {
+  apn: string;
+  username: string;
+  password: string;
+  authenticationType: string;
+};