Generateurv2/frontend/components/exos/ExoCreateForm.jsx

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 ModelInput from "./modelInput.jsx";

export default function ExoCreateForm({ cancel }) {
  const [newExo, setNewExo] = useState({
    name: "",
    consigne: "",
    exo_model: {data: PYTHON_DEFAULT, filename: null},
  });

  const queryClient = useQueryClient();
  const [errors, setErrors] = useState({
    name: null, 
    consigne: null,
    exo_model: null
  })
  const[test, setTest] = useState()
  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], "main.py", {
        type: "text/x-python",
      });
      data_sent.append("file", file);
      data_sent.append('name', newExo.name)
      data_sent.append('consigne', newExo.consigne)
      return createExo(data_sent);
    },
    {
      onSuccess: (data) => {
        queryClient.invalidateQueries("exo-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 };
        console.log(err, err.response, 'errs')
        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 (
    <div
      className={styles["ex_card--full"]}
      //id={"card-" + step.id_code}
    >
      <div
        className={parseClassName([
          styles["ex_card--body"],
          "marginb-p0",
          full.fade ? styles["ex_card-fade"] : undefined,
          full.fade || full.state ? styles["ex_card--big"] : undefined,
          full.state ? "vh-100" : undefined,
          full.state == false ? styles["ex_card--body__little"] : undefined,
        ])}
      >
        {full.state == false && (
          <>
            <div className={styles["ex_card--title"]}>Nouvel exercice</div>
            <input
              type="text"
              className={parseClassName([
                "exo-input",
                styles.input,
                "marginb-p0",
                errors.name !== null ? "exo-input-error" : undefined,
              ])}
              placeholder="Nom du l'exercice..."
              value={newExo.name}
              onChange={(e) => {
                setNewExo({
                  ...newExo,
                  name: e.target.value,
                });
              }}
            />
            {errors.name !== null &&
              errors.name.map((err, i) => {
                return (
                  <p className="error-msg margint-p0" key={i}>
                    {err}
                  </p>
                );
              })}
            <input
              type="text"
              className={parseClassName([
                "exo-input",
                styles.input,
                "marginb-p0",
                errors.consigne !== null ? "exo-input-error" : undefined,
              ])}
              placeholder="Consigne..."
            />
            {errors.consigne !== null &&
              errors.consigne.map((err, i) => {
                return (
                  <p className="error-msg margint-p0" key={i}>
                    {err}
                  </p>
                );
              })}
          </>
        )}
        <ModelInput
          setFull={fadeFull}
          full={full.state}
          model={newExo.exo_model}
          setModel={(n)=>{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 (
              <p className="error-msg margint-p0" key={i}>
                {err}
              </p>
            );
          })}
        {full.state == false && (
          <div className={styles["btn-container"]}>
            <button
              className="exo-btn"
              onClick={
                mutate
              }
            >
              Valider !
            </button>
            <button onClick={cancel} className="cancel-btn">
              Annuler
            </button>
          </div>
        )}
      </div>
    </div>
  );
}