Skip to content

S
seat-booking
Commit 3d107cda by Syed Abdul Rahman
Options

code refactorization completed

parent f860f881
Showing with 211 additions and 718 deletions
db.json
{ {
"users": [ "users": [
{ {
"id": "eba4", "id": "5ebc",
"email": "syedabdul.rahman@krds.com", "email": "syedabdul.rahman@krds.com",
"selectionCount": "3" "selectionCount": 4
}, },
{ {
"id": "eece", "id": "45ea",
"email": "lucy@gmail.com",
"selectionCount": "4"
},
{
"id": "bd3f",
"email": "abdul@gmail.com", "email": "abdul@gmail.com",
"selectionCount": "4" "selectionCount": 3
},
{
"id": "fa09",
"email": "test@gmail.com"
}, },
{ {
"id": "da06", "id": "aafd",
"email": "testing@gmail.com", "email": "lucy@gmail.com",
"selectionCount": 3 "selectionCount": 4
} }
], ],
"selectedSeats": [ "selectedSeats": [
{ {
"id": "eba4", "id": "45ea",
"userid": "eba4", "userid": "45ea",
"selected": [ "selected": [
{ {
"row": 6, "row": 8,
"seat": 3 "seat": 1
}, },
{ {
"row": 6, "row": 8,
"seat": 4 "seat": 2
}, },
{ {
"row": 5, "row": 8,
"seat": 4 "seat": 3
} }
] ]
}, },
{ {
"id": "eece", "id": "5ebc",
"userid": "eece", "userid": "5ebc",
"selected": [ "selected": [
{ {
"row": 7, "row": 6,
"seat": 1 "seat": 5
}, },
{ {
"row": 7, "row": 6,
"seat": 2 "seat": 6
}, },
{ {
"row": 7, "row": 6,
"seat": 4 "seat": 7
}, },
{ {
"row": 6, "row": 5,
"seat": 2 "seat": 8
} }
] ]
}, },
{ {
"id": "bd3f", "id": "aafd",
"userid": "bd3f", "userid": "aafd",
"selected": [ "selected": [
{ {
"row": 5, "row": 7,
"seat": 5 "seat": 5
}, },
{ {
"row": 5, "row": 7,
"seat": 6 "seat": 6
}, },
{ {
"row": 5, "row": 7,
"seat": 7 "seat": 7
}, },
{ {
"row": 5, "row": 7,
"seat": 8 "seat": 8
} }
] ]
......
package-lock.json
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
"name": "seat-booking", "name": "seat-booking",
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"lottie-react": "^2.4.1",
"react": "^19.1.0", "react": "^19.1.0",
"react-dom": "^19.1.0", "react-dom": "^19.1.0",
"react-router-dom": "^7.6.2" "react-router-dom": "^7.6.2"
...@@ -3919,6 +3920,25 @@ ...@@ -3919,6 +3920,25 @@
"loose-envify": "cli.js" "loose-envify": "cli.js"
} }
}, },
"node_modules/lottie-react": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/lottie-react/-/lottie-react-2.4.1.tgz",
"integrity": "sha512-LQrH7jlkigIIv++wIyrOYFLHSKQpEY4zehPicL9bQsrt1rnoKRYCYgpCUe5maqylNtacy58/sQDZTkwMcTRxZw==",
"license": "MIT",
"dependencies": {
"lottie-web": "^5.10.2"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
}
},
"node_modules/lottie-web": {
"version": "5.13.0",
"resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.13.0.tgz",
"integrity": "sha512-+gfBXl6sxXMPe8tKQm7qzLnUy5DUPJPKIyRHwtpCpyUEYjHYRJC/5gjUvdkuO2c3JllrPtHXH5UJJK8LRYl5yQ==",
"license": "MIT"
},
"node_modules/loupe": { "node_modules/loupe": {
"version": "3.1.3", "version": "3.1.3",
"resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.3.tgz", "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.3.tgz",
......
package.json
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
"build-storybook": "storybook build" "build-storybook": "storybook build"
}, },
"dependencies": { "dependencies": {
"lottie-react": "^2.4.1",
"react": "^19.1.0", "react": "^19.1.0",
"react-dom": "^19.1.0", "react-dom": "^19.1.0",
"react-router-dom": "^7.6.2" "react-router-dom": "^7.6.2"
......
src/components/Base/Button/styles.module.css
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
} }
.md { .md {
padding: 0.6rem 2rem; padding: 0.5rem 2rem;
font-size: 18px; font-size: 18px;
} }
......
src/components/Layout/BookingWrapper/BookingWrapper.stories.jsx
...@@ -12,300 +12,40 @@ export const Default = { ...@@ -12,300 +12,40 @@ export const Default = {
args: { args: {
selectedSeats: [ selectedSeats: [
{ {
userid: 1, row: 3,
selected: [ seat: 1
{ row: 1, seat: 1 },
{ row: 1, seat: 2 }
]
},
{
userid: 2,
selected: [
{ row: 2, seat: 1 },
{ row: 2, seat: 2 },
{ row: 5, seat: 1 }
]
}
],
seatData: [
{
row_id: 1,
columnData: [
{
id: 0,
status: 'aisle'
},
{
id: 1
},
{
id: 2
},
{
id: 3
},
{
id: 0
},
{
id: 4
},
{
id: 5
},
{
id: 6
},
{
id: 0,
status: 'aisle'
}
]
},
{
row_id: 2,
columnData: [
{
id: 1,
status: 'available'
},
{
id: 2,
status: 'available'
},
{
id: 3,
status: 'available'
},
{
id: 4,
status: 'available'
},
{
id: 0,
status: 'aisle'
},
{
id: 5,
status: 'available'
},
{
id: 6,
status: 'available'
},
{
id: 7,
status: 'available'
},
{
id: 8,
status: 'available'
}
]
},
{
row_id: 3,
columnData: [
{
id: 1
},
{
id: 2
},
{
id: 3
},
{
id: 4
},
{
id: 0
},
{
id: 5
},
{
id: 6
},
{
id: 7
},
{
id: 8
}
]
},
{
row_id: 4,
columnData: [
{
id: 1
},
{
id: 2
},
{
id: 3
},
{
id: 4
},
{
id: 0
},
{
id: 5
},
{
id: 6
},
{
id: 7
},
{
id: 8
}
]
},
{
row_id: 5,
columnData: [
{
id: 1
},
{
id: 2
},
{
id: 3
},
{
id: 4
},
{
id: 0
},
{
id: 5
},
{
id: 6
},
{
id: 7
},
{
id: 8
}
]
},
{
row_id: 6,
columnData: [
{
id: 1
},
{
id: 2
},
{
id: 3
},
{
id: 4
},
{
id: 0
},
{
id: 5
},
{
id: 6
},
{
id: 7
},
{
id: 8
}
]
},
{
row_id: 7,
columnData: [
{
id: 1
},
{
id: 2
},
{
id: 3
},
{
id: 4
},
{
id: 0
},
{
id: 5
},
{
id: 6
},
{
id: 7
},
{
id: 8
}
]
},
{
row_id: 8,
columnData: [
{
id: 0,
status: 'aisle'
},
{
id: 1
},
{
id: 2
},
{
id: 3
}, },
{ {
id: 0 row: 3,
seat: 2
}, },
{ {
id: 4 row: 4,
seat: 1
}, },
{ {
id: 5 row: 4,
seat: 2
}, },
{ {
id: 6 row: 4,
seat: 3
}, },
{ {
id: 0, row: 4,
status: 'aisle' seat: 4
}
]
} }
], ],
seatData: [
['*', 1, 2, 3, '*', 4, 5, 6, '*'],
[1, 2, 3, 4, '*', 5, 6, 7, 8],
[1, 2, 3, 4, '*', 5, 6, 7, 8],
[1, 2, 3, 4, '*', 5, 6, 7, 8],
[1, 2, 3, 4, '*', 5, 6, 7, 8],
[1, 2, 3, 4, '*', 5, 6, 7, 8],
[1, 2, 3, 4, '*', 5, 6, 7, 8],
['*', 1, 2, 3, '*', 4, 5, 6, '*']
],
currentSeats: [ currentSeats: [
{ {
row: 3, row: 3,
......
src/components/Layout/BookingWrapper/Index.jsx
import Seat from './Seat'; import Seat from './Seat';
import { getItem } from '../../../lib/localStorage';
import styles from './styles.module.css'; import styles from './styles.module.css';
const BookingWrapper = ({ const BookingWrapper = ({
onSeatClick,
selectedSeats, selectedSeats,
seatData, seatData,
currentSeats currentSeats,
onSeatAdd,
onSeatRemove
}) => { }) => {
const aisleIndex = 4; const handleSeatClick = (row, seat, status) => {
let currentUser = getItem('user'); if (status == 'current-selected') {
const selectedSeatMap = new Map(); onSeatRemove(row, seat);
} else {
selectedSeats?.forEach((user) => { onSeatAdd(row, seat);
user.selected?.forEach((seat) => { }
const key = `${seat.row}-${seat.seat}`; };
selectedSeatMap.set(key, user.userid);
});
});
const isLeftBlock = (col) => col < aisleIndex;
const isRightBlock = (col) => col > aisleIndex;
return ( return (
<div className={styles['booking-wrapper']}> <div className={styles['booking-wrapper']}>
<div className={styles['theatre']}> <div className={styles['theatre']}>
{seatData?.map((row, row_index) => ( {seatData?.map((row, row_index) => (
<div className={styles['seat-row']}> <div key={`row-${row_index}`} className={styles['seat-row']}>
{row.columnData?.map((column, column_index) => { {row?.map((seat, column_index) => {
const isFirstRow = row_index === 0; if (seat === '*') {
const isLastRow = row_index === seatData.length - 1;
if (
isLeftBlock(column_index) &&
column_index === 0 &&
(isFirstRow || isLastRow)
) {
return ( return (
<div <div
key={`gap-left-${row_index}-${column_index}`} key={`gap-${row_index}-${column_index}`}
className={styles['seat-gap']} className={styles['seat-gap']}
/> />
); );
} }
if ( const seatKey = `${row_index + 1}-${seat}`;
isRightBlock(column_index) &&
column_index === row.columnData.length - 1 &&
(isFirstRow || isLastRow)
) {
return (
<div
key={`gap-right-${row_index}-${row_index}`}
className={styles['seat-gap']}
/>
);
}
if (column_index == aisleIndex) {
return <div className={styles['aisle']}></div>;
}
const seatKey = `${row.row_id}-${column.id}`; let seatClass = '';
const selectedBy = selectedSeatMap.get(seatKey); const foundInCurrentSeats = currentSeats?.find(
let seatClass = ``; (e) => e.row === row_index + 1 && e.seat === seat
const found = currentSeats?.find(
(e) => e.row == row.row_id && e.seat == column.id
); );
if (found) { const foundInSelectedSeats = selectedSeats?.some(
seatClass += 'current-selected'; (e) => e.row === row_index + 1 && e.seat === seat
} else { );
if (selectedBy) {
seatClass += if (foundInCurrentSeats) {
selectedBy == currentUser ? '' : 'selected-by-other'; seatClass = 'current-selected';
} } else if (foundInSelectedSeats) {
seatClass = 'selected-by-other';
} }
return ( return (
<Seat <Seat
key={seatKey}
status={seatClass} status={seatClass}
id={column.id} id={seat}
onClick={() => onSeatClick(row.row_id, column.id)} onClick={() =>
handleSeatClick(row_index + 1, seat, seatClass)
}
/> />
); );
})} })}
......
src/components/Layout/BookingWrapper/Seat.jsx
...@@ -2,7 +2,12 @@ import styles from './styles.module.css'; ...@@ -2,7 +2,12 @@ import styles from './styles.module.css';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
const Seat = ({ id, status, ...rest }) => { const Seat = ({ id, status, ...rest }) => {
return <div {...rest} className={` ${styles[status]} ${styles.seat} `}></div>; return (
<div
{...rest}
// onClick={() => onClick(status)}
className={` ${styles[status]} ${styles.seat} `}></div>
);
}; };
Seat.propTypes = { Seat.propTypes = {
......
src/components/Layout/BookingWrapper/Seat.stories.jsx
...@@ -7,16 +7,15 @@ export default { ...@@ -7,16 +7,15 @@ export default {
argTypes: { argTypes: {
status: { status: {
control: { type: 'select' }, control: { type: 'select' },
options: ['available', 'reserved', 'selected'], options: ['available', 'reserved', 'selected']
},
// onClick: {action: "clicked"} ,
}, },
onClick: { action: 'clicked' }
}
}; };
export const Default = { export const Default = {
args: { args: {
id:2, id: 2,
status: 'available', status: 'available'
}, }
}; };
src/components/Layout/BookingWrapper/styles.module.css
...@@ -75,11 +75,6 @@ ...@@ -75,11 +75,6 @@
width: 2em; width: 2em;
} }
.seat-gap {
width: 2em;
height: 2em;
}
.seat-row { .seat-row {
gap: 15px; gap: 15px;
} }
......
src/components/Shared/Modal/Modal.stories.jsx
...@@ -7,6 +7,14 @@ export default { ...@@ -7,6 +7,14 @@ export default {
argTypes: {} argTypes: {}
}; };
export const Default = { export const Default = () => {
args: {} return (
<Modal>
<p>This is the Modal Title</p>
<p>
Integer suscipit eros sit amet mi auctor, vitae hendrerit orci pretium.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc.</p>
</Modal>
);
}; };
src/components/Shared/Modal/styles.module.css
...@@ -21,6 +21,9 @@ ...@@ -21,6 +21,9 @@
box-sizing: border-box; box-sizing: border-box;
min-width: 300px; min-width: 300px;
min-height: 150px; min-height: 150px;
/* height: max(150px, 300px); */
/* height: fit-content; */
height: auto;
} }
.btn-wrapper { .btn-wrapper {
......
src/components/TopLevel/ConfirmSeatContent/Index.jsx
import Button from '../../Base/Button/Index'; import Button from '../../Base/Button/Index';
import Modal from '../../Shared/Modal/Index';
import styles from './styles.module.css'; import styles from './styles.module.css';
const Index = ({ onConfirm }) => { const Index = ({ onConfirm, onCancel }) => {
return ( return (
<> <Modal>
<h2 className={styles['modal-title']}>Confirm Your Selection</h2> <h2 className={styles['modal-title']}>Confirm Your Selection</h2>
<p className={styles['modal-title']}> <p className={styles['modal-title']}>
Please confirm to proceed with your booking. Please confirm to proceed with your booking.
</p> </p>
<div className={styles['btn-wrapper']}> <div className={styles['btn-wrapper']}>
<Button size={'md'} onClick={onCancel}>
Cancel
</Button>
<Button size={'md'} onClick={onConfirm}> <Button size={'md'} onClick={onConfirm}>
Confirm Confirm
</Button> </Button>
</div> </div>
</> </Modal>
); );
}; };
......
src/components/TopLevel/ConfirmSeatContent/styles.module.css
.btn-wrapper { .btn-wrapper {
display: flex; display: flex;
gap: 1rem; gap: 1rem;
margin: 1rem 0; /* margin: 1rem 0; */
flex-direction: column; justify-content: end;
} }
.modal-title { .modal-title {
......
src/components/TopLevel/SeatSelectionContent/Index.jsx
import Input from '../../Base/Input/Index'; import Input from '../../Base/Input/Index';
import Button from '../../Base/Button/Index'; import Button from '../../Base/Button/Index';
import Modal from '../../Shared/Modal/Index';
import styles from './styles.module.css'; import styles from './styles.module.css';
const Index = ({ onChange, onConfirm, disabled }) => { const Index = ({ onChange, onConfirm, disabled }) => {
return ( return (
<> <Modal>
<h2 className={styles['modal-title']}>Select Your Seats</h2> <h2 className={styles['modal-title']}>Select Your Seats</h2>
<p className={styles['modal-title']}> <p className={styles['modal-title']}>
Please choose how many seats you'd like to book. Please choose how many seats you'd like to book.
...@@ -22,7 +23,7 @@ const Index = ({ onChange, onConfirm, disabled }) => { ...@@ -22,7 +23,7 @@ const Index = ({ onChange, onConfirm, disabled }) => {
Confirm Confirm
</Button> </Button>
</div> </div>
</> </Modal>
); );
}; };
......
src/components/TopLevel/SuccessModal/Index.jsx 0 → 100644
import Lottie from 'lottie-react';
import animationData from '../../../successSvg.json';
import Modal from '../../Shared/Modal/Index';
import Button from '../../Base/Button/Index';
import styles from './styles.module.css';
const SuccessModal = ({ onConfirm }) => {
return (
<Modal>
<div style={{ height: '300px' }}>
<div className={styles['btn-wrapper']}>
<p>Booked Successfully</p>
</div>
<Lottie
style={{ height: '60%', width: '100%' }}
animationData={animationData}
loop={false}
autoplay={true}
/>
<div className={styles['btn-wrapper']}>
<Button size={'md'} onClick={onConfirm}>
Go Back
</Button>
</div>
</div>
</Modal>
);
};
export default SuccessModal;
src/components/TopLevel/SuccessModal/styles.module.css 0 → 100644
.btn-wrapper {
display: flex;
justify-content: center;
}
src/pages/BookingPage/Index.jsx
...@@ -11,9 +11,9 @@ import { ...@@ -11,9 +11,9 @@ import {
} from '../../lib/api'; } from '../../lib/api';
import BookingWrapper from '../../components/Layout/BookingWrapper/Index'; import BookingWrapper from '../../components/Layout/BookingWrapper/Index';
import Header from '../../components/Layout/Header/Index'; import Header from '../../components/Layout/Header/Index';
import Modal from '../../components/Shared/Modal/Index';
import ConfirmSeatContent from '../../components/TopLevel/ConfirmSeatContent/Index'; import ConfirmSeatContent from '../../components/TopLevel/ConfirmSeatContent/Index';
import SeatSelectionContent from '../../components/TopLevel/SeatSelectionContent/Index'; import SeatSelectionContent from '../../components/TopLevel/SeatSelectionContent/Index';
import SuccessModal from '../../components/TopLevel/SuccessModal/Index';
import Button from '../../components/Base/Button/Index'; import Button from '../../components/Base/Button/Index';
import LegendWrapper from '../../components/TopLevel/LegendWrapper/Index'; import LegendWrapper from '../../components/TopLevel/LegendWrapper/Index';
import img from '../../assets/images/power-button_12080802.png'; import img from '../../assets/images/power-button_12080802.png';
...@@ -33,6 +33,7 @@ const BookingPage = () => { ...@@ -33,6 +33,7 @@ const BookingPage = () => {
const [noOfSeats, setNoOfSeats] = useState(); const [noOfSeats, setNoOfSeats] = useState();
const [buttonState, setButtonState] = useState(true); const [buttonState, setButtonState] = useState(true);
const [modalButtonState, setModalButtonState] = useState(true); const [modalButtonState, setModalButtonState] = useState(true);
const [showSuccessModal, setShowSuccessModal] = useState(false);
useEffect(() => { useEffect(() => {
const fetchSeatSelectionCount = async () => { const fetchSeatSelectionCount = async () => {
const data = await getSeatSelectionCountApi(userId); const data = await getSeatSelectionCountApi(userId);
...@@ -46,288 +47,26 @@ const BookingPage = () => { ...@@ -46,288 +47,26 @@ const BookingPage = () => {
const fetchSelectedSeats = async () => { const fetchSelectedSeats = async () => {
const data = await getSelectedSeatsApi(); const data = await getSelectedSeatsApi();
const currentData = data?.find((e) => e.userid == userId); const currentData = data?.find((e) => e.userid == userId);
setSelectedSeats(data); const structuredData = data.flatMap((user) => user.selected);
const temp = structuredData?.filter(
(e) =>
!currentData?.selected?.some(
(e2) => e2.row === e.row && e2.seat === e.seat
)
);
setSelectedSeats(temp);
setCurrentSeats(currentData?.selected); setCurrentSeats(currentData?.selected);
}; };
const data = [ const data = [
{ ['*', 1, 2, 3, '*', 4, 5, 6, '*'],
row_id: 1, [1, 2, 3, 4, '*', 5, 6, 7, 8],
columnData: [ [1, 2, 3, 4, '*', 5, 6, 7, 8],
{ [1, 2, 3, 4, '*', 5, 6, 7, 8],
id: 0, [1, 2, 3, 4, '*', 5, 6, 7, 8],
status: 'aisle' [1, 2, 3, 4, '*', 5, 6, 7, 8],
}, [1, 2, 3, 4, '*', 5, 6, 7, 8],
{ ['*', 1, 2, 3, '*', 4, 5, 6, '*']
id: 1
},
{
id: 2
},
{
id: 3
},
{
id: 0
},
{
id: 4
},
{
id: 5
},
{
id: 6
},
{
id: 0,
status: 'aisle'
}
]
},
{
row_id: 2,
columnData: [
{
id: 1,
status: 'available'
},
{
id: 2,
status: 'available'
},
{
id: 3,
status: 'available'
},
{
id: 4,
status: 'available'
},
{
id: 0,
status: 'aisle'
},
{
id: 5,
status: 'available'
},
{
id: 6,
status: 'available'
},
{
id: 7,
status: 'available'
},
{
id: 8,
status: 'available'
}
]
},
{
row_id: 3,
columnData: [
{
id: 1
},
{
id: 2
},
{
id: 3
},
{
id: 4
},
{
id: 0
},
{
id: 5
},
{
id: 6
},
{
id: 7
},
{
id: 8
}
]
},
{
row_id: 4,
columnData: [
{
id: 1
},
{
id: 2
},
{
id: 3
},
{
id: 4
},
{
id: 0
},
{
id: 5
},
{
id: 6
},
{
id: 7
},
{
id: 8
}
]
},
{
row_id: 5,
columnData: [
{
id: 1
},
{
id: 2
},
{
id: 3
},
{
id: 4
},
{
id: 0
},
{
id: 5
},
{
id: 6
},
{
id: 7
},
{
id: 8
}
]
},
{
row_id: 6,
columnData: [
{
id: 1
},
{
id: 2
},
{
id: 3
},
{
id: 4
},
{
id: 0
},
{
id: 5
},
{
id: 6
},
{
id: 7
},
{
id: 8
}
]
},
{
row_id: 7,
columnData: [
{
id: 1
},
{
id: 2
},
{
id: 3
},
{
id: 4
},
{
id: 0
},
{
id: 5
},
{
id: 6
},
{
id: 7
},
{
id: 8
}
]
},
{
row_id: 8,
columnData: [
{
id: 0,
status: 'aisle'
},
{
id: 1
},
{
id: 2
},
{
id: 3
},
{
id: 0
},
{
id: 4
},
{
id: 5
},
{
id: 6
},
{
id: 0,
status: 'aisle'
}
]
}
]; ];
const logout = () => { const logout = () => {
...@@ -355,30 +94,12 @@ const BookingPage = () => { ...@@ -355,30 +94,12 @@ const BookingPage = () => {
}; };
const finalCancel = () => { 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); setShowSeatsConfirmationModal(false);
}; };
const onSelectSeats = (rowId, columnId) => { const onSeatRemove = (rowId, columnId) => {
setCurrentSeats((prev) => { setCurrentSeats((prev) => {
const found = prev?.find((e) => e.row === rowId && e.seat === columnId);
let updatedSeats; let updatedSeats;
if (found) {
updatedSeats = prev?.filter( updatedSeats = prev?.filter(
(e) => !(e.row === rowId && e.seat === columnId) (e) => !(e.row === rowId && e.seat === columnId)
); );
...@@ -387,10 +108,14 @@ const BookingPage = () => { ...@@ -387,10 +108,14 @@ const BookingPage = () => {
} else { } else {
setButtonState(true); setButtonState(true);
} }
} else { return updatedSeats;
console.log('INSIDE ELSE', prev?.length, noOfSeats); });
};
const onSeatAdd = (rowId, columnId) => {
setCurrentSeats((prev) => {
let updatedSeats;
if (prev?.length < noOfSeats || !prev?.length) { if (prev?.length < noOfSeats || !prev?.length) {
console.log('INSIDE IF 22');
if (prev) { if (prev) {
updatedSeats = [...prev, { row: rowId, seat: columnId }]; updatedSeats = [...prev, { row: rowId, seat: columnId }];
} else { } else {
...@@ -402,27 +127,19 @@ const BookingPage = () => { ...@@ -402,27 +127,19 @@ const BookingPage = () => {
setButtonState(true); setButtonState(true);
} }
} else { } else {
console.log('INSIDE ELSE 222');
updatedSeats = prev ? [...prev] : []; updatedSeats = prev ? [...prev] : [];
} }
}
return updatedSeats; return updatedSeats;
}); });
}; };
const onSeatsConfirm = () => { const onSeatsConfirm = () => {
setCurrentSeats([...currentSeats]);
setShowSeatsConfirmationModal(true); setShowSeatsConfirmationModal(true);
}; };
const seatsFinal = async () => { const seatsFinal = async () => {
const existingUserSeatMap = selectedSeats?.find((ele) => ele.id == userId);
const fetchData = async () => {
let data = await getSelectedSeatsApi(); let data = await getSelectedSeatsApi();
setSelectedSeats(data); const existingUserSeatMap = data?.find((ele) => ele.id == userId);
};
if (existingUserSeatMap) { if (existingUserSeatMap) {
await editSeatsApi(userId, currentSeats); await editSeatsApi(userId, currentSeats);
} else { } else {
...@@ -433,8 +150,9 @@ const BookingPage = () => { ...@@ -433,8 +150,9 @@ const BookingPage = () => {
}; };
await createSeatApi(info); await createSeatApi(info);
} }
fetchData();
setShowSeatsConfirmationModal(false); setShowSeatsConfirmationModal(false);
fetchSelectedSeats();
setShowSuccessModal(true);
}; };
return ( return (
...@@ -450,8 +168,9 @@ const BookingPage = () => { ...@@ -450,8 +168,9 @@ const BookingPage = () => {
<BookingWrapper <BookingWrapper
seatData={data} seatData={data}
selectedSeats={selectedSeats} selectedSeats={selectedSeats}
onSeatClick={onSelectSeats}
currentSeats={currentSeats} currentSeats={currentSeats}
onSeatRemove={onSeatRemove}
onSeatAdd={onSeatAdd}
/> />
</div> </div>
<div className={styles['btn-wrapper']}> <div className={styles['btn-wrapper']}>
...@@ -461,18 +180,17 @@ const BookingPage = () => { ...@@ -461,18 +180,17 @@ const BookingPage = () => {
</div> </div>
<LegendWrapper /> <LegendWrapper />
{showSeatsModal && ( {showSeatsModal && (
<Modal>
<SeatSelectionContent <SeatSelectionContent
onChange={onModalChange} onChange={onModalChange}
onConfirm={modalClose} onConfirm={modalClose}
disabled={modalButtonState} disabled={modalButtonState}
/> />
</Modal>
)} )}
{showSeatsConfirmationModal && ( {showSeatsConfirmationModal && (
<Modal> <ConfirmSeatContent onConfirm={seatsFinal} onCancel={finalCancel} />
<ConfirmSeatContent onConfirm={seatsFinal} /> )}
</Modal> {showSuccessModal && (
<SuccessModal onConfirm={() => setShowSuccessModal(false)} />
)} )}
</div> </div>
); );
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment