66 lines
2.7 KiB
TypeScript
66 lines
2.7 KiB
TypeScript
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>
|
|
</>
|
|
}
|