confirmation page setup

db.json

@@ -8,6 +8,15 @@
     }
   ],
   "reservedSeats": [
-    
+    {
+      "userId": 1,
+      "seats": [
+        "C2",
+        "C3",
+        "C4",
+        "C1"
+      ],
+      "id": 1
+    }
   ]
 }
\ No newline at end of file

src/App.js

@@ -15,6 +15,7 @@ function App() {
       <Routes>
         <Route path="/" element={<_Login />} />
         <Route path="/booking/:id" element={<_Seatlayout />} />
+        <Route path="/confirmation" element={<_Confirmation />} />
       </Routes>
     </div>
   );

src/components/Base/layout/layout.module.css

@@ -23,6 +23,6 @@
   padding: 0.3rem;
 }
 
-h2 {
+h2.header2 {
   text-align: center;
 }

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

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

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

@@ -3,7 +3,7 @@ import Confirmation from ".";
 export default {
   title: "Top-Level/Confirmation",
   component: Confirmation,
-  argTypes: {},
+  argTypes: { onClick: { action: "onClick" } },
 };
 
 export const confirmation = {

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

 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({ seatCount, seats }) {
+function Confirmation({ id, seatCount, seats }) {
+  const navigate = useNavigate();
+  const handleModify = (e) => {
+    e.preventDefault();
+    navigate(`/booking/${id}`);
+  };
   return (
     <Layout title="Booking Confirmed">
       <div className={style.confirmation}>
@@ -12,6 +19,7 @@ function Confirmation({ seatCount, seats }) {
           Booked Seats:
           {seats.toString()}
         </h4>
+        <Button onClick={handleModify}>Modify</Button>
       </div>
     </Layout>
   );

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 Confirmation from "../confirmation";
 
+import { useNavigate } from "react-router-dom";
 function SeatLayout({
   userId = 1,
   seats,
@@ -13,6 +13,7 @@ function SeatLayout({
   onClick,
   ...props
 }) {
+  const navigate = useNavigate();
   const [selectedseat, setSelectedSeat] = useState([...selectedSeats]);
   const [confirmation, setConfirmation] = useState(false);
   const handleSeats = (seat) => {
@@ -30,62 +31,61 @@ function SeatLayout({
     //check if already have data then update otherwise create,
     //write code
     onClick({ userId: parseInt(userId), seats: selectedseat });
+    const count = selectedseat?.length;
     setTimeout(() => {
-      setConfirmation(true);
+      navigate("/confirmation", {
+        state: { seatCount: count, seats: selectedseat, id: userId },
+      });
     }, 500);
   };
 
   return (
     <>
-      {!confirmation ? (
-        <div className={styles.container}>
-          <h1>Choose Seats</h1>
-          <div className={styles.curve}>
-            <div className={styles["curve-shadow"]}></div>
+      <div className={styles.container}>
+        <h1>Choose Seats</h1>
+        <div className={styles.curve}>
+          <div className={styles["curve-shadow"]}></div>
+        </div>
+        <div className={styles["seat-container"]}>
+          {seats?.map((seat) => (
+            <div className={styles.seat}>
+              {seat?.map((e, i) => (
+                <div className={`${e === 0 ? styles["remove-seats"] : ""}`}>
+                  <Seat
+                    key={e}
+                    seatNo={e}
+                    onChange={() => handleSeats(e)}
+                    status={
+                      selectedseat?.includes(e)
+                        ? "selected"
+                        : reservedSeats?.includes(e)
+                        ? "reserved"
+                        : "available"
+                    }
+                  />
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+        <Button onClick={handleConfirm} {...props}>
+          Confirm
+        </Button>
+        <div className={styles["seat-status"]}>
+          <div className={styles.selected}>
+            <div></div>
+            <p>Selected</p>
           </div>
-          <div className={styles["seat-container"]}>
-            {seats?.map((seat) => (
-              <div className={styles.seat}>
-                {seat?.map((e, i) => (
-                  <div className={`${e === 0 ? styles["remove-seats"] : ""}`}>
-                    <Seat
-                      key={e}
-                      seatNo={e}
-                      onChange={() => handleSeats(e)}
-                      status={
-                        selectedseat?.includes(e)
-                          ? "selected"
-                          : reservedSeats?.includes(e)
-                          ? "reserved"
-                          : "available"
-                      }
-                    />
-                  </div>
-                ))}
-              </div>
-            ))}
+          <div className={styles.reserved}>
+            <div></div>
+            <p>Reserved</p>
           </div>
-          <Button onClick={handleConfirm} {...props}>
-            Confirm
-          </Button>
-          <div className={styles["seat-status"]}>
-            <div className={styles.selected}>
-              <div></div>
-              <p>Selected</p>
-            </div>
-            <div className={styles.reserved}>
-              <div></div>
-              <p>Reserved</p>
-            </div>
-            <div className={styles.available}>
-              <div></div>
-              <p>Available</p>
-            </div>
+          <div className={styles.available}>
+            <div></div>
+            <p>Available</p>
           </div>
         </div>
-      ) : (
-        <Confirmation ticketCount={selectedseat.length} seats={selectedseat} />
-      )}
+      </div>
     </>
   );
 }

src/pages/confirmation.js

 import Confirmation from "../components/top-level/confirmation";
-
-export function _Confirmation({ ...props }) {
-  return <Confirmation {...props} />;
+import { useLocation } 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} />;
 }