service
unknown
plain_text
a month ago
6.4 kB
3
Indexable
import React, { useState, useEffect } from "react"; import axios from "axios"; const ServiceForm = () => { const [formData, setFormData] = useState({ cinemaName: "", fullName: "", phoneNumber: "", email: "", information: "", service: "", }); const [errors, setErrors] = useState({}); const [submitted, setSubmitted] = useState(false); const [cinemas, setCinemas] = useState([]); const services = ["Standard Cleaning", "Premium Support", "VIP Experience"]; useEffect(() => { const fetchCinemas = async () => { try { const response = await axios.get("/cinema"); console.log("API Response:", response.data); // Kiểm tra dữ liệu trả về setCinemas(response.data.data || []); // Đảm bảo cinemas luôn là mảng } catch (error) { console.error("Lỗi khi lấy danh sách rạp:", error); setCinemas([]); // Để tránh lỗi khi không có dữ liệu } }; fetchCinemas(); }, []); const validate = () => { let newErrors = {}; if (!formData.cinemaName.trim()) newErrors.cinemaName = "Tên rạp không được để trống"; if (!formData.fullName.trim()) newErrors.fullName = "Họ và tên không được để trống"; if (!formData.phoneNumber.match(/^\d{10}$/)) newErrors.phoneNumber = "Số điện thoại phải có đúng 10 số"; if (!formData.email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) newErrors.email = "Email không hợp lệ"; if (!formData.information.trim()) newErrors.information = "Thông tin không được để trống"; if (!formData.service) newErrors.service = "Vui lòng chọn một dịch vụ"; setErrors(newErrors); return Object.keys(newErrors).length === 0; }; const handleChange = (e) => { setFormData({ ...formData, [e.target.name]: e.target.value }); }; const handleSubmit = async (e) => { e.preventDefault(); if (validate()) { try { await axios.post("/service", formData, { headers: { "Content-Type": "application/json" } }); console.log("Gửi dữ liệu thành công:", formData); setSubmitted(true); } catch (error) { console.error("Lỗi khi gửi dữ liệu:", error); } } }; return ( <div> <div className="movie-detail-header"> <p className="movie-detail-title">SIGN UP FOR SERVICE</p> </div> <div className="max-w-md mx-auto bg-white p-6 rounded-lg shadow-lg"> {submitted ? ( <p className="text-green-600">Gửi thành công!</p> ) : ( <form onSubmit={handleSubmit}> <div className="mb-4"> <label className="block font-medium">Cinema Name:</label> <select name="cinemaName" className="w-full p-2 border rounded" onChange={handleChange}> <option value="">Select a cinema</option> {cinemas.map((cinema, index) => ( <option key={index} value={cinema.name}>{cinema.name}</option> ))} </select> {errors.cinemaName && <p className="text-red-500 text-sm">{errors.cinemaName}</p>} </div> <div className="mb-4"> <label className="block font-medium">Full Name:</label> <input type="text" name="fullName" className="w-full p-2 border rounded" onChange={handleChange} /> {errors.fullName && <p className="text-red-500 text-sm">{errors.fullName}</p>} </div> <div className="mb-4"> <label className="block font-medium">Phone Number:</label> <input type="text" name="phoneNumber" className="w-full p-2 border rounded" onChange={handleChange} /> {errors.phoneNumber && <p className="text-red-500 text-sm">{errors.phoneNumber}</p>} </div> <div className="mb-4"> <label className="block font-medium">Email:</label> <input type="email" name="email" className="w-full p-2 border rounded" onChange={handleChange} /> {errors.email && <p className="text-red-500 text-sm">{errors.email}</p>} </div> <div className="mb-4"> <label className="block font-medium">Service:</label> <select name="service" className="w-full p-2 border rounded" onChange={handleChange}> <option value="">Select a service</option> {services.map((service, index) => ( <option key={index} value={service}>{service}</option> ))} </select> {errors.service && <p className="text-red-500 text-sm">{errors.service}</p>} </div> <div className="mb-4"> <label className="block font-medium">Information of Service:</label> <textarea name="information" className="w-full p-2 border rounded" rows="3" onChange={handleChange}></textarea> {errors.information && <p className="text-red-500 text-sm">{errors.information}</p>} </div> <button type="submit" className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Gửi</button> </form> )} </div> </div> ); }; export default ServiceForm;
Editor is loading...
Leave a Comment