src/features/output/components/ChannelCard.tsx

@@ -3,14 +3,22 @@ import Card from "../../../ui/Card";
 import CardHeader from "../../../ui/CardHeader";
 import ChannelFields from "./ChannelFields";
 import type { FormTypes } from "../../../types/types";
+import { useGetOutputs } from "../hooks/useGetOutputs";
 
 const ChannelCard = () => {
-  const { values, errors, touched } = useFormikContext<FormTypes>();
+  const { values, errors, touched, setFieldValue } = useFormikContext<FormTypes>();
-
+  const { query } = useGetOutputs(values?.format?.toLowerCase() || "json");
+  const outputData = query?.data;
   return (
     <Card className="p-4 h-150 md:h-full">
       <CardHeader title={`Channel (${values?.format})`} />
-      <ChannelFields errors={errors} touched={touched} values={values} />
+      <ChannelFields
+        errors={errors}
+        touched={touched}
+        values={values}
+        outputData={outputData}
+        onSetFieldValue={setFieldValue}
+      />
       <button
         type="submit"
         className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"

src/features/output/components/ChannelFields.tsx

@@ -1,5 +1,7 @@
 import { Field } from "formik";
 import type { FormTypes, InitialValuesFormErrors } from "../../../types/types";
+import type { UseQueryResult } from "@tanstack/react-query";
+import { useEffect, useMemo } from "react";
 
 type ChannelFieldsProps = {
   values: FormTypes;
@@ -8,9 +10,26 @@ type ChannelFieldsProps = {
     connectTimeoutSeconds?: boolean | undefined;
     readTimeoutSeconds?: boolean | undefined;
   };
+  outputData?: UseQueryResult<FormTypes, Error>;
+  onSetFieldValue: (field: string, value: string, shouldValidate?: boolean | undefined) => void;
 };
 
-const ChannelFields = ({ errors, touched, values }: ChannelFieldsProps) => {
+const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }: ChannelFieldsProps) => {
+  const channelFieldsObject = useMemo(() => {
+    return {
+      connectTimeoutSeconds: outputData?.propConnectTimeoutSeconds?.value || 5,
+      readTimeoutSeconds: outputData?.propReadTimeoutSeconds?.value || 15,
+      backOfficeURL: outputData?.propBackofficeURL?.value || "",
+      username: outputData?.propUsername?.value || "",
+      password: outputData?.propPassword?.value || "",
+    };
+  }, [outputData]);
+
+  useEffect(() => {
+    for (const [key, value] of Object.entries(channelFieldsObject)) {
+      onSetFieldValue(key, value);
+    }
+  }, [channelFieldsObject, onSetFieldValue, outputData]);
   return (
     <div className="flex flex-col gap-4 p-4">
       <div className="flex flex-row justify-between">

src/features/output/components/Output.tsx

@@ -2,10 +2,16 @@ import { Formik, Form } from "formik";
 import BearerTypeCard from "./BearerTypeCard";
 import ChannelCard from "./ChannelCard";
 import type { FormTypes } from "../../../types/types";
+import { usePostOutputs } from "../hooks/usePostOutputs";
 
 const Output = () => {
+  const { mutation } = usePostOutputs();
   const handleSubmit = (values: FormTypes) => {
-    console.log(values);
+    const channelFields = {
+      backOfficeURL: values.backOfficeURL,
+      username: values.username,
+      password: values.password,
+    };
   };
 
   const inititalValues: FormTypes = {
@@ -32,7 +38,7 @@ const Output = () => {
   };
 
   return (
-    <Formik initialValues={inititalValues} onSubmit={handleSubmit}>
+    <Formik initialValues={inititalValues} onSubmit={handleSubmit} enableReinitialize>
       <Form className="grid grid-cols-1 md:grid-cols-2">
         <BearerTypeCard />
         <ChannelCard />

src/features/output/hooks/useGetOutputs.ts

@@ -0,0 +1,20 @@
+import { useQuery } from "@tanstack/react-query";
+
+const fetchOutputs = async (format: string) => {
+  const response = await fetch(`http://100.115.148.59/api/fetch-config?id=Dispatcher0-${format}`, {
+    method: "GET",
+  });
+  if (!response.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return response.json();
+};
+
+export const useGetOutputs = (format: string) => {
+  const query = useQuery({
+    queryKey: ["outputs", format],
+    queryFn: () => fetchOutputs(format),
+  });
+
+  return { query };
+};

src/features/output/hooks/usePostOutputs.ts

@@ -0,0 +1,21 @@
+import { useMutation } from "@tanstack/react-query";
+import type { BearerTypeFields } from "../../../types/types";
+
+const postQuery = async (query: BearerTypeFields) => {
+  const response = await fetch("/api/outputs", {
+    method: "POST",
+    body: JSON.stringify({ query }),
+  });
+  if (!response.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return response.json();
+};
+
+export const usePostOutputs = () => {
+  const mutation = useMutation({
+    mutationFn: (query: BearerTypeFields) => postQuery(query),
+    mutationKey: ["outputs"],
+  });
+  return { mutation };
+};