From 9e891937476e22e81c857ca10722a5b78c2deb57 Mon Sep 17 00:00:00 2001
From: Toba Ojo <toba.ojo@mav-systems.com>
Date: Fri, 5 Dec 2025 12:53:42 +0000
Subject: [PATCH] - finally fixed custom imput to match what is on backend on
 sighting amend endpoint

---
 .../output/components/ChannelCard.tsx         |  7 +--
 .../output/components/ChannelFields.tsx       | 42 ++++++++--------
 .../output/components/OutputForms.tsx         | 41 +++++++++------
 src/features/output/hooks/useCustomFields.ts  | 50 ++++++++++++++++++-
 src/types/types.ts                            | 12 ++++-
 5 files changed, 108 insertions(+), 44 deletions(-)

diff --git a/src/features/output/components/ChannelCard.tsx b/src/features/output/components/ChannelCard.tsx
index 04fa3e0..6a6ec51 100644
--- a/src/features/output/components/ChannelCard.tsx
+++ b/src/features/output/components/ChannelCard.tsx
@@ -5,11 +5,7 @@ import ChannelFields from "./ChannelFields";
 import type { FormTypes } from "../../../types/types";
 import { useGetBearerConfig } from "../hooks/useBearer";
 
-type ChannelCardProps = {
-  customFields: (string | undefined)[];
-};
-
-const ChannelCard = ({ customFields }: ChannelCardProps) => {
+const ChannelCard = () => {
   const { values, errors, touched, setFieldValue } = useFormikContext<FormTypes>();
   const { bearerQuery } = useGetBearerConfig(values?.format?.toLowerCase() || "json");
   const outputData = bearerQuery?.data;
@@ -22,7 +18,6 @@ const ChannelCard = ({ customFields }: ChannelCardProps) => {
         values={values}
         outputData={outputData}
         onSetFieldValue={setFieldValue}
-        customFields={customFields}
       />
       <button
         type="submit"
diff --git a/src/features/output/components/ChannelFields.tsx b/src/features/output/components/ChannelFields.tsx
index 40a7728..027ac6e 100644
--- a/src/features/output/components/ChannelFields.tsx
+++ b/src/features/output/components/ChannelFields.tsx
@@ -12,13 +12,12 @@ type ChannelFieldsProps = {
   };
   outputData?: OutputDataResponse;
   onSetFieldValue: (field: string, value: string, shouldValidate?: boolean | undefined) => void;
-  customFields: (string | undefined)[];
 };
 
-const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue, customFields }: ChannelFieldsProps) => {
+const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }: ChannelFieldsProps) => {
   const { optionalConstantsQuery } = useOptionalConstants(outputData?.id?.split("-")[1] || "");
   const optionalConstants = optionalConstantsQuery?.data;
-  console.log(customFields);
+
   const channelFieldsObject = useMemo(() => {
     return {
       connectTimeoutSeconds: outputData?.propConnectTimeoutSeconds?.value || "5",
@@ -160,7 +159,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue, c
                   className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
                 >
                   <option value={"UTC"}>UTC</option>
-                  <option value={"local"}>Local</option>
+                  <option value={"LOCAL"}>Local</option>
                 </Field>
               </div>
               <div className="flex flex-row justify-between">
@@ -270,23 +269,24 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue, c
             <FieldArray name="customFields">
               {(arrayHelpers) => (
                 <>
-                  {values?.customFields?.slice(0, 6).map((_, index) => (
-                    <div key={index} className="flex flex-row justify-between items-center mb-4">
-                      <Field
-                        name={`customFields.${index}.label`}
-                        className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
-                        placeholder={`Custom Field ${index + 1} label`}
-                      />
-
-                      <Field
-                        name={`customFields.${index}.value`}
-                        key={index}
-                        className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
-                        placeholder={`Enter Custom Field ${index + 1} value`}
-                        autoComplete="off"
-                      />
-                    </div>
-                  ))}
+                  {values?.customFields?.map((_, index) => {
+                    // if (!field.value) return null;
+                    return (
+                      <div key={index} className="flex flex-row justify-between items-center mb-4 gap-2">
+                        <Field
+                          name={`customFields.${index}.label`}
+                          className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
+                          placeholder={`Custom Field ${index + 1} Label`}
+                        />
+                        <Field
+                          name={`customFields.${index}.value`}
+                          className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
+                          placeholder={`Custom Field ${index + 1} Value`}
+                          autoComplete="off"
+                        />
+                      </div>
+                    );
+                  })}
                   <button
                     type="button"
                     onClick={() => arrayHelpers.push({ label: "", value: "" })}
diff --git a/src/features/output/components/OutputForms.tsx b/src/features/output/components/OutputForms.tsx
index f42fcd4..c26e4d9 100644
--- a/src/features/output/components/OutputForms.tsx
+++ b/src/features/output/components/OutputForms.tsx
@@ -10,9 +10,10 @@ import { useCustomFields } from "../hooks/useCustomFields";
 const OutputForms = () => {
   const { bearerMutation } = usePostBearerConfig();
   const { dispatcherQuery, dispatcherMutation } = useDispatcherConfig();
-  const { customFieldsQuery } = useCustomFields();
+  const { customFieldsQuery, customFieldsMutation } = useCustomFields();
 
   const isLoading = dispatcherQuery?.isLoading;
+
   const format = dispatcherQuery?.data?.propFormat?.value;
   const { optionalConstantsQuery, optionalConstantsMutation } = useOptionalConstants(format?.toLowerCase());
   const FFID = optionalConstantsQuery?.data?.propFeedIdentifier?.value;
@@ -23,18 +24,25 @@ const OutputForms = () => {
   const customFieldLabel1 = customFieldsQuery?.data?.propCustomFieldName1?.value;
   const customFieldLabel2 = customFieldsQuery?.data?.propCustomFieldName2?.value;
   const customFieldLabel3 = customFieldsQuery?.data?.propCustomFieldName3?.value;
-  const customFieldLabel4 = customFieldsQuery?.data?.propCustomFieldName4?.value;
-  const customFieldLabel5 = customFieldsQuery?.data?.propCustomFieldName5?.value;
-  const customFieldLabel6 = customFieldsQuery?.data?.propCustomFieldName6?.value;
+  const customFieldLabel4 = customFieldsQuery?.data?.propStringName4?.value;
+  const customFieldLabel5 = customFieldsQuery?.data?.propStringName5?.value;
+  const customFieldLabel6 = customFieldsQuery?.data?.propStringName6?.value;
 
-  const customfields = [
-    customFieldLabel1,
-    customFieldLabel2,
-    customFieldLabel3,
-    customFieldLabel4,
-    customFieldLabel5,
-    customFieldLabel6,
-  ];
+  const customFieldValues1 = customFieldsQuery?.data?.propCustomFieldValue1?.value;
+  const customFieldValues2 = customFieldsQuery?.data?.propCustomFieldValue2?.value;
+  const customFieldValues3 = customFieldsQuery?.data?.propCustomFieldValue3?.value;
+  const customFieldValues4 = customFieldsQuery?.data?.propStringValue4?.value;
+  const customFieldValues5 = customFieldsQuery?.data?.propStringValue5?.value;
+  const customFieldValues6 = customFieldsQuery?.data?.propStringValue6?.value;
+
+  const initialCustomFields = [
+    { label: customFieldLabel1 || "", value: customFieldValues1 || "" },
+    { label: customFieldLabel2 || "", value: customFieldValues2 || "" },
+    { label: customFieldLabel3 || "", value: customFieldValues3 || "" },
+    { label: customFieldLabel4 || "", value: customFieldValues4 || "" },
+    { label: customFieldLabel5 || "", value: customFieldValues5 || "" },
+    { label: customFieldLabel6 || "", value: customFieldValues6 || "" },
+  ].filter((field) => field.label && field.value);
 
   const inititalValues: FormTypes = {
     format: format ?? "JSON",
@@ -61,7 +69,7 @@ const OutputForms = () => {
     // ftp - fields
 
     //custom fields
-    customFields: customfields ?? ["", "", "", "", "", ""],
+    customFields: initialCustomFields,
   };
 
   const handleSubmit = async (values: FormTypes) => {
@@ -107,6 +115,11 @@ const OutputForms = () => {
         await optionalConstantsMutation.mutateAsync(optionalUTMCFields);
       }
     }
+    if (values.customFields && values.customFields.length > 0) {
+      const customFields = [...values.customFields];
+
+      await customFieldsMutation.mutateAsync(customFields);
+    }
   };
 
   if (isLoading) {
@@ -117,7 +130,7 @@ const OutputForms = () => {
     <Formik initialValues={inititalValues} onSubmit={handleSubmit} enableReinitialize>
       <Form className="grid grid-cols-1 md:grid-cols-2">
         <BearerTypeCard />
-        <ChannelCard customFields={customfields} />
+        <ChannelCard />
       </Form>
     </Formik>
   );
diff --git a/src/features/output/hooks/useCustomFields.ts b/src/features/output/hooks/useCustomFields.ts
index c5d6ae9..b281453 100644
--- a/src/features/output/hooks/useCustomFields.ts
+++ b/src/features/output/hooks/useCustomFields.ts
@@ -1,5 +1,6 @@
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useMutation } from "@tanstack/react-query";
 import { CAMBASE } from "../../../utils/config";
+import type { CustomFieldConfig } from "../../../types/types";
 
 const fetchCustomFields = async () => {
   const response = await fetch(`${CAMBASE}/api/fetch-config?id=SightingAmmend0-custom-fields`);
@@ -9,11 +10,56 @@ const fetchCustomFields = async () => {
   return response.json();
 };
 
+const postCustomFields = async (customFieldConfig: CustomFieldConfig[]) => {
+  const fields = [];
+
+  for (const customField of customFieldConfig) {
+    if (customField.value)
+      if (customFieldConfig.indexOf(customField) > 2) {
+        fields.push({
+          property: `propStringName${customFieldConfig.indexOf(customField) + 1}`,
+          value: customField.label,
+        });
+        fields.push({
+          property: `propStringValue${customFieldConfig.indexOf(customField) + 1}`,
+          value: customField.value,
+        });
+      } else {
+        fields.push(
+          {
+            property: `propCustomFieldName${customFieldConfig.indexOf(customField) + 1}`,
+            value: customField.label,
+          },
+          {
+            property: `propCustomFieldValue${customFieldConfig.indexOf(customField) + 1}`,
+            value: customField.value,
+          },
+        );
+      }
+  }
+  const customFieldConfigPayload = {
+    id: "SightingAmmend0-custom-fields",
+    fields,
+  };
+
+  const response = await fetch(`${CAMBASE}/api/update-config`, {
+    method: "POST",
+    body: JSON.stringify(customFieldConfigPayload),
+  });
+  if (!response.ok) throw new Error("Network response was not ok");
+  return response.json();
+};
+
 export const useCustomFields = () => {
   const customFieldsQuery = useQuery({
     queryKey: ["customFields"],
     queryFn: fetchCustomFields,
   });
 
-  return { customFieldsQuery };
+  const customFieldsMutation = useMutation({
+    mutationKey: ["customFieldsMutation"],
+    mutationFn: postCustomFields,
+  });
+
+  return { customFieldsQuery, customFieldsMutation };
 };
diff --git a/src/types/types.ts b/src/types/types.ts
index 92398b8..79f8827 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -56,8 +56,13 @@ export type OptionalLaneIDs = {
   LID3?: string;
 };
 
+export type CustomField = {
+  label: string;
+  value: string;
+};
+
 export type CustomFields = {
-  customFields?: string[];
+  customFields?: CustomField[];
 };
 
 export type InitialValuesFormErrors = {
@@ -195,3 +200,8 @@ export type NetworkConfig = {
   primaryServer?: string;
   secondaryServer?: string;
 };
+
+export type CustomFieldConfig = {
+  label: string;
+  value: string;
+};