subscribe + unsubscribe + edt

front_end/src/components/object/detailSession.tsx

@@ -1,10 +1,11 @@
 import { useEffect, useState } from "react";
-import { Activite, Session } from "../../classes";
+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 } from "../../requetes";
+import { addActiviteToSession, createActivityAPI, delay, deletActiviteFromSession, getSessionOfActivite, subscribeSessionAPI, unsubscribeSessionAPI } from "../../requetes";
+import { useLocalData } from "../../context/useLocalData";
 
 type Props = {
     session:Session;
@@ -14,9 +15,12 @@ type Props = {
 
 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;
 
@@ -46,6 +50,22 @@ function DetailSession({session,open,setOpen}:Props){
         }
     },[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){
@@ -67,35 +87,43 @@ function DetailSession({session,open,setOpen}:Props){
         }
     },[loading])
 
+    if(!open2){
 
-    return(
+        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>
+                    }
 
-        <Modal isOpen={open} onClose={() => setOpen(false)}>
-            <div className="object_modal">
-                <div>{session.name}</div>
-                <div>{hoursToString(sDate)}</div>
-                <div>{dateToString(sDate)}</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>
+                        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>
-                
-                {open2 &&
-                    <CreateActivite returnActivite={(activite) => returnActivite(activite)}/>
-                }
-            </div>
-        </Modal>
-
-    )
+            </Modal>
+        )
+    }else{
+        return(
+        <CreateActivite returnActivite={(activite) => returnActivite(activite)} session={session}/>
+        )
+    }
 }
 
 export default DetailSession;