- refactored to fetch confis based on formats

- send configs based on formats

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