seat limit

db.json

@@ -3,6 +3,21 @@
     {
       "mobile": "12345678",
       "id": 1
+    },
+    {
+      "mobile": "123456789",
+      "isLogged": true,
+      "id": 2
+    },
+    {
+      "mobile": "1234567891",
+      "isLogged": true,
+      "id": 3
+    },
+    {
+      "mobile": "1234567890",
+      "isLogged": true,
+      "id": 4
     }
   ],
   "reservedSeats": [

src/App.js

@@ -5,6 +5,8 @@ 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() {
   const navigate = useNavigate();
   useEffect(() => {
@@ -16,6 +18,10 @@ function App() {
       <Routes>
         <Route path="/" element={<_Login />} />
         <Route
+          path="/seat-limit/:id"
+          element={<AuthGuard component={_seatLimit} />}
+        />
+        <Route
           path="/booking/:id"
           element={<AuthGuard component={_Seatlayout} />}
         />

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

@@ -14,9 +14,9 @@
 
 .card {
   display: block;
-  min-height: 40dvh;
   max-width: 30em;
   border-radius: 10px;
+  min-height: 15em;
   background-color: white;
   margin: 0 auto;
   box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.65);

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

 .confirmation {
   text-align: center;
-  padding: 2rem;
+  padding: 1.5rem 3rem 1rem 3rem;
+  margin: 1.5rem 3rem 1rem 3rem;
 }
 
 .confirmation img {
-  max-width: 100%;
+  min-width: 15em;
   height: 200px;
   margin: 0 auto;
-  animation: fadeIn ease 3s;
+  animation: fadeIn ease 2s;
 }
 @keyframes fadeIn {
   0% {
@@ -17,3 +18,13 @@
     opacity: 1;
   }
 }
+
+span {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+h3,
+h4 {
+  margin: 0.6rem;
+}

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

@@ -3,12 +3,11 @@ import Confirmation from ".";
 export default {
   title: "Top-Level/Confirmation",
   component: Confirmation,
-  argTypes: { onClick: { action: "onClick" } },
+  argTypes: { onEdit: { action: "onEdit" } },
 };
 
 export const confirmation = {
   args: {
-    seatCount: 3,
     seats: ["A1", "A2", "A3"],
   },
 };

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

@@ -3,17 +3,20 @@ import Image from "../../../assets/conform.png";
 import style from "./confirmation.module.css";
 import Button from "../../Base/button";
 
-function Confirmation({ id, seatCount, seats, ...props }) {
+function Confirmation({ id, seatCount = 3, seats, onEdit, ...props }) {
   return (
     <Layout title="Booking Confirmed">
       <div className={style.confirmation}>
-        <img src={Image} />
-        <h3>Seat's Count:{seatCount}</h3>
-        <h4>
+        <img src={Image} loading="lazy" />
+        <span>
+          Seat's Count:<h4>{seatCount}</h4>
+        </span>
+
+        <span>
           Booked Seats:
-          {seats.toString()}
-        </h4>
-        <Button {...props}>Modify</Button>
+          <h3> {seats.toString()}</h3>
+        </span>
+        <Button onClick={onEdit}>Modify</Button>
       </div>
     </Layout>
   );

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

@@ -4,17 +4,19 @@ import Button from "../../Base/button";
 import styles from "./seat-layout.module.css";
 import Seat from "../seat";
 import Layout from "../../Base/layout";
+
 function SeatLayout({
-  userId = 1,
   seats,
   reservedSeats,
   selectedSeats,
+  seatLimit,
   onClick,
   ...props
 }) {
   const [selectedseat, setSelectedSeat] = useState([...selectedSeats]);
+
   const handleSeats = (seat) => {
-    if (!selectedseat?.includes(seat)) {
+    if (!selectedseat?.includes(seat) && selectedseat.length < seatLimit) {
       setSelectedSeat([...selectedseat, seat]);
     } else {
       setSelectedSeat(selectedseat?.filter((e) => e != seat));
@@ -28,7 +30,7 @@ function SeatLayout({
     //check if already have data then update otherwise create,
     //write code
     onClick({
-      userId: parseInt(userId),
+      userId: parseInt(props.userId),
       seats: selectedseat,
     });
   };

src/components/top-level/seat-layout/seat-layout.module.css

@@ -78,7 +78,7 @@
 
 @media screen and (min-width: 414px) {
   .seat-container {
-    left: 15px;
+    left: 8px;
   }
   .seat {
     grid-template-columns: repeat(9, 40px);

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

@@ -23,5 +23,6 @@ export const seatlayout = {
     ],
     reservedSeats: ["A1", "A2", "G1", "G2"],
     selectedSeats: ["E1", "E2", "E3"],
+    seatLimit: 4,
   },
 };

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

+import { useState } from "react";
+import Button from "../../Base/button";
+import Layout from "../../Base/layout";
+import styles from "./seatlimit.module.css";
+
+function SeatLimit({ onLimit, ...props }) {
+  const [limit, setLimit] = useState(0);
+  const handleLimit = () => {
+    onLimit({ limit });
+  };
+  return (
+    <Layout title="How many seats?">
+      <form onSubmit={handleLimit} className={styles["form"]}>
+        <div>
+          <label>No of seats:</label>
+          <input
+            className={styles.input}
+            type="number"
+            value={limit}
+            onChange={(e) => setLimit(e.target.value)}
+          />
+        </div>
+        <Button {...props}>Book Seats</Button>
+      </form>
+    </Layout>
+  );
+}
+export default SeatLimit;

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

+.input {
+  height: 30px;
+  width: 100%;
+}
+.form {
+  padding: 1rem 3rem;
+}
+.form > div {
+  padding: 10px;
+}

src/pages/confirmation.js

@@ -16,7 +16,7 @@ export function _Confirmation() {
       id={id}
       seatCount={seatCount}
       seats={seats}
-      onClick={handleModify}
+      onEdit={handleModify}
     />
   );
 }

src/pages/login.js

@@ -9,7 +9,8 @@ export function _Login() {
   const handleLogin = async ({ mobile }) => {
     const user = await LoginOrRegister({ mobile });
     if (user?.length) {
-      navigate(`/booking/${user[0].id}`);
+      navigate(`/seat-limit/${user[0].id}`);
+      //navigate(`/booking/${user[0].id}`);
     }
   };
   return <Login onSubmit={handleLogin} />;

src/pages/seat-layout.js

@@ -4,13 +4,15 @@ import { useAppContext } from "../_context";
 import { useParams } from "react-router-dom";
 import { useNavigate } from "react-router-dom";
 import { bookingSeats } from "./seed";
+import { useLocation } from "react-router-dom";
 export function _Seatlayout({ ...props }) {
   const { userseats, AddOrUpdateSeats, GetAllReservedSeats } = useAppContext();
   const [reservedSeat, setReservedSeat] = useState([]);
   const [selectedSeat, setSelectedSeat] = useState([]);
   const navigate = useNavigate();
   const { id } = useParams();
-
+  const location = useLocation();
+  const seatlimit = location.state.seatLimit;
   useLayoutEffect(() => {
     GetAllReservedSeats();
   }, []);
@@ -46,6 +48,7 @@ export function _Seatlayout({ ...props }) {
   return (
     <SeatLayout
       userId={id}
+      seatLimit={seatlimit}
       seats={bookingSeats}
       selectedSeats={selectedSeat}
       reservedSeats={reservedSeat}

src/pages/seat-limit.js

+import SeatLimit from "../components/top-level/seatlimit";
+import { useParams, useNavigate } from "react-router-dom";
+
+export function _seatLimit() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+
+  const handleLimit = (e) => {
+    navigate(`/booking/${id}`, { state: { seatLimit: e.limit } });
+  };
+  return <SeatLimit onLimit={handleLimit} />;
+}