lolpee69 / Final

import React, { Component } from 'react'; import { connect } from 'react-redux'; import { bookSlot, saveDetails, selectSlot } from '../Action/action'; import { withRouter } from './withRouter'; class Booking extends Component { constructor(props) { super(props); this.state = { selectedSlot: null, name: '', contact: '', errorStmt: '', }; } handleSlotClick = (slot) => { const { bookingCheck, selectedDate } = this.props; const isBooked = bookingCheck.some(b => b.slot === slot && b.date === selectedDate); if (!isBooked) { this.setState({ selectedSlot: slot, errorStmt: '' }); this.props.selectSlot(slot); } }; validate = () => { const { selectedSlot, name, contact } = this.state; if (!selectedSlot) { this.setState({ errorStmt: 'Select your slot!!!' }); return false; } const nameRegex = /^[A-Za-z ]+$/; const phoneRegex = /^[0-9]{10}$/; if (!nameRegex.test(name) || !phoneRegex.test(contact)) { this.setState({ errorStmt: 'Invalid Input!!!' }); return false; } return true; }; handleBook = () => { if (!this.validate()) return; const bookingID = Math.floor(1000 + Math.random() * 9000); const { selectedGame, selectedDate } = this.props; const { selectedSlot, name, contact } = this.state; this.props.bookSlot({ id: bookingID, name, contact, game: selectedGame.name, slot: selectedSlot, date: selectedDate }); this.props.saveDetails({ id: bookingID, name, contact }); alert(`Booking successful! Your ID is ${bookingID}`); this.props.navigate('/'); }; render() { const { selectedGame, selectedDate, bookingCheck } = this.props; const { selectedSlot, name, contact, errorStmt } = this.state; const slots = ['10AM', '11AM', '12PM', '1PM', '2PM', '3PM', '4PM']; const today = new Date().toISOString().split('T')[0]; const tomorrow = new Date(); tomorrow.setDate(new Date().getDate() + 1); const formattedTomorrow = tomorrow.toISOString().split('T')[0]; const renderSlots = () => ( <div className="slot_list"> {slots.map(slot => { const isBooked = bookingCheck.some(b => b.slot === slot && b.date === selectedDate); const isSelected = selectedSlot === slot; let color = 'green'; if (isBooked) color = 'red'; else if (isSelected) color = 'blue'; return ( <span key={slot} style={{ backgroundColor: color, margin: '5px', padding: '5px', display: 'inline-block' }} onClick={() => this.handleSlotClick(slot)} > <h4>{slot}</h4> </span> ); })} </div> ); return ( <div> <header> <h2>{selectedGame.name}</h2> <p>{selectedDate}</p> </header> <button onClick={() => this.props.navigate('/')}>Back</button> {selectedDate === today && <p>Booking has been closed. Book your slot for {formattedTomorrow}</p>} {selectedDate === formattedTomorrow && ( <> {renderSlots()} <input id="contact" placeholder="Name" value={name} onChange={(e) => this.setState({ name: e.target.value })} /> <input id="contact" placeholder="Contact" value={contact} onChange={(e) => this.setState({ contact: e.target.value })} /> <button id="book_button" onClick={this.handleBook}>Book Now</button> {errorStmt && <p>{errorStmt}</p>} </> )} {selectedDate > formattedTomorrow && <p>Booking is not opened yet</p>} </div> ); } } const mapStateToProps = (state) => ({ selectedGame: state.selectedGame[0] || {}, selectedDate: state.selectedDate, bookingCheck: state.bookingCheck, }); const mapDispatchToProps = { bookSlot, saveDetails, selectSlot, }; export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Booking));

import React, { Component } from 'react'; import { connect } from 'react-redux'; import { selectGame } from '../Action/action'; import { withRouter } from './withRouter'; class Games extends Component { componentDidMount() { this.props.selectGame(null); } handlebook = (game) => { this.props.selectGame(game); this.props.navigate('/book'); }; handleSearch = () => { this.props.navigate('/search'); }; render() { return ( <div> <header>Play Zone </header> <div className="Card"> <ul> {this.props.Games.map((game, index) => ( <li key={index}> {game.name} <button onClick={() => this.handlebook(game)}>Book Now</button> </li> ))} </ul> </div> <center> <button onClick={this.handleSearch}>Check your booking</button> </center> </div> ); } } const mapStateToProps = (state) => ({ Games: state.Games, }); const mapDispatchToProps = { selectGame, }; export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Games));

import { SELECT_GAME, SELECT_DATE, SELECT_SLOT, BOOK_SLOT, SAVE_DETAILS } from '../Action/action'; import BasketBall from './basket_ball.jpeg'; import VolleyBall from './volleyBall.jpeg'; import FootBall from './footBall.jpeg'; const bookSlot1 = [ { id: 1, startTime: "09.00 A.M", endTime: "10.00 A.M", slotStatus: "btn btn-success" }, { id: 2, startTime: "10.00 A.M", endTime: "11.00 A.M", slotStatus: "btn btn-success" }, { id: 3, startTime: "11.00 A.M", endTime: "12.00 P.M", slotStatus: "btn btn-success" }, { id: 4, startTime: "12.00 P.M", endTime: "01.00 P.M", slotStatus: "btn btn-success" }, { id: 5, startTime: "01.00 P.M", endTime: "02.00 P.M", slotStatus: "btn btn-success" }, { id: 6, startTime: "02.00 P.M", endTime: "03.00 P.M", slotStatus: "btn btn-success" }, { id: 7, startTime: "03.00 P.M", endTime: "04.00 P.M", slotStatus: "btn btn-success" }, { id: 8, startTime: "04.00 P.M", endTime: "05.00 P.M", slotStatus: "btn btn-success" }, { id: 9, startTime: "05.00 P.M", endTime: "06.00 P.M", slotStatus: "btn btn-success" } ]; const initialState = { Games: [ { id: 0, src: BasketBall, name: "BasketBall", slots: bookSlot1 }, { id: 1, src: VolleyBall, name: "VolleyBall", slots: bookSlot1 }, { id: 2, src: FootBall, name: "FootBall", slots: bookSlot1 } ], selectedGame: [], selectedDate: new Date(new Date().setDate(new Date().getDate() + 1)), slotBooked: undefined, details: [], bookingCheck: [], }; const reducer = (state = initialState, action) => { switch (action.type) { case SELECT_GAME: return { ...state, selectedGame: [action.payload] }; case SELECT_DATE: return { ...state, selectedDate: action.payload }; case SELECT_SLOT: return { ...state, slotBooked: action.payload }; case BOOK_SLOT: return { ...state, bookingCheck: [...state.bookingCheck, action.payload] }; case SAVE_DETAILS: return { ...state, details: [...state.details, action.payload] }; default: return state; } }; export default reducer;

import React, { useState } from 'react'; import { useSelector } from 'react-redux'; import { useNavigate } from 'react-router-dom'; const Search = () => { const { bookingCheck } = useSelector((state) => state); const [searchId, setSearchId] = useState(''); const [foundBooking, setFoundBooking] = useState(null); const navigate = useNavigate(); const handleSearch = () => { const match = bookingCheck.find(b => b.id.toString() === searchId.trim()); setFoundBooking(match || 'not_found'); }; return ( <div> <h2>Search Booking</h2> <input type="text" placeholder="Enter Booking ID" value={searchId} onChange={(e) => setSearchId(e.target.value)} /> <button onClick={handleSearch}>Search</button> <button onClick={() => navigate('/')}>Back</button> {bookingCheck.length === 0 && <p>No Booking happened yet</p>} {foundBooking === 'not_found' && <p>No Booking Found</p>} {foundBooking && foundBooking !== 'not_found' && ( <div style={{ marginTop: '10px' }}> <p>ID: {foundBooking.id}</p> <p>Name: {foundBooking.name}</p> <p>Contact: {foundBooking.contact}</p> <p>Game: {foundBooking.game}</p> <p>Slot: {foundBooking.slot}</p> <p>Date: {foundBooking.date}</p> </div> )} </div> ); }; export default Search;

import React, { Component } from 'react'; class Slots extends Component { render() { const slots = [ "09.00 A.M - 10.00 A.M", "10.00 A.M - 11.00 A.M", "11.00 A.M - 12.00 P.M", "12.00 P.M - 01.00 P.M", "01.00 P.M - 02.00 P.M", "02.00 P.M - 03.00 P.M", "03.00 P.M - 04.00 P.M", "04.00 P.M - 05.00 P.M", "05.00 P.M - 06.00 P.M" ]; return ( <div className="slot_list"> {slots.map((slot, index) => ( <span key={index} onClick={() => console.log(`Slot ${index} clicked`)}> <h4>{slot}</h4> </span> ))} </div> ); } } export default Slots;