nerd_project_dashboard/src/Pages/Package/Model/AddModel.tsx
2024-08-21 15:23:33 +03:00

72 lines
2.2 KiB
TypeScript

import React, { useEffect } from "react";
import { getInitialValues, getValidationSchema } from "./formUtil";
import { ModalEnum } from "../../../enums/Model";
import LayoutModel from "../../../Layout/Dashboard/LayoutModel";
import { QueryStatusEnum } from "../../../enums/QueryStatus";
import ModelForm from "./ModelForm";
import { useAddPackage } from "../../../api/package";
import FormikForm from "../../../Layout/Dashboard/FormikForm";
import { Spin } from "antd";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import useSetPageTitle from "../../../Hooks/useSetPageTitle";
import { PackageInitialValues } from "../../../types/Package";
import { arrayToObject } from "../../../utils/arrayToObject";
const AddModel: React.FC = () => {
const { mutate, status ,isLoading,isSuccess} = useAddPackage();
const [t] = useTranslation();
const navigate = useNavigate()
const handleSubmit = (values: PackageInitialValues) => {
const DataToSend = JSON.parse(JSON.stringify(values) );
console.log(DataToSend,"DataToSend");
console.log(values?.configuration);
const configuration = JSON.stringify(arrayToObject(values?.configuration )) ;
console.log(configuration);
mutate({
...values,
});
};
useEffect(() => {
if(isSuccess){
navigate("/package")
}
}, [isSuccess])
useSetPageTitle(t(`page_header.package`));
return (
<div className="page">
<FormikForm
handleSubmit={handleSubmit}
initialValues={getInitialValues({})}
validationSchema={getValidationSchema}
>
<header>
{t("header.add_new_package")}
</header>
<main className="w-100 exercise_add_main">
<ModelForm />
<div className="exercise_add_buttons">
<button disabled={isLoading} className="relative button center" type="submit">
{t("practical.add")}
{isLoading && (
<span className="Spinier_Div">
<Spin />
</span>
)}
</button>
</div>
</main>
</FormikForm>
</div>
);
};
export default AddModel;