détail d'une session de l'edt en cours

front_end/src/components/edt_session.tsx

@@ -0,0 +1,59 @@
+import { useEffect, useState } from 'react';
+import { Activite, Session } from '../classes';
+import { dateToString, hoursToString } from './edt';
+import './style/edt.css';
+import { Modal } from './Modal';
+import Loading from './loading';
+
+
+type Props = {
+    session:Session;
+}
+
+function EdtSession({session}:Props){
+
+    const [open, setOpen] = useState<boolean>(false)
+    const [loading,setLoading] = useState<boolean>(false);
+
+    function handleOpen(): void {
+        setOpen(!open);
+    }
+
+     async function updateActivites(){
+        //TODO
+        //await updateActivitiesOfSessionAPI(session);
+        setLoading(false);
+    }
+
+
+    useEffect(() => {
+        if(open){
+            setLoading(true);
+            updateActivites()
+        }
+    },[open])
+
+    const sDate = session.creneau;
+    return(
+        <div>
+            <div className="edt_session" onClick={() => handleOpen()}>
+                    <div className="edt_date">{hoursToString(sDate)}</div>
+                    <div>{session.name}</div>
+            </div>
+            {open && 
+                         <Modal isOpen={open} onClose={() => setOpen(false)}>
+                            <div>{session.name}</div>
+                            <div>{hoursToString(sDate)}</div>
+                            <div>{dateToString(sDate)}</div>
+                            {session.activites.map((activite,index)=>(
+                            <div>activite</div>
+                            ))}
+
+                            {loading && <Loading/>}
+                        </Modal>
+                    }
+        </div>
+    )
+}
+
+export default EdtSession