WIP wifi modem settings

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

@@ -1,78 +1,12 @@
 import Card from "../../UI/Card";
 import CardHeader from "../../UI/CardHeader";
-import { useState } from "react";
-import FormGroup from "../components/FormGroup";
+import WiFiSettingsForm from "./WiFiSettingsForm";
 
 const WiFiCard = () => {
-  const [ssid, setSsid] = useState("");
-  const [password, setPassword] = useState("");
-  const [encryption, setEncryption] = useState("WPA2");
-
   return (
     <Card className="p-4">
       <CardHeader title={"WiFi"} />
-      <div className="flex flex-col gap-4 px-2">
-        <FormGroup>
-          <label
-            htmlFor="ssid"
-            className="font-medium whitespace-nowrap md:w-2/3"
-          >
-            SSID
-          </label>
-          <input
-            id="ssid"
-            name="ssid"
-            type="text"
-            className="p-2 border border-gray-400 rounded-lg flex-1 md:w-2/3"
-            placeholder="Enter SSID"
-            value={ssid}
-            onChange={(e) => setSsid(e.target.value)}
-          />
-        </FormGroup>
-        <FormGroup>
-          <label
-            htmlFor="password"
-            className="font-medium whitespace-nowrap md:w-2/3"
-          >
-            Password
-          </label>
-          <input
-            id="password"
-            name="password"
-            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="encryption"
-            className="font-medium whitespace-nowrap md:w-2/3"
-          >
-            WPA/Encryption Type
-          </label>
-          <select
-            id="encryption"
-            name="encryption"
-            className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] flex-1 md:w-2/3"
-            value={encryption}
-            onChange={(e) => setEncryption(e.target.value)}
-          >
-            <option value="WPA2">WPA2</option>
-            <option value="WPA3">WPA3</option>
-            <option value="WEP">WEP</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={() => handleWiFiSave(ssid, password, encryption)}
-        >
-          Save WiFi Settings
-        </button>
-      </div>
+      <WiFiSettingsForm />
     </Card>
   );
 };

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

@@ -0,0 +1,106 @@
+import { Field, Form, Formik } from "formik";
+import FormGroup from "../components/FormGroup";
+import type { WifiSettingValues } from "../../../types/types";
+import { useWifiAndModem } from "../../../hooks/useCameraWifiandModem";
+import { toast } from "sonner";
+
+const WiFiSettingsForm = () => {
+  const { wifiQuery, wifiMutation } = useWifiAndModem();
+
+  const wifiSSID = wifiQuery?.data?.propSSID?.value;
+  const wifiPassword = wifiQuery?.data?.propPassword?.value;
+
+  const initialValues = {
+    ssid: wifiSSID ?? "",
+    password: wifiPassword ?? "",
+    encryption: "WPA2",
+  };
+
+  const handleSubmit = (values: WifiSettingValues) => {
+    const wifiConfig = {
+      id: "ModemAndWifiManager-wifi",
+      configHash: "206890572",
+      propSSID: {
+        value: values.ssid,
+        datatype: "java.lang.String",
+      },
+      propPassword: {
+        value: values.password,
+        datatype: "java.lang.String",
+      },
+    };
+
+    wifiMutation.mutate(wifiConfig);
+    //todo: check what response is
+    toast.success("WiFi settings updated");
+  };
+  return (
+    <Formik
+      initialValues={initialValues}
+      onSubmit={handleSubmit}
+      enableReinitialize
+    >
+      {() => (
+        <Form className="flex flex-col space-y-5 px-2">
+          <FormGroup>
+            <label
+              htmlFor="ssid"
+              className="font-medium whitespace-nowrap md:w-2/3"
+            >
+              SSID
+            </label>
+            <Field
+              id="ssid"
+              name="ssid"
+              type="text"
+              className="p-1.5 border border-gray-400 rounded-lg"
+              placeholder="Enter SSID"
+            />
+          </FormGroup>
+          <FormGroup>
+            <label
+              htmlFor="password"
+              className="font-medium whitespace-nowrap md:w-2/3"
+            >
+              Password
+            </label>
+            <Field
+              id="password"
+              name="password"
+              type="password"
+              className="p-1.5 border border-gray-400 rounded-lg"
+              placeholder="Enter Password"
+            />
+          </FormGroup>
+          <FormGroup>
+            <label
+              htmlFor="encryption"
+              className="font-medium whitespace-nowrap md:w-2/3"
+            >
+              WPA/Encryption Type
+            </label>
+            <Field
+              id="encryption"
+              name="encryption"
+              className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] flex-1 w-2/3"
+              as="select"
+            >
+              <option value="WPA2">WPA2</option>
+              <option value="WPA3">WPA3</option>
+              <option value="WEP">WEP</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 WiFi settings
+          </button>
+        </Form>
+      )}
+    </Formik>
+  );
+};
+
+export default WiFiSettingsForm;

src/hooks/useCameraWifiandModem.ts

@@ -0,0 +1,45 @@
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { CAM_BASE } from "../utils/config";
+import type { WifiConfig } from "../types/types";
+
+const getWiFiSettings = async () => {
+  const response = await fetch(
+    `${CAM_BASE}/api/fetch-config?id=ModemAndWifiManager-wifi`
+  );
+  if (!response.ok) {
+    throw new Error("Cannot fetch Wifi settings");
+  }
+  return response.json();
+};
+
+const updateWifiSettings = async (wifiConfig: WifiConfig) => {
+  const response = await fetch(
+    `${CAM_BASE}/api/update-config?id=ModemAndWifiManager-wifi`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(wifiConfig),
+    }
+  );
+  if (!response.ok) {
+    throw new Error("Cannot update wifi settings");
+  }
+  return response.json();
+};
+
+export const useWifiAndModem = () => {
+  const wifiQuery = useQuery({
+    queryKey: ["getWifiSettings"],
+    queryFn: getWiFiSettings,
+  });
+
+  const wifiMutation = useMutation({
+    mutationKey: ["updateWifiSettings"],
+    mutationFn: (wifiConfig: WifiConfig) => updateWifiSettings(wifiConfig),
+  });
+
+  return {
+    wifiQuery,
+    wifiMutation,
+  };
+};

src/types/types.ts

@@ -261,3 +261,22 @@ export type ZoomLevel = {
   py: number;
   level?: number;
 };
+
+export type WifiSettingValues = {
+  ssid: string;
+  password: string;
+  encryption: string;
+};
+
+export type WifiConfig = {
+  id: string;
+  configHash: string;
+  propSSID: {
+    value: string;
+    datatype: string;
+  };
+  propPassword: {
+    value: string;
+    datatype: string;
+  };
+};

src/utils/config.ts

@@ -1,4 +1,4 @@
-const rawCamBase = import.meta.env.VITE_OUTSIDE_BASEURL;
+const rawCamBase = import.meta.env.VITE_CAM_BASE;
 export const CAM_BASE =
   rawCamBase && rawCamBase.trim().length > 0
     ? rawCamBase