lolpee69 / Updated code

export const SELECT_GAME = 'SELECT_GAME'; export const SELECT_DATE = 'SELECT_DATE'; export const SELECT_SLOT = 'SELECT_SLOT'; export const BOOK_SLOT = 'BOOK_SLOT'; export const SAVE_DETAILS = 'SAVE_DETAILS'; export const selectGame = (game) => ({ type: SELECT_GAME, payload: game, }); export const selectDate = (date) => ({ type: SELECT_DATE, payload: date, }); export const selectSlot = (slot) => ({ type: SELECT_SLOT, payload: slot, }); export const bookSlot = (booking) => ({ type: BOOK_SLOT, payload: booking, }); export const saveDetails = (details) => ({ type: SAVE_DETAILS, payload: details, });

import "./App.css"; import Games from "./pages/home"; import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; import React, { Component } from "react"; import Booking from "./pages/book"; import Search_Booking from "./pages/search_booking"; class App extends Component { state = {}; render() { return ( <div> <Router> <div> <Switch> <Route exact path="/" component={Games} /> <Route exact path="/booking" component={Booking} /> <Route exact path="/search" component={Search_Booking} /> </Switch> </div> </Router> </div> ); } } export default App;

import React, { useState } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { bookSlot, saveDetails, selectSlot } from './action'; import { useNavigate } from 'react-router-dom'; const slots = ['10AM', '11AM', '12PM', '1PM', '2PM', '3PM', '4PM']; const Book = () => { const dispatch = useDispatch(); const navigate = useNavigate(); const { selectedGame, selectedDate, slotBooked, bookingCheck } = useSelector(state => state); const [selectedSlot, setSelectedSlot] = useState(null); const [name, setName] = useState(''); const [contact, setContact] = useState(''); 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 handleSlotClick = (slot) => { if (bookingCheck.some(b => b.slot === slot && b.date === selectedDate)) return; setSelectedSlot(slot); dispatch(selectSlot(slot)); }; const validate = () => { if (!selectedSlot) { alert('Select your slot!!!'); return false; } const nameRegex = /^[A-Za-z ]+$/; const phoneRegex = /^[0-9]{10}$/; if (!nameRegex.test(name) || !phoneRegex.test(contact)) { alert('Invalid Input!!!'); return false; } return true; }; const handleBook = () => { if (!validate()) return; const bookingID = Math.floor(1000 + Math.random() * 9000); dispatch(bookSlot({ id: bookingID, name, contact, game: selectedGame[0], slot: selectedSlot, date: selectedDate })); dispatch(saveDetails({ id: bookingID, name, contact })); alert(`Booking successful! Your ID is ${bookingID}`); navigate('/'); }; const renderSlots = () => { return 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 ( <button key={slot} onClick={() => handleSlotClick(slot)} style={{ backgroundColor: color, margin: '5px' }} > {slot} </button> ); }); }; return ( <div> <h2>Game: {selectedGame[0]}</h2> <h3>Date: {selectedDate}</h3> <button onClick={() => navigate('/')}>Back</button> {selectedDate === today && <p>Booking has been closed. Book your slot for {formattedTomorrow}</p>} {selectedDate === formattedTomorrow && ( <> <div>{renderSlots()}</div> <input placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} /> <input placeholder="Contact" value={contact} onChange={(e) => setContact(e.target.value)} /> <button onClick={handleBook}>Book Now</button> </> )} {selectedDate > formattedTomorrow && <p>Booking is not opened yet</p>} </div> ); }; export default Book;

import React from 'react'; import { useDispatch } from 'react-redux'; import { useNavigate } from 'react-router-dom'; import { selectGame } from './action'; const Home = () => { const games = ['Cricket', 'Football', 'Tennis']; const dispatch = useDispatch(); const navigate = useNavigate(); const handleBookNow = (game) => { dispatch(selectGame(game)); navigate('/book'); }; return ( <div> <h1>Available Games</h1> {games.map((game) => ( <div key={game} style={{ margin: '10px', border: '1px solid black', padding: '10px' }}> <h2>{game}</h2> <button onClick={() => handleBookNow(game)}>Book Now</button> </div> ))} <button onClick={() => navigate('/search')}>Check your booking</button> </div> ); }; export default Home;

import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import { Provider } from 'react-redux'; import { createStore } from 'redux'; import reducer from './reducer'; const store = createStore(reducer); const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <Provider store={store}> <App /> </Provider> );

import { SELECT_GAME, SELECT_DATE, SELECT_SLOT, BOOK_SLOT, SAVE_DETAILS } from './action'; const tomorrow = new Date(); tomorrow.setDate(tomorrow.getDate() + 1); const formattedTomorrow = tomorrow.toISOString().split('T')[0]; const initialState = { Games: ['Cricket', 'Football', 'Tennis'], selectedGame: [], selectedDate: formattedTomorrow, 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;

Components/slot.js import React, { Component } from "react"; import { connect } from "react-redux"; import { selectSlot } from "../Action/action"; class Slots extends Component { handleSlot = id => { this.props.selectSlot(id); }; render() { // Template for each slot // <div key={slot.id} className="slot_list"> // <h4> // <span // className={slot.slotStatus} // style={{ cursor: "pointer" }} // > // </span> // </h4> // </div> return (<div> {/* code for slot goes here */} </div>); } } const mapStateToProps = state => { return { selectedGame: state.selectedGame, bookingSlot: state.slotBooked }; }; const mapDispatchToProps = dispatch => { return { selectSlot: id => dispatch(selectSlot(id)) }; }; export default connect( mapStateToProps, mapDispatchToProps )(Slots);