Impemented remove seats in json-server

db.json

@@ -23,74 +23,21 @@
     {
       "id": "a6af",
       "email": "testing@gmail.com"
-    }
-  ],
-  "selectedSeats": [
-    {
-      "id": "a6af",
-      "userid": "a6af",
-      "selected": [
-        {
-          "row": 8,
-          "seat": 2
-        },
-        {
-          "row": 8,
-          "seat": 3
-        },
-        {
-          "row": 8,
-          "seat": 4
-        },
-        {
-          "row": 8,
-          "seat": 4
-        },
-        {
-          "row": 8,
-          "seat": 3
-        },
-        {
-          "row": 8,
-          "seat": 2
-        },
-        {
-          "row": 8,
-          "seat": 4
     },
     {
-          "row": 8,
-          "seat": 3
+      "id": "7fdf",
+      "email": "test@gmail.com"
     },
     {
-          "row": 8,
-          "seat": 2
-        },
-        {
-          "row": 8,
-          "seat": 3
-        },
-        {
-          "row": 8,
-          "seat": 4
-        },
-        {
-          "row": 8,
-          "seat": 2
-        },
-        {
-          "row": 8,
-          "seat": 2
-        },
-        {
-          "row": 8,
-          "seat": 3
-        },
-        {
-          "row": 8,
-          "seat": 4
+      "id": "a9b6",
+      "email": "new@gmail.com"
     }
-      ]
+  ],
+  "selectedSeats": [
+    {
+      "id": "1ad9",
+      "userid": "1ad9",
+      "selected": []
     }
   ]
 }
\ No newline at end of file

src/components/Layout/BookingWrapper/Index.jsx

@@ -61,7 +61,6 @@ const BookingWrapper = ({ onSeatClick, selectedSeats, seatData, currentSeats })
                                 seatClass += selectedBy == currentUser ? 'selected-by-me' : 'selected-by-other';
                             }
 
-                            console.log(seatClass, "SeatCLaskk")
                             return (
                                 <Seat status={seatClass} id={column.id} onClick={() => onSeatClick(row.row_id, column.id)} />
                             )

src/components/Layout/BookingWrapper/styles.module.css

@@ -6,8 +6,6 @@
     cursor: pointer;
 }
 
-
-
 .seat:hover {
     background-color: aqua;
 }
@@ -22,7 +20,6 @@
     background-color: aqua;
 }
 
-
 .theatre {
     display: flex;
     justify-content: center;
@@ -59,6 +56,7 @@
 
 .selected-by-other {
     background-color: #bec0c26d !important;
+    pointer-events: none;
 }
 
 .booking-wrapper{
@@ -66,8 +64,6 @@
     overflow: auto;
 }
 
-
-
 @media screen and (min-width: 768px) {
 
     .seat {
@@ -84,7 +80,6 @@
         height: 2em;
     }
 
-
     .seat-row {
         gap: 15px;
     }

src/components/Shared/Modal/Index.jsx

-import Input from '../../Base/Input/Index';
-import Button from '../../Base/Button/Index'
-import styles from './styles.module.css';
+import Input from "../../Base/Input/Index";
+import Button from "../../Base/Button/Index";
+import styles from "./styles.module.css";
 
-const Modal = ({onConfirm, onChange}) => {
+const Modal = ({ onConfirm, onChange, variant, onOfSeats }) => {
   return (
     <div className={styles["overlay-container"]}>
-         <div className={styles['modal-dialog']} role="dialog" aria-modal="true" >
-            <h2 className={styles['modal-title']}>Select Your Seats</h2>
+      <div className={styles["modal-dialog"]} role="dialog" aria-modal="true">
+        {variant == "input" && (
+          <>
+            <h2 className={styles["modal-title"]}>Select Your Seats</h2>
             <p>Please choose how many seats you'd like to book.</p>
-
             <Input
               label={"Number of Seats"}
-               placeholder='Enter number of seats'
-               type='number'
-               max='10'
-               min='1'
+              placeholder="Enter number of seats"
+              type="number"
+              max="10"
+              min="1"
               onChange={(e) => onChange(e.target.value)}
             />
-            <div className={styles['btn-wrapper']}>
-               <Button size={'sm'} onClick={onConfirm}>Confirm</Button>
+            <div className={`${styles["btn-wrapper"]} ${styles["flex-direction"]}`}>
+              <Button size={"sm"} onClick={onConfirm}>
+                Confirm
+              </Button>
+            </div>
+          </>
+        )}
+        {variant == "confirm" && (
+          <>
+            <h2 className={styles["modal-title"]}>Confirm Your Selection</h2>
+            <p>
+              You have selected <strong>{onOfSeats}</strong> seat
+              {onOfSeats !== 1 ? "s" : ""}.
+            </p>
+            <p>Please confirm to proceed with your booking.</p>
+            <div className={styles["btn-wrapper"]}>
+              <Button size={"sm"} onClick={onConfirm}>
+                Cancel
+              </Button>
+              <Button size={"sm"} onClick={onConfirm}>
+                Confirm
+              </Button>
             </div>
+          </>
+        )}
       </div>
     </div>
-   )
-}
+  );
+};
 
 export default Modal;

src/components/Shared/Modal/styles.module.css

@@ -23,10 +23,13 @@
 
 .btn-wrapper {
    display: flex;
-   /* justify-content: flex-end; */
-   flex-direction: column;
+   justify-content: flex-end;
+   gap: 1rem;
    margin: 1rem 0;
 }
+.flex-direction{
+   flex-direction: column;
+}
 
 .modal-title {
    font-family: 'Poppins-Medium';

src/components/TopLevel/SeatBooking/styles.module.css

@@ -8,11 +8,11 @@
    padding-bottom: 65px;
    display: flex;
 }
+
 .seat-booking-wrapper > div {
    flex: 1;
 }
 
-
 .btn-wrapper {
    display: flex;
    justify-content: center;
@@ -20,11 +20,10 @@
    flex: 1;
    padding: 1.5rem 0;
 }
+
 .logout{
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
 }
\ No newline at end of file
-
-

src/utils/AppConstants.js

 export const appConstants = {
    API_URL_SEATS: "http://localhost:3000/selectedSeats",
-   API_URL_USERS: "http://localhost:3000/users"
+   API_URL_USERS: "http://localhost:3000/users",
+   USER: "user",
+   MODAL: "modal"
 }
 
 // 192.168.1.121
\ No newline at end of file