TobaOjo/Mav-Mobile-UI
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- refactored to fetch confis based on formats

Browse Source 
- send configs based on formats
This commit is contained in:
Toba Ojo
2025-11-03 15:01:13 +00:00
parent cd26b3b68f
commit 933c101cbc
8 changed files with 353 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/SettingForms/BearerType/BearerTypeCard.tsx
View File

@@ -2,11 +2,15 @@ import Card from "../../UI/Card";
import CardHeader from "../../UI/CardHeader"; import CardHeader from "../../UI/CardHeader";
import BearerTypeFields from "./BearerTypeFields"; import BearerTypeFields from "./BearerTypeFields";
const BearerTypeCard = () => { type BearerTypeCardProps = {
options: string[];
};
const BearerTypeCard = ({ options }: BearerTypeCardProps) => {
return ( return (
<Card className="p-4"> <Card className="p-4">
<CardHeader title="Bearer Type" /> <CardHeader title="Bearer Type" />
<BearerTypeFields /> <BearerTypeFields options={options} />
</Card> </Card>
); );
}; };

95
src/components/SettingForms/BearerType/BearerTypeFields.tsx
View File

@@ -1,69 +1,46 @@
import { Field, Form, Formik } from "formik"; import { Field, Form, useFormikContext } from "formik";
import FormToggle from "../components/FormToggle"; import FormToggle from "../components/FormToggle";
import { useCameraOutput } from "../../../hooks/useCameraOutput";
import { cleanArray } from "../../../utils/utils";
import FormGroup from "../components/FormGroup"; import FormGroup from "../components/FormGroup";
import type { BearerTypeFieldType } from "../../../types/types"; import type { BearerTypeFieldType, InitialValuesForm } from "../../../types/types";
export const ValuesComponent = () => { type BearerTypeFieldsProps = {
return null; options: string[];
}; };
const BearerTypeFields = () => { const BearerTypeFields = ({ options }: BearerTypeFieldsProps) => {
const { dispatcherQuery, dispatcherMutation } = useCameraOutput(); useFormikContext<BearerTypeFieldType & InitialValuesForm>();
const format = dispatcherQuery?.data?.propFormat?.value;
const rawOptions = dispatcherQuery?.data?.propFormat?.accepted;
const enabled = dispatcherQuery?.data?.propEnabled?.value;
const verbose = dispatcherQuery?.data?.propVerbose?.value;
const options = cleanArray(rawOptions);
const initialValues: BearerTypeFieldType = {
format: format ?? "JSON",
enabled: enabled === "true",
verbose: verbose === "true",
};
const handleSubmit = async (values: BearerTypeFieldType) => {
await dispatcherMutation.mutateAsync(values);
};
return ( return (
<Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize> <Form>
{({ isSubmitting }) => ( <div className="flex flex-col space-y-4 px-2">
<Form> <FormGroup>
<div className="flex flex-col space-y-4 px-2"> <label htmlFor="format">Format</label>
<FormGroup> <Field
<label htmlFor="format">Format</label> as="select"
<Field name="format"
as="select" id="format"
name="format" className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
id="format" >
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60" {options?.map((option: string) => (
> <option key={option} value={option}>
{options?.map((option: string) => ( {option}
<option key={option} value={option}> </option>
{option} ))}
</option> </Field>
))} </FormGroup>
</Field> <FormGroup>
</FormGroup> <div className="flex flex-col space-y-4">
<FormGroup> <FormToggle name="enabled" label="Enabled" />
<div className="flex flex-col space-y-4"> <FormToggle name="verbose" label="Verbose" />
<FormToggle name="enabled" label="Enabled" />
<FormToggle name="verbose" label="Verbose" />
</div>
</FormGroup>
<button
type="submit"
className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
>
{isSubmitting || dispatcherMutation.isPending ? "Saving..." : "Save Changes"}
</button>
</div> </div>
</Form> </FormGroup>
)} {/* <button
</Formik> type="submit"
className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
>
{isSubmitting || dispatcherMutation.isPending ? "Saving..." : "Save Changes"}
</button> */}
</div>
</Form>
); );
}; };

56
src/components/SettingForms/Channel1-JSON/ChannelCard.tsx
View File

@@ -1,12 +1,62 @@
import { useFormikContext, type FormikTouched } from "formik";
import Card from "../../UI/Card"; import Card from "../../UI/Card";
import CardHeader from "../../UI/CardHeader"; import CardHeader from "../../UI/CardHeader";
import ChannelFields from "./ChannelFields"; 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<BearerTypeFieldType & InitialValuesForm>;
isSubmitting: boolean;
handleFormSubmit: (values: BearerTypeFieldType & InitialValuesForm) => Promise<void>;
};
const ChannelCard = ({ touched, isSubmitting, handleFormSubmit }: ChannelCardProps) => {
const { values, resetForm } = useFormikContext<BearerTypeFieldType & InitialValuesForm>();
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 ( return (
<Card className="p-4"> <Card className="p-4">
<CardHeader title="Channel 1 (JSON)" /> <CardHeader title={`Channel (${values?.format})`} />
<ChannelFields /> <ChannelFields
touched={touched}
isSubmitting={isSubmitting}
backOfficeData={backOfficeQuery}
backOfficeMutation={backOfficeMutation}
handleFormSubmit={handleFormSubmit}
handleSubmit={handleSubmit}
/>
</Card> </Card>
); );
}; };

241
src/components/SettingForms/Channel1-JSON/ChannelFields.tsx
View File

@@ -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 FormGroup from "../components/FormGroup";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons"; import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useCameraOutput } from "../../../hooks/useCameraOutput"; import type { BearerTypeFieldType, InitialValuesForm, InitialValuesFormErrors } from "../../../types/types";
import type { InitialValuesForm, InitialValuesFormErrors } from "../../../types/types";
import { toast } from "sonner"; import { toast } from "sonner";
import type { UseMutationResult, UseQueryResult } from "@tanstack/react-query";
const ChannelFields = () => { type ChannelFieldsProps = {
touched: FormikTouched<BearerTypeFieldType & InitialValuesForm>;
isSubmitting: boolean;
backOfficeMutation: UseMutationResult<any, Error, InitialValuesForm, unknown>;
backOfficeData: UseQueryResult<any, Error>;
handleFormSubmit: (values: BearerTypeFieldType & InitialValuesForm) => Promise<void>;
handleSubmit: () => void;
};
const ChannelFields = ({
touched,
isSubmitting,
backOfficeMutation,
handleFormSubmit,
handleSubmit,
}: ChannelFieldsProps) => {
const [showPwd, setShowPwd] = useState(false); const [showPwd, setShowPwd] = useState(false);
const { backOfficeQuery, backOfficeMutation } = useCameraOutput(); const { submitCount, isValid, values, setErrors, errors } = useFormikContext<
BearerTypeFieldType & InitialValuesForm
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 validateValues = (values: InitialValuesForm): InitialValuesFormErrors => { const validateValues = (values: InitialValuesForm): InitialValuesFormErrors => {
const errors: InitialValuesFormErrors = {}; const errors: InitialValuesFormErrors = {};
@@ -66,97 +56,112 @@ const ChannelFields = () => {
} else if (connect < 0) { } else if (connect < 0) {
errors.connectTimeoutSeconds = "Must be ≥ 0"; errors.connectTimeoutSeconds = "Must be ≥ 0";
} }
return errors; 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 ( return (
<Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize validate={validateValues}> <Form>
{({ errors, touched, isSubmitting }) => ( <div className="flex flex-col space-y-2 px-2">
<Form> <FormGroup>
<div className="flex flex-col space-y-2 px-2"> <label htmlFor="backoffice" className="m-0">
<FormGroup> Back Office URL
<label htmlFor="backoffice" className="m-0"> </label>
Back Office URL
</label>
<Field <Field
name={"backOfficeURL"} name={"backOfficeURL"}
type="text" type="text"
id="backoffice" id="backoffice"
placeholder="https://www.backoffice.com" placeholder="https://www.backoffice.com"
className={`p-1.5 border ${ className={`p-1.5 border ${
errors.backOfficeURL && touched.backOfficeURL ? "border-red-500" : "border-gray-400 " errors.backOfficeURL && touched.backOfficeURL ? "border-red-500" : "border-gray-400 "
} rounded-lg w-full md:w-60`} } rounded-lg w-full md:w-60`}
/> />
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<label htmlFor="username">Username</label> <label htmlFor="username">Username</label>
<Field <Field
name={"username"} name={"username"}
type="text" type="text"
id="username" id="username"
placeholder="Back office username" placeholder="Back office username"
className={`p-1.5 border ${ className={`p-1.5 border ${
errors.username && touched.username ? "border-red-500" : "border-gray-400 " errors.username && touched.username ? "border-red-500" : "border-gray-400 "
} rounded-lg w-full md:w-60`} } rounded-lg w-full md:w-60`}
/> />
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<label htmlFor="password">Password</label> <label htmlFor="password">Password</label>
<div className="flex gap-2 items-center relative mb-4"> <div className="flex gap-2 items-center relative mb-4">
<Field <Field
name={"password"} name={"password"}
type={showPwd ? "text" : "password"} type={showPwd ? "text" : "password"}
id="password" id="password"
placeholder="Back office password" placeholder="Back office password"
className={`p-1.5 border ${ className={`p-1.5 border ${
errors.password && touched.password ? "border-red-500" : "border-gray-400 " errors.password && touched.password ? "border-red-500" : "border-gray-400 "
} rounded-lg w-full md:w-60`} } rounded-lg w-full md:w-60`}
/> />
<FontAwesomeIcon <FontAwesomeIcon
type="button" type="button"
className="absolute right-5 end-0" className="absolute right-5 end-0"
onClick={() => setShowPwd((s) => !s)} onClick={() => setShowPwd((s) => !s)}
icon={showPwd ? faEyeSlash : faEye} icon={showPwd ? faEyeSlash : faEye}
/> />
</div>
</FormGroup>
<FormGroup>
<label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>
<Field
name={"connectTimeoutSeconds"}
type="number"
id="connectTimeoutSeconds"
className={`p-1.5 border ${
errors.connectTimeoutSeconds && touched.connectTimeoutSeconds ? "border-red-500" : "border-gray-400 "
} rounded-lg w-full md:w-60`}
/>
</FormGroup>
<FormGroup>
<label htmlFor="readTimeoutSeconds">Read Timeout Seconds</label>
<Field
name={"readTimeoutSeconds"}
type="number"
id="readTimeoutSeconds"
placeholder="https://example.com"
className={`p-1.5 border ${
errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
} rounded-lg w-full md:w-60`}
/>
</FormGroup>
</div> </div>
<button </FormGroup>
type="submit"
className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5" <FormGroup>
> <label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>
{isSubmitting || backOfficeMutation.isPending ? "Saving..." : "Save Changes"} <Field
</button> name={"connectTimeoutSeconds"}
<ValidationToastOnce /> type="number"
</Form> id="connectTimeoutSeconds"
)} className={`p-1.5 border ${
</Formik> errors.connectTimeoutSeconds && touched.connectTimeoutSeconds ? "border-red-500" : "border-gray-400 "
} rounded-lg w-full md:w-60`}
/>
</FormGroup>
<FormGroup>
<label htmlFor="readTimeoutSeconds">Read Timeout Seconds</label>
<Field
name={"readTimeoutSeconds"}
type="number"
id="readTimeoutSeconds"
placeholder="https://example.com"
className={`p-1.5 border ${
errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
} rounded-lg w-full md:w-60`}
/>
</FormGroup>
</div>
<button
type="button"
onClick={() => onSubmit(values)}
className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
>
{isSubmitting || backOfficeMutation.isPending ? "Saving..." : "Save Changes"}
</button>
<ValidationToastOnce />
</Form>
); );
}; };

62
src/components/SettingForms/SettingForms/SettingForms.tsx
View File

@@ -1,12 +1,66 @@
import { Formik } from "formik";
import BearerTypeCard from "../BearerType/BearerTypeCard"; import BearerTypeCard from "../BearerType/BearerTypeCard";
import ChannelCard from "../Channel1-JSON/ChannelCard"; import ChannelCard from "../Channel1-JSON/ChannelCard";
import { useCameraOutput } from "../../../hooks/useCameraOutput";
import type { BearerTypeFieldType, InitialValuesForm } from "../../../types/types";
import { cleanArray } from "../../../utils/utils";
import { useQueryClient } from "@tanstack/react-query";
const SettingForms = () => { const SettingForms = () => {
const qc = useQueryClient();
const { dispatcherQuery, dispatcherMutation } = useCameraOutput();
const format = dispatcherQuery?.data?.propFormat?.value;
const rawOptions = dispatcherQuery?.data?.propFormat?.accepted;
const enabled = dispatcherQuery?.data?.propEnabled?.value;
const verbose = dispatcherQuery?.data?.propVerbose?.value;
const options = cleanArray(rawOptions);
const handleFormSubmit = async (values: BearerTypeFieldType & InitialValuesForm) => {
console.log(values);
const dispatcherData = {
format: values.format,
enabled: values.enabled,
};
const result = await dispatcherMutation.mutateAsync(dispatcherData);
if (result?.id) {
qc.invalidateQueries({ queryKey: ["dispatcher"] });
qc.invalidateQueries({ queryKey: ["backoffice", values.format] });
}
};
const initialValues: BearerTypeFieldType & InitialValuesForm = {
format: format ?? "JSON",
enabled: enabled === "true",
verbose: verbose === "true",
backOfficeURL: "",
username: "",
password: "",
connectTimeoutSeconds: Number(5),
readTimeoutSeconds: Number(15),
};
const handleSubmit = async (values: BearerTypeFieldType) => {
console.log(values);
// await dispatcherMutation.mutateAsync(values);
};
return ( return (
<div className="mx-auto grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-2 px-2 sm:px-4 lg:px-0 w-full"> <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
<BearerTypeCard /> {({ isSubmitting, touched }) => (
<ChannelCard /> <div className="mx-auto grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-2 px-2 sm:px-4 lg:px-0 w-full">
</div> <BearerTypeCard options={options} />
<ChannelCard
touched={touched}
isSubmitting={isSubmitting}
// backOfficeMutation={backOfficeMutation}
handleFormSubmit={handleFormSubmit}
/>
</div>
)}
</Formik>
); );
}; };

74
src/hooks/useCameraBackOfficeOutput.ts Normal file
View File

@@ -0,0 +1,74 @@
import { useMutation, useQuery } from "@tanstack/react-query";
import { useEffect } from "react";
import { toast } from "sonner";
import type { InitialValuesForm } from "../types/types";
import { CAM_BASE } from "../utils/config";
const getBackOfficeConfig = async (format: string) => {
const response = await fetch(`${CAM_BASE}/api/fetch-config?id=Dispatcher-${format?.toLowerCase()}`);
if (!response.ok) throw new Error("Cannot get Back Office configuration");
return response.json();
};
const updateBackOfficeConfig = async (data: InitialValuesForm) => {
const updateConfigPayload = {
id: `Dispatcher-${data.format.toLowerCase()}`,
fields: [
{
property: "propBackofficeURL",
value: data.backOfficeURL,
},
{
property: "propConnectTimeoutSeconds",
value: data.connectTimeoutSeconds,
},
{
property: "propPassword",
value: data.password,
},
{
property: "propReadTimeoutSeconds",
value: data.readTimeoutSeconds,
},
{
property: "propUsername",
value: data.username,
},
],
};
console.log(updateConfigPayload);
const response = await fetch(`${CAM_BASE}/api/update-config?id=Dispatcher-${data.format.toLowerCase()}`, {
method: "POST",
body: JSON.stringify(updateConfigPayload),
});
if (!response.ok) throw new Error("Cannot update Back Office configuration");
return response.json();
};
export const useCameraBackOfficeOutput = (format: string) => {
const backOfficeQuery = useQuery({
queryKey: ["backoffice", format],
queryFn: () => getBackOfficeConfig(format),
enabled: !!format,
});
const backOfficeMutation = useMutation({
mutationKey: ["backOfficeUpdate"],
mutationFn: updateBackOfficeConfig,
onError: (error) => toast.error(error.message),
onSuccess: (data) => {
if (data) {
toast.success("Settings successfully updated");
}
},
});
useEffect(() => {
if (backOfficeQuery.isError) toast.error(backOfficeQuery.error.message);
}, [backOfficeQuery?.error?.message, backOfficeQuery.isError]);
return {
backOfficeQuery,
backOfficeMutation,
};
};

65
src/hooks/useCameraOutput.ts
View File

@@ -2,7 +2,7 @@ import { useMutation, useQuery } from "@tanstack/react-query";
import { CAM_BASE } from "../utils/config"; import { CAM_BASE } from "../utils/config";
import { useEffect } from "react"; import { useEffect } from "react";
import { toast } from "sonner"; import { toast } from "sonner";
import type { BearerTypeFieldType, InitialValuesForm } from "../types/types"; import type { BearerTypeFieldType } from "../types/types";
const getDispatcherConfig = async () => { const getDispatcherConfig = async () => {
const response = await fetch(`${CAM_BASE}/api/fetch-config?id=Dispatcher`); const response = await fetch(`${CAM_BASE}/api/fetch-config?id=Dispatcher`);
@@ -18,7 +18,6 @@ const updateDispatcherConfig = async (data: BearerTypeFieldType) => {
property: "propEnabled", property: "propEnabled",
value: data.enabled, value: data.enabled,
}, },
// Todo: figure out how to add verbose conditionally
{ {
property: "propFormat", property: "propFormat",
value: data.format, value: data.format,
@@ -33,57 +32,12 @@ const updateDispatcherConfig = async (data: BearerTypeFieldType) => {
return response.json(); return response.json();
}; };
const getBackOfficeConfig = async () => {
const response = await fetch(`${CAM_BASE}/api/fetch-config?id=Dispatcher-json`);
if (!response.ok) throw new Error("Cannot get Back Office configuration");
return response.json();
};
const updateBackOfficeConfig = async (data: InitialValuesForm) => {
const updateConfigPayload = {
id: "Dispatcher-json",
fields: [
{
property: "propBackofficeURL",
value: data.backOfficeURL,
},
{
property: "propConnectTimeoutSeconds",
value: data.connectTimeoutSeconds,
},
{
property: "propPassword",
value: data.password,
},
{
property: "propReadTimeoutSeconds",
value: data.readTimeoutSeconds,
},
{
property: "propUsername",
value: data.username,
},
],
};
const response = await fetch(`${CAM_BASE}/api/update-config?id=Dispatcher-json`, {
method: "POST",
body: JSON.stringify(updateConfigPayload),
});
if (!response.ok) throw new Error("Cannot update Back Office configuration");
return response.json();
};
export const useCameraOutput = () => { export const useCameraOutput = () => {
const dispatcherQuery = useQuery({ const dispatcherQuery = useQuery({
queryKey: ["dispatcher"], queryKey: ["dispatcher"],
queryFn: getDispatcherConfig, queryFn: getDispatcherConfig,
}); });
const backOfficeQuery = useQuery({
queryKey: ["backoffice"],
queryFn: getBackOfficeConfig,
});
const dispatcherMutation = useMutation({ const dispatcherMutation = useMutation({
mutationFn: updateDispatcherConfig, mutationFn: updateDispatcherConfig,
mutationKey: ["dispatcherUpdate"], mutationKey: ["dispatcherUpdate"],
@@ -95,29 +49,12 @@ export const useCameraOutput = () => {
}, },
}); });
const backOfficeMutation = useMutation({
mutationKey: ["backOfficeUpdate"],
mutationFn: updateBackOfficeConfig,
onError: (error) => toast.error(error.message),
onSuccess: (data) => {
if (data) {
toast.success("Settings successfully updated");
}
},
});
useEffect(() => { useEffect(() => {
if (dispatcherQuery.isError) toast.error(dispatcherQuery.error.message); if (dispatcherQuery.isError) toast.error(dispatcherQuery.error.message);
}, [dispatcherQuery?.error?.message, dispatcherQuery.isError]); }, [dispatcherQuery?.error?.message, dispatcherQuery.isError]);
useEffect(() => {
if (backOfficeQuery.isError) toast.error(backOfficeQuery.error.message);
}, [backOfficeQuery?.error?.message, backOfficeQuery.isError]);
return { return {
dispatcherQuery, dispatcherQuery,
dispatcherMutation, dispatcherMutation,
backOfficeQuery,
backOfficeMutation,
}; };
}; };

3
src/types/types.ts
View File

@@ -48,10 +48,11 @@ export type CameraSettingErrorValues = Partial<Record<keyof CameraSettingValues,
export type BearerTypeFieldType = { export type BearerTypeFieldType = {
format: string; format: string;
enabled: boolean; enabled: boolean;
verbose: boolean; verbose?: boolean;
}; };
export type InitialValuesForm = { export type InitialValuesForm = {
format: string;
backOfficeURL: string; backOfficeURL: string;
username: string; username: string;
password: string; password: string;