Generateurv2/frontend/components/exos/Card.jsx

import Link from "next/link";
import { useRouter } from "next/router";
import React, { useEffect, useState } from "react";
import { useMutation, useQueryClient } from "react-query";
import { delTag, setTags } from "../../requests/requests.exos.js";
import { notificationService } from "../../services/notification.service.js";
import styles from "../../styles/exos/Card.module.scss";
import { parseClassName } from "../../utils/utils.js";
import Delete from "../icon_component/delete.jsx";
import Tag from "../Tag.jsx";
import { TagCreatable } from "./TagCreate.jsx";

function CardComp({ step, setActive, deleted, tags }) {
  const [tagMode, setTagMode] = useState(false);
  const router = useRouter();
  const [selected, setSelected] = useState([]);
  const queryClient = useQueryClient();

  const { mutate } = useMutation(
    async () => await setTags({ step: step.id_code, tags: [...selected] }),
    {
      onSuccess: () => {
        queryClient.invalidateQueries("exo-data");
        queryClient.invalidateQueries("tags");
        setSelected([]);
        notificationService.success("Tags", `Tags de ${step.name} modifiés !`, {
          autoClose: true,
        });
        setTagMode(false);
      },
      onError: () => {
        notificationService.error(
          "Erreur",
          `Les tags de ${step.name} n'ont pu être modifiés !`
        );
      },
    }
  );

  const { mutate: delTagMutate } = useMutation(
    async (tag) => {
      return await delTag({ tag: tag, step: step.id_code });
    },
    {
      onSuccess: (data) => {
        console.log("aouyeaoiuyfea", data);
        queryClient.invalidateQueries("exo-data");
        queryClient.invalidateQueries("tags");
        notificationService.success(
          "Tags",
          `Tag ${data.name} retiré à ${step.name} !`,
          {
            autoClose: true,
          }
        );
        setTagMode(false);
      },
      onError: () => {
        notificationService.error(
          "Erreur",
          `Le tag n'a pu être retiré de ${step.name} !`
        );
      },
    }
  );

  const [tagOptions, setTagOptions] = useState(
    tags.map((tag) => {
      return {
        ...tag,
        isDisabled: step.tags.map((t) => t.id_code).includes(tag.id_code),
      };
    })
  );
  useEffect(() => {
    setTagOptions(
      tags.map((tag) => {
        return {
          ...tag,
          isDisabled: step.tags.map((t) => t.id_code).includes(tag.id_code),
        };
      })
    );
    return () => {
      setTagOptions([]);
    };
  }, [step.tags, tags]);

  return (
    <div
      className={
        parseClassName([
          styles["ex_card--full"],
          tagMode == true ? styles["no_hover"] : "",
          deleted ? styles["card-deleted"] : "",
        ]) //(fade == true ? " editor-card" : "")
      }
      //id={"card-" + step.id_code}
    >
      {/* <div className={styles["card-content"]}  hidden={model} > */}
      <div
        className={parseClassName([
          styles["card-hover"],
          deleted ? styles["no_hover"] : undefined,
        ])}
        onClick={() => {
          setActive({ active: true, data: { ...step } });
          router.push(`/exercices/${step.id_code}`, undefined, {
            shallow: true,
          });
          //onClick && onClick();
        }}
      >
        {deleted && <span className="loader"></span>}
      </div>
      <div className={styles["ex_card--body"]}>
        <div
          onClick={() => {
            setActive({ active: true, data: { ...step } });
            router.push(`/exercices/${step.id_code}`, undefined, {
              shallow: true,
            });
          }}
          className={parseClassName([
            styles["ex_card--title"],
            deleted ? styles["no_hover"] : undefined,
          ])}
        >
          <a className={deleted ? styles["no_hover"] : undefined}>
            {step.name}
          </a>
          {/* <ColorField>
                        <p className="small-text">{step.parent.name}</p>
                    </ColorField> */}
        </div>
        <div
          className={parseClassName([
            styles["ex_card--content"],
            deleted ? styles["no_hover"] : undefined,
          ])}
        >
          <p className="margint-p0 fontw-800">Exemples</p>
          {step.exemple.slice(0, 3).map((ex, i) => {
            return (
              <p
                key={i}
                className={"marginl-p5" + " small-text " + styles.exemple}
                title={ex.calcul}
              >
                {ex.calcul}
              </p>
            );
          })}
          <p className="marginl-p5 margint-p2">...</p>
        </div>
        {/* {modal == false && <div className={styles["card-hover"]}> </div>} */}
      </div>
      <div className={styles["card-progress"]}>
        <span></span>
      </div>
      <div
        className={parseClassName([
          styles["ex_card--footer"],
          tagMode == true
            ? styles["tag_card"]
            : styles["ex_card--footer-not-tag"],
        ])}
      >
        {tagMode == false && (
          <>
            <div className={styles["tag--container"]}>
              {step.tags.map((t, i) => {
                return <Tag key={i} tag={t} onDelete={delTagMutate} />;
              })}
            </div>
            <div
              onClick={() => {
                setTagMode(true);
              }}
              className={styles["ex_card--add-tag"]}
            >
              {" "}
              <hr /> <p> +</p>
            </div>
          </>
        )}
        {tagMode && (
          <>
            <TagCreatable
              options={tagOptions}
              selectOption={setSelected}
              select={selected}
              onCreate={setTagOptions}
            />
            <div className="margint-p3 flex-column">
              <button onClick={mutate} className="exo-btn">
                Valider
              </button>
              <button
                onClick={() => {
                  setTagMode(false);
                  setSelected([]);
                }}
                className="cancel-btn"
              >
                Annuler
              </button>
            </div>
          </>
        )}
      </div>
      {/* </div> */}
    </div>
  );
}

const StepsCardCompar = (prv, nxt) => {
  return (
    prv.step.tags.length == nxt.step.tags.length &&
    prv.tags.length == nxt.tags.length &&
    prv.step.name == nxt.step.name &&
    prv.step.exo_model == nxt.step.exo_model &&
    prv.step.model_type == nxt.step.model_type &&
    prv.step.consigne == nxt.step.consigne
  );
};

export const Card = React.memo(CardComp, StepsCardCompar);