api call optimized

db.json

@@ -12,8 +12,8 @@
   "reservedSeats": [
     {
       "seats": [
-        "E8",
-        "H4"
+        "D8",
+        "F7"
       ],
       "id": 1
     },

src/App.js

 import "./App.css";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
-
 import { _Login } from "../src/pages/login";
 import { _Seatlayout } from "../src/pages/seat-layout";
 import { _Confirmation } from "../src/pages/confirmation";
 import { AuthGuard } from "./auth/index";
-
 import { _seatLimit } from "../src/pages/seat-limit";
 
 function App() {

src/_context/index.js

@@ -12,10 +12,16 @@ export function ContextProvider({ children }) {
       if (!user.length) {
         //register
         const response = await api.Register({ mobile });
-        return await response;
+        return {
+          response: response,
+          isRegistered: true,
+        };
       } else {
         //login
-        return await user[0];
+        return {
+          response: user[0],
+          isRegistered: false,
+        };
       }
     } catch (err) {
       toast.error(err.message);
@@ -24,6 +30,7 @@ export function ContextProvider({ children }) {
   const AddOrUpdateSeats = async ({ id, seats }) => {
     try {
       const isSeats = userseats.filter((e) => e.id == id);
+      //check the id
       if (!isSeats.length) {
         //add seats
         const response = await api.AddSeats({ seats });
@@ -51,9 +58,8 @@ export function ContextProvider({ children }) {
 
   const GetSeatById = async (id) => {
     try {
-      const response = await api.GetAllSeats();
-      const result = response.filter((e) => e.id == id);
-      return result;
+      const response = await api.GetSeatById(id);
+      return response;
     } catch (err) {
       toast.error(err.message);
     }

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

-// import { useNavigate } from "react-router-dom";
 import { useEffect, useState } from "react";
 import Button from "../../base/button";
 import styles from "./seat-layout.module.css";
@@ -51,9 +50,11 @@ function SeatLayout({
             {seats?.map((seat, i) => (
               <div key={i} className={styles.seat}>
                 {seat?.map((e, i) => (
-                  <div className={`${e === 0 ? styles["remove-seats"] : ""}`}>
+                  <div
+                    key={i}
+                    className={`${e === 0 ? styles["remove-seats"] : ""}`}
+                  >
                     <Seat
-                      key={e}
                       seatNo={e}
                       onChange={() => handleSeats(e)}
                       status={

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

@@ -9,7 +9,6 @@ function SeatLimit({ onLimit, ...props }) {
     e.preventDefault();
     if (limit > 0) {
       onLimit({ limit });
-      sessionStorage.setItem("seatLimit", limit);
     } else {
       toast.info("Please enter atleast 1 seat");
     }
@@ -26,12 +25,6 @@ function SeatLimit({ onLimit, ...props }) {
             min="1"
             max="10"
           />
-          {/* <input
-            className={styles.input}
-            type="number"
-            value={limit}
-            onChange={(e) => setLimit(e.target.value)}
-          /> */}
         </div>
         <Button {...props}>Book Seats</Button>
       </form>

src/pages/confirmation.js

 import Confirmation from "../components/top-level/confirmation";
 import { useLocation, useNavigate } from "react-router-dom";
 import { useEffect, useState } from "react";
+import { useAppContext } from "../_context";
 
 export function _Confirmation() {
   const [count, setCount] = useState(0);
   const [reservedseat, setReservedSeat] = useState([]);
+  let { GetSeatById } = useAppContext();
   const navigate = useNavigate();
   const location = useLocation();
   useEffect(() => {
     getSeatById();
   }, []);
   const getSeatById = async () => {
-    setCount(location?.state?.seats.length);
-    setReservedSeat(location?.state?.seats);
+    if (location?.state?.seats.length) {
+      setCount(location.state.seats.length);
+      setReservedSeat(location.state.seats);
+    } else {
+      const userid = sessionStorage.getItem("userId");
+      const userseats = await GetSeatById(userid);
+      setCount(userseats.seats.length);
+      setReservedSeat(userseats.seats);
+    }
   };
 
   const handleModify = (e) => {
     e.preventDefault();
+    //for Auth Guard
     sessionStorage.setItem("currentPath", "/booking");
     navigate("/booking");
   };

src/pages/login.js

@@ -5,28 +5,23 @@ import { useNavigate } from "react-router-dom";
 export function _Login() {
   const navigate = useNavigate();
 
-  const { LoginOrRegister, GetSeatById } = useAppContext();
+  const { LoginOrRegister } = useAppContext();
+
   useEffect(() => {
     sessionStorage.clear();
   }, []);
+
   const handleLogin = async ({ mobile }) => {
     const users = await LoginOrRegister({ mobile });
-
-    if (users) {
-      sessionStorage.setItem("userId", users.id);
-      //check seat length for  already booked seats for the user
-      const userseat = await GetSeatById(users.id);
-
-      if (userseat.length) {
-        //if store the seat length in session
-        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");
-      } else {
-        sessionStorage.setItem("currentPath", "/seat-limit");
-        navigate("/seat-limit");
-      }
+    sessionStorage.setItem("userId", users.response.id);
+    if (users.isRegistered) {
+      //for Auth Guard
+      sessionStorage.setItem("currentPath", "/seat-limit");
+      navigate("/seat-limit");
+    } else {
+      //for Auth Guard
+      sessionStorage.setItem("currentPath", "/booking");
+      navigate("/booking");
     }
   };
   return <Login onSubmit={handleLogin} />;

src/pages/seat-layout.js

@@ -5,20 +5,21 @@ import { useNavigate } from "react-router-dom";
 import { bookingSeats } from "./seed";
 
 export function _Seatlayout() {
-  const { userseats, AddOrUpdateSeats, GetAllSeats } = useAppContext();
+  let { userseats, AddOrUpdateSeats, GetAllSeats } = useAppContext();
   const [reservedSeat, setReservedSeat] = useState([]);
   const [selectedSeat, setSelectedSeat] = useState([]);
+  const [seatLimit, setSeatLimit] = useState(0);
   const navigate = useNavigate();
   const userId = sessionStorage.getItem("userId");
-  const seatLimit = sessionStorage.getItem("seatLimit");
 
   useEffect(() => {
     handleReservedSeats();
   }, [userseats]);
-  useEffect(() => {
+  useLayoutEffect(() => {
     GetAllSeats();
   }, []);
-  const handleReservedSeats = () => {
+
+  const handleReservedSeats = async () => {
     let seatArray = [];
     const reservedSeats = userseats?.filter((e) => e.id != userId);
     reservedSeats.forEach((element) => {
@@ -27,9 +28,14 @@ export function _Seatlayout() {
         setReservedSeat(seatArray);
       });
     });
-    const selectedSeats = userseats?.find((e) => e.id == userId);
+    const selectedSeats = await userseats?.find((e) => e.id == userId);
     const results = selectedSeats?.seats;
     setSelectedSeat(results);
+    const sessionSeatLimit = sessionStorage.getItem("seatLimit");
+    setTimeout(() => {
+      sessionStorage.setItem("seatLimit", sessionSeatLimit ?? results?.length);
+      setSeatLimit(sessionStorage.getItem("seatLimit"));
+    }, 500);
   };
 
   const handleConfirmed = async ({ id, seats }) => {

src/pages/seat-limit.js

@@ -3,8 +3,9 @@ import { useNavigate } from "react-router-dom";
 
 export function _seatLimit() {
   const navigate = useNavigate();
-
-  const handleLimit = () => {
+  const handleLimit = (e) => {
+    sessionStorage.setItem("seatLimit", e.limit);
+    //for Auth Guard
     sessionStorage.setItem("currentPath", "/booking");
     navigate("/booking");
   };