50 lines
1.7 KiB
TypeScript
50 lines
1.7 KiB
TypeScript
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/useBackOfficeConfig";
|
|
import { useEffect, useMemo } from "react";
|
|
|
|
type ChannelCardProps = {
|
|
touched: FormikTouched<BearerTypeFieldType & InitialValuesForm>;
|
|
isSubmitting: boolean;
|
|
};
|
|
|
|
const ChannelCard = ({ touched, isSubmitting }: ChannelCardProps) => {
|
|
const { values, setFieldValue } = useFormikContext<BearerTypeFieldType & InitialValuesForm>();
|
|
const { backOfficeQuery } = 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;
|
|
for (const [key, value] of Object.entries(mapped)) {
|
|
setFieldValue(key, value);
|
|
}
|
|
}, [backOfficeQuery.isSuccess, mapped, setFieldValue]);
|
|
|
|
return (
|
|
<Card className="p-4">
|
|
<CardHeader title={`Channel (${values?.format})`} />
|
|
<ChannelFields
|
|
touched={touched}
|
|
isSubmitting={isSubmitting}
|
|
backOfficeData={backOfficeQuery}
|
|
format={values?.format}
|
|
/>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default ChannelCard;
|