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,14 +31,16 @@ 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}>
@@ -83,9 +86,6 @@ function SeatLayout({
           </div>
         </div>
       </div>
-      ) : (
-        <Confirmation ticketCount={selectedseat.length} seats={selectedseat} />
-      )}
     </>
   );
 }

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} />;
 }