Generateurv2/frontend/components/exos/ExoEditForm.jsx

import { useState } from "react";
import { useMutation, useQueryClient } from "react-query";
import { editExo } from "../../requests/requests.exos.js";
import { notificationService } from "../../services/notification.service.js";
import styles from "../../styles/exos/ExoEditForm.module.scss";
import { parseClassName } from "../../utils/utils.js";
import ModelInput from "./modelInput.jsx";
  import { AlertType, useAlert } from "../../context/alert.context.js";
import { RiErrorWarningFill } from "react-icons/ri";
import { CODE_SEPARATOR } from "../../utils/constant.js";
import Input from "../Input.jsx";
import { TiRefresh } from "react-icons/ti";
export function ExoEditForm({ step, cancel, setFull, full }) {
  const [spec, setSpec] = useState({
    name: step.name,
    consigne: step.consigne,
    exo_model: { ...step.exo_model, download: true },
    private: step.private
  });
  const alert = useAlert();
  const queryClient = useQueryClient();
  const [errors, setErrors] = useState({
    name: null,
    exo_model: null,
    consigne: null,
  });
  const { mutate, isLoading, data } = useMutation(
    () => {
      const dataToSend = new FormData();
      var blob = new Blob([spec.exo_model.data], { type: "text/x-python" });
      var file = new File(
        [blob],
        spec.exo_model.filename != null ? spec.exo_model.filename : "main.py",
        { type: "text/x-python" }
      );

      dataToSend.append("file", file);
      dataToSend.append("name", spec.name);
      dataToSend.append("consigne", spec.consigne);
      dataToSend.append("id_code", step.id_code);
      dataToSend.append("private", spec.private);
      return editExo(dataToSend);
    },
    {
      onSuccess: (data) => {
        queryClient.invalidateQueries('exo-data', {active: true});
        notificationService.success(
          "Modification !",
          `L'exercice ${spec.name} a bien été modifié !`,
          { autoClose: true, keepAfterRouteChange: true }
        );
        cancel();
      },
      onError: (err) => {
        console.log(err.response.data.errors, {
          ...errors,
          ...err.response.data.errors,
        });
        var resetErrors = { name: null, exo_model: null, consigne: null };
        var newError = { ...resetErrors, ...err.response.data.errors };
        setErrors({ ...newError });
        notificationService.error(
          "Erreur",
          "La modification n'a pu être enregistrée ! Réessayez plus tard !",
          { autoClose: true, keepAfterRouteChange: true }
        );
      },
    }
  );

  return (
    <>
      {!full && (
        <>
          <span
            className={parseClassName([
              styles["input-container"],
              styles["ex_card--title"],
              "marginb-p0",
            ])}
          >
            <span>
              <Input
                type="text"
                error={errors.name !== null}
                value={spec.name}
                onChange={(e) => {
                  setSpec({ ...spec, name: e.target.value });
                }}
                placeholder="Nom"
              />
              {/* {spec.name !== step.name && <TiRefresh className="red" />}{" "} */}
            </span>
            {errors.name !== null &&
              errors.name.map((err, i) => {
                return (
                  <p className="error-msg" key={i}>
                    {err}
                  </p>
                );
              })}
          </span>
          <span
            className={[
              parseClassName([styles["input-container"], "marginb-p0"]),
            ]}
          >
            <span>
              <Input
                error={errors.consigne !== null}
                type="text"
                style={{ gridColumn: "1/3" }}
                value={spec.consigne}
                onChange={(e) => {
                  setSpec({ ...spec, consigne: e.target.value });
                }}
                placeholder="Consigne"
              />
              {/* {spec.consigne !== step.consigne && <TiRefresh className="red" />}{" "} */}
            </span>
            {errors.consigne !== null &&
              errors.consigne.map((err, i) => {
                return (
                  <p className="error-msg" key={i}>
                    {err}
                  </p>
                );
              })}
          </span>
          <div>
            <label>Private</label>
            <input
              type="checkbox"
              checked={spec.private}
              onChange={(e) => {
                
                setSpec({ ...spec, private: !spec.private });
              }}
            />
          </div>
        </>
      )}

      <div
        style={{ /*  gridColumn: "1/3" */ height: full && "100%" }}
        className={!full ? styles["modelinput-container"] : undefined}
      >
        <ModelInput
          model={spec.exo_model}
          setModel={(n) => {
            setSpec({ ...spec, exo_model: n });
          }}
          setFull={setFull}
          full={full}
          step={step}
          onChange={(new_model) => {
            setSpec({ ...spec, exo_model: new_model });
          }}
          tempSpec={spec}
        />
        {errors.exo_model !== null &&
          errors.exo_model.map((err, i) => {
            return (
              <p className="error-msg margint-p0" key={i}>
                {err}
              </p>
            );
          })}
      </div>

      {!full && (
        <div className={styles["btn-container"]}>
          <button
            className={parseClassName(["exo-btn", styles["btn"]])}
            onClick={mutate}
          >
            {!isLoading ? (
              "Valider !"
            ) : (
              <div className={styles["loader-btn-container"]}>
                <span className="loader"></span>
              </div>
            )}
          </button>
          <button
            className={parseClassName(["cancel-btn", styles["btn"]])}
            onClick={() => {
              if (
                spec.consigne != step.consigne ||
                spec.name != step.name
                //step.exo_model != spec.exo_model
              ) {
                alert.alert({
                  title: "Êtes-vous sûr ?",
                  active: true,
                  message: `Vous avez des modifications non enregistrées, voulez vous annuler ?`,
                  type: AlertType.Warning,
                  validate: cancel,
                });
              } else cancel();
            }}
          >
            Annuler !
          </button>
        </div>
      )}
    </>
  );
}