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;