- refactored to fetch confis based on formats

- send configs based on formats

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>
   );
 };