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": [ "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, row: 3,
columnData: [ seat: 2
{
id: 1
},
{
id: 2
},
{
id: 3
},
{
id: 4
},
{
id: 0
},
{
id: 5
},
{
id: 6
},
{
id: 7
},
{
id: 8
}
]
}, },
{ {
row_id: 5, row: 4,
columnData: [ seat: 1
{
id: 1
},
{
id: 2
},
{
id: 3
},
{
id: 4
},
{
id: 0
},
{
id: 5
},
{
id: 6
},
{
id: 7
},
{
id: 8
}
]
}, },
{ {
row_id: 6, row: 4,
columnData: [ seat: 2
{
id: 1
},
{
id: 2
},
{
id: 3
},
{
id: 4
},
{
id: 0
},
{
id: 5
},
{
id: 6
},
{
id: 7
},
{
id: 8
}
]
}, },
{ {
row_id: 7, row: 4,
columnData: [ seat: 3
{
id: 1
},
{
id: 2
},
{
id: 3
},
{
id: 4
},
{
id: 0
},
{
id: 5
},
{
id: 6
},
{
id: 7
},
{
id: 8
}
]
}, },
{ {
row_id: 8, row: 4,
columnData: [ seat: 4
{
id: 0,
status: 'aisle'
},
{
id: 1
},
{
id: 2
},
{
id: 3
},
{
id: 0
},
{
id: 4
},
{
id: 5
},
{
id: 6
},
{
id: 0,
status: 'aisle'
}
]
} }
], ],
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 {
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 ( 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 (
<div
key={`gap-left-${row_index}-${column_index}`}
className={styles['seat-gap']}
/>
);
}
if (
isRightBlock(column_index) &&
column_index === row.columnData.length - 1 &&
(isFirstRow || isLastRow)
) {
return ( return (
<div <div
key={`gap-right-${row_index}-${row_index}`} key={`gap-${row_index}-${column_index}`}
className={styles['seat-gap']} className={styles['seat-gap']}
/> />
); );
} }
if (column_index == aisleIndex) { const seatKey = `${row_index + 1}-${seat}`;
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 const foundInSelectedSeats = selectedSeats?.some(
(e) => e.row === row_index + 1 && e.seat === seat
); );
if (found) {
seatClass += 'current-selected'; if (foundInCurrentSeats) {
} else { seatClass = 'current-selected';
if (selectedBy) { } else if (foundInSelectedSeats) {
seatClass += seatClass = 'selected-by-other';
selectedBy == currentUser ? '' : '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
import Seat from './Seat'; import Seat from './Seat';
export default { export default {
title: 'Component/Layout/BookingWrapper/Seat', title: 'Component/Layout/BookingWrapper/Seat',
component: Seat, component: Seat,
tags: ['autodocs'], tags: ['autodocs'],
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'
}, }
}; };
\ No newline at end of file
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;
}
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