- refactored bearer form

- started refactoring Channel form

src/components/SettingForms/BearerType/BearerTypeFields.tsx

@@ -1,32 +1,71 @@
-import { Field, useFormikContext } from "formik";
+import { Field, Form, Formik } from "formik";
 import FormToggle from "../components/FormToggle";
+import { useCameraOutput } from "../../../hooks/useCameraOutput";
+import { cleanArray } from "../../../utils/utils";
+import FormGroup from "../components/FormGroup";
+import type { BearerTypeFieldType } from "../../../types/types";
 
 export const ValuesComponent = () => {
   return null;
 };
 
 const BearerTypeFields = () => {
-  useFormikContext();
+  const { dispatcherQuery, dispatcherMutation } = useCameraOutput();
+
+  const format = dispatcherQuery?.data?.propFormat?.value;
+  const rawOptions = dispatcherQuery?.data?.propFormat?.accepted;
+  const enabled = dispatcherQuery?.data?.propEnabled?.value;
+  const verbose = dispatcherQuery?.data?.propVerbose?.value;
+  const options = cleanArray(rawOptions);
+
+  const initialValues: BearerTypeFieldType = {
+    format: format ?? "JSON",
+    enabled: enabled === "true",
+    verbose: verbose === "true",
+  };
+
+  const handleSubmit = (values: BearerTypeFieldType) => {
+    dispatcherMutation.mutate(values);
+  };
 
   return (
-    <div className="flex flex-col space-y-4 px-2">
+    <Formik
-      <div className="flex items-center gap-3 justify-between">
+      initialValues={initialValues}
-        <label htmlFor="format">Format</label>
+      onSubmit={handleSubmit}
-        <Field
+      enableReinitialize
-          as="select"
+    >
-          name="format"
+      <Form>
-          id="format"
+        <div className="flex flex-col space-y-4 px-2">
-          className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]  w-full md:w-60"
+          <FormGroup>
-        >
+            <label htmlFor="format">Format</label>
-          <option value="JSON">JSON</option>
+            <Field
-          <option value="BOF2">BOF2</option>
+              as="select"
-        </Field>
+              name="format"
-      </div>
+              id="format"
-      <div className="flex flex-col space-y-4">
+              className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]  w-full md:w-60"
-        <FormToggle name="enabled" label="Enabled" />
+            >
-        <FormToggle name="verbose" label="Verbose" />
+              {options?.map((option: string) => (
-      </div>
+                <option key={option} value={option}>
-    </div>
+                  {option}
+                </option>
+              ))}
+            </Field>
+          </FormGroup>
+          <FormGroup>
+            <div className="flex flex-col space-y-4">
+              <FormToggle name="enabled" label="Enabled" />
+              <FormToggle name="verbose" label="Verbose" />
+            </div>
+          </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 Changes
+          </button>
+        </div>
+      </Form>
+    </Formik>
   );
 };
 

src/components/SettingForms/Channel1-JSON/ChannelFields.tsx

@@ -1,72 +1,89 @@
-import { Field, useFormikContext } from "formik";
+import { Field, Form, Formik } from "formik";
 import FormGroup from "../components/FormGroup";
 import { useState } from "react";
 import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 const ChannelFields = () => {
-  useFormikContext();
   const [showPwd, setShowPwd] = useState(false);
+  const initialValues = {
+    backOfficeURL: "",
+    username: "",
+    password: "",
+    connectTimeoutSeconds: 0,
+    readTimeoutSeconds: 0,
+  };
+
+  const handleSubmit = (values) => {
+    console.log(values);
+  };
+
   return (
-    <div className="flex flex-col space-y-2 px-2">
+    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
-      <FormGroup>
+      <Form>
-        <label htmlFor="backoffice" className="m-0">
+        <div className="flex flex-col space-y-2 px-2">
-          Back Office URL
+          <FormGroup>
-        </label>
+            <label htmlFor="backoffice" className="m-0">
-        <Field
+              Back Office URL
-          name={"backOfficeURL"}
+            </label>
-          type="text"
+            <Field
-          id="backoffice"
+              name={"backOfficeURL"}
-          placeholder="https://www.backoffice.com"
+              type="text"
-          className="p-1.5 border border-gray-400 rounded-lg w-full md:w-60"
+              id="backoffice"
-        />
+              placeholder="https://www.backoffice.com"
-      </FormGroup>
+              className="p-1.5 border border-gray-400 rounded-lg w-full md:w-60"
-      <FormGroup>
+            />
-        <label htmlFor="username">Username</label>
+          </FormGroup>
-        <Field
+          <FormGroup>
-          name={"username"}
+            <label htmlFor="username">Username</label>
-          type="text"
+            <Field
-          id="username"
+              name={"username"}
-          placeholder="Back office username"
+              type="text"
-          className="p-1.5 border border-gray-400 rounded-lg w-full md:w-60"
+              id="username"
-        />
+              placeholder="Back office username"
-      </FormGroup>
+              className="p-1.5 border border-gray-400 rounded-lg w-full md:w-60"
-      <FormGroup>
+            />
-        <label htmlFor="password">Password</label>
+          </FormGroup>
-        <Field
+          <FormGroup>
-          name={"password"}
+            <label htmlFor="password">Password</label>
-          type={showPwd ? "text" : "password"}
+            <Field
-          id="password"
+              name={"password"}
-          placeholder="Back office password"
+              type={showPwd ? "text" : "password"}
-          className="p-1.5 border border-gray-400 rounded-lg w-full md:w-60"
+              id="password"
-        />
+              placeholder="Back office password"
-        <FontAwesomeIcon
+              className="p-1.5 border border-gray-400 rounded-lg w-full md:w-60"
-          type="button"
+            />
-          className="absolute right-5 end-0"
+            <FontAwesomeIcon
-          onClick={() => setShowPwd((s) => !s)}
+              type="button"
-          icon={showPwd ? faEyeSlash : faEye}
+              className="absolute right-5 end-0"
-        />
+              onClick={() => setShowPwd((s) => !s)}
-      </FormGroup>
+              icon={showPwd ? faEyeSlash : faEye}
-      <FormGroup>
+            />
-        <label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>
+          </FormGroup>
-        <Field
+          <FormGroup>
-          name={"connectTimeoutSeconds"}
+            <label htmlFor="connectTimeoutSeconds">
-          type="number"
+              Connect Timeout Seconds
-          id="connectTimeoutSeconds"
+            </label>
-          className="p-1.5 border border-gray-400 rounded-lg w-full md:w-60"
+            <Field
-        />
+              name={"connectTimeoutSeconds"}
-      </FormGroup>
+              type="number"
-      <FormGroup>
+              id="connectTimeoutSeconds"
-        <label htmlFor="readTimeoutSeconds">Read Timeout Seconds</label>
+              className="p-1.5 border border-gray-400 rounded-lg w-full md:w-60"
-        <Field
+            />
-          name={"readTimeoutSeconds"}
+          </FormGroup>
-          type="number"
+          <FormGroup>
-          id="readTimeoutSeconds"
+            <label htmlFor="readTimeoutSeconds">Read Timeout Seconds</label>
-          placeholder="https://example.com"
+            <Field
-          className="p-1.5 border border-gray-400 rounded-lg w-full md:w-60"
+              name={"readTimeoutSeconds"}
-        />
+              type="number"
-      </FormGroup>
+              id="readTimeoutSeconds"
-    </div>
+              placeholder="https://example.com"
+              className="p-1.5 border border-gray-400 rounded-lg w-full md:w-60"
+            />
+          </FormGroup>
+        </div>
+      </Form>
+    </Formik>
   );
 };
 

src/components/SettingForms/SettingForms/SettingForms.tsx

@@ -11,14 +11,6 @@ const SettingForms = () => {
   const [advancedToggle, setAdvancedToggle] = useState(false);
 
   const initialValues = {
-    format: "JSON",
-    enabled: false,
-    verbose: false,
-    backOfficeURL: "",
-    username: "",
-    password: "",
-    connectTimeoutSeconds: 0,
-    readTimeoutSeconds: 0,
     overviewQuality: "high",
     overviewImageScaleFactor: "full",
     overviewType: "Plate Overview",
@@ -50,34 +42,37 @@ const SettingForms = () => {
   };
 
   return (
-    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+    <div className="mx-auto grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-2 px-2 sm:px-4 lg:px-0 w-full">
-      <Form className="flex flex-col space-y-3">
+      <BearerTypeCard />
-        <div className="mx-auto grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-2 px-2 sm:px-4 lg:px-0 w-full">
+      <ChannelCard />
-          <BearerTypeCard />
+    </div>
-          <ChannelCard />
+    // <Formik initialValues={initialValues} onSubmit={handleSubmit}>
-        </div>
+    //   <Form className="flex flex-col space-y-3">
-        <AdvancedToggle
+    //     <div className="mx-auto grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-2 px-2 sm:px-4 lg:px-0 w-full">
-          advancedToggle={advancedToggle}
+    //
-          onAdvancedChange={setAdvancedToggle}
+    //     </div>
-        />
+    //     <AdvancedToggle
-        {advancedToggle && (
+    //       advancedToggle={advancedToggle}
-          <>
+    //       onAdvancedChange={setAdvancedToggle}
-            <div className="md:col-span-2">
+    //     />
-              <SightingDataCard />
+    //     {advancedToggle && (
-            </div>
+    //       <>
-            <div className="md:col-span-2">
+    //         <div className="md:col-span-2">
-              <OverviewTextCard />
+    //           <SightingDataCard />
-            </div>
+    //         </div>
-          </>
+    //         <div className="md:col-span-2">
-        )}
+    //           <OverviewTextCard />
-        <button
+    //         </div>
-          type="submit"
+    //       </>
-          className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
+    //     )}
-        >
+    //     <button
-          Save Changes
+    //       type="submit"
-        </button>
+    //       className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
-      </Form>
+    //     >
-    </Formik>
+    //       Save Changes
+    //     </button>
+    //   </Form>
+    // </Formik>
   );
 };
 

src/hooks/useCameraOutput.ts

@@ -0,0 +1,59 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { CAM_BASE } from "../utils/config";
+import { useEffect } from "react";
+import { toast } from "sonner";
+import type { BearerTypeFieldType } from "../types/types";
+
+const getDispatcherConfig = async () => {
+  const response = await fetch(`${CAM_BASE}/api/fetch-config?id=Dispatcher`);
+  if (!response.ok) throw new Error("Cannot get dispatcher configuration");
+  return response.json();
+};
+
+const updateDispatcherConfig = async (data: BearerTypeFieldType) => {
+  const updateConfigPayload = {
+    id: "Dispatcher",
+    fields: [
+      {
+        property: "propEnabled",
+        value: data.enabled,
+      },
+      //   Todo: figure out how to add verbose
+      {
+        property: "propFormat",
+        value: data.format,
+      },
+    ],
+  };
+
+  const response = await fetch(`${CAM_BASE}/api/update-config?id=Dispatcher`, {
+    method: "POST",
+    body: JSON.stringify(updateConfigPayload),
+  });
+  if (!response.ok) throw new Error("Cannot update dispatcher configuration");
+  return response.json();
+};
+
+export const useCameraOutput = () => {
+  const dispatcherQuery = useQuery({
+    queryKey: ["dispatcher"],
+    queryFn: getDispatcherConfig,
+  });
+
+  const dispatcherMutation = useMutation({
+    mutationFn: updateDispatcherConfig,
+    mutationKey: ["dispatcherUpdate"],
+    onError: (error) => toast.error(error.message),
+    onSuccess: (data) => {
+      if (data) {
+        toast.success("Settings successfully updated");
+      }
+    },
+  });
+
+  useEffect(() => {
+    if (dispatcherQuery.isError) toast.error(dispatcherQuery.error.message);
+  }, [dispatcherQuery?.error?.message, dispatcherQuery.isError]);
+
+  return { dispatcherQuery, dispatcherMutation };
+};

src/utils/utils.ts

@@ -19,6 +19,17 @@ const randomChars = () => {
   return letter;
 };
 
+export function cleanArray(str: string) {
+  const toArr = str?.split(",");
+
+  const cleaned = toArr?.map((el: string) => {
+    const test = el.replace(/[^0-9a-z]/gi, "");
+
+    return test;
+  });
+  return cleaned;
+}
+
 export function parseRTSPUrl(url: string) {
   const regex = /rtsp:\/\/([^:]+):([^@]+)@([^:/]+):?(\d+)?(\/.*)?/;
   const match = url?.match(regex);