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

- refactor: replace Output component with OutputForms and update related hooks and types

Browse Source
This commit is contained in:
Toba Ojo
2025-11-26 13:00:41 +00:00
parent 90eb976092
commit e07f769288
14 changed files with 232 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/features/output/components/BearerTypeFields.tsx
View File

@@ -1,6 +1,8 @@
import { Field } from "formik";
import { Field, useFormikContext } from "formik";
import type { FormTypes } from "../../../types/types";
const BearerTypeFields = () => {
useFormikContext<FormTypes>();
return (
<div className="flex flex-row justify-between">
<label htmlFor="format" className="text-xl">

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

@@ -3,12 +3,12 @@ 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";
import { useGetBearerConfig } from "../hooks/useBearer";
const ChannelCard = () => {
const { values, errors, touched, setFieldValue } = useFormikContext<FormTypes>();
const { query } = useGetOutputs(values?.format?.toLowerCase() || "json");
const outputData = query?.data;
const { bearerQuery } = useGetBearerConfig(values?.format?.toLowerCase() || "json");
const outputData = bearerQuery?.data;
return (
<Card className="p-4 h-150 md:h-full">
<CardHeader title={`Channel (${values?.format})`} />

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

@@ -1,6 +1,5 @@
import { Field } from "formik";
import type { FormTypes, InitialValuesFormErrors } from "../../../types/types";
import type { UseQueryResult } from "@tanstack/react-query";
import type { FormTypes, InitialValuesFormErrors, OutputDataResponse } from "../../../types/types";
import { useEffect, useMemo } from "react";
type ChannelFieldsProps = {
@@ -10,15 +9,15 @@ type ChannelFieldsProps = {
connectTimeoutSeconds?: boolean | undefined;
readTimeoutSeconds?: boolean | undefined;
};
outputData?: UseQueryResult<FormTypes, Error>;
outputData?: OutputDataResponse;
onSetFieldValue: (field: string, value: string, shouldValidate?: boolean | undefined) => void;
};
const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }: ChannelFieldsProps) => {
const channelFieldsObject = useMemo(() => {
return {
connectTimeoutSeconds: outputData?.propConnectTimeoutSeconds?.value || 5,
readTimeoutSeconds: outputData?.propReadTimeoutSeconds?.value || 15,
connectTimeoutSeconds: outputData?.propConnectTimeoutSeconds?.value || "5",
readTimeoutSeconds: outputData?.propReadTimeoutSeconds?.value || "15",
backOfficeURL: outputData?.propBackofficeURL?.value || "",
username: outputData?.propUsername?.value || "",
password: outputData?.propPassword?.value || "",

50
src/features/output/components/Output.tsx
View File

@@ -1,50 +0,0 @@
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) => {
const channelFields = {
backOfficeURL: values.backOfficeURL,
username: values.username,
password: values.password,
};
};
const inititalValues: FormTypes = {
format: "JSON",
enabled: true,
backOfficeURL: "",
username: "",
password: "",
connectTimeoutSeconds: Number(5),
readTimeoutSeconds: Number(15),
overviewQuality: "HIGH",
cropSizeFactor: "3/4",
// Bof2 -optional constants
FFID: "",
SCID: "",
timestampSource: "UTC",
GPSFormat: "Minutes",
//BOF2 - optional Lane IDs
laneId: "",
LID1: "",
LID2: "",
};
return (
<Formik initialValues={inititalValues} onSubmit={handleSubmit} enableReinitialize>
<Form className="grid grid-cols-1 md:grid-cols-2">
<BearerTypeCard />
<ChannelCard />
</Form>
</Formik>
);
};
export default Output;

81
src/features/output/components/OutputForms.tsx Normal file
View File

@@ -0,0 +1,81 @@
import { Formik, Form } from "formik";
import BearerTypeCard from "./BearerTypeCard";
import ChannelCard from "./ChannelCard";
import type { BearerTypeFields, FormTypes, OptionalBOF2Constants } from "../../../types/types";
import { usePostBearerConfig } from "../hooks/useBearer";
import { useDispatcherConfig } from "../hooks/useDispatcherConfig";
const OutputForms = () => {
const { bearerMutation } = usePostBearerConfig();
const { dispatcherQuery, dispatcherMutation } = useDispatcherConfig();
const format = dispatcherQuery?.data?.propFormat?.value;
const inititalValues: FormTypes = {
format: format ?? "JSON",
enabled: true,
backOfficeURL: "",
username: "",
password: "",
connectTimeoutSeconds: Number(5),
readTimeoutSeconds: Number(15),
overviewQuality: "HIGH",
cropSizeFactor: "3/4",
// Bof2 -optional constants
FFID: "",
SCID: "",
timestampSource: "UTC",
GPSFormat: "Minutes",
//BOF2 - optional Lane IDs
laneId: "",
LID1: "",
LID2: "",
};
const handleSubmit = async (values: FormTypes) => {
const bearerTypeFields = {
format: values.format,
enabled: values.enabled,
};
const bearerFields: BearerTypeFields = {
format: values.format,
enabled: values.enabled,
backOfficeURL: values.backOfficeURL,
username: values.username,
password: values.password,
connectTimeoutSeconds: values.connectTimeoutSeconds,
readTimeoutSeconds: values.readTimeoutSeconds,
overviewQuality: values.overviewQuality,
cropSizeFactor: values.cropSizeFactor,
};
const result = await dispatcherMutation.mutateAsync(bearerTypeFields);
if (result?.id) {
await bearerMutation.mutateAsync(bearerFields);
if (values.format === "BOF2") {
const optionalBOF2Fields: OptionalBOF2Constants = {
FFID: values.FFID,
SCID: values.SCID,
timestampSource: values.timestampSource,
GPSFormat: values.GPSFormat,
};
console.log("Submit BOF2 optional fields:", optionalBOF2Fields);
}
}
};
return (
<Formik initialValues={inititalValues} onSubmit={handleSubmit} enableReinitialize>
<Form className="grid grid-cols-1 md:grid-cols-2">
<BearerTypeCard />
<ChannelCard />
</Form>
</Formik>
);
};
export default OutputForms;