import React, { useState } from "react"; import errorAlert from "../Helpers/errorAlert"; import isEmpty from 'validator/lib/isEmpty'; const CreateEventForm = () => { const [errorMsg, setErrorMsg] = useState('') const [eventData, setEventData] = useState({ eventTitle: "", organiser: "", venueName: "", venueAddress: "", eventGenre: "", startDate: "", endDate: "", startTime: "", endTime: "", ticketPrice: "", ticketQty: "", eventImage: null, eventDescription: "", }); // Destructuring form data const { eventTitle, organiser, venueName, venueAddress, eventGenre, startDate, endDate, startTime, endTime, ticketPrice, ticketQty, eventImage, eventDescription, } = eventData; const handleEventImage = (event) => { console.log(event.target.files[0]) setEventData({ ...eventData, [event.target.name]: event.target.files[0], }) } const handleEventChange = (event) => { setEventData({ ...eventData, [event.target.name]: event.target.value }) } const handleEventSubmit = (event) => { event.preventDefault() if (eventImage === null) { setErrorMsg("Image is required") } } return ( <form onSubmit={handleEventSubmit}> {JSON.stringify(eventData)} {JSON.stringify(errorMsg)} <div className="mt-16 mx-20"> <div className="px-2"> <div className="flex -mx-2"> <div className="w-1/2 px-4 "> <div className="space-y-6"> <h1 className=" text-black font-montserrat font-extrabold text-3xl"> Create event </h1> {errorMsg && errorAlert(errorMsg)} <input className="font-montserrat font-medium rounded-full w-full py-4 px-7 shadow-lg" name="eventTitle" value={eventTitle} type="text" placeholder="Event title" onChange={handleEventChange} ></input> <input className="font-montserrat font-medium rounded-full w-full py-4 px-7 shadow-lg" name="organiser" value={organiser} type="text" placeholder="organiser" onChange={handleEventChange} ></input> <input className="font-montserrat font-medium rounded-full w-full py-4 px-7 shadow-lg" name="venueName" value={venueName} type="text" placeholder="Venue name" onChange={handleEventChange} ></input> <input className="font-montserrat font-medium rounded-full w-full py-4 px-7 shadow-lg" name="venueAddress" value={venueAddress} type="text" placeholder="Venue address" onChange={handleEventChange} ></input> <select className="font-montserrat font-medium rounded-full w-full py-4 px-7 shadow-lg" name="eventGenre" type="text" placeholder="Event Genre" onChange={handleEventChange} > <option value="" disabled="disabled"> Pick a genre </option> <option value="Hip-hop">Hip-hop</option> <option value="Rap">Rap</option> <option value="Rock">Rock</option> <option value="Grime">Grime</option> <option value="Pop">Pop</option> <option value="Electronic">Electronic</option> <option value="House">House</option> <option value="Reggae">Reggae</option> <option value="Indie">Indie</option> <option value="Dance<">Dance</option> </select> <div className="flex space-x-2"> <input className="font-montserrat font-medium rounded-full w-1/2 py-4 px-7 shadow-lg" name="startDate" value={startDate} type="text" placeholder="Start date" onChange={handleEventChange} ></input> <input className="font-montserrat font-medium rounded-full w-1/2 py-4 px-7 shadow-lg" name="endDate" value={endDate} type="text" placeholder="End date" onChange={handleEventChange} ></input> </div> <div className="flex space-x-2"> <input className="font-montserrat font-medium rounded-full w-1/2 py-4 px-7 shadow-lg" name="startTime" value={startTime} type="text" placeholder="Start time" onChange={handleEventChange} ></input> <input className="font-montserrat font-medium rounded-full w-1/2 py-4 px-7 shadow-lg" name="endTime" value={endTime} type="text" placeholder="End time" onChange={handleEventChange} ></input> </div> <input className="font-montserrat font-medium rounded-full w-full py-4 px-7 shadow-lg" name="ticketPrice" value={ticketPrice} type="text" placeholder="Ticket price" onChange={handleEventChange} ></input> <input className="font-montserrat font-medium rounded-full w-full py-4 px-7 shadow-lg" name="ticketQty" value={ticketQty} type="number" min="1" placeholder="Quantity of tickets" onChange={handleEventChange} ></input> </div> </div> <div className="w-1/2 px-4"> <div> <div className="flex justify-center mt-16 "> <div className="w-full rounded-lg shadow-xl bg-gray-50 "> <div className="m-6 "> <div className="flex items-center justify-center w-full "> <label className="flex flex-col w-full h-32 border-4 border-blue-200 border-dashed hover:bg-gray-100 hover:border-gray-300"> <div className="flex flex-col items-center justify-center pt-7"> <p className="pt-1 font-montserrat font-medium text-sm tracking-wider text-gray-400 group-hover:text-gray-600"> Attach a file </p> </div> <input type="file" name="eventImage" className="custom-file-input opacity-0" onChange={handleEventImage} /> </label> </div> </div> <div className="flex justify-center p-2"> <button className="w-full px-4 py-3 font-montserrat font-medium text-white bg-purple-500 rounded shadow-xl"> Upload event image </button> </div> </div> </div> </div> <div className="py-6"> <textarea name="eventDescription" value={eventDescription} placeholder="Event description" onChange={handleEventChange} className="w-full h-48 px-3 py-4 font-montserrat font-medium text-base border rounded-lg focus:shadow-outline" ></textarea> </div> <button className="p-5 px-24 w-full bg-purple-500 hover:bg-purple-400 text-white rounded font-montserrat font-bold" type="submit" > Create event </button> </div> </div> </div> </div> </form> ); }; export default CreateEventForm;