Merged in bugfix/bearertype (pull request #34)

Bugfix/bearertype
2025-11-04 11:37:05 +00:00
parent cd26b3b68f f47459d116
commit c948192f10
8 changed files with 438 additions and 173 deletions
--- a/src/components/SettingForms/BearerType/BearerTypeFields.tsx
+++ b/src/components/SettingForms/BearerType/BearerTypeFields.tsx
@@ -1,37 +1,12 @@
-import { Field, Form, Formik } from "formik";
+import { Field, useFormikContext } 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;
-};
+import type { BearerTypeFieldType, InitialValuesForm } from "../../../types/types";

 const BearerTypeFields = () => {
-  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 = async (values: BearerTypeFieldType) => {
-    await dispatcherMutation.mutateAsync(values);
-  };
+  useFormikContext<BearerTypeFieldType & InitialValuesForm>();

  return (
-    <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
-      {({ isSubmitting }) => (
-        <Form>
    <div className="flex flex-col space-y-4 px-2">
      <FormGroup>
        <label htmlFor="format">Format</label>
@@ -41,29 +16,20 @@ const BearerTypeFields = () => {
          id="format"
          className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
        >
-                {options?.map((option: string) => (
-                  <option key={option} value={option}>
-                    {option}
+          <option key={"JSON"} value={"JSON"}>
+            JSON
+          </option>
+          <option key={"BOF2"} value={"BOF2"}>
+            BOF2
          </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="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
-            >
-              {isSubmitting || dispatcherMutation.isPending ? "Saving..." : "Save Changes"}
-            </button>
    </div>
-        </Form>
-      )}
-    </Formik>
  );
 };

--- a/src/components/SettingForms/Channel1-JSON/ChannelCard.tsx
+++ b/src/components/SettingForms/Channel1-JSON/ChannelCard.tsx
@@ -1,12 +1,47 @@
+import { useFormikContext, type FormikTouched } from "formik";
 import Card from "../../UI/Card";
 import CardHeader from "../../UI/CardHeader";
 import ChannelFields from "./ChannelFields";
+import type { BearerTypeFieldType, InitialValuesForm } from "../../../types/types";
+import { useCameraBackOfficeOutput } from "../../../hooks/useBackOfficeConfig";
+import { useEffect, useMemo } from "react";
+
+type ChannelCardProps = {
+  touched: FormikTouched<BearerTypeFieldType & InitialValuesForm>;
+  isSubmitting: boolean;
+};
+
+const ChannelCard = ({ touched, isSubmitting }: ChannelCardProps) => {
+  const { values, setFieldValue } = useFormikContext<BearerTypeFieldType & InitialValuesForm>();
+  const { backOfficeQuery } = useCameraBackOfficeOutput(values?.format);
+
+  const mapped = useMemo(() => {
+    const d = backOfficeQuery.data;
+    return {
+      backOfficeURL: d?.propBackofficeURL?.value ?? "",
+      username: d?.propUsername?.value ?? "",
+      password: d?.propPassword?.value ?? "",
+      connectTimeoutSeconds: Number(d?.propConnectTimeoutSeconds?.value),
+      readTimeoutSeconds: Number(d?.propReadTimeoutSeconds?.value),
+    };
+  }, [backOfficeQuery.data]);
+
+  useEffect(() => {
+    if (!backOfficeQuery.isSuccess) return;
+    for (const [key, value] of Object.entries(mapped)) {
+      setFieldValue(key, value);
+    }
+  }, [backOfficeQuery.isSuccess, mapped, setFieldValue]);

-const ChannelCard = () => {
  return (
    <Card className="p-4">
-      <CardHeader title="Channel 1 (JSON)" />
-      <ChannelFields />
+      <CardHeader title={`Channel (${values?.format})`} />
+      <ChannelFields
+        touched={touched}
+        isSubmitting={isSubmitting}
+        backOfficeData={backOfficeQuery}
+        format={values?.format}
+      />
    </Card>
  );
 };
--- a/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx
+++ b/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx
@@ -1,79 +1,52 @@
-import { Field, Form, Formik, useFormikContext } from "formik";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Field, useFormikContext, type FormikTouched } from "formik";
 import FormGroup from "../components/FormGroup";
 import { useEffect, useState } from "react";
 import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useCameraOutput } from "../../../hooks/useCameraOutput";
-import type { InitialValuesForm, InitialValuesFormErrors } from "../../../types/types";
+import type { BearerTypeFieldType, InitialValuesForm } from "../../../types/types";
 import { toast } from "sonner";
+import type { UseQueryResult } from "@tanstack/react-query";

-const ChannelFields = () => {
+type ChannelFieldsProps = {
+  touched: FormikTouched<BearerTypeFieldType & InitialValuesForm>;
+  isSubmitting: boolean;
+
+  backOfficeData: UseQueryResult<any, Error>;
+  format?: string;
+};
+
+const ChannelFields = ({ touched, isSubmitting, format }: ChannelFieldsProps) => {
  const [showPwd, setShowPwd] = useState(false);
-  const { backOfficeQuery, backOfficeMutation } = useCameraOutput();
-
-  const backOfficeURL = backOfficeQuery?.data?.propBackofficeURL?.value;
-  const username = backOfficeQuery?.data?.propUsername?.value;
-  const password = backOfficeQuery?.data?.propPassword?.value;
-  const connectTimeoutSeconds = backOfficeQuery?.data?.propConnectTimeoutSeconds?.value;
-  const readTimeoutSeconds = backOfficeQuery?.data?.propReadTimeoutSeconds?.value;
-
-  const initialValues: InitialValuesForm = {
-    backOfficeURL: backOfficeURL ?? "",
-    username: username ?? "",
-    password: password ?? "",
-    connectTimeoutSeconds: Number(connectTimeoutSeconds),
-    readTimeoutSeconds: Number(readTimeoutSeconds),
-  };
-
-  const handleSubmit = async (values: InitialValuesForm) => {
-    await backOfficeMutation.mutateAsync(values);
-  };
+  const { submitCount, isValid, values, errors } = useFormikContext<BearerTypeFieldType & InitialValuesForm>();

  const ValidationToastOnce = () => {
-    const { submitCount, isValid } = useFormikContext();
    useEffect(() => {
      if (submitCount > 0 && !isValid) {
        toast.error("Check fields are filled in");
      }
-    }, [submitCount, isValid]);
+    }, []);
    return null;
  };

-  const validateValues = (values: InitialValuesForm): InitialValuesFormErrors => {
-    const errors: InitialValuesFormErrors = {};
-
-    const url = values.backOfficeURL?.trim();
-    const username = values.username?.trim();
-    const password = values.password?.trim();
-
-    if (!url) {
-      errors.backOfficeURL = "Required";
-    }
-
-    if (!username) errors.username = "Required";
-    if (!password) errors.password = "Required";
-
-    const read = Number(values.readTimeoutSeconds);
-    if (!Number.isFinite(read)) {
-      errors.readTimeoutSeconds = "Must be a number";
-    } else if (read < 0) {
-      errors.readTimeoutSeconds = "Must be ≥ 0";
-    }
-
-    const connect = Number(values.connectTimeoutSeconds);
-    if (!Number.isFinite(connect)) {
-      errors.connectTimeoutSeconds = "Must be a number";
-    } else if (connect < 0) {
-      errors.connectTimeoutSeconds = "Must be ≥ 0";
-    }
-
-    return errors;
-  };
-
  return (
-    <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize validate={validateValues}>
-      {({ errors, touched, isSubmitting }) => (
-        <Form>
+    <>
+      {format?.toLowerCase() !== "bof2" && format?.toLowerCase() !== "json" ? (
+        <>
+          <div className="mt-4 flex flex-col items-center justify-center rounded-2xl border border-slate-800 bg-slate-900/40 p-10 text-center">
+            <div className="mb-3 rounded-xl bg-slate-800 px-3 py-1 text-xs uppercase tracking-wider text-slate-400">
+              Format coming soon
+            </div>
+
+            <p className="max-w-md text-slate-300">
+              Output configuration currently supports <span className="font-bold text-blue-400">JSON</span> or{" "}
+              <span className="font-bold text-emerald-400">BOF2</span>. <br /> More formats will be added in future
+              updates.
+            </p>
+          </div>
+        </>
+      ) : (
+        <>
          <div className="flex flex-col space-y-2 px-2">
            <FormGroup>
              <label htmlFor="backoffice" className="m-0">
@@ -146,17 +119,78 @@ const ChannelFields = () => {
                } rounded-lg w-full md:w-60`}
              />
            </FormGroup>
+
+            {format?.toLowerCase() === "bof2" && (
+              <>
+                <div className="border-b border-gray-500 my-3">
+                  <h2 className="font-bold">{values.format} Constants</h2>
                </div>
+                <FormGroup>
+                  <label htmlFor="FFID">Feed ID / Force ID</label>
+                  <Field
+                    name={"FFID"}
+                    type="text"
+                    id="FFID"
+                    placeholder="ABC123"
+                    className={`p-1.5 border ${
+                      errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
+                    } rounded-lg w-full md:w-60`}
+                  />
+                </FormGroup>
+
+                <FormGroup>
+                  <label htmlFor="SCID">Source ID / Camera ID</label>
+                  <Field
+                    name={"SCID"}
+                    type="text"
+                    id="SCID"
+                    placeholder="DEF345"
+                    className={`p-1.5 border ${
+                      errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
+                    } rounded-lg w-full md:w-60`}
+                  />
+                </FormGroup>
+
+                <FormGroup>
+                  <label htmlFor="timestampSource">Timestamp Source</label>
+                  <Field
+                    name={"timestampSource"}
+                    as="select"
+                    id="timestampSource"
+                    className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
+                  >
+                    <option value="">-- Select format --</option>
+                    <option value={"UTC"}>UTC</option>
+                    <option value={"local"}>Local</option>
+                  </Field>
+                </FormGroup>
+                <FormGroup>
+                  <label htmlFor="GPSFormat">GPS Format</label>
+                  <Field
+                    name={"GPSFormat"}
+                    as="select"
+                    id="GPSFormat"
+                    className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
+                  >
+                    <option value="">-- Select format --</option>
+                    <option value={"Decimal degrees"}>Decimal degrees</option>
+                    <option value={"minutes"}>Minutes</option>
+                  </Field>
+                </FormGroup>
+              </>
+            )}
+          </div>
+
          <button
            type="submit"
            className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
          >
-            {isSubmitting || backOfficeMutation.isPending ? "Saving..." : "Save Changes"}
+            {isSubmitting ? "Saving..." : "Save Changes"}
          </button>
          <ValidationToastOnce />
-        </Form>
+        </>
      )}
-    </Formik>
+    </>
  );
 };

--- a/src/components/SettingForms/SettingForms/SettingForms.tsx
+++ b/src/components/SettingForms/SettingForms/SettingForms.tsx
@@ -1,12 +1,120 @@
+import { Form, Formik } from "formik";
 import BearerTypeCard from "../BearerType/BearerTypeCard";
 import ChannelCard from "../Channel1-JSON/ChannelCard";
+import { useCameraOutput, useGetDispatcherConfig } from "../../../hooks/useCameraOutput";
+import type {
+  BearerTypeFieldType,
+  InitialValuesForm,
+  InitialValuesFormErrors,
+  OptionalBOF2Constants,
+} from "../../../types/types";
+import { useQueryClient } from "@tanstack/react-query";
+import { useUpdateBackOfficeConfig } from "../../../hooks/useBackOfficeConfig";
+import { useFormVaidate } from "../../../hooks/useFormValidate";

 const SettingForms = () => {
+  const qc = useQueryClient();
+  const { dispatcherQuery, dispatcherMutation, backOfficeDispatcherMutation } = useCameraOutput();
+  const { backOfficeMutation } = useUpdateBackOfficeConfig();
+  const { bof2ConstantsQuery } = useGetDispatcherConfig();
+  const { validateMutation } = useFormVaidate();
+
+  const format = dispatcherQuery?.data?.propFormat?.value;
+  const enabled = dispatcherQuery?.data?.propEnabled?.value;
+
+  const FFID = bof2ConstantsQuery?.data?.propFeedIdentifier?.value;
+  const SCID = bof2ConstantsQuery?.data?.propSourceIdentifier?.value;
+  const GPSFormat = bof2ConstantsQuery?.data?.propGpsFormat?.value;
+  const timestampSource = bof2ConstantsQuery?.data?.propTimeZoneType?.value;
+
+  const initialValues: BearerTypeFieldType & InitialValuesForm & OptionalBOF2Constants = {
+    format: format ?? "JSON",
+    enabled: enabled === "true",
+    backOfficeURL: "",
+    username: "",
+    password: "",
+    connectTimeoutSeconds: Number(5),
+    readTimeoutSeconds: Number(15),
+
+    // Bof2 - optional constants
+    FFID: FFID ?? "",
+    SCID: SCID ?? "",
+    timestampSource: timestampSource ?? "",
+    GPSFormat: GPSFormat ?? "",
+  };
+
+  const validateValues = (values: InitialValuesForm): InitialValuesFormErrors => {
+    const errors: InitialValuesFormErrors = {};
+
+    const url = values.backOfficeURL?.trim();
+    const username = values.username?.trim();
+    const password = values.password?.trim();
+    if (!url) {
+      errors.backOfficeURL = "Required";
+    }
+
+    if (!username) errors.username = "Required";
+    if (!password) errors.password = "Required";
+
+    const read = Number(values.readTimeoutSeconds);
+    if (!Number.isFinite(read)) {
+      errors.readTimeoutSeconds = "Must be a number";
+    } else if (read < 0) {
+      errors.readTimeoutSeconds = "Must be ≥ 0";
+    }
+
+    const connect = Number(values.connectTimeoutSeconds);
+    if (!Number.isFinite(connect)) {
+      errors.connectTimeoutSeconds = "Must be a number";
+    } else if (connect < 0) {
+      errors.connectTimeoutSeconds = "Must be ≥ 0";
+    }
+    return errors;
+  };
+
+  const handleSubmit = async (values: BearerTypeFieldType & InitialValuesForm & OptionalBOF2Constants) => {
+    // if (formErrors && Object.entries(formErrors).length > 0) {
+    //   return;
+    // }
+    const dispatcherData = {
+      format: values.format,
+      enabled: values.enabled,
+    };
+    const result = await dispatcherMutation.mutateAsync(dispatcherData);
+
+    if (result?.id) {
+      qc.invalidateQueries({ queryKey: ["dispatcher"] });
+      qc.invalidateQueries({ queryKey: ["backoffice", values.format] });
+      const validResponse = await validateMutation.mutateAsync(values);
+      if (validResponse?.reason === "OK") {
+        await backOfficeMutation.mutateAsync(values);
+      } else {
+        return;
+      }
+    }
+
+    if (values.format.toLowerCase() === "bof2") {
+      const bof2ConstantsData: OptionalBOF2Constants = {
+        FFID: values.FFID,
+        SCID: values.SCID,
+        timestampSource: values.timestampSource,
+        GPSFormat: values.GPSFormat,
+      };
+      await backOfficeDispatcherMutation.mutateAsync(bof2ConstantsData);
+    }
+  };
+
  return (
+    <Formik initialValues={initialValues} onSubmit={handleSubmit} validate={validateValues} enableReinitialize>
+      {({ isSubmitting, touched }) => (
+        <Form>
          <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 />
+            <ChannelCard touched={touched} isSubmitting={isSubmitting} />
          </div>
+        </Form>
+      )}
+    </Formik>
  );
 };

--- a/src/hooks/useBackOfficeConfig.ts
+++ b/src/hooks/useBackOfficeConfig.ts
@@ -0,0 +1,75 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { useEffect } from "react";
+import { toast } from "sonner";
+import type { InitialValuesForm } from "../types/types";
+import { CAM_BASE } from "../utils/config";
+
+const getBackOfficeConfig = async (format: string) => {
+  const response = await fetch(`${CAM_BASE}/api/fetch-config?id=Dispatcher-${format?.toLowerCase()}`);
+  if (!response.ok) throw new Error("Cannot get Back Office configuration");
+  return response.json();
+};
+
+const updateBackOfficeConfig = async (data: InitialValuesForm) => {
+  const updateConfigPayload = {
+    id: `Dispatcher-${data.format.toLowerCase()}`,
+    fields: [
+      {
+        property: "propBackofficeURL",
+        value: data.backOfficeURL,
+      },
+      {
+        property: "propConnectTimeoutSeconds",
+        value: data.connectTimeoutSeconds,
+      },
+      {
+        property: "propPassword",
+        value: data.password,
+      },
+      {
+        property: "propReadTimeoutSeconds",
+        value: data.readTimeoutSeconds,
+      },
+      {
+        property: "propUsername",
+        value: data.username,
+      },
+    ],
+  };
+  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 Back Office configuration");
+  return response.json();
+};
+
+export const useCameraBackOfficeOutput = (format: string) => {
+  const backOfficeQuery = useQuery({
+    queryKey: ["backoffice", format],
+    queryFn: () => getBackOfficeConfig(format),
+    enabled: !!format,
+  });
+
+  useEffect(() => {
+    if (backOfficeQuery.isError) toast.error(backOfficeQuery.error.message);
+  }, [backOfficeQuery?.error?.message, backOfficeQuery.isError]);
+
+  return {
+    backOfficeQuery,
+  };
+};
+
+export const useUpdateBackOfficeConfig = () => {
+  const backOfficeMutation = useMutation({
+    mutationKey: ["backOfficeUpdate"],
+    mutationFn: updateBackOfficeConfig,
+    onError: (error) => toast.error(error.message),
+    onSuccess: (data) => {
+      if (data) {
+        toast.success("Settings successfully updated", { id: "dispatchSettings" });
+      }
+    },
+  });
+  return { backOfficeMutation };
+};
--- a/src/hooks/useCameraOutput.ts
+++ b/src/hooks/useCameraOutput.ts
@@ -2,7 +2,7 @@ import { useMutation, useQuery } from "@tanstack/react-query";
 import { CAM_BASE } from "../utils/config";
 import { useEffect } from "react";
 import { toast } from "sonner";
-import type { BearerTypeFieldType, InitialValuesForm } from "../types/types";
+import type { BearerTypeFieldType, OptionalBOF2Constants } from "../types/types";

 const getDispatcherConfig = async () => {
  const response = await fetch(`${CAM_BASE}/api/fetch-config?id=Dispatcher`);
@@ -18,7 +18,6 @@ const updateDispatcherConfig = async (data: BearerTypeFieldType) => {
        property: "propEnabled",
        value: data.enabled,
      },
-      //   Todo: figure out how to add verbose conditionally
      {
        property: "propFormat",
        value: data.format,
@@ -33,43 +32,39 @@ const updateDispatcherConfig = async (data: BearerTypeFieldType) => {
  return response.json();
 };

-const getBackOfficeConfig = async () => {
-  const response = await fetch(`${CAM_BASE}/api/fetch-config?id=Dispatcher-json`);
-  if (!response.ok) throw new Error("Cannot get Back Office configuration");
-  return response.json();
-};
-
-const updateBackOfficeConfig = async (data: InitialValuesForm) => {
-  const updateConfigPayload = {
-    id: "Dispatcher-json",
+const updateBackOfficeDispatcher = async (data: OptionalBOF2Constants) => {
+  const bof2ContantsPayload = {
+    id: "Dispatcher-bof2-constants",
    fields: [
      {
-        property: "propBackofficeURL",
-        value: data.backOfficeURL,
+        property: "propFeedIdentifier",
+        value: data?.FFID,
      },
      {
-        property: "propConnectTimeoutSeconds",
-        value: data.connectTimeoutSeconds,
+        property: "propSourceIdentifier",
+        value: data?.SCID,
      },
      {
-        property: "propPassword",
-        value: data.password,
+        property: "propTimeZoneType",
+        value: data?.timestampSource,
      },
      {
-        property: "propReadTimeoutSeconds",
-        value: data.readTimeoutSeconds,
-      },
-      {
-        property: "propUsername",
-        value: data.username,
+        property: "propGpsFormat",
+        value: data?.GPSFormat,
      },
    ],
  };
-  const response = await fetch(`${CAM_BASE}/api/update-config?id=Dispatcher-json`, {
+  const response = await fetch(`${CAM_BASE}/api/update-config?id=Dispatcher-bof2-constants`, {
    method: "POST",
-    body: JSON.stringify(updateConfigPayload),
+    body: JSON.stringify(bof2ContantsPayload),
  });
-  if (!response.ok) throw new Error("Cannot update Back Office configuration");
+  if (!response.ok) throw new Error("Cannot update dispatcher configuration");
+  return response.json();
+};
+
+const getBof2DispatcherData = async () => {
+  const response = await fetch(`http://100.118.196.113:8080/api/fetch-config?id=Dispatcher-bof2-constants`);
+  if (!response.ok) throw new Error("Cannot get BOF2 dispatcher config");
  return response.json();
 };

@@ -79,29 +74,23 @@ export const useCameraOutput = () => {
    queryFn: getDispatcherConfig,
  });

-  const backOfficeQuery = useQuery({
-    queryKey: ["backoffice"],
-    queryFn: getBackOfficeConfig,
-  });
-
  const dispatcherMutation = useMutation({
    mutationFn: updateDispatcherConfig,
    mutationKey: ["dispatcherUpdate"],
    onError: (error) => toast.error(error.message),
    onSuccess: (data) => {
      if (data) {
-        toast.success("Settings successfully updated");
+        toast.success("Settings successfully updated", { id: "dispatchSettings" });
      }
    },
  });

-  const backOfficeMutation = useMutation({
-    mutationKey: ["backOfficeUpdate"],
-    mutationFn: updateBackOfficeConfig,
-    onError: (error) => toast.error(error.message),
+  const backOfficeDispatcherMutation = useMutation({
+    mutationKey: ["backofficedDispatcher"],
+    mutationFn: updateBackOfficeDispatcher,
    onSuccess: (data) => {
      if (data) {
-        toast.success("Settings successfully updated");
+        toast.success("Settings successfully updated", { id: "dispatchSettings" });
      }
    },
  });
@@ -110,14 +99,18 @@ export const useCameraOutput = () => {
    if (dispatcherQuery.isError) toast.error(dispatcherQuery.error.message);
  }, [dispatcherQuery?.error?.message, dispatcherQuery.isError]);

-  useEffect(() => {
-    if (backOfficeQuery.isError) toast.error(backOfficeQuery.error.message);
-  }, [backOfficeQuery?.error?.message, backOfficeQuery.isError]);
-
  return {
    dispatcherQuery,
    dispatcherMutation,
-    backOfficeQuery,
-    backOfficeMutation,
+    backOfficeDispatcherMutation,
  };
 };
+
+export const useGetDispatcherConfig = () => {
+  const bof2ConstantsQuery = useQuery({
+    queryKey: ["getBof2DispatcherData"],
+    queryFn: getBof2DispatcherData,
+  });
+
+  return { bof2ConstantsQuery };
+};
--- a/src/hooks/useFormValidate.ts
+++ b/src/hooks/useFormValidate.ts
@@ -0,0 +1,46 @@
+import { useMutation } from "@tanstack/react-query";
+import { CAM_BASE } from "../utils/config";
+import type { InitialValuesForm } from "../types/types";
+
+const sendToValidate = async (data: InitialValuesForm) => {
+  const updateConfigPayload = {
+    id: `Dispatcher-${data.format.toLowerCase()}`,
+    fields: [
+      {
+        property: "propBackofficeURL",
+        value: data.backOfficeURL,
+      },
+      {
+        property: "propConnectTimeoutSeconds",
+        value: data.connectTimeoutSeconds,
+      },
+      {
+        property: "propPassword",
+        value: data.password,
+      },
+      {
+        property: "propReadTimeoutSeconds",
+        value: data.readTimeoutSeconds,
+      },
+      {
+        property: "propUsername",
+        value: data.username,
+      },
+    ],
+  };
+  const response = await fetch(`${CAM_BASE}/api/update-config-isvalid`, {
+    method: "post",
+    body: JSON.stringify(updateConfigPayload),
+  });
+  if (!response.ok) throw new Error("Cannot send to validate");
+  return response.json();
+};
+
+export const useFormVaidate = () => {
+  const validateMutation = useMutation({
+    mutationKey: ["sendToValidate"],
+    mutationFn: sendToValidate,
+  });
+
+  return { validateMutation };
+};
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -48,10 +48,11 @@ export type CameraSettingErrorValues = Partial<Record<keyof CameraSettingValues,
 export type BearerTypeFieldType = {
  format: string;
  enabled: boolean;
-  verbose: boolean;
+  verbose?: boolean;
 };

 export type InitialValuesForm = {
+  format: string;
  backOfficeURL: string;
  username: string;
  password: string;
@@ -67,6 +68,13 @@ export type InitialValuesFormErrors = {
  readTimeoutSeconds?: string;
 };

+export type OptionalBOF2Constants = {
+  FFID?: "";
+  SCID?: "";
+  timestampSource?: "";
+  GPSFormat?: "";
+};
+
 export type NPEDFieldType = {
  frontId: string;
  username: string | undefined;