You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
71 lines
2.7 KiB
71 lines
2.7 KiB
import {useState} from "react";
|
|
import { createChannel } from "../services/channel.service.js";
|
|
|
|
|
|
export default function CreateChannelModal({isOpen, onClose, addAlert}) {
|
|
|
|
const [name, setName] = useState('');
|
|
const [description, setDescription] = useState('');
|
|
|
|
const token = localStorage.getItem('token');
|
|
const userStored = localStorage.getItem('user');
|
|
const user = userStored ? JSON.parse(userStored) : {};
|
|
|
|
const onSubmit = async (e) => {
|
|
e.preventDefault();
|
|
|
|
const body = {
|
|
"name": name,
|
|
"description": description,
|
|
"owner": user.id
|
|
}
|
|
|
|
const data = await createChannel(body, token, addAlert);
|
|
|
|
|
|
|
|
onClose();
|
|
}
|
|
|
|
return isOpen && (
|
|
<div className="bg-[#00000080] fixed top-0 left-0 w-screen h-screen flex flex-col items-center justify-center px-5 lg:px-0" >
|
|
<div className="glassmorphism p-4 w-full lg:w-1/4" >
|
|
<h2 className="text-2xl text-white font-montserrat font-bold" >Créer une chaine</h2>
|
|
<label htmlFor="name" className="block text-xl text-white font-montserrat font-semibold mt-2" >Nom de la chaine</label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
placeholder="Nom de la chaine"
|
|
className="block glassmorphism text-lg text-white font-inter w-full py-3 px-2 focus:outline-none"
|
|
onChange={(e) => setName(e.target.value)}
|
|
value={name}
|
|
/>
|
|
|
|
<label htmlFor="description" className="block text-xl text-white font-montserrat font-semibold mt-2" >Description</label>
|
|
<textarea
|
|
id="description"
|
|
name="description"
|
|
placeholder="Description de votre chaine"
|
|
className="block glassmorphism text-lg text-white font-inter w-full py-3 px-2 focus:outline-none"
|
|
onChange={(e) => setDescription(e.target.value)}
|
|
value={description}
|
|
>
|
|
</textarea>
|
|
<button
|
|
className="bg-primary mt-2 py-2 px-3 rounded-sm text-white font-montserrat text-2xl font-semibold cursor-pointer"
|
|
onClick={(e) => onSubmit(e) }
|
|
>
|
|
Valider
|
|
</button>
|
|
<button
|
|
className="bg-red-500 ml-2 mt-2 py-2 px-3 rounded-sm text-white font-montserrat text-2xl font-semibold cursor-pointer"
|
|
onClick={onClose}
|
|
>
|
|
Annuler
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
}
|