- 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,69 +1,46 @@
-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;
+type BearerTypeFieldsProps = {
+  options: string[];
 };
 
-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);
-  };
-
+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>
-              <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"
-            >
-              {isSubmitting || dispatcherMutation.isPending ? "Saving..." : "Save Changes"}
-            </button>
+    <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>
-        </Form>
-      )}
-    </Formik>
+        </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>
   );
 };
 

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,97 +56,112 @@ 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>
-              <label htmlFor="backoffice" className="m-0">
-                Back Office URL
-              </label>
+    <Form>
+      <div className="flex flex-col space-y-2 px-2">
+        <FormGroup>
+          <label htmlFor="backoffice" className="m-0">
+            Back Office URL
+          </label>
 
-              <Field
-                name={"backOfficeURL"}
-                type="text"
-                id="backoffice"
-                placeholder="https://www.backoffice.com"
-                className={`p-1.5 border ${
-                  errors.backOfficeURL && touched.backOfficeURL ? "border-red-500" : "border-gray-400 "
-                } rounded-lg w-full md:w-60`}
-              />
-            </FormGroup>
-            <FormGroup>
-              <label htmlFor="username">Username</label>
-              <Field
-                name={"username"}
-                type="text"
-                id="username"
-                placeholder="Back office username"
-                className={`p-1.5 border ${
-                  errors.username && touched.username ? "border-red-500" : "border-gray-400 "
-                } rounded-lg w-full md:w-60`}
-              />
-            </FormGroup>
-            <FormGroup>
-              <label htmlFor="password">Password</label>
-              <div className="flex gap-2 items-center relative mb-4">
-                <Field
-                  name={"password"}
-                  type={showPwd ? "text" : "password"}
-                  id="password"
-                  placeholder="Back office password"
-                  className={`p-1.5 border ${
-                    errors.password && touched.password ? "border-red-500" : "border-gray-400 "
-                  } rounded-lg w-full md:w-60`}
-                />
-                <FontAwesomeIcon
-                  type="button"
-                  className="absolute right-5 end-0"
-                  onClick={() => setShowPwd((s) => !s)}
-                  icon={showPwd ? faEyeSlash : faEye}
-                />
-              </div>
-            </FormGroup>
-
-            <FormGroup>
-              <label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>
-              <Field
-                name={"connectTimeoutSeconds"}
-                type="number"
-                id="connectTimeoutSeconds"
-                className={`p-1.5 border ${
-                  errors.connectTimeoutSeconds && touched.connectTimeoutSeconds ? "border-red-500" : "border-gray-400 "
-                } rounded-lg w-full md:w-60`}
-              />
-            </FormGroup>
-            <FormGroup>
-              <label htmlFor="readTimeoutSeconds">Read Timeout Seconds</label>
-              <Field
-                name={"readTimeoutSeconds"}
-                type="number"
-                id="readTimeoutSeconds"
-                placeholder="https://example.com"
-                className={`p-1.5 border ${
-                  errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
-                } rounded-lg w-full md:w-60`}
-              />
-            </FormGroup>
+          <Field
+            name={"backOfficeURL"}
+            type="text"
+            id="backoffice"
+            placeholder="https://www.backoffice.com"
+            className={`p-1.5 border ${
+              errors.backOfficeURL && touched.backOfficeURL ? "border-red-500" : "border-gray-400 "
+            } rounded-lg w-full md:w-60`}
+          />
+        </FormGroup>
+        <FormGroup>
+          <label htmlFor="username">Username</label>
+          <Field
+            name={"username"}
+            type="text"
+            id="username"
+            placeholder="Back office username"
+            className={`p-1.5 border ${
+              errors.username && touched.username ? "border-red-500" : "border-gray-400 "
+            } rounded-lg w-full md:w-60`}
+          />
+        </FormGroup>
+        <FormGroup>
+          <label htmlFor="password">Password</label>
+          <div className="flex gap-2 items-center relative mb-4">
+            <Field
+              name={"password"}
+              type={showPwd ? "text" : "password"}
+              id="password"
+              placeholder="Back office password"
+              className={`p-1.5 border ${
+                errors.password && touched.password ? "border-red-500" : "border-gray-400 "
+              } rounded-lg w-full md:w-60`}
+            />
+            <FontAwesomeIcon
+              type="button"
+              className="absolute right-5 end-0"
+              onClick={() => setShowPwd((s) => !s)}
+              icon={showPwd ? faEyeSlash : faEye}
+            />
           </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"}
-          </button>
-          <ValidationToastOnce />
-        </Form>
-      )}
-    </Formik>
+        </FormGroup>
+
+        <FormGroup>
+          <label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>
+          <Field
+            name={"connectTimeoutSeconds"}
+            type="number"
+            id="connectTimeoutSeconds"
+            className={`p-1.5 border ${
+              errors.connectTimeoutSeconds && touched.connectTimeoutSeconds ? "border-red-500" : "border-gray-400 "
+            } rounded-lg w-full md:w-60`}
+          />
+        </FormGroup>
+        <FormGroup>
+          <label htmlFor="readTimeoutSeconds">Read Timeout Seconds</label>
+          <Field
+            name={"readTimeoutSeconds"}
+            type="number"
+            id="readTimeoutSeconds"
+            placeholder="https://example.com"
+            className={`p-1.5 border ${
+              errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
+            } rounded-lg w-full md:w-60`}
+          />
+        </FormGroup>
+      </div>
+      <button
+        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>
   );
 };
 

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 (
-    <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>
+    <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 options={options} />
+          <ChannelCard
+            touched={touched}
+            isSubmitting={isSubmitting}
+            // backOfficeMutation={backOfficeMutation}
+            handleFormSubmit={handleFormSubmit}
+          />
+        </div>
+      )}
+    </Formik>
   );
 };