changes in seats highlighting issue

db.json

@@ -37,7 +37,192 @@
     {
       "id": "1ad9",
       "userid": "1ad9",
-      "selected": []
+      "selected": [
+        {
+          "row": 4,
+          "seat": 4
+        },
+        {
+          "row": 2,
+          "seat": 1
+        },
+        {
+          "row": 1,
+          "seat": 1
+        },
+        {
+          "row": 1,
+          "seat": 2
+        },
+        {
+          "row": 1,
+          "seat": 3
+        },
+        {
+          "row": 1,
+          "seat": 4
+        },
+        {
+          "row": 8,
+          "seat": 5
+        },
+        {
+          "row": 8,
+          "seat": 6
+        },
+        {
+          "row": 8,
+          "seat": 7
+        },
+        {
+          "row": 8,
+          "seat": 8
+        }
+      ]
+    },
+    {
+      "id": "b31d",
+      "userid": "b31d",
+      "selected": [
+        {
+          "row": 7,
+          "seat": 6
+        },
+        {
+          "row": 7,
+          "seat": 7
+        },
+        {
+          "row": 7,
+          "seat": 8
+        },
+        {
+          "row": 7,
+          "seat": 10
+        },
+        {
+          "row": 7,
+          "seat": 9
+        }
+      ]
+    },
+    {
+      "id": "7fdf",
+      "userid": "7fdf",
+      "selected": [
+        {
+          "row": 5,
+          "seat": 4
+        },
+        {
+          "row": 5,
+          "seat": 5
+        },
+        {
+          "row": 1,
+          "seat": 7
+        },
+        {
+          "row": 1,
+          "seat": 8
+        },
+        {
+          "row": 3,
+          "seat": 6
+        },
+        {
+          "row": 3,
+          "seat": 7
+        },
+        {
+          "row": 2,
+          "seat": 7
+        },
+        {
+          "row": 2,
+          "seat": 8
+        },
+        {
+          "row": 3,
+          "seat": 8
+        },
+        {
+          "row": 2,
+          "seat": 9
+        },
+        {
+          "row": 3,
+          "seat": 9
+        },
+        {
+          "row": 2,
+          "seat": 10
+        },
+        {
+          "row": 3,
+          "seat": 10
+        },
+        {
+          "row": 4,
+          "seat": 10
+        },
+        {
+          "row": 5,
+          "seat": 10
+        },
+        {
+          "row": 6,
+          "seat": 10
+        },
+        {
+          "row": 6,
+          "seat": 9
+        },
+        {
+          "row": 4,
+          "seat": 9
+        },
+        {
+          "row": 5,
+          "seat": 9
+        },
+        {
+          "row": 5,
+          "seat": 8
+        },
+        {
+          "row": 4,
+          "seat": 8
+        },
+        {
+          "row": 6,
+          "seat": 8
+        },
+        {
+          "row": 6,
+          "seat": 7
+        },
+        {
+          "row": 5,
+          "seat": 7
+        },
+        {
+          "row": 4,
+          "seat": 7
+        },
+        {
+          "row": 4,
+          "seat": 6
+        },
+        {
+          "row": 5,
+          "seat": 6
+        },
+        {
+          "row": 6,
+          "seat": 6
+        }
+      ]
     }
   ]
 }
\ No newline at end of file

src/components/Layout/BookingWrapper/Index.jsx

@@ -10,7 +10,7 @@ const BookingWrapper = ({ onSeatClick, selectedSeats, seatData, currentSeats })
 
 
     selectedSeats?.forEach(user => {
-        user.selected.forEach(seat => {
+        user.selected?.forEach(seat => {
             const key = `${seat.row}-${seat.seat}`;
             selectedSeatMap.set(key, user.userid);
         });

src/components/Shared/Modal/Index.jsx

@@ -2,7 +2,7 @@ import Input from "../../Base/Input/Index";
 import Button from "../../Base/Button/Index";
 import styles from "./styles.module.css";
 
-const Modal = ({ onConfirm, onChange, variant, onOfSeats }) => {
+const Modal = ({ onConfirm, onChange, variant, onOfSeats, onCancel }) => {
   return (
     <div className={styles["overlay-container"]}>
       <div className={styles["modal-dialog"]} role="dialog" aria-modal="true">
@@ -34,7 +34,7 @@ const Modal = ({ onConfirm, onChange, variant, onOfSeats }) => {
             </p>
             <p>Please confirm to proceed with your booking.</p>
             <div className={styles["btn-wrapper"]}>
-              <Button size={"sm"} onClick={onConfirm}>
+              <Button size={"sm"} onClick={onCancel}>
                 Cancel
               </Button>
               <Button size={"sm"} onClick={onConfirm}>

src/components/TopLevel/SeatBooking/Index.jsx

@@ -11,14 +11,17 @@ import { useNavigate } from "react-router-dom";
 import { appConstants } from "../../../utils/AppConstants";
 
 const SeatBooking = () => {
-
   let userId = getItem(appConstants.USER);
   const navigate = useNavigate();
 
   const [selectedSeats, setSelectedSeats] = useState(); //persisted seats state
   const [currentSeats, setCurrentSeats] = useState([]); // currently selecting seats before booking(local)
-  const [showSeatsModal, setShowSeatsModal] = useState(() => getItem(appConstants.MODAL));
-  const [showSeatsConfirmationModal, setShowSeatsConfirmationModal] = useState(false);
+  
+  const [showSeatsModal, setShowSeatsModal] = useState(() =>
+    getItem(appConstants.MODAL)
+  );
+  const [showSeatsConfirmationModal, setShowSeatsConfirmationModal] =
+    useState(false);
   const [onOfSeats, setNoOfSeats] = useState();
 
   useEffect(() => {
@@ -426,28 +429,8 @@ const SeatBooking = () => {
     setSelectedSeats(data);
   };
 
-  const editSeatsApi = async (id, body, newRequest) => {
+  const editSeatsApi = async (id, body) => {
     try {
-      const current = selectedSeats.find((ele) => ele.userid == userId);
-      const found = current.selected.some((e) =>
-        newRequest.some((e2) => e2.row == e.row && e2.seat == e.seat)
-      );
-
-      if (found) {
-        let newSelected = current.selected.filter(
-          (e) => !newRequest.some((e2) => e2.row == e.row && e2.seat == e.seat)
-        );
-        const res = await fetch(`${appConstants.API_URL_SEATS}/${id}`, {
-          method: "PATCH",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({ selected: newSelected }),
-        });
-        getSelectedSeats();
-        return newSelected;
-      }
-
       await fetch(`${appConstants.API_URL_SEATS}/${id}`, {
         method: "PATCH",
         headers: {
@@ -471,6 +454,40 @@ const SeatBooking = () => {
       body: JSON.stringify(body),
     });
     getSelectedSeats();
+    setCurrentSeats([]);
+  };
+
+  const logout = () => {
+    reset();
+    navigate("/login");
+  };
+
+  const onModalChange = (value) => {
+    setNoOfSeats(value);
+  };
+
+  const modalClose = () => {
+    setItem("modal", false);
+    setShowSeatsModal(false);
+  };
+
+  const finalCancel = () => {
+     const current = selectedSeats?.find((ele) => ele.userid == userId);
+     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)
+    setShowSeatsConfirmationModal(false);
   };
 
   const onSelectSeats = (rowId, columnId) => {
@@ -490,44 +507,53 @@ const SeatBooking = () => {
     });
   };
 
-  const logout = () => {
-    reset();
-    navigate("/login");
-  };
+  const onSeatsConfirm = () => {
+    const current = selectedSeats?.find((ele) => ele.userid == userId);
 
-  const onModalChange = (value) => {
-    setNoOfSeats(value);
-  };
+    const found = current?.selected.some((e) =>
+      currentSeats.some((e2) => e2.row == e.row && e2.seat == e.seat)
+    );
 
-  const modalClose = () => {
-    setItem("modal", false);
-    setShowSeatsModal(false);
-  };
+    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]);
+      }
+    }
 
-  const onSeatsConfirm = () => {
     setShowSeatsConfirmationModal(true);
   };
 
-  const seatsFinal = async() => {
-    setShowSeatsConfirmationModal(false);
+  const seatsFinal = async () => {
     const existingUserSeatMap = selectedSeats?.find((ele) => ele.id == userId);
 
     if (existingUserSeatMap) {
-     const data = await editSeatsApi(
-        existingUserSeatMap.userid,
-        [...currentSeats, ...existingUserSeatMap.selected],
-        currentSeats
-      );
-
-      console.log(data, "data")
+      await editSeatsApi(userId, currentSeats);
     } else {
       let info = {
         id: userId,
         userid: userId,
         selected: currentSeats,
       };
-      createSeatApi(info);
+      await createSeatApi(info);
     }
+    setShowSeatsConfirmationModal(false);
   };
 
   return (
@@ -550,19 +576,29 @@ const SeatBooking = () => {
         />
       </div>
       <div className={styles["btn-wrapper"]}>
-        <Button size={"md"} onClick={onSeatsConfirm}>
+        <Button size={"md"} onClick={onSeatsConfirm} disabled={currentSeats.length > 0 ? false : true }>
           Confirm
         </Button>
       </div>
       <LegendWrapper />
       {showSeatsModal && (
-        <Modal onConfirm={modalClose} onChange={onModalChange} variant="input"/>
+        <Modal
+          onConfirm={modalClose}
+          onChange={onModalChange}
+          variant="input"
+        />
       )}
       {showSeatsConfirmationModal && (
-        <Modal onConfirm={seatsFinal} onChange={onModalChange} variant={'confirm'} onOfSeats={currentSeats.length}/>
+        <Modal
+          onConfirm={seatsFinal}
+          onChange={onModalChange}
+          variant={"confirm"}
+          onOfSeats={currentSeats.length}
+          onCancel={finalCancel}
+        />
       )}
     </div>
   );
 };
 
-export default SeatBooking;
\ No newline at end of file
+export default SeatBooking;