Add date to event create

src/components/createEventBtn/CreateEventBtn.jsx

@@ -11,10 +11,15 @@ export default function CreateEventBtn() {
     const [isOpen, setIsOpen] = useState(false);
     const [name, setName] = useState("");
     const [description, setDescription] = useState("");
+    const [start, setStart] = useState("");
+    const [end, setEnd] = useState("");
 
     const handleCreateEvent = async () => {
 
-        if(name !== "" || description !== "") await createEvent(name, description);
+        if(name !== "" || description !== "" || start !== "" || end !== "") {
+            await createEvent(name, description, start, end);
+            console.log(start);
+        }
         setIsOpen(false);
     }
 
@@ -26,16 +31,29 @@ export default function CreateEventBtn() {
             <section className={styles.section}>
                 <div className={styles.inputContainer}>
                     <h2>Titre</h2>
-                    <TextInput placeholder={"Nom de l'événement"} value={name} onChange={e => setName(e.target.value)} />
+                    <TextInput className={styles.input} placeholder={"Nom de l'événement"} value={name} onChange={e => setName(e.target.value)} />
                 </div>
 
                 <div className={styles.inputContainer}>
                     <h2>Description</h2>
-                    <TextInput placeholder={"Description de l'événement"} value={description} onChange={e => setDescription(e.target.value)} />
+                    <TextInput className={styles.input} placeholder={"Description de l'événement"} value={description} onChange={e => setDescription(e.target.value)} />
+                </div>
+
+                <div className={styles.inputContainer}>
+                    <h2>Date</h2>
+                    <div className={styles.dateInputContainer}>
+                        <div className={styles.dateInput}>
+                            <p>Début</p>
+                            <TextInput type={"datetime-local"} value={start} onChange={e => setStart(e.target.value)} />
+                        </div>
+                        <div className={styles.dateInput}>
+                            <p>Fin</p>
+                            <TextInput type={"datetime-local"} value={end} onChange={e => setEnd(e.target.value)} />
+                        </div>
+                    </div>
                 </div>
 
                 <Button onClick={handleCreateEvent} className={styles.create}>Créer</Button>
-
             </section>
         </Modal>
     </>

src/components/createEventBtn/createEventBtn.module.css

@@ -26,6 +26,14 @@
     }
 
     margin: 1em;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.input {
+    width: 70%;
 }
 
 .create {
@@ -38,4 +46,14 @@
     gap: 10px;
     margin-top: 15px;
     margin-bottom: 15px;
+}
+
+.dateInputContainer {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+}
+
+.dateInput {
+ margin: 1em;
 }

src/utils/event/createEvent.js

@@ -1,6 +1,6 @@
 import getXSRFToken from "../getXSRF.js";
 
-export default async function createEvent(name, description) {
+export default async function createEvent(name, description, start, end) {
     const csrfToken = await getXSRFToken();
 
     try {
@@ -12,7 +12,7 @@ export default async function createEvent(name, description) {
                 'X-XSRF-TOKEN': csrfToken,
                 'Accept': 'application/json'
             },
-            body: JSON.stringify({ name, description }),
+            body: JSON.stringify({ name, description, start, end }),
         });
 
         const data = await response.json();