- updated form to include bof2 constants

- refactored code to make more scalable and use one form

src/components/SettingForms/BearerType/BearerTypeFields.tsx

@@ -1,4 +1,4 @@
-import { Field, Form, useFormikContext } from "formik";
+import { Field, useFormikContext } from "formik";
 import FormToggle from "../components/FormToggle";
 import FormGroup from "../components/FormGroup";
 import type { BearerTypeFieldType, InitialValuesForm } from "../../../types/types";
@@ -9,38 +9,31 @@ type BearerTypeFieldsProps = {
 
 const BearerTypeFields = ({ options }: BearerTypeFieldsProps) => {
   useFormikContext<BearerTypeFieldType & InitialValuesForm>();
+
   return (
-    <Form>
-      <div className="flex flex-col space-y-4 px-2">
-        <FormGroup>
-          <label htmlFor="format">Format</label>
-          <Field
-            as="select"
-            name="format"
-            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>
-            ))}
-          </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"
+    <div className="flex flex-col space-y-4 px-2">
+      <FormGroup>
+        <label htmlFor="format">Format</label>
+        <Field
+          as="select"
+          name="format"
+          id="format"
+          className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
         >
-          {isSubmitting || dispatcherMutation.isPending ? "Saving..." : "Save Changes"}
-        </button> */}
-      </div>
-    </Form>
+          {options?.map((option: string) => (
+            <option key={option} value={option}>
+              {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>
+    </div>
   );
 };
 

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

@@ -3,18 +3,17 @@ 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/useCameraBackOfficeOutput";
+import { useCameraBackOfficeOutput } from "../../../hooks/useBackOfficeConfig";
 import { useEffect, useMemo } from "react";
 
 type ChannelCardProps = {
   touched: FormikTouched<BearerTypeFieldType & InitialValuesForm>;
   isSubmitting: boolean;
-  handleFormSubmit: (values: BearerTypeFieldType & InitialValuesForm) => Promise<void>;
 };
 
-const ChannelCard = ({ touched, isSubmitting, handleFormSubmit }: ChannelCardProps) => {
-  const { values, resetForm } = useFormikContext<BearerTypeFieldType & InitialValuesForm>();
-  const { backOfficeQuery, backOfficeMutation } = useCameraBackOfficeOutput(values?.format);
+const ChannelCard = ({ touched, isSubmitting }: ChannelCardProps) => {
+  const { values, setFieldValue } = useFormikContext<BearerTypeFieldType & InitialValuesForm>();
+  const { backOfficeQuery } = useCameraBackOfficeOutput(values?.format);
 
   const mapped = useMemo(() => {
     const d = backOfficeQuery.data;
@@ -29,22 +28,10 @@ const ChannelCard = ({ touched, isSubmitting, handleFormSubmit }: ChannelCardPro
 
   useEffect(() => {
     if (!backOfficeQuery.isSuccess) return;
-    resetForm({ values: { ...values, ...mapped } });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [backOfficeQuery.isSuccess, mapped]);
-
-  console.log(backOfficeQuery.isFetching);
-  const handleSubmit = async () => {
-    const backOfficeData = {
-      format: values.format,
-      backOfficeURL: values.backOfficeURL,
-      connectTimeoutSeconds: values.connectTimeoutSeconds,
-      password: values.password,
-      readTimeoutSeconds: values.readTimeoutSeconds,
-      username: values.username,
-    };
-    await backOfficeMutation.mutateAsync(backOfficeData);
-  };
+    for (const [key, value] of Object.entries(mapped)) {
+      setFieldValue(key, value);
+    }
+  }, [backOfficeQuery.isSuccess, mapped, setFieldValue]);
 
   return (
     <Card className="p-4">
@@ -53,9 +40,7 @@ const ChannelCard = ({ touched, isSubmitting, handleFormSubmit }: ChannelCardPro
         touched={touched}
         isSubmitting={isSubmitting}
         backOfficeData={backOfficeQuery}
-        backOfficeMutation={backOfficeMutation}
-        handleFormSubmit={handleFormSubmit}
-        handleSubmit={handleSubmit}
+        format={values?.format}
       />
     </Card>
   );

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

@@ -1,73 +1,24 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Field, Form, useFormikContext, type FormikTouched } from "formik";
+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 type { BearerTypeFieldType, InitialValuesForm, InitialValuesFormErrors } from "../../../types/types";
+import type { BearerTypeFieldType, InitialValuesForm } from "../../../types/types";
 import { toast } from "sonner";
-import type { UseMutationResult, UseQueryResult } from "@tanstack/react-query";
+import type { UseQueryResult } from "@tanstack/react-query";
 
 type ChannelFieldsProps = {
   touched: FormikTouched<BearerTypeFieldType & InitialValuesForm>;
   isSubmitting: boolean;
-  backOfficeMutation: UseMutationResult<any, Error, InitialValuesForm, unknown>;
+
   backOfficeData: UseQueryResult<any, Error>;
-  handleFormSubmit: (values: BearerTypeFieldType & InitialValuesForm) => Promise<void>;
-  handleSubmit: () => void;
+  format?: string;
 };
 
-const ChannelFields = ({
-  touched,
-  isSubmitting,
-  backOfficeMutation,
-  handleFormSubmit,
-  handleSubmit,
-}: ChannelFieldsProps) => {
+const ChannelFields = ({ touched, isSubmitting, format }: ChannelFieldsProps) => {
   const [showPwd, setShowPwd] = useState(false);
-  const { submitCount, isValid, values, setErrors, errors } = useFormikContext<
-    BearerTypeFieldType & InitialValuesForm
-  >();
-
-  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 onSubmit = (values: BearerTypeFieldType & InitialValuesForm) => {
-    const validationErrors = validateValues(values);
-    if (Object.values(validationErrors).length > 0) {
-      setErrors(validationErrors);
-      return;
-    }
-    handleFormSubmit(values);
-    handleSubmit();
-  };
+  const { submitCount, isValid, values, errors } = useFormikContext<BearerTypeFieldType & InitialValuesForm>();
 
   const ValidationToastOnce = () => {
     useEffect(() => {
@@ -79,7 +30,7 @@ const ChannelFields = ({
   };
 
   return (
-    <Form>
+    <>
       <div className="flex flex-col space-y-2 px-2">
         <FormGroup>
           <label htmlFor="backoffice" className="m-0">
@@ -152,16 +103,75 @@ 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="button"
-        onClick={() => onSubmit(values)}
+        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>
+    </>
   );
 };
 

src/components/SettingForms/SettingForms/SettingForms.tsx

@@ -1,14 +1,21 @@
-import { Formik } from "formik";
+import { Form, Formik } from "formik";
 import BearerTypeCard from "../BearerType/BearerTypeCard";
 import ChannelCard from "../Channel1-JSON/ChannelCard";
 import { useCameraOutput } from "../../../hooks/useCameraOutput";
-import type { BearerTypeFieldType, InitialValuesForm } from "../../../types/types";
+import type {
+  BearerTypeFieldType,
+  InitialValuesForm,
+  InitialValuesFormErrors,
+  OptionalBOF2Constants,
+} from "../../../types/types";
 import { cleanArray } from "../../../utils/utils";
 import { useQueryClient } from "@tanstack/react-query";
+import { useUpdateBackOfficeConfig } from "../../../hooks/useBackOfficeConfig";
 
 const SettingForms = () => {
   const qc = useQueryClient();
-  const { dispatcherQuery, dispatcherMutation } = useCameraOutput();
+  const { dispatcherQuery, dispatcherMutation, backOfficeDispatcherMutation } = useCameraOutput();
+  const { backOfficeMutation } = useUpdateBackOfficeConfig();
 
   const format = dispatcherQuery?.data?.propFormat?.value;
   const rawOptions = dispatcherQuery?.data?.propFormat?.accepted;
@@ -17,8 +24,54 @@ const SettingForms = () => {
 
   const options = cleanArray(rawOptions);
 
-  const handleFormSubmit = async (values: BearerTypeFieldType & InitialValuesForm) => {
-    console.log(values);
+  const initialValues: BearerTypeFieldType & InitialValuesForm & OptionalBOF2Constants = {
+    format: format ?? "JSON",
+    enabled: enabled === "true",
+    verbose: verbose === "true",
+    backOfficeURL: "",
+    username: "",
+    password: "",
+    connectTimeoutSeconds: Number(5),
+    readTimeoutSeconds: Number(15),
+
+    // Bof2 - optional constants
+    FFID: "",
+    SCID: "",
+    timestampSource: "",
+    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) => {
     const dispatcherData = {
       format: values.format,
       enabled: values.enabled,
@@ -28,37 +81,29 @@ const SettingForms = () => {
     if (result?.id) {
       qc.invalidateQueries({ queryKey: ["dispatcher"] });
       qc.invalidateQueries({ queryKey: ["backoffice", values.format] });
+      await backOfficeMutation.mutateAsync(values);
+    }
+
+    if (values.format.toLowerCase() === "bof2") {
+      const bof2ConstantsData: OptionalBOF2Constants = {
+        FFID: values.FFID,
+        SCID: values.SCID,
+        timestampSource: values.timestampSource,
+        GPSFormat: values.GPSFormat,
+      };
+      await backOfficeDispatcherMutation.mutateAsync(bof2ConstantsData);
     }
   };
 
-  const initialValues: BearerTypeFieldType & InitialValuesForm = {
-    format: format ?? "JSON",
-    enabled: enabled === "true",
-    verbose: verbose === "true",
-    backOfficeURL: "",
-    username: "",
-    password: "",
-    connectTimeoutSeconds: Number(5),
-    readTimeoutSeconds: Number(15),
-  };
-
-  const handleSubmit = async (values: BearerTypeFieldType) => {
-    console.log(values);
-    // await dispatcherMutation.mutateAsync(values);
-  };
-
   return (
-    <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
+    <Formik initialValues={initialValues} onSubmit={handleSubmit} validate={validateValues} enableReinitialize>
       {({ isSubmitting, touched }) => (
-        <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 options={options} />
-          <ChannelCard
-            touched={touched}
-            isSubmitting={isSubmitting}
-            // backOfficeMutation={backOfficeMutation}
-            handleFormSubmit={handleFormSubmit}
-          />
-        </div>
+        <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 options={options} />
+            <ChannelCard touched={touched} isSubmitting={isSubmitting} />
+          </div>
+        </Form>
       )}
     </Formik>
   );