Generateurv2/frontend/components/exos/Card.jsx

290 lines
8.6 KiB
React
Raw Permalink Normal View History

2022-05-18 10:15:54 +02:00
import Link from "next/link";
import { useRouter } from "next/router";
import React, { useEffect, useState } from "react";
import { useMutation, useQueryClient } from "react-query";
2022-06-11 23:39:03 +02:00
import { delTag, favExo, setTags } from "../../requests/requests.exos.js";
2022-05-18 10:15:54 +02:00
import { notificationService } from "../../services/notification.service.js";
import styles from "../../styles/exos/Card.module.scss";
2022-06-24 13:42:16 +02:00
import { isBrowser, isEmpty, parseClassName } from "../../utils/utils.js";
2022-05-18 10:15:54 +02:00
import Delete from "../icon_component/delete.jsx";
import Tag from "../Tag.jsx";
import { TagCreatable } from "./TagCreate.jsx";
2022-06-11 23:39:03 +02:00
import { BsBookmark, BsBookmarkFill } from "react-icons/bs";
import { HiOutlineDuplicate } from "react-icons/hi";
2022-06-24 13:42:16 +02:00
import { useSessionContext } from "../../context/session.context.js";
2022-05-18 10:15:54 +02:00
2022-06-24 13:42:16 +02:00
function CardComp({ step, setActive, deleted, tags, queryKey }) {
2022-05-18 10:15:54 +02:00
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] }),
{
2022-06-11 23:39:03 +02:00
onSuccess: (data, variables, context) => {
queryClient.setQueryData(queryKey, (old) => {
2022-06-24 17:27:17 +02:00
2022-06-11 23:39:03 +02:00
return {
...old,
results: [
...old.results.map((r) => {
if (r.id_code === data.data.id_code) {
return { ...r, tags: data.data.tags };
}
return r;
}),
],
};
});
2022-06-24 13:42:16 +02:00
queryClient.invalidateQueries(queryKey[0], { active: false });
2022-06-11 23:39:03 +02:00
2022-05-18 10:15:54 +02:00
queryClient.invalidateQueries("tags");
setSelected([]);
notificationService.success("Tags", `Tags de ${step.name} modifiés !`, {
autoClose: true,
});
setTagMode(false);
},
2022-06-11 23:39:03 +02:00
onError: (data) => {
2022-06-24 17:27:17 +02:00
2022-05-18 10:15:54 +02:00
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 });
},
2022-06-11 23:39:03 +02:00
{
onSuccess: (data) => {
var tagsSelected = queryKey[2].tags || null;
2022-06-24 13:42:16 +02:00
2022-06-11 23:39:03 +02:00
if (tagsSelected && tagsSelected.includes(data.data.tagId)) {
queryClient.invalidateQueries(queryKey);
}
queryClient.setQueriesData(queryKey, (old) => {
2022-06-24 17:27:17 +02:00
2022-06-11 23:39:03 +02:00
return {
...old,
results: [
...old.results.map((r) => {
if (r.id_code === data.data.id_code) {
return { ...r, tags: data.data.tags };
}
return r;
}),
],
};
});
2022-06-24 13:42:16 +02:00
queryClient.invalidateQueries(queryKey[0], { active: false });
2022-06-11 23:39:03 +02:00
notificationService.success(
"Tags",
`Tag ${data.data.name} retiré à ${step.name} !`,
{
autoClose: true,
}
);
setTagMode(false);
},
onError: (e) => {
2022-06-24 17:27:17 +02:00
2022-06-11 23:39:03 +02:00
notificationService.error(
"Erreur",
`Le tag n'a pu être retiré de ${step.name} !`
);
},
}
);
2022-06-24 13:42:16 +02:00
2022-05-18 10:15:54 +02:00
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]);
2022-06-24 13:42:16 +02:00
const {authData} = useSessionContext()
2022-05-18 10:15:54 +02:00
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,
])}
>
2022-06-11 23:39:03 +02:00
{step.exemple.data && (
<p className="margint-p0 fontw-800">
Exemples ({step.exemple.type && step.exemple.type})
</p>
)}
{step.exemple.data &&
step.exemple.data.slice(0, 3).map((ex, i) => {
return (
<p
key={i}
className={"marginl-p5" + " small-text " + styles.exemple}
title={ex.calcul}
>
{ex.calcul}
</p>
);
})}
{step.exemple.data && <p className="marginl-p5 margint-p2">...</p>}
{!step.exemple.data && <p>Exemples indisponibles</p>}
2022-05-18 10:15:54 +02:00
</div>
{/* {modal == false && <div className={styles["card-hover"]}> </div>} */}
2022-06-24 13:42:16 +02:00
{!isEmpty(authData) && !step.isUser && (
2022-06-11 23:39:03 +02:00
<div
title="Dupliquer l'exercice pour pouvoir le modifier"
className={parseClassName([
styles["icon-container"],
step.isRegistered ? styles["registered"] : undefined,
])}
onClick={() => {
2022-06-24 13:42:16 +02:00
favExo(step.id_code)
2022-06-11 23:39:03 +02:00
}}
>
<HiOutlineDuplicate />
</div>
)}
2022-05-18 10:15:54 +02:00
</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"],
])}
>
2022-06-11 23:39:03 +02:00
{tagMode == false && localStorage.getItem("token") != null && (
2022-05-18 10:15:54 +02:00
<>
<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 &&
2022-06-11 23:39:03 +02:00
prv.step.isRegistered == nxt.step.isRegistered &&
2022-06-24 13:42:16 +02:00
prv.step.consigne == nxt.step.consigne &&
prv.queryKey == nxt.queryKey
2022-05-18 10:15:54 +02:00
);
};
export const Card = React.memo(CardComp, StepsCardCompar);