- refactored bearer form

- started refactoring Channel form

src/components/SettingForms/BearerType/BearerTypeFields.tsx

@@ -1,16 +1,42 @@
-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 (
+    <Formik
+      initialValues={initialValues}
+      onSubmit={handleSubmit}
+      enableReinitialize
+    >
+      <Form>
         <div className="flex flex-col space-y-4 px-2">
-      <div className="flex items-center gap-3 justify-between">
+          <FormGroup>
             <label htmlFor="format">Format</label>
             <Field
               as="select"
@@ -18,15 +44,28 @@ const BearerTypeFields = () => {
               id="format"
               className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]  w-full md:w-60"
             >
-          <option value="JSON">JSON</option>
+              {options?.map((option: string) => (
-          <option value="BOF2">BOF2</option>
+                <option key={option} value={option}>
+                  {option}
+                </option>
+              ))}
             </Field>
-      </div>
+          </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,13 +1,26 @@
-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 (
+    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+      <Form>
         <div className="flex flex-col space-y-2 px-2">
           <FormGroup>
             <label htmlFor="backoffice" className="m-0">
@@ -48,7 +61,9 @@ const ChannelFields = () => {
             />
           </FormGroup>
           <FormGroup>
-        <label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>
+            <label htmlFor="connectTimeoutSeconds">
+              Connect Timeout Seconds
+            </label>
             <Field
               name={"connectTimeoutSeconds"}
               type="number"
@@ -67,6 +82,8 @@ const ChannelFields = () => {
             />
           </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}>
-      <Form className="flex flex-col space-y-3">
     <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">
       <BearerTypeCard />
       <ChannelCard />
     </div>
-        <AdvancedToggle
+    // <Formik initialValues={initialValues} onSubmit={handleSubmit}>
-          advancedToggle={advancedToggle}
+    //   <Form className="flex flex-col space-y-3">
-          onAdvancedChange={setAdvancedToggle}
+    //     <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 && (
+    //     </div>
-          <>
+    //     <AdvancedToggle
-            <div className="md:col-span-2">
+    //       advancedToggle={advancedToggle}
-              <SightingDataCard />
+    //       onAdvancedChange={setAdvancedToggle}
-            </div>
+    //     />
-            <div className="md:col-span-2">
+    //     {advancedToggle && (
-              <OverviewTextCard />
+    //       <>
-            </div>
+    //         <div className="md:col-span-2">
-          </>
+    //           <SightingDataCard />
-        )}
+    //         </div>
-        <button
+    //         <div className="md:col-span-2">
-          type="submit"
+    //           <OverviewTextCard />
-          className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
+    //         </div>
-        >
+    //       </>
-          Save Changes
+    //     )}
-        </button>
+    //     <button
-      </Form>
+    //       type="submit"
-    </Formik>
+    //       className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
+    //     >
+    //       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);