api changes

db.json

@@ -15,17 +15,13 @@
     {
       "mobile": "8888888880",
       "id": 4
-    },
-    {
-      "mobile": "8888888888",
-      "id": 5
     }
   ],
   "reservedSeats": [
     {
       "seats": [
-        "E4",
-        "D4"
+        "H5",
+        "H4"
       ],
       "id": 2
     },
@@ -45,17 +41,7 @@
         "E1"
       ],
       "id": 4
-    },
-    {
-      "seats": [
-        "A4",
-        "B5",
-        "C5",
-        "D5",
-        "E5",
-        "F5"
-      ],
-      "id": 5
     }
+    
   ]
 }
\ No newline at end of file

src/_context/index.js

@@ -23,8 +23,8 @@ export function ContextProvider({ children }) {
   };
   const AddOrUpdateSeats = async ({ id, seats }) => {
     try {
-      const userSeats = await api.GetSeatById(id);
-      if (!Object.keys(userSeats).length) {
+      const isSeats = userseats.filter((e) => e.id == id);
+      if (!isSeats.length) {
         //add seats
         const response = await api.AddSeats({ seats });
         setUserSeats([...userseats, response]);
@@ -44,6 +44,7 @@ export function ContextProvider({ children }) {
       setUserSeats([]);
       const response = await api.GetAllSeats();
       setUserSeats(response);
+      return response;
     } catch (err) {
       toast.error(err.message);
     }

src/auth/index.js

@@ -7,7 +7,6 @@ export function AuthGuard({ component: Component, ...props }) {
   const navigate = useNavigate();
   const location = useLocation();
   const currentPath = sessionStorage.getItem("currentPath");
-  console.log("ururur", location.pathname, currentPath);
   useEffect(() => {
     if (!isLogged) {
       sessionStorage.clear();

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

@@ -13,7 +13,6 @@ function SeatLayout({
   seatLimit,
   onClick,
 }) {
-  console.log("poo", userId);
   const [selectedseat, setSelectedSeat] = useState([...selectedSeats]);
 
   const handleSeats = (seat) => {
@@ -30,8 +29,6 @@ function SeatLayout({
   }, [selectedSeats]);
   const handleConfirm = (e) => {
     e.preventDefault();
-    //check if already have data then update otherwise create,
-    //write code
     if (!selectedseat.length || selectedseat.length < seatLimit) {
       toast.error(`please select upto ${seatLimit} `);
     } else {
@@ -51,8 +48,8 @@ function SeatLayout({
             <div className={styles["curve-shadow"]}></div>
           </div>
           <div className={styles["seat-container"]}>
-            {seats?.map((seat) => (
-              <div className={styles.seat}>
+            {seats?.map((seat, i) => (
+              <div key={i} className={styles.seat}>
                 {seat?.map((e, i) => (
                   <div className={`${e === 0 ? styles["remove-seats"] : ""}`}>
                     <Seat

src/pages/confirmation.js

 import Confirmation from "../components/top-level/confirmation";
-import { useNavigate } from "react-router-dom";
-import { useAppContext } from "../_context";
+import { useLocation, useNavigate } from "react-router-dom";
 import { useEffect, useState } from "react";
 
 export function _Confirmation() {
-  const { GetSeatById } = useAppContext();
   const [count, setCount] = useState(0);
   const [reservedseat, setReservedSeat] = useState([]);
   const navigate = useNavigate();
+  const location = useLocation();
   useEffect(() => {
     getSeatById();
   }, []);
-
   const getSeatById = async () => {
-    const id = sessionStorage.getItem("userId");
-    const userReservedSeat = await GetSeatById(id);
-    setCount(userReservedSeat?.seats?.length);
-    setReservedSeat(userReservedSeat.seats);
+    setCount(location?.state?.seats.length);
+    setReservedSeat(location?.state?.seats);
   };
 
   const handleModify = (e) => {

src/pages/login.js

@@ -5,25 +5,25 @@ import { useNavigate } from "react-router-dom";
 export function _Login() {
   const navigate = useNavigate();
 
-  const { userseats, LoginOrRegister, GetAllSeats } = useAppContext();
+  const { LoginOrRegister, GetAllSeats } = useAppContext();
   useEffect(() => {
-    GetAllSeats();
     sessionStorage.clear();
   }, []);
   const handleLogin = async ({ mobile }) => {
     const users = await LoginOrRegister({ mobile });
-    if (users != null) {
+
+    if (users) {
       sessionStorage.setItem("userId", users.id);
       //check seat length for  already booked seats for the user
-      const userstate = userseats.filter((e) =>
-        e.id === users.id ? true : false
-      );
-      if (userstate.length) {
+      const allseats = await GetAllSeats();
+      const userseat = allseats.filter((e) => e.id == users.id);
+      console.log("ueueu", userseat);
+      if (userseat.length) {
         //if store the seat length in session
-        sessionStorage.setItem("seatLimit", userstate[0].seats.length);
+        sessionStorage.setItem("seatLimit", userseat[0].seats.length);
         //redirect to booking component otherwise it will not redirect if not login
         sessionStorage.setItem("currentPath", "/booking");
-        navigate("/booking");
+        navigate("/booking", { state: { seats: allseats } });
       } else {
         sessionStorage.setItem("currentPath", "/seat-limit");
         navigate("/seat-limit");

src/pages/seat-layout.js

 import { useEffect, useLayoutEffect, useState } from "react";
 import SeatLayout from "../components/top-level/seat-layout";
 import { useAppContext } from "../_context";
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { bookingSeats } from "./seed";
 
 export function _Seatlayout() {
   const { userseats, AddOrUpdateSeats, GetAllSeats } = useAppContext();
+  const [seats, setSeats] = useState([]);
   const [reservedSeat, setReservedSeat] = useState([]);
   const [selectedSeat, setSelectedSeat] = useState([]);
   const navigate = useNavigate();
   const userId = sessionStorage.getItem("userId");
   const seatLimit = sessionStorage.getItem("seatLimit");
-
+  const location = useLocation();
+  const seatState = location?.state?.seats;
   useLayoutEffect(() => {
-    GetAllSeats();
+    handleLoad();
   }, []);
   useEffect(() => {
     handleReservedSeats();
-  }, [userseats]);
-
+    setSeats(userseats);
+  }, [seats, userseats]);
+  const handleLoad = async () => {
+    if (seatState) {
+      setSeats(location?.state?.seats);
+      return null;
+    }
+
+    await GetAllSeats();
+  };
   const handleReservedSeats = () => {
     let seatArray = [];
-
-    const reservedSeats = userseats?.filter((e) => e.id != userId);
-
+    const reservedSeats = seats?.filter((e) => e.id != userId);
     reservedSeats.forEach((element) => {
       element.seats.forEach((e) => {
         seatArray = [...seatArray, e];
         setReservedSeat(seatArray);
       });
     });
-    const selectedSeats = userseats?.find((e) => e.id == userId);
+    const selectedSeats = seats?.find((e) => e.id == userId);
     const results = selectedSeats?.seats;
     setSelectedSeat(results);
   };
 
   const handleConfirmed = async ({ id, seats }) => {
     await AddOrUpdateSeats({ id, seats });
-
-    const count = seats?.length;
     sessionStorage.setItem("currentPath", "/confirmation");
-    navigate("/confirmation");
+    navigate("/confirmation", { state: { seats: seats } });
   };
 
   return (