-
-
-
- {options?.map((option: string) => (
-
- ))}
-
-
-
-
-
-
-
-
-
+
);
};
diff --git a/src/components/SettingForms/Channel1-JSON/ChannelCard.tsx b/src/components/SettingForms/Channel1-JSON/ChannelCard.tsx
index a75cb6e..f983616 100644
--- a/src/components/SettingForms/Channel1-JSON/ChannelCard.tsx
+++ b/src/components/SettingForms/Channel1-JSON/ChannelCard.tsx
@@ -1,12 +1,62 @@
+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/useCameraBackOfficeOutput";
+import { useEffect, useMemo } from "react";
+
+type ChannelCardProps = {
+ touched: FormikTouched
;
+ isSubmitting: boolean;
+ handleFormSubmit: (values: BearerTypeFieldType & InitialValuesForm) => Promise;
+};
+
+const ChannelCard = ({ touched, isSubmitting, handleFormSubmit }: ChannelCardProps) => {
+ const { values, resetForm } = useFormikContext();
+ const { backOfficeQuery, backOfficeMutation } = 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;
+ resetForm({ values: { ...values, ...mapped } });
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [backOfficeQuery.isSuccess, mapped]);
+
+ console.log(backOfficeQuery.isFetching);
+ const handleSubmit = async () => {
+ const backOfficeData = {
+ format: values.format,
+ backOfficeURL: values.backOfficeURL,
+ connectTimeoutSeconds: values.connectTimeoutSeconds,
+ password: values.password,
+ readTimeoutSeconds: values.readTimeoutSeconds,
+ username: values.username,
+ };
+ await backOfficeMutation.mutateAsync(backOfficeData);
+ };
-const ChannelCard = () => {
return (
-
-
+
+
);
};
diff --git a/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx b/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx
index ef554b4..a2000b0 100644
--- a/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx
+++ b/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx
@@ -1,43 +1,33 @@
-import { Field, Form, Formik, useFormikContext } from "formik";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Field, Form, useFormikContext, type FormikTouched } from "formik";
import FormGroup from "../components/FormGroup";
import { useEffect, useState } from "react";
import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useCameraOutput } from "../../../hooks/useCameraOutput";
-import type { InitialValuesForm, InitialValuesFormErrors } from "../../../types/types";
+import type { BearerTypeFieldType, InitialValuesForm, InitialValuesFormErrors } from "../../../types/types";
import { toast } from "sonner";
+import type { UseMutationResult, UseQueryResult } from "@tanstack/react-query";
-const ChannelFields = () => {
+type ChannelFieldsProps = {
+ touched: FormikTouched;
+ isSubmitting: boolean;
+ backOfficeMutation: UseMutationResult;
+ backOfficeData: UseQueryResult;
+ handleFormSubmit: (values: BearerTypeFieldType & InitialValuesForm) => Promise;
+ handleSubmit: () => void;
+};
+
+const ChannelFields = ({
+ touched,
+ isSubmitting,
+ backOfficeMutation,
+ handleFormSubmit,
+ handleSubmit,
+}: ChannelFieldsProps) => {
const [showPwd, setShowPwd] = useState(false);
- const { backOfficeQuery, backOfficeMutation } = useCameraOutput();
-
- const backOfficeURL = backOfficeQuery?.data?.propBackofficeURL?.value;
- const username = backOfficeQuery?.data?.propUsername?.value;
- const password = backOfficeQuery?.data?.propPassword?.value;
- const connectTimeoutSeconds = backOfficeQuery?.data?.propConnectTimeoutSeconds?.value;
- const readTimeoutSeconds = backOfficeQuery?.data?.propReadTimeoutSeconds?.value;
-
- const initialValues: InitialValuesForm = {
- backOfficeURL: backOfficeURL ?? "",
- username: username ?? "",
- password: password ?? "",
- connectTimeoutSeconds: Number(connectTimeoutSeconds),
- readTimeoutSeconds: Number(readTimeoutSeconds),
- };
-
- const handleSubmit = async (values: InitialValuesForm) => {
- await backOfficeMutation.mutateAsync(values);
- };
-
- const ValidationToastOnce = () => {
- const { submitCount, isValid } = useFormikContext();
- useEffect(() => {
- if (submitCount > 0 && !isValid) {
- toast.error("Check fields are filled in");
- }
- }, [submitCount, isValid]);
- return null;
- };
+ const { submitCount, isValid, values, setErrors, errors } = useFormikContext<
+ BearerTypeFieldType & InitialValuesForm
+ >();
const validateValues = (values: InitialValuesForm): InitialValuesFormErrors => {
const errors: InitialValuesFormErrors = {};
@@ -66,97 +56,112 @@ const ChannelFields = () => {
} else if (connect < 0) {
errors.connectTimeoutSeconds = "Must be ≥ 0";
}
-
return errors;
};
+ const onSubmit = (values: BearerTypeFieldType & InitialValuesForm) => {
+ const validationErrors = validateValues(values);
+ if (Object.values(validationErrors).length > 0) {
+ setErrors(validationErrors);
+ return;
+ }
+ handleFormSubmit(values);
+ handleSubmit();
+ };
+
+ const ValidationToastOnce = () => {
+ useEffect(() => {
+ if (submitCount > 0 && !isValid) {
+ toast.error("Check fields are filled in");
+ }
+ }, []);
+ return null;
+ };
+
return (
-
- {({ errors, touched, isSubmitting }) => (
-