pages/book.js import React, { Component } from "react"; import DayPicker from "react-day-picker"; import "react-day-picker/lib/style.css"; import icon from "../images/football.svg"; import { connect } from "react-redux"; import { onSelectedDay, doneBooking, iconClick } from "../Action/action"; export class Booking extends Component { state = { name: undefined, contact: undefined, errorStmt: "", }; handleHomePage = () => { }; handleValidation = () => { }; Display_slot = Day => { this.props.onSelectedDay(Day); }; handleBook = () => { }; render() { return (
Play Zone:

{/* display date */}

{/* date picker goes here */}

{/* code goes here to display slot */}
{/* code goes here for the name and contact number input fields each input field has name as name and contact respectively*/}
{/* code goes here the "Book Now" button with id book_button */} {/* span to display error statement */}

Booking has been closed.Book your slot for {/* code goes here to display the date */}

Booking is not opened yet

); } } const mapStateToProps = state => { return { game: state.Games, selectedGame: state.selectedGame, selectedDate: state.selectedDate, slotBooked: state.slotBooked }; }; const mapDispatchToProps = dispatch => { return { doneBooking: () => dispatch(doneBooking()), onSelectedDay: id => dispatch(onSelectedDay(id)), iconClick: () => dispatch(iconClick()), bookingDetails: (details, updatesGame) => dispatch({ type: "BOOKINGS", details, updatesGame }), }; }; export default connect( mapStateToProps, mapDispatchToProps )(Booking);