Skip to content

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

code refactorization completed

parent f860f881
Showing with 239 additions and 747 deletions
db.json
{
"users": [
{
"id": "eba4",
"id": "5ebc",
"email": "syedabdul.rahman@krds.com",
"selectionCount": "3"
"selectionCount": 4
},
{
"id": "eece",
"email": "lucy@gmail.com",
"selectionCount": "4"
},
{
"id": "bd3f",
"id": "45ea",
"email": "abdul@gmail.com",
"selectionCount": "4"
},
{
"id": "fa09",
"email": "test@gmail.com"
"selectionCount": 3
},
{
"id": "da06",
"email": "testing@gmail.com",
"selectionCount": 3
"id": "aafd",
"email": "lucy@gmail.com",
"selectionCount": 4
}
],
"selectedSeats": [
{
"id": "eba4",
"userid": "eba4",
"id": "45ea",
"userid": "45ea",
"selected": [
{
"row": 6,
"seat": 3
"row": 8,
"seat": 1
},
{
"row": 6,
"seat": 4
"row": 8,
"seat": 2
},
{
"row": 5,
"seat": 4
"row": 8,
"seat": 3
}
]
},
{
"id": "eece",
"userid": "eece",
"id": "5ebc",
"userid": "5ebc",
"selected": [
{
"row": 7,
"seat": 1
"row": 6,
"seat": 5
},
{
"row": 7,
"seat": 2
"row": 6,
"seat": 6
},
{
"row": 7,
"seat": 4
"row": 6,
"seat": 7
},
{
"row": 6,
"seat": 2
"row": 5,
"seat": 8
}
]
},
{
"id": "bd3f",
"userid": "bd3f",
"id": "aafd",
"userid": "aafd",
"selected": [
{
"row": 5,
"row": 7,
"seat": 5
},
{
"row": 5,
"row": 7,
"seat": 6
},
{
"row": 5,
"row": 7,
"seat": 7
},
{
"row": 5,
"row": 7,
"seat": 8
}
]
......
package-lock.json
......@@ -8,6 +8,7 @@
"name": "seat-booking",
"version": "0.0.0",
"dependencies": {
"lottie-react": "^2.4.1",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"react-router-dom": "^7.6.2"
......@@ -3919,6 +3920,25 @@
"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": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.3.tgz",
......
package.json
......@@ -12,6 +12,7 @@
"build-storybook": "storybook build"
},
"dependencies": {
"lottie-react": "^2.4.1",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"react-router-dom": "^7.6.2"
......
src/components/Base/Button/styles.module.css
......@@ -26,7 +26,7 @@
}
.md {
padding: 0.6rem 2rem;
padding: 0.5rem 2rem;
font-size: 18px;
}
......
src/components/Layout/BookingWrapper/BookingWrapper.stories.jsx
......@@ -12,300 +12,40 @@ export const Default = {
args: {
selectedSeats: [
{
userid: 1,
selected: [
{ 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: 3,
seat: 1
},
{
row_id: 4,
columnData: [
{
id: 1
},
{
id: 2
},
{
id: 3
},
{
id: 4
},
{
id: 0
},
{
id: 5
},
{
id: 6
},
{
id: 7
},
{
id: 8
}
]
row: 3,
seat: 2
},
{
row_id: 5,
columnData: [
{
id: 1
},
{
id: 2
},
{
id: 3
},
{
id: 4
},
{
id: 0
},
{
id: 5
},
{
id: 6
},
{
id: 7
},
{
id: 8
}
]
row: 4,
seat: 1
},
{
row_id: 6,
columnData: [
{
id: 1
},
{
id: 2
},
{
id: 3
},
{
id: 4
},
{
id: 0
},
{
id: 5
},
{
id: 6
},
{
id: 7
},
{
id: 8
}
]
row: 4,
seat: 2
},
{
row_id: 7,
columnData: [
{
id: 1
},
{
id: 2
},
{
id: 3
},
{
id: 4
},
{
id: 0
},
{
id: 5
},
{
id: 6
},
{
id: 7
},
{
id: 8
}
]
row: 4,
seat: 3
},
{
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'
}
]
row: 4,
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: [
{
row: 3,
......
src/components/Layout/BookingWrapper/Index.jsx
import Seat from './Seat';
import { getItem } from '../../../lib/localStorage';
import styles from './styles.module.css';
const BookingWrapper = ({
onSeatClick,
selectedSeats,
seatData,
currentSeats
currentSeats,
onSeatAdd,
onSeatRemove
}) => {
const aisleIndex = 4;
let currentUser = getItem('user');
const selectedSeatMap = new Map();
const handleSeatClick = (row, seat, status) => {
if (status == 'current-selected') {
onSeatRemove(row, seat);
} else {
onSeatAdd(row, seat);
}
};
selectedSeats?.forEach((user) => {
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 (
<div className={styles['booking-wrapper']}>
<div className={styles['theatre']}>
{seatData?.map((row, row_index) => (
<div className={styles['seat-row']}>
{row.columnData?.map((column, column_index) => {
const isFirstRow = row_index === 0;
const isLastRow = row_index === seatData.length - 1;
if (
isLeftBlock(column_index) &&
column_index === 0 &&
(isFirstRow || isLastRow)
) {
return (
<div
key={`gap-left-${row_index}-${column_index}`}
className={styles['seat-gap']}
/>
);
}
if (
isRightBlock(column_index) &&
column_index === row.columnData.length - 1 &&
(isFirstRow || isLastRow)
) {
<div key={`row-${row_index}`} className={styles['seat-row']}>
{row?.map((seat, column_index) => {
if (seat === '*') {
return (
<div
key={`gap-right-${row_index}-${row_index}`}
key={`gap-${row_index}-${column_index}`}
className={styles['seat-gap']}
/>
);
}
if (column_index == aisleIndex) {
return <div className={styles['aisle']}></div>;
}
const seatKey = `${row_index + 1}-${seat}`;
const seatKey = `${row.row_id}-${column.id}`;
const selectedBy = selectedSeatMap.get(seatKey);
let seatClass = ``;
const found = currentSeats?.find(
(e) => e.row == row.row_id && e.seat == column.id
let seatClass = '';
const foundInCurrentSeats = currentSeats?.find(
(e) => e.row === row_index + 1 && e.seat === seat
);
const foundInSelectedSeats = selectedSeats?.some(
(e) => e.row === row_index + 1 && e.seat === seat
);
if (found) {
seatClass += 'current-selected';
} else {
if (selectedBy) {
seatClass +=
selectedBy == currentUser ? '' : 'selected-by-other';
}
if (foundInCurrentSeats) {
seatClass = 'current-selected';
} else if (foundInSelectedSeats) {
seatClass = 'selected-by-other';
}
return (
<Seat
key={seatKey}
status={seatClass}
id={column.id}
onClick={() => onSeatClick(row.row_id, column.id)}
id={seat}
onClick={() =>
handleSeatClick(row_index + 1, seat, seatClass)
}
/>
);
})}
......
src/components/Layout/BookingWrapper/Seat.jsx
......@@ -2,7 +2,12 @@ import styles from './styles.module.css';
import PropTypes from 'prop-types';
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 = {
......
src/components/Layout/BookingWrapper/Seat.stories.jsx
import Seat from './Seat';
export default {
title: 'Component/Layout/BookingWrapper/Seat',
component: Seat,
tags: ['autodocs'],
argTypes: {
status: {
control: { type: 'select' },
options: ['available', 'reserved', 'selected'],
},
// onClick: {action: "clicked"} ,
title: 'Component/Layout/BookingWrapper/Seat',
component: Seat,
tags: ['autodocs'],
argTypes: {
status: {
control: { type: 'select' },
options: ['available', 'reserved', 'selected']
},
onClick: { action: 'clicked' }
}
};
export const Default = {
args: {
id:2,
status: 'available',
},
};
\ No newline at end of file
args: {
id: 2,
status: 'available'
}
};
src/components/Layout/BookingWrapper/styles.module.css
......@@ -75,11 +75,6 @@
width: 2em;
}
.seat-gap {
width: 2em;
height: 2em;
}
.seat-row {
gap: 15px;
}
......
src/components/Shared/Modal/Modal.stories.jsx
......@@ -7,6 +7,14 @@ export default {
argTypes: {}
};
export const Default = {
args: {}
export const Default = () => {
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 @@
box-sizing: border-box;
min-width: 300px;
min-height: 150px;
/* height: max(150px, 300px); */
/* height: fit-content; */
height: auto;
}
.btn-wrapper {
......
src/components/TopLevel/ConfirmSeatContent/Index.jsx
import Button from '../../Base/Button/Index';
import Modal from '../../Shared/Modal/Index';
import styles from './styles.module.css';
const Index = ({ onConfirm }) => {
const Index = ({ onConfirm, onCancel }) => {
return (
<>
<Modal>
<h2 className={styles['modal-title']}>Confirm Your Selection</h2>
<p className={styles['modal-title']}>
Please confirm to proceed with your booking.
</p>
<div className={styles['btn-wrapper']}>
<Button size={'md'} onClick={onCancel}>
Cancel
</Button>
<Button size={'md'} onClick={onConfirm}>
Confirm
</Button>
</div>
</>
</Modal>
);
};
......
src/components/TopLevel/ConfirmSeatContent/styles.module.css
.btn-wrapper {
display: flex;
gap: 1rem;
margin: 1rem 0;
flex-direction: column;
/* margin: 1rem 0; */
justify-content: end;
}
.modal-title {
......
src/components/TopLevel/SeatSelectionContent/Index.jsx
import Input from '../../Base/Input/Index';
import Button from '../../Base/Button/Index';
import Modal from '../../Shared/Modal/Index';
import styles from './styles.module.css';
const Index = ({ onChange, onConfirm, disabled }) => {
return (
<>
<Modal>
<h2 className={styles['modal-title']}>Select Your Seats</h2>
<p className={styles['modal-title']}>
Please choose how many seats you'd like to book.
......@@ -22,7 +23,7 @@ const Index = ({ onChange, onConfirm, disabled }) => {
Confirm
</Button>
</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;
}
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