Convert CreateEventBtn to Typescript

src/components/ToolBar/tools/CreateEventBtn/CreateEventBtn.tsx

@@ -0,0 +1,65 @@
+import styles from "./CreateEventBtn.module.css"
+import { useState, useContext } from "react";
+import Modal from "../../../ui/Modal/Modal";
+import Button from "../../../ui/Button/Button";
+import TextInput from "../../../ui/Input/Input";
+import { EventContext } from "../../../../contexts/Events/EventContext.js";
+import { AuthContext } from "../../../../contexts/Auth/AuthContext";
+
+
+export default function CreateEventBtn() {
+
+    const { addEvent } = useContext(EventContext)!;
+    const { user } = useContext(AuthContext)!;
+
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+    const [name, setName] = useState<string>("");
+    const [description, setDescription] = useState<string>("");
+    const [start, setStart] = useState<string>("");
+    const [end, setEnd] = useState<string>("");
+
+    const handleCreateEvent = async () => {
+
+        if (name !== "" && description !== "" && start !== "" && end !== "") {
+            await addEvent(name, description, start, end);
+        }
+        setIsOpen(false);
+    }
+
+    if(!user?.isAdmin) return null;
+
+    return <>
+        <Button className={`${styles.createButton} glassCard`} variant={"default"} onClick={() => setIsOpen(true)}> + </Button>
+
+        <Modal title={"Créer un événement"} open={isOpen} onClose={() => setIsOpen(false)}>
+
+            <section className={styles.section}>
+                <div className={styles.inputContainer}>
+                    <h2>Titre</h2>
+                    <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 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>
+    </>
+}