bug fix on confirmation

db.json

@@ -2,7 +2,7 @@
   "users": [
     {
       "mobile": "12345678",
-      "password": "test",
+      "password": "password",
       "id": 1,
       "isLogged": true
     }
@@ -11,10 +11,8 @@
     {
       "userId": 1,
       "seats": [
-        "C2",
-        "C3",
-        "C4",
-        "C1"
+        "D1",
+        "D4"
       ],
       "id": 1
     }

src/components/top-level/confirmation/confirmation.module.css

 .confirmation {
   text-align: center;
   padding: 2rem;
-  width: 20em;
+  margin: 2rem;
 }
 
 .confirmation img {

src/components/top-level/confirmation/index.js

@@ -2,14 +2,8 @@ import Layout from "../../Base/layout";
 import Image from "../../../assets/conform.png";
 import style from "./confirmation.module.css";
 import Button from "../../Base/button";
-import { useNavigate } from "react-router-dom";
 
-function Confirmation({ id, seatCount, seats }) {
-  const navigate = useNavigate();
-  const handleModify = (e) => {
-    e.preventDefault();
-    navigate(`/booking/${id}`);
-  };
+function Confirmation({ id, seatCount, seats, ...props }) {
   return (
     <Layout title="Booking Confirmed">
       <div className={style.confirmation}>
@@ -19,7 +13,7 @@ function Confirmation({ id, seatCount, seats }) {
           Booked Seats:
           {seats.toString()}
         </h4>
-        <Button onClick={handleModify}>Modify</Button>
+        <Button {...props}>Modify</Button>
       </div>
     </Layout>
   );

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

@@ -4,7 +4,6 @@ import Button from "../../Base/button";
 import styles from "./seat-layout.module.css";
 import Seat from "../seat";
 
-import { useNavigate } from "react-router-dom";
 function SeatLayout({
   userId = 1,
   seats,
@@ -13,9 +12,7 @@ function SeatLayout({
   onClick,
   ...props
 }) {
-  const navigate = useNavigate();
   const [selectedseat, setSelectedSeat] = useState([...selectedSeats]);
-  const [confirmation, setConfirmation] = useState(false);
   const handleSeats = (seat) => {
     if (!selectedseat?.includes(seat)) {
       setSelectedSeat([...selectedseat, seat]);
@@ -30,13 +27,10 @@ function SeatLayout({
     e.preventDefault();
     //check if already have data then update otherwise create,
     //write code
-    onClick({ userId: parseInt(userId), seats: selectedseat });
-    const count = selectedseat?.length;
-    setTimeout(() => {
-      navigate("/confirmation", {
-        state: { seatCount: count, seats: selectedseat, id: userId },
+    onClick({
+      userId: parseInt(userId),
+      seats: selectedseat,
     });
-    }, 500);
   };
 
   return (

src/pages/confirmation.js

 import Confirmation from "../components/top-level/confirmation";
 import { useLocation } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 export function _Confirmation() {
   const location = useLocation();
   const seatCount = location.state.seatCount;
   const seats = location.state.seats;
   const id = location.state.id;
-  return <Confirmation id={id} seatCount={seatCount} seats={seats} />;
+  const navigate = useNavigate();
+  const handleModify = (e) => {
+    e.preventDefault();
+    navigate(`/booking/${id}`);
+  };
+  return (
+    <Confirmation
+      id={id}
+      seatCount={seatCount}
+      seats={seats}
+      onClick={handleModify}
+    />
+  );
 }

src/pages/seat-layout.js

@@ -2,22 +2,14 @@ import { useEffect, useLayoutEffect, useState } from "react";
 import SeatLayout from "../components/top-level/seat-layout";
 import { useAppContext } from "../_context";
 import { useParams } from "react-router-dom";
-
+import { useNavigate } from "react-router-dom";
+import { bookingSeats } from "./seed";
 export function _Seatlayout({ ...props }) {
   const { userseats, AddOrUpdateSeats, GetAllReservedSeats } = useAppContext();
   const [reservedSeat, setReservedSeat] = useState([]);
   const [selectedSeat, setSelectedSeat] = useState([]);
+  const navigate = useNavigate();
   const { id } = useParams();
-  const [seat] = useState([
-    [0, "A1", "A2", "A3", 0, "A4", "A5", "A6", 0],
-    ["B1", "B2", "B3", "B4", 0, "B5", "B6", "B7", "B8"],
-    ["C1", "C2", "C3", "C4", 0, "C5", "C6", "C7", "C8"],
-    ["D1", "D2", "D3", "D4", 0, "D5", "D6", "D7", "D8"],
-    ["E1", "E2", "E3", "E4", 0, "E5", "E6", "E7", "E8"],
-    ["F1", "F2", "F3", "F4", 0, "F5", "F6", "F7", "F8"],
-    ["G1", "G2", "G3", "G4", 0, "G5", "G6", "G7", "G8"],
-    [0, "H1", "H2", "H3", 0, "H4", "H5", "H7", 0],
-  ]);
 
   useLayoutEffect(() => {
     GetAllReservedSeats();
@@ -40,13 +32,24 @@ export function _Seatlayout({ ...props }) {
     setSelectedSeat(results);
   };
 
+  const handleConfirmed = async ({ userId, seats }) => {
+    await AddOrUpdateSeats({ userId, seats });
+
+    const count = seats?.length;
+    setTimeout(() => {
+      navigate("/confirmation", {
+        state: { seatCount: count ?? 0, seats: seats, id },
+      });
+    }, 500);
+  };
+
   return (
     <SeatLayout
       userId={id}
-      seats={seat}
+      seats={bookingSeats}
       selectedSeats={selectedSeat}
       reservedSeats={reservedSeat}
-      onClick={AddOrUpdateSeats}
+      onClick={handleConfirmed}
       {...props}
     />
   );

src/pages/seed.js

+export const bookingSeats = [
+  [0, "A1", "A2", "A3", 0, "A4", "A5", "A6", 0],
+  ["B1", "B2", "B3", "B4", 0, "B5", "B6", "B7", "B8"],
+  ["C1", "C2", "C3", "C4", 0, "C5", "C6", "C7", "C8"],
+  ["D1", "D2", "D3", "D4", 0, "D5", "D6", "D7", "D8"],
+  ["E1", "E2", "E3", "E4", 0, "E5", "E6", "E7", "E8"],
+  ["F1", "F2", "F3", "F4", 0, "F5", "F6", "F7", "F8"],
+  ["G1", "G2", "G3", "G4", 0, "G5", "G6", "G7", "G8"],
+  [0, "H1", "H2", "H3", 0, "H4", "H5", "H7", 0],
+];