- refactored to fetch confis based on formats

- send configs based on formats

src/components/SettingForms/BearerType/BearerTypeCard.tsx

@@ -2,11 +2,15 @@ import Card from "../../UI/Card";
 import CardHeader from "../../UI/CardHeader";
 import BearerTypeFields from "./BearerTypeFields";
 
-const BearerTypeCard = () => {
+type BearerTypeCardProps = {
+  options: string[];
+};
+
+const BearerTypeCard = ({ options }: BearerTypeCardProps) => {
   return (
     <Card className="p-4">
       <CardHeader title="Bearer Type" />
-      <BearerTypeFields />
+      <BearerTypeFields options={options} />
     </Card>
   );
 };

src/components/SettingForms/BearerType/BearerTypeFields.tsx

@@ -1,36 +1,15 @@
-import { Field, Form, Formik } from "formik";
+import { Field, Form, 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";
+import type { BearerTypeFieldType, InitialValuesForm } from "../../../types/types";
 
-export const ValuesComponent = () => {
-  return null;
-};
-
-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);
+type BearerTypeFieldsProps = {
+  options: string[];
 };
 
+const BearerTypeFields = ({ options }: BearerTypeFieldsProps) => {
+  useFormikContext<BearerTypeFieldType & InitialValuesForm>();
   return (
-    <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
-      {({ isSubmitting }) => (
     <Form>
       <div className="flex flex-col space-y-4 px-2">
         <FormGroup>
@@ -54,16 +33,14 @@ const BearerTypeFields = () => {
             <FormToggle name="verbose" label="Verbose" />
           </div>
         </FormGroup>
-            <button
+        {/* <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>
+        </button> */}
       </div>
     </Form>
-      )}
-    </Formik>
   );
 };
 

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

@@ -1,12 +1,62 @@
+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/useCameraBackOfficeOutput";
+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 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;
+    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);
+  };
 
-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}
+        backOfficeMutation={backOfficeMutation}
+        handleFormSubmit={handleFormSubmit}
+        handleSubmit={handleSubmit}
+      />
     </Card>
   );
 };

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

@@ -1,43 +1,33 @@
-import { Field, Form, Formik, useFormikContext } from "formik";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Field, Form, 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, InitialValuesFormErrors } from "../../../types/types";
 import { toast } from "sonner";
+import type { UseMutationResult, UseQueryResult } from "@tanstack/react-query";
 
-const ChannelFields = () => {
+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;
+};
+
+const ChannelFields = ({
+  touched,
+  isSubmitting,
+  backOfficeMutation,
+  handleFormSubmit,
+  handleSubmit,
+}: 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 ValidationToastOnce = () => {
-    const { submitCount, isValid } = useFormikContext();
-    useEffect(() => {
-      if (submitCount > 0 && !isValid) {
-        toast.error("Check fields are filled in");
-      }
-    }, [submitCount, isValid]);
-    return null;
-  };
+  const { submitCount, isValid, values, setErrors, errors } = useFormikContext<
+    BearerTypeFieldType & InitialValuesForm
+  >();
 
   const validateValues = (values: InitialValuesForm): InitialValuesFormErrors => {
     const errors: InitialValuesFormErrors = {};
@@ -66,13 +56,29 @@ const ChannelFields = () => {
     } 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 ValidationToastOnce = () => {
+    useEffect(() => {
+      if (submitCount > 0 && !isValid) {
+        toast.error("Check fields are filled in");
+      }
+    }, []);
+    return null;
+  };
+
   return (
-    <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize validate={validateValues}>
-      {({ errors, touched, isSubmitting }) => (
     <Form>
       <div className="flex flex-col space-y-2 px-2">
         <FormGroup>
@@ -148,15 +154,14 @@ const ChannelFields = () => {
         </FormGroup>
       </div>
       <button
-            type="submit"
+        type="button"
+        onClick={() => onSubmit(values)}
         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"}
       </button>
       <ValidationToastOnce />
     </Form>
-      )}
-    </Formik>
   );
 };
 

src/components/SettingForms/SettingForms/SettingForms.tsx

@@ -1,12 +1,66 @@
+import { 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 { cleanArray } from "../../../utils/utils";
+import { useQueryClient } from "@tanstack/react-query";
 
 const SettingForms = () => {
+  const qc = useQueryClient();
+  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 handleFormSubmit = async (values: BearerTypeFieldType & InitialValuesForm) => {
+    console.log(values);
+    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 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>
+      {({ 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 />
-      <ChannelCard />
+          <BearerTypeCard options={options} />
+          <ChannelCard
+            touched={touched}
+            isSubmitting={isSubmitting}
+            // backOfficeMutation={backOfficeMutation}
+            handleFormSubmit={handleFormSubmit}
+          />
         </div>
+      )}
+    </Formik>
   );
 };
 

src/hooks/useCameraBackOfficeOutput.ts

@@ -0,0 +1,74 @@
+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,
+      },
+    ],
+  };
+  console.log(updateConfigPayload);
+  const response = await fetch(`${CAM_BASE}/api/update-config?id=Dispatcher-${data.format.toLowerCase()}`, {
+    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,
+  });
+
+  const backOfficeMutation = useMutation({
+    mutationKey: ["backOfficeUpdate"],
+    mutationFn: updateBackOfficeConfig,
+    onError: (error) => toast.error(error.message),
+    onSuccess: (data) => {
+      if (data) {
+        toast.success("Settings successfully updated");
+      }
+    },
+  });
+
+  useEffect(() => {
+    if (backOfficeQuery.isError) toast.error(backOfficeQuery.error.message);
+  }, [backOfficeQuery?.error?.message, backOfficeQuery.isError]);
+
+  return {
+    backOfficeQuery,
+    backOfficeMutation,
+  };
+};

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 } 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,57 +32,12 @@ 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",
-    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-json`, {
-    method: "POST",
-    body: JSON.stringify(updateConfigPayload),
-  });
-  if (!response.ok) throw new Error("Cannot update Back Office configuration");
-  return response.json();
-};
-
 export const useCameraOutput = () => {
   const dispatcherQuery = useQuery({
     queryKey: ["dispatcher"],
     queryFn: getDispatcherConfig,
   });
 
-  const backOfficeQuery = useQuery({
-    queryKey: ["backoffice"],
-    queryFn: getBackOfficeConfig,
-  });
-
   const dispatcherMutation = useMutation({
     mutationFn: updateDispatcherConfig,
     mutationKey: ["dispatcherUpdate"],
@@ -95,29 +49,12 @@ export const useCameraOutput = () => {
     },
   });
 
-  const backOfficeMutation = useMutation({
-    mutationKey: ["backOfficeUpdate"],
-    mutationFn: updateBackOfficeConfig,
-    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]);
 
-  useEffect(() => {
-    if (backOfficeQuery.isError) toast.error(backOfficeQuery.error.message);
-  }, [backOfficeQuery?.error?.message, backOfficeQuery.isError]);
-
   return {
     dispatcherQuery,
     dispatcherMutation,
-    backOfficeQuery,
-    backOfficeMutation,
   };
 };

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;