bug fix on seat modify

db.json

@@ -3,18 +3,29 @@
     {
       "mobile": "1234567890",
       "id": 1
+    },
+    {
+      "mobile": "9999999999",
+      "id": 2
     }
   ],
   "reservedSeats": [
     {
       "userId": 1,
       "seats": [
-        "D1",
-        "D4",
-        "D2",
-        "D3"
+        "E1",
+        "E4",
+        "F3"
       ],
       "id": 1
+    },
+    {
+      "userId": 2,
+      "seats": [
+        "C5",
+        "C6"
+      ],
+      "id": 2
     }
   ]
 }
\ No newline at end of file

src/App.js

 import "./App.css";
-import { Route, Routes, useNavigate } from "react-router-dom";
+import {
+  BrowserRouter as Router,
+  Route,
+  Routes,
+  useNavigate,
+} from "react-router-dom";
 import { useEffect } from "react";
 import { _Login } from "../src/pages/login";
 import { _Seatlayout } from "../src/pages/seat-layout";
@@ -8,28 +13,30 @@ import { AuthGuard } from "./auth/index";
 import { _seatLimit } from "../src/pages/seat-limit";
 
 function App() {
-  const navigate = useNavigate();
-  useEffect(() => {
-    // Redirect to the "Example Page" when the page is reloaded
-    navigate("/");
-  }, []);
+  // const navigate = useNavigate();
+  // useEffect(() => {
+  //   // Redirect to the "Example Page" when the page is reloaded
+  //   navigate("/");
+  // }, []);
   return (
     <div className="App">
-      <Routes>
-        <Route path="/" element={<_Login />} />
-        <Route
-          path="/seat-limit/:id"
-          element={<AuthGuard component={_seatLimit} />}
-        />
-        <Route
-          path="/booking/:id"
-          element={<AuthGuard component={_Seatlayout} />}
-        />
-        <Route
-          path="/confirmation"
-          element={<AuthGuard component={_Confirmation} />}
-        />
-      </Routes>
+      <Router>
+        <Routes>
+          <Route path="/" element={<_Login />} />
+          <Route
+            path="/seat-limit/:id"
+            element={<AuthGuard component={_seatLimit} />}
+          />
+          <Route
+            path="/booking/:id"
+            element={<AuthGuard component={_Seatlayout} />}
+          />
+          <Route
+            path="/confirmation"
+            element={<AuthGuard component={_Confirmation} />}
+          />
+        </Routes>
+      </Router>
     </div>
   );
 }

src/_context/index.js

@@ -6,11 +6,11 @@ export const useAppContext = () => useContext(AppContext);
 
 export function ContextProvider({ children }) {
   const [userseats, setUserSeats] = useState([]);
-  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
   const LoginOrRegister = async ({ mobile }) => {
     try {
       const response = await api.LoginOrRegister({ mobile });
-      setIsLoggedIn(true);
+      localStorage.setItem("isLogged", 1);
       return response;
     } catch (err) {
       toast.error(err.message);
@@ -44,7 +44,6 @@ export function ContextProvider({ children }) {
   };
   const value = {
     userseats,
-    isLoggedIn,
     LoginOrRegister,
     AddOrUpdateSeats,
     GetAllReservedSeats,

src/auth/index.js

 import React from "react";
-import { useNavigate } from "react-router-dom";
-import { useAppContext } from "../_context";
+import { useNavigate, useParams } from "react-router-dom";
 
 export function AuthGuard({ component: Component, ...props }) {
-  const { isLoggedIn } = useAppContext();
+  const isLogged = localStorage.getItem("isLogged");
   const navigate = useNavigate();
 
-  if (!isLoggedIn) {
+  if (!isLogged) {
     // Redirect to the home page if the user is not logged in
     navigate("/");
     return null; // You can return null or another component if needed

src/components/top-level/seat-layout/index.js

@@ -3,8 +3,8 @@ import { useEffect, useState } from "react";
 import Button from "../../Base/button";
 import styles from "./seat-layout.module.css";
 import Seat from "../seat";
-import Layout from "../../Base/layout";
 import { toast } from "react-toastify";
+import { useLocation } from "react-router-dom";
 function SeatLayout({
   seats,
   reservedSeats,
@@ -13,15 +13,18 @@ function SeatLayout({
   onClick,
   ...props
 }) {
+  const location = useLocation();
+  console.log(seatLimit, location.state.seatLimit);
+  const _seatLimit = seatLimit ?? location.state.seatLimit;
   const [selectedseat, setSelectedSeat] = useState([...selectedSeats]);
 
   const handleSeats = (seat) => {
-    if (!selectedseat?.includes(seat) && selectedseat.length < seatLimit) {
+    if (!selectedseat?.includes(seat) && selectedseat.length < _seatLimit) {
       setSelectedSeat([...selectedseat, seat]);
     } else if (selectedseat?.includes(seat)) {
       setSelectedSeat(selectedseat?.filter((e) => e != seat));
     } else {
-      toast.info(`Cannot select seat more than ${seatLimit}`);
+      toast.info(`Cannot select seat more than ${_seatLimit}`);
     }
   };
   useEffect(() => {
@@ -31,10 +34,14 @@ function SeatLayout({
     e.preventDefault();
     //check if already have data then update otherwise create,
     //write code
-    onClick({
-      userId: parseInt(props.userId),
-      seats: selectedseat,
-    });
+    if (!selectedseat.length || selectedseat.length < _seatLimit) {
+      toast.error(`please select upto ${seatLimit} `);
+    } else {
+      onClick({
+        userId: parseInt(props.userId),
+        seats: selectedseat,
+      });
+    }
   };
 
   return (

src/index.js

@@ -4,15 +4,13 @@ import "./index.css";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 import { ContextProvider } from "./_context";
-import { BrowserRouter as Router } from "react-router-dom";
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <ContextProvider>
-    <Router>
-      <App />
-    </Router>
+    <App />
+
     <ToastContainer
       position="top-right"
       autoClose={3000}

src/pages/confirmation.js

@@ -6,10 +6,11 @@ export function _Confirmation() {
   const seatCount = location.state.seatCount;
   const seats = location.state.seats;
   const id = location.state.id;
+  const seatLimit = location.state.seatlimit;
   const navigate = useNavigate();
   const handleModify = (e) => {
     e.preventDefault();
-    navigate(`/booking/${id}`);
+    navigate(`/booking/${id}`, { state: { seatLimit } });
   };
   return (
     <Confirmation

src/pages/seat-layout.js

@@ -12,6 +12,9 @@ export function _Seatlayout({ ...props }) {
   const navigate = useNavigate();
   const { id } = useParams();
   const location = useLocation();
+
+  console.log("seat", bookingSeats);
+
   const seatlimit = location.state.seatLimit;
   useLayoutEffect(() => {
     GetAllReservedSeats();
@@ -38,11 +41,10 @@ export function _Seatlayout({ ...props }) {
     await AddOrUpdateSeats({ userId, seats });
 
     const count = seats?.length;
-    setTimeout(() => {
-      navigate("/confirmation", {
-        state: { seatCount: count ?? 0, seats: seats, id },
-      });
-    }, 500);
+
+    navigate("/confirmation", {
+      state: { seatCount: count ?? 0, seats: seats, id, seatlimit },
+    });
   };
 
   return (