Skip to content

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

Added env, Implemented try catch and code cleanup completed

parent f7dac3cd
Showing with 165 additions and 136 deletions
.env 0 → 100644
VITE_API_URL=http://192.168.1.73:3000
\ No newline at end of file
db.json
{
"users": [
{
"id": "5ebc",
"email": "syedabdul.rahman@krds.com",
"selectionCount": 4
"id": "0b2d",
"email": "syedabdul.rahman@krds.com"
},
{
"id": "45ea",
"email": "abdul@gmail.com",
"selectionCount": 3
"id": "1d58",
"email": "abdul@gmail.com"
},
{
"id": "aafd",
"email": "lucy@gmail.com",
"selectionCount": 4
"id": "42f0",
"email": "lucy@gmail.com"
},
{
"id": "e770",
"email": "new@gmail.com"
}
],
"selectedSeats": [
{
"id": "45ea",
"userid": "45ea",
"id": "0b2d",
"userid": "0b2d",
"selected": [
{
"row": 8,
"seat": 3
"seat": 4
},
{
"row": 8,
"seat": 2
"seat": 5
},
{
"row": 8,
"seat": 1
"seat": 6
}
]
},
{
"id": "5ebc",
"userid": "5ebc",
"id": "1d58",
"userid": "1d58",
"selected": [
{
"row": 6,
"seat": 5
},
{
"row": 6,
"seat": 6
"row": 8,
"seat": 1
},
{
"row": 6,
"seat": 7
"row": 8,
"seat": 2
},
{
"row": 6,
"seat": 8
"row": 8,
"seat": 3
}
]
},
{
"id": "aafd",
"userid": "aafd",
"id": "42f0",
"userid": "42f0",
"selected": [
{
"row": 7,
"seat": 5
"seat": 1
},
{
"row": 7,
"seat": 6
"seat": 2
},
{
"row": 7,
"seat": 7
"seat": 3
},
{
"row": 7,
"seat": 8
"seat": 4
}
]
}
......
src/components/Layout/Header/styles.module.css
......@@ -7,28 +7,31 @@
}
.title {
font-family: "Poppins-Bold";
font-family: 'Poppins-Bold';
color: white;
font-size: 2rem;
}
.screenWrapper {
width: 80%;
width: 50%;
min-width: 300px;
}
@media screen and (min-width: 768px) {
.title {
font-family: "Poppins-Bold";
font-family: 'Poppins-Bold';
color: white;
font-size: 2rem;
}
.screenWrapper {
width: 30%;
width: 30% !important;
max-width: 30%;
min-width: 400px;
}
.title {
font-family: "Poppins-Bold";
font-family: 'Poppins-Bold';
color: white;
font-size: 2rem;
}
......
src/lib/AppConstants.js
export const appConstants = {
API_URL_SEATS: 'http://192.168.1.73:3000/selectedSeats',
API_URL_USERS: 'http://192.168.1.73:3000/users',
USER: 'user',
MODAL: 'modal'
};
......
src/lib/api.js
import { appConstants } from '../lib/AppConstants';
export const login = async (email) => {
const response = await fetch(`${appConstants.API_URL_USERS}`);
const data = await response.json();
const user = data.find((e) => e.email == email);
return user;
try {
const response = await fetch(`${import.meta.env.VITE_API_URL}/users`);
const data = await response.json();
const user = data.find((e) => e.email === email);
return user;
} catch (error) {
console.error('Login error:', error);
throw error;
}
};
export const createUser = async (email) => {
const response = await fetch(`${appConstants.API_URL_USERS}`, {
method: 'POST',
body: JSON.stringify({
email: email
})
});
const data = await response.json();
return data;
try {
const response = await fetch(`${import.meta.env.VITE_API_URL}/users`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ email })
});
const data = await response.json();
return data;
} catch (error) {
console.error('Create user error:', error);
throw error;
}
};
export const getSelectedSeatsApi = async () => {
const response = await fetch(`${appConstants.API_URL_SEATS}`);
const data = await response.json();
return data;
try {
const response = await fetch(
`${import.meta.env.VITE_API_URL}/selectedSeats`
);
const data = await response.json();
return data;
} catch (error) {
console.error('Get selected seats error:', error);
throw error;
}
};
export const editSeatsApi = async (id, body) => {
try {
await fetch(`${appConstants.API_URL_SEATS}/${id}`, {
await fetch(`${import.meta.env.VITE_API_URL}/selectedSeats/${id}`, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json'
......@@ -34,32 +50,22 @@ export const editSeatsApi = async (id, body) => {
body: JSON.stringify({ selected: body })
});
} catch (error) {
console.log(error, 'error');
console.error('Edit seats error:', error);
throw error;
}
};
export const createSeatApi = async (body) => {
await fetch(`${appConstants.API_URL_SEATS}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(body)
});
};
export const saveSeatSelectionCountApi = async (id, count) => {
await fetch(`${appConstants.API_URL_USERS}/${id}`, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ selectionCount: count })
});
};
export const getSeatSelectionCountApi = async (id) => {
const response = await fetch(`${appConstants.API_URL_USERS}/${id}`);
const data = await response.json();
return data ? data : null;
try {
await fetch(`${import.meta.env.VITE_API_URL}/selectedSeats`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(body)
});
} catch (error) {
console.error('Create seat error:', error);
throw error;
}
};
src/lib/localStorage.js
export const setItem = (key, value) => {
localStorage.setItem(key, JSON.stringify(value));
sessionStorage.setItem(key, JSON.stringify(value));
};
export const getItem = (key) => {
const item = localStorage.getItem(key);
const item = sessionStorage.getItem(key);
console.log(item, 'item');
return item ? JSON.parse(item) : null;
};
export const reset = () => {
localStorage.clear();
sessionStorage.clear();
};
src/pages/BookingPage/Index.jsx
......@@ -5,9 +5,7 @@ import { appConstants } from '../../lib/AppConstants';
import {
getSelectedSeatsApi,
editSeatsApi,
createSeatApi,
saveSeatSelectionCountApi,
getSeatSelectionCountApi
createSeatApi
} from '../../lib/api';
import BookingWrapper from '../../components/Layout/BookingWrapper/Index';
import Header from '../../components/Layout/Header/Index';
......@@ -44,27 +42,36 @@ const BookingPage = () => {
const [modalButtonState, setModalButtonState] = useState(true);
const [showSuccessModal, setShowSuccessModal] = useState(false);
useEffect(() => {
const fetchSeatSelectionCount = async () => {
const data = await getSeatSelectionCountApi(userId);
setNoOfSeats(data?.selectionCount);
};
fetchSelectedSeats();
fetchSeatSelectionCount();
setShowSeatsModal(getItem(appConstants.MODAL));
}, []);
const fetchSelectedSeats = async () => {
const data = await getSelectedSeatsApi();
const currentData = data?.find((e) => e.userid == userId);
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);
try {
const data = await getSelectedSeatsApi();
const currentData = data?.find((e) => e.userid == userId);
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);
setNoOfSeats(
currentData?.selected?.length
? currentData?.selected?.length
: noOfSeats
);
} catch (error) {
console.error('Error in fetchSelectedSeats:', error);
setSelectedSeats([]);
setCurrentSeats([]);
setNoOfSeats(noOfSeats);
}
};
const logout = () => {
......@@ -84,9 +91,6 @@ const BookingPage = () => {
const modalClose = () => {
setItem('modal', false);
if (userId && noOfSeats) {
saveSeatSelectionCountApi(userId, noOfSeats);
}
fetchSelectedSeats();
setShowSeatsModal(false);
};
......@@ -136,21 +140,25 @@ const BookingPage = () => {
};
const seatsFinal = async () => {
let data = await getSelectedSeatsApi();
const existingUserSeatMap = data?.find((ele) => ele.id == userId);
if (existingUserSeatMap) {
await editSeatsApi(userId, currentSeats);
} else {
let info = {
id: userId,
userid: userId,
selected: currentSeats
};
await createSeatApi(info);
try {
const data = await getSelectedSeatsApi();
const existingUserSeatMap = data?.find((ele) => ele.id == userId);
if (existingUserSeatMap) {
await editSeatsApi(userId, currentSeats);
} else {
const info = {
id: userId,
userid: userId,
selected: currentSeats
};
await createSeatApi(info);
}
setShowSeatsConfirmationModal(false);
fetchSelectedSeats();
setShowSuccessModal(true);
} catch (error) {
console.error('Error in seatsFinal:', error);
}
setShowSeatsConfirmationModal(false);
fetchSelectedSeats();
setShowSuccessModal(true);
};
const handleSuccessModalConfirm = () => {
......@@ -165,6 +173,7 @@ const BookingPage = () => {
className={styles['logout']}
width={30}
onClick={() => logout()}
title="Logout"
/>
<div className={styles['screen-wrapper']}>
<Header>Choose Seats</Header>
......
src/pages/LoginPage/Index.jsx
import { useNavigate } from 'react-router-dom';
import Login from '../../components/TopLevel/Login/Index';
import { login, createUser, getSeatSelectionCountApi } from '../../lib/api';
import { login, createUser, getSelectedSeatsApi } from '../../lib/api';
import { setItem } from '../../lib/localStorage';
const LoginPage = () => {
const navigate = useNavigate();
const onSubmit = async (email) => {
const userData = await login(email);
const fetchSeatSelectionCount = async (id) => {
const data = await getSeatSelectionCountApi(id);
if (data.selectionCount) {
setItem('modal', false);
try {
const userData = await login(email);
const fetchSeatSelectionCount = async (id) => {
try {
const data = await getSelectedSeatsApi();
const currentData = data?.find((e) => e.userid == id);
if (currentData?.selected?.length > 0) {
setItem('modal', false);
} else {
setItem('modal', true);
}
navigate('/');
} catch (error) {
console.error('Error fetching seat selection count:', error);
}
};
if (userData) {
setItem('user', userData.id);
fetchSeatSelectionCount(userData?.id);
} else {
setItem('modal', true);
const data = await createUser(email);
setItem('user', data.id);
fetchSeatSelectionCount(data?.id);
}
navigate('/');
};
if (userData) {
setItem('user', userData.id);
fetchSeatSelectionCount(userData?.id);
} else {
const data = await createUser(email);
setItem('user', data.id);
fetchSeatSelectionCount(data?.id);
} catch (error) {
console.error('Error during login or user creation:', error);
}
};
......
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