I am having a component which contains a button group in which each button shows the time slot on it.User clicks the button, time slot gets selected.I want to put validation if the user does not select the time and error message gets displayed.I do not have any idea of how to validate it can anyone please help me.Thanks in advance.
const EventUpdateModal = ({setIsOpen, event, date, employees, accessToken}) => {
const resourceId = event.getResources()[0].id
const [employeeBookedSlots, setemployeeBookedSlots] = useState([])
const [radios, setradios] = useState([])
const [radioValue, setradioValue] = useState('')
const [loading, setloading] = useState(false)
console.log("event", event)
//function to create time slots
const createTimeSlots = (FromTime, ToTime) => {
let startTime = moment(FromTime, 'HH:mm');
let endTime = moment(ToTime, 'HH:mm');
if (endTime.isBefore(startTime)) {
endTime.add(1, 'day');
}
const timeSlotsArray = [];
while (startTime <= endTime) {
timeSlotsArray.push(new moment(startTime).format('HH:mm'));
startTime.add(30, 'minutes');
}
return timeSlotsArray;
}
useEffect(() => {
const employee = employees.find((employee) => employee.id == resourceId)
const employeeStart = employee.startTime
const employeeEnd = employee.endTime
const timeSlots = createTimeSlots(employeeStart, employeeEnd)
setradios(timeSlots)
setradioValue(new moment(event.start).format("HH:mm"))
setemployeeBookedSlots(employee.bookedSlots)
}, [])
const selectEmployeeHandler = (e) => {
const selectedId = e.target.value;
const employee = employees.find((emp) => emp.id === selectedId)
const employeeStart = employee.startTime
const employeeEnd = employee.endTime
const timeSlots = createTimeSlots(employeeStart, employeeEnd)
setradios(timeSlots)
setemployeeBookedSlots(employee.bookedSlots)
seteditEvent({...editEvent, stylist: employee.name, resourceId: employee.id})
}
const selectServiceHandler = (e) => {
seteditEvent({...editEvent, service: e.target.value})
}
const handleTiming = (event) => {
seteditEvent({ ...editEvent, timing: event.currentTarget.value })
setradioValue(event.currentTarget.value)
}
const fullName = event.extendedProps.name.split(' ')
const firstName = fullName[0]
const lastName = fullName[fullName.length - 1]
const [editEvent, seteditEvent] = useState({
firstName: firstName,
lastName: lastName,
stylist: event.extendedProps.stylist.id,
service: event.extendedProps.stylist.serviceId,
timing: event.start,
date: new Date(date),
resourceId: resourceId,
title: event.title
})
const handleSubmit = async (e) => {
e.preventDefault()
const data = JSON.stringify({
"first_name": editEvent.firstName,
"last_name": editEvent.lastName,
"employee_id": editEvent.stylist,
"service_id": editEvent.service,
"appointment_time": new moment(editEvent.timing, "HH:mm").format('HH:mm A'),
"appointment_date": new moment(editEvent.date).format('YYYY-MM-DD'),
"comments": ""
})
setloading(true)
await axios({
method: 'post',
url: 'endpoint url',
data: data,
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'Authorization': `Bearer ${accessToken}`
}
}).then(function (response){
console.log(response.data)
setloading(false)
setIsOpen(false)
}).catch(function (error){
console.log(error)
setloading(false)
})
}
return (
<div>
<Modal.Header closeButton>
<Modal.Title>{event.title}</Modal.Title>
</Modal.Header>
<Form onSubmit={handleSubmit}>
<Modal.Body>
<Container>
<Row className='mb-3'>
<Form.Group as={Col}>
<Form.Label>
First Name
</Form.Label>
<Form.Control type="name" placeholder="FirstName" name="LastName" value={editEvent.firstName} onChange={(event) => seteditEvent({...editEvent, firstName: event.target.value})}/>
</Form.Group>
<Form.Group as={Col}>
<Form.Label>
Last Name
</Form.Label>
<Form.Control type="name" placeholder="LastName" name="LastName" value={editEvent.lastName} onChange={(event) => seteditEvent({...editEvent, lastName: event.target.value})}/>
</Form.Group>
</Row>
<Row className='mb-3'>
<Form.Group as={Col}>
<Form.Label>
Services
</Form.Label>
<Form.Select name="service" value={editEvent.service} onChange={selectServiceHandler}>
{
services.map((service, idx) =>
<option key={idx} value={service.id}>{service}</option>
)
}
</Form.Select>
</Form.Group>
<Form.Group as={Col}>
<Form.Label >
Stylist
</Form.Label>
<Form.Select aria-label="Default select example" name="stylist" value={editEvent.resourceId} onChange={selectEmployeeHandler}>
{
employees.map((employee) =>
<option key={employee.id} value={`${employee.id}`}>{employee.name}</option>)
}
</Form.Select>
</Form.Group>
</Row>
<Row className='mb-3'>
<Form.Group as={Col} controlId="customerName">
<Form.Label>Date</Form.Label>
<InputGroup style={{flexWrap: "nowrap"}}>
<DatePicker selected={editEvent.date}
onChange={(selectedDate) => seteditEvent({...editEvent, date: selectedDate})}
className="form-control border-radius" />
<InputGroup.Text className="feather icon-calendar "/>
</InputGroup>
</Form.Group>
<Form.Group as={Col}>
<Form.Label>Select Timing</Form.Label>
<ButtonGroup className="mb-3" style={{display: 'block' }}>
{radios.map((slot, idx) => (
<ToggleButton as={Col}
key={idx}
id={`radio-${idx}`}
type="radio"
variant="primary"
name="timing"
value={slot}
checked={radioValue === slot}
onChange={handleTiming}
disabled={employeeBookedSlots.includes(slot) ? true : false}
style={{ margin: '4px', borderRadius: '20px', padding: '5px 10px'}}
required
>
{slot}
</ToggleButton>
))}
</ButtonGroup>
</Form.Group>
</Row>
<Row className="mb-3">
</Row>
</Container>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" size='sm' onClick={() => setIsOpen(false)}>
Cancel
</Button>
<Button variant="primary" size="sm" type="submit" >
{
loading && <Spinner
as="span"
animation="border"
size="sm"
role="status"
aria-hidden="true"/>
}
{
!loading && <span>Update</span>
}
</Button>
</Modal.Footer>
</Form>
</div>
)
}
const mapStateToProps = (state) => ({
employees: state.employees.employees,
accessToken: state.user.accessToken
})
export default connect(mapStateToProps)(EventUpdateModal)