import axios from "axios"; import { useEffect, useState } from "react"; import { useMutation, useQueryClient } from "react-query"; import { createExo } from "../../requests/requests.exos.js"; import { notificationService } from "../../services/notification.service.js"; import styles from "../../styles/exos/ExoCreateForm.module.scss"; import { CODE_SEPARATOR, PYTHON_DEFAULT } from "../../utils/constant.js"; import { csrftoken, isEmpty, parseClassName } from "../../utils/utils.js"; import Input from "../Input.jsx"; import ModelInput from "./modelInput.jsx"; export default function ExoCreateForm({ cancel, resetFilter }) { const [newExo, setNewExo] = useState({ name: "", consigne: "", exo_model: { data: PYTHON_DEFAULT, filename: null, download: false }, private: false }); const [errors, setErrors] = useState({ name: null, consigne: null, exo_model: null, }); const queryClient = useQueryClient() const { mutate, isLoading, data } = useMutation( () => { var data_sent = new FormData(); var blob = new Blob([newExo.exo_model.data], { type: "text/x-python", }); var file = new File([blob], newExo.exo_model.filename ? newExo.exo_model.filename: 'main.py', { type: "text/x-python", }); data_sent.append("file", file); data_sent.append("name", newExo.name); data_sent.append("consigne", newExo.consigne); data_sent.append("private", newExo.private); return createExo(data_sent); }, { onSuccess: (data) => { //queryClient.invalidateQueries("exo-data"); resetFilter() queryClient.invalidateQueries('user-data') notificationService.success( "Nouvel exercice", `Exercice ${newExo.name} crée !`, { autoClose: true, keepAfterRouteChange: true } ); cancel(); }, onError: (err) => { var resetErrors = { name: null, exo_model: null, consigne: null, }; var newError = { ...resetErrors, ...err.response.data.errors }; setErrors({ ...newError }); notificationService.error( "Erreur", "L'exercice n'a pu être crée ! Réessayez plus tard !", { autoClose: true, keepAfterRouteChange: true } ); }, } ); const [full, setFull] = useState({ state: false, fade: false }); const fadeFull = (state) => { setFull({ state: !state, fade: state }); setTimeout(() => { setFull({ state: state, fade: false }); }, 300); }; return (
{full.state == false && ( <>
Nouvel exercice
{ //setErrors({ ...errors, name: null }); setNewExo({ ...newExo, name: e.target.value, }); }} /> {errors.name !== null && errors.name.map((err, i) => { return (

{err}

); })} { //setErrors({...errors, consigne: null}) setNewExo({ ...newExo, consigne: e.target.value, }); }} placeholder="Consigne" /> {errors.consigne !== null && errors.consigne.map((err, i) => { return (

{err}

); })}
{ setNewExo({ ...newExo, private: !newExo.private }); }} />
)} { setNewExo({ ...newExo, exo_model: n }); }} step={{ ...newExo, name: newExo.name == "" ? "Nouveau" : newExo.name, }} onChange={(new_model) => { setNewExo({ ...newExo, exo_model: new_model }); }} tempSpec={newExo} /> {errors.exo_model !== null && errors.exo_model.map((err, i) => { return (

{err}

); })} {full.state == false && (
)}
); }