school-dashboard-exercise/src/Pages/question/Model/EditModel.tsx
2024-06-24 15:27:42 +03:00

87 lines
2.5 KiB
TypeScript

import React, { useEffect } from "react";
import { Modal, Spin } from "antd";
import FormikForm from "../../../Layout/Dashboard/FormikFormModel";
import ModelBody from "./Add";
import { getInitialValues, getValidationSchema } from "./formUtil";
import { useGetAllQuestion, useUpdateQuestion } from "../../../api/Question";
import { useQueryClient } from "react-query";
import { useTranslation } from "react-i18next";
import { useNavigate, useParams } from "react-router-dom";
import { ParamsEnum } from "../../../enums/params";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
import { removeStringKeys } from "../../../utils/removeStringKeys";
import SpinContainer from "../../../Components/Layout/SpinContainer";
const ModalForm: React.FC = () => {
const {question_id,subject_id} = useParams<ParamsEnum>()
const { mutate, isSuccess, isLoading } = useUpdateQuestion();
const {data,isLoading:dataLoading}= useGetAllQuestion({show:question_id})
const object_to_edit = data?.data ;
const handleSubmit = (values: any) => {
console.log(values, "values");
const DataToSend = structuredClone(values);
const keysToRemove = ['image', 'answer_image'];
const updatedObject = removeStringKeys(DataToSend, keysToRemove);
mutate({ ...updatedObject });
};
const navigate = useNavigate()
const handleCancel = () => {
navigate(-1)
};
const [t] = useTranslation();
useEffect(() => {
if(isSuccess){
navigate(-1)
}
}, [isSuccess])
if(dataLoading){
return <SpinContainer/>
}
return (
<div className="exercise_add">
<FormikForm
handleSubmit={handleSubmit}
initialValues={getInitialValues(object_to_edit)}
validationSchema={getValidationSchema}
>
<main className="w-100 exercise_add_main">
<header className="exercise_add_header mb-4">
{" "}
{t("practical.edit")} {t("models.exercise")}{" "}
</header>
<ModelBody />
<div className="exercise_add_buttons">
<div onClick={handleCancel}>{t("practical.back")}</div>
<button disabled={isLoading} className="relative" type="submit">
{t("practical.edit")}
{isLoading && (
<span className="Spinier_Div">
<Spin />
</span>
)}
</button>
</div>
</main>
</FormikForm>
</div>
);
};
export default ModalForm;