correction ressource list, clean composant

front_end/src/components/object/detailSession.tsx

@@ -0,0 +1,93 @@
+import { useEffect, useState } from "react";
+import { Activite, Session } from "../../classes";
+import { dateToString, hoursToString } from "../edt";
+import { Modal } from "../Modal";
+import CreateActivite from "../createActivite";
+import Loading from "../loading";
+import { delay } from "../../requetes";
+
+type Props = {
+    session:Session;
+    open:boolean;
+    setOpen:(b:boolean)=>void
+}
+
+function DetailSession({session,open,setOpen}:Props){
+
+    const [activites,setActivites] = useState<Activite[]>([]);
+    const [open2, setOpen2] = useState<boolean>(false);
+    const [loading,setLoading] = useState<boolean>(false);
+
+    const sDate = session.creneau;
+
+    function handleDeleteActivite(activite:Activite): void {
+        session.activites.splice(session.activites.indexOf(activite), 1);
+        setActivites([...session.activites])
+    }
+
+    function handleAddActivite(): void {
+        setOpen2(true)
+    }
+
+    async function updateActivites(){
+        //TODO
+        await delay(2000);
+        //await updateActivitiesOfSessionAPI(session);
+        setLoading(false);
+    }
+
+
+    useEffect(() => {
+        if(open){
+            setLoading(true);
+            updateActivites()
+        }
+    },[open])
+
+
+    function returnActivite(activite: Activite|null){
+        if(activite!==null){
+            session.activites.push(activite);
+            setActivites([...session.activites])
+        }
+        setOpen2(false);
+    }
+
+    useEffect(() => {
+        if(!loading){
+            setActivites([...session.activites])
+        }
+    },[loading])
+
+
+    return(
+
+        <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>
+                </div>
+                
+                {open2 &&
+                    <CreateActivite returnActivite={(activite) => returnActivite(activite)}/>
+                }
+            </div>
+        </Modal>
+
+    )
+}
+
+export default DetailSession;