98 lines
3.5 KiB
React
98 lines
3.5 KiB
React
import styles from "./eventTask.module.css";
|
||
import { formatDateLetter } from "../../../../utils/date/formatDateLetter.js";
|
||
import Button from "../../../../components/ui/button/button.tsx";
|
||
import assign from "../../../../utils/tasks/assign.js";
|
||
import unAssign from "../../../../utils/tasks/unAssign.js";
|
||
import { useContext, useEffect, useState } from "react";
|
||
import isAssigned from "../../../../utils/tasks/isAssigned.js";
|
||
import Modal from "../../../../components/ui/modal/modal.tsx";
|
||
import { AuthContext } from "../../../../contexts/auth/AuthContext.js";
|
||
import DeleteTaskBtn from "../deleteTaskBtn/deleteTaskBtn.jsx";
|
||
|
||
export default function EventTask({ task, index, eventId }) {
|
||
|
||
const { update } = useContext(AuthContext)
|
||
|
||
const [assigned, setAssigned] = useState(false);
|
||
const [open, setOpen] = useState(false);
|
||
const [title, setTitle] = useState("");
|
||
const [message, setMessage] = useState("");
|
||
|
||
async function checkAssign() {
|
||
const data = await isAssigned(task.id);
|
||
setAssigned(data?.data.assigned);
|
||
}
|
||
|
||
useEffect(() => {
|
||
checkAssign();
|
||
}, [])
|
||
|
||
|
||
const handleRegisterBtn = async () => {
|
||
const res = await assign(task.id);
|
||
|
||
switch (res.status) {
|
||
case 200:
|
||
update()
|
||
setTitle("Inscription réussie")
|
||
setMessage(`Vous êtes maintenant inscrit à la tâche ${task.name}`);
|
||
setOpen(true);
|
||
setAssigned(true);
|
||
break;
|
||
|
||
case 409:
|
||
setTitle("Erreur lors de l'inscription")
|
||
setMessage("Vous êtes déjà inscrit à cette tâche")
|
||
setOpen(true);
|
||
break;
|
||
|
||
case 403:
|
||
setTitle("Erreur lors de l'inscription")
|
||
setMessage("Le nombre maximum d'inscription pour cette tâche à été atteint")
|
||
setOpen(true);
|
||
break;
|
||
}
|
||
};
|
||
|
||
const handleUnassign = async () => {
|
||
const res = await unAssign(task.id);
|
||
|
||
switch (res.status) {
|
||
case 200:
|
||
update()
|
||
setTitle("Désinscription réussie")
|
||
setMessage(`Vous n'êtes plus inscrit à la tâche ${task.name}`);
|
||
setOpen(true);
|
||
setAssigned(false);
|
||
break;
|
||
|
||
case 409:
|
||
setTitle("Erreur lors de la désinscription")
|
||
setMessage(`Vous n'êtes pas inscrit à cette tâche`);
|
||
setOpen(true);
|
||
break;
|
||
}
|
||
};
|
||
|
||
return <div style={{"--i": index}} key={index} className={styles.content}>
|
||
<div className={styles.task}>
|
||
<div>
|
||
<span><strong>{task.name}</strong></span>
|
||
<p className={styles.taskDate}> {formatDateLetter(task.start)} - {formatDateLetter(task.end)} </p>
|
||
<p>{task.description}</p>
|
||
</div>
|
||
<div className={styles.manageTaskBtn}>
|
||
{assigned ?
|
||
<Button variant={"danger"} onClick={() => handleUnassign()}> Se désinscrire </Button>
|
||
:
|
||
<Button onClick={() => handleRegisterBtn()}> S’inscrire </Button>
|
||
}
|
||
<DeleteTaskBtn eventId={eventId} taskId={task.id} taskName={task.name} />
|
||
</div>
|
||
</div>
|
||
|
||
<Modal open={open} onClose={setOpen} title={title}>
|
||
<p className={styles.modalContent}>{message}</p>
|
||
</Modal>
|
||
</div>
|
||
} |