TobaOjo/BayIQ-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- finally fixed custom imput to match what is on backend on sighting amend endpoint

Browse Source
This commit is contained in:
Toba Ojo
2025-12-05 12:53:42 +00:00
parent 9208470e53
commit 9e89193747
5 changed files with 108 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/features/output/components/ChannelCard.tsx
View File

@@ -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"

42
src/features/output/components/ChannelFields.tsx
View File

@@ -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: "" })}

41
src/features/output/components/OutputForms.tsx
View File

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

50
src/features/output/hooks/useCustomFields.ts
View File

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

12
src/types/types.ts
View File

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