seat booking functionality completed

db.json

@@ -16,16 +16,102 @@
       "selectionCount": "3"
     },
     {
-      "id": "92dd",
-      "email": "",
+      "id": "d17b",
+      "email": "test@gmail.com",
       "selectionCount": "3"
+    },
+    {
+      "id": "84ca",
+      "email": "anas@krds.fr",
+      "selectionCount": "22"
     }
   ],
   "selectedSeats": [
     {
       "id": "8329",
       "userid": "8329",
-      "selected": []
+      "selected": [
+        {
+          "row": 8,
+          "seat": 2
+        },
+        {
+          "row": 8,
+          "seat": 3
+        },
+        {
+          "row": 7,
+          "seat": 1
+        }
+      ]
+    },
+    {
+      "id": "3450",
+      "userid": "3450",
+      "selected": [
+        {
+          "row": 7,
+          "seat": 7
+        },
+        {
+          "row": 7,
+          "seat": 8
+        },
+        {
+          "row": 1,
+          "seat": 6
+        },
+        {
+          "row": 1,
+          "seat": 5
+        }
+      ]
+    },
+    {
+      "id": "06b5",
+      "userid": "06b5",
+      "selected": [
+        {
+          "row": 8,
+          "seat": 5
+        },
+        {
+          "row": 8,
+          "seat": 4
+        },
+        {
+          "row": 8,
+          "seat": 6
+        }
+      ]
+    },
+    {
+      "id": "d17b",
+      "userid": "d17b",
+      "selected": [
+        {
+          "row": 1,
+          "seat": 2
+        },
+        {
+          "row": 1,
+          "seat": 1
+        },
+        {
+          "row": 1,
+          "seat": 3
+        }
+      ]
+    },
+    {
+      "id": "4d39",
+      "userid": "4d39",
+      "selected": [
+        {
+          "row": 2,
+          "seat": 5
+        }
+      ]
     }
   ]
 }
\ No newline at end of file

src/components/Layout/BookingWrapper/Index.jsx

@@ -8,6 +8,7 @@ const BookingWrapper = ({
   seatData,
   currentSeats
 }) => {
+  console.log(currentSeats, 'currentSeats in CHILD');
   const aisleIndex = 4;
   let currentUser = getItem('user');
   const selectedSeatMap = new Map();
@@ -21,7 +22,6 @@ const BookingWrapper = ({
 
   const isLeftBlock = (col) => col < aisleIndex;
   const isRightBlock = (col) => col > aisleIndex;
-
   return (
     <div className={styles['booking-wrapper']}>
       <div className={styles['theatre']}>
@@ -71,16 +71,8 @@ const BookingWrapper = ({
                 seatClass += 'current-selected';
               } else {
                 if (selectedBy) {
-                  console.log(
-                    selectedBy == currentUser,
-                    selectedBy,
-                    currentUser,
-                    'FINAL'
-                  );
                   seatClass +=
-                    selectedBy == currentUser
-                      ? 'selected-by-me'
-                      : 'selected-by-other';
+                    selectedBy == currentUser ? '' : 'selected-by-other';
                 }
               }
 

src/pages/BookingPage/Index.jsx

@@ -26,7 +26,6 @@ const BookingPage = () => {
   const [showSeatsModal, setShowSeatsModal] = useState(
     getItem(appConstants.MODAL)
   );
-
   const [showSeatsConfirmationModal, setShowSeatsConfirmationModal] =
     useState(false);
   const [noOfSeats, setNoOfSeats] = useState();
@@ -34,9 +33,10 @@ const BookingPage = () => {
   useEffect(() => {
     const fetchSelectedSeats = async () => {
       const data = await getSelectedSeatsApi();
-      const currentData = data.find((e) => e.userid == userId);
+      const currentData = data?.find((e) => e.userid == userId);
       setSelectedSeats(data);
-      setCurrentSeats(currentData.selected);
+      setCurrentSeats(currentData?.selected);
+      console.log(data, 'currentSeats & selectedSeats', currentSeats.length);
     };
     const fetchSeatSelectionCount = async () => {
       const data = await getSeatSelectionCountApi(userId);
@@ -364,59 +364,28 @@ const BookingPage = () => {
   };
 
   const onSelectSeats = (rowId, columnId) => {
-    const currentData = data.find((e) => e.userid == userId);
-    const currentSelected = currentData.selected;
-    let totalAllowedCount = currentSelected.length + currentSeats.length;
     setCurrentSeats((prev) => {
-      const found = prev.find((e) => e.row == rowId && e.seat == columnId);
+      const found = prev?.find((e) => e.row == rowId && e.seat == columnId);
       if (found) {
         return currentSeats.filter(
           (e) => !(e.row == rowId && e.seat == columnId)
         );
       } else {
-        if (totalAllowedCount < noOfSeats) {
-          if (currentSeats.length < noOfSeats) {
-            let obj = {
-              row: rowId,
-              seat: columnId
-            };
-            return [...prev, obj];
-          } else {
-            return [...prev];
-          }
+        if (currentSeats?.length < noOfSeats) {
+          let obj = {
+            row: rowId,
+            seat: columnId
+          };
+          return [...prev, obj];
+        } else {
+          return prev ? [...prev] : [];
         }
       }
     });
   };
 
   const onSeatsConfirm = () => {
-    const current = selectedSeats?.find((ele) => ele.userid == userId);
-
-    const found = current?.selected.some((e) =>
-      currentSeats.some((e2) => e2.row == e.row && e2.seat == e.seat)
-    );
-
-    if (found) {
-      const mergedSeats = [
-        ...currentSeats.filter(
-          (cs) =>
-            !current?.selected.some(
-              (ss) => ss.row === cs.row && ss.seat === cs.seat
-            )
-        ),
-        ...current?.selected.filter(
-          (ss) =>
-            !currentSeats.some((cs) => cs.row === ss.row && cs.seat === ss.seat)
-        )
-      ];
-      setCurrentSeats(mergedSeats);
-    } else {
-      if (current) {
-        setCurrentSeats([...currentSeats, ...current.selected]);
-      } else {
-        setCurrentSeats([...currentSeats]);
-      }
-    }
+    setCurrentSeats([...currentSeats]);
     setShowSeatsConfirmationModal(true);
   };
 
@@ -440,7 +409,6 @@ const BookingPage = () => {
     fetchData();
     setShowSeatsConfirmationModal(false);
   };
-  console.log(currentSeats, 'currentSeats');
   return (
     <div className={styles['seat-booking-wrapper']}>
       <img
@@ -462,7 +430,7 @@ const BookingPage = () => {
         <Button
           size={'lg'}
           onClick={onSeatsConfirm}
-          disabled={currentSeats.length > 0 ? false : true}>
+          disabled={currentSeats?.length == noOfSeats ? true : false}>
           Confirm
         </Button>
       </div>