130 lines
4.2 KiB
TypeScript
130 lines
4.2 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { Activite, Athlete, Session } from "../../classes";
|
|
import { dateToString, hoursToString } from "../edt";
|
|
import { Modal } from "../Modal";
|
|
import CreateActivite from "../createActivite";
|
|
import Loading from "../loading";
|
|
import { addActiviteToSession, createActivityAPI, delay, deletActiviteFromSession, getSessionOfActivite, subscribeSessionAPI, unsubscribeSessionAPI } from "../../requetes";
|
|
import { useLocalData } from "../../context/useLocalData";
|
|
|
|
type Props = {
|
|
session:Session;
|
|
open:boolean;
|
|
setOpen:(b:boolean)=>void
|
|
}
|
|
|
|
function DetailSession({session,open,setOpen}:Props){
|
|
|
|
const {user,setUser} = useLocalData()
|
|
|
|
const [activites,setActivites] = useState<Activite[]>([]);
|
|
const [open2, setOpen2] = useState<boolean>(false);
|
|
const [loading,setLoading] = useState<boolean>(false);
|
|
const [join,setJoin] = useState<boolean>(user instanceof Athlete && user.sessions.includes(session));
|
|
|
|
const sDate = session.creneau;
|
|
|
|
function handleDeleteActivite(activite:Activite): void {
|
|
session.activites.splice(session.activites.indexOf(activite), 1);
|
|
deletActiviteFromSession(activite);
|
|
setActivites([...session.activites])
|
|
}
|
|
|
|
function handleAddActivite(): void {
|
|
setOpen2(true)
|
|
}
|
|
|
|
async function updateActivites(){
|
|
const newActivites = await getSessionOfActivite(session);
|
|
if(newActivites!=null){
|
|
session.activites=newActivites;
|
|
}
|
|
setLoading(false);
|
|
}
|
|
|
|
|
|
useEffect(() => {
|
|
if(open){
|
|
setLoading(true);
|
|
updateActivites()
|
|
}
|
|
},[open])
|
|
|
|
async function subscribeSession(){
|
|
if(user instanceof Athlete){
|
|
await subscribeSessionAPI(user,session);
|
|
user.sessions.push(session);
|
|
setJoin(true);
|
|
}
|
|
}
|
|
|
|
async function unsubscribeSession(){
|
|
if(user instanceof Athlete){
|
|
await unsubscribeSessionAPI(user,session);
|
|
user.sessions = user.sessions.filter(s => s !== session);
|
|
setJoin(false);
|
|
}
|
|
}
|
|
|
|
|
|
async function returnActivite(activite: Activite|null){
|
|
if(activite!==null){
|
|
activite.session = session;
|
|
const newActivite = await createActivityAPI(activite);
|
|
await addActiviteToSession(session,newActivite);
|
|
if(newActivite!=null){
|
|
session.activites.push(newActivite);
|
|
setActivites([...session.activites])
|
|
}
|
|
|
|
}
|
|
setOpen2(false);
|
|
}
|
|
|
|
useEffect(() => {
|
|
if(!loading){
|
|
setActivites([...session.activites])
|
|
}
|
|
},[loading])
|
|
|
|
if(!open2){
|
|
|
|
return(
|
|
<Modal isOpen={open} onClose={() => setOpen(false)}>
|
|
<div className="object_modal">
|
|
<h2>{session.name}</h2>
|
|
<div>{hoursToString(sDate)}</div>
|
|
<div>{dateToString(sDate)}</div>
|
|
{user instanceof Athlete &&
|
|
<div>
|
|
{user.sessions.includes(session) ? <button onClick={()=>unsubscribeSession()}>quitter</button>
|
|
:<button onClick={()=>subscribeSession()}>rejoindre</button>}
|
|
</div>
|
|
}
|
|
|
|
<div>
|
|
Activités :
|
|
<div className="session_modal_activite_list">
|
|
{activites.map((activite,index)=>(
|
|
<div>
|
|
{activite.nom}
|
|
<button className="deleteButton" onClick={() => handleDeleteActivite(activite)}>x</button>
|
|
</div>
|
|
))}
|
|
<button className="addButton" onClick={() => handleAddActivite()}>+</button>
|
|
{loading && <div className='top_left_loading'><Loading/></div>}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
)
|
|
}else{
|
|
return(
|
|
<CreateActivite returnActivite={(activite) => returnActivite(activite)} session={session}/>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default DetailSession;
|