- updated form to include bof2 constants

- refactored code to make more scalable and use one form

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