Skip to content

S
Seat-Booking
Commit 45e53639 by Madhankumar
Options

auth guard removed

parent b6d296a7
Showing with 313 additions and 121 deletions
db.json
{
"bookingSeats": [
[
0,
"A1",
"A2",
"A3",
0,
"A4",
"A5",
"A6",
0
],
[
"B1",
"B2",
"B3",
"B4",
0,
"B5",
"B6",
"B7",
"B8"
],
[
"C1",
"C2",
"C3",
"C4",
0,
"C5",
"C6",
"C7",
"C8"
],
[
"D1",
"D2",
"D3",
"D4",
0,
"D5",
"D6",
"D7",
"D8"
],
[
"E1",
"E2",
"E3",
"E4",
0,
"E5",
"E6",
"E7",
"E8"
],
[
"F1",
"F2",
"F3",
"F4",
0,
"F5",
"F6",
"F7",
"F8"
],
[
"G1",
"G2",
"G3",
"G4",
0,
"G5",
"G6",
"G7",
"G8"
],
[
0,
"H1",
"H2",
"H3",
0,
"H4",
"H5",
"H7",
0
]
],
"users": [
{
"mobile": "9999999999",
......@@ -7,23 +97,35 @@
{
"mobile": "9999999998",
"id": 2
},
{
"mobile": "9999999997",
"id": 3
}
],
"reservedSeats": [
{
"seats": [
"D8",
"F7"
"F4"
],
"id": 1
},
{
"seats": [
"F2",
"F3",
"F1"
"H2",
"H3",
"H1"
],
"id": 2
},
{
"seats": [
"G3",
"G2",
"G1",
"G4"
],
"id": 3
}
]
}
\ No newline at end of file
package.json
{
"name": "seat-book",
"version": "0.1.0",
"version": "1.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
......
src/App.js
......@@ -3,7 +3,6 @@ import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import { _Login } from "../src/pages/login";
import { _Seatlayout } from "../src/pages/seat-layout";
import { _Confirmation } from "../src/pages/confirmation";
import { AuthGuard } from "./auth/index";
import { _seatLimit } from "../src/pages/seat-limit";
function App() {
......@@ -12,20 +11,11 @@ function App() {
<Router>
<Routes>
<Route path="/" element={<_Login />} />
<Route
path="/seat-limit"
element={<AuthGuard component={_seatLimit} />}
/>
<Route
path="/booking"
element={<AuthGuard component={_Seatlayout} />}
/>
<Route
path="/confirmation"
element={<AuthGuard component={_Confirmation} />}
/>
<Route path="/seat-limit" element={<_seatLimit />} />
<Route path="/booking" element={<_Seatlayout />} />
<Route path="/confirmation" element={<_Confirmation />} />
{/* Default route */}
<Route path="*" element={_Login} />
<Route path="*" element={<_Login />} />
</Routes>
</Router>
</div>
......
src/_context/index.js
......@@ -6,22 +6,18 @@ export const useAppContext = () => useContext(AppContext);
export function ContextProvider({ children }) {
const [userseats, setUserSeats] = useState([]);
const [seats, setSeats] = useState([]);
const [isLoading, setisLoading] = useState(false);
const LoginOrRegister = async ({ mobile }) => {
try {
const user = await api.GetUserByMobile({ mobile });
if (!user.length) {
//register
const response = await api.Register({ mobile });
return {
response: response,
isRegistered: true,
};
return await response;
} else {
//login
return {
response: user[0],
isRegistered: false,
};
return await user[0];
}
} catch (err) {
toast.error(err.message);
......@@ -46,20 +42,25 @@ export function ContextProvider({ children }) {
}
};
const GetAllSeats = async () => {
setisLoading(false);
try {
//to clear the data for glitch
setUserSeats([]);
const response = await api.GetAllSeats();
setUserSeats(response);
setisLoading(true);
} catch (err) {
toast.error(err.message);
}
};
const GetSeatById = async (id) => {
const GetSeats = async () => {
setisLoading(false);
try {
const response = await api.GetSeatById(id);
return response;
setSeats([]);
const response = await api.GetSeats();
setSeats(response);
setisLoading(true);
} catch (err) {
toast.error(err.message);
}
......@@ -67,10 +68,12 @@ export function ContextProvider({ children }) {
const value = {
userseats,
isLoading,
seats,
LoginOrRegister,
AddOrUpdateSeats,
GetAllSeats,
GetSeatById,
GetSeats,
};
return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
}
src/auth/index.js
......@@ -5,19 +5,22 @@ export function AuthGuard({ component: Component, ...props }) {
const isLogged = sessionStorage.getItem("userId") != null ? true : false;
const navigate = useNavigate();
const location = useLocation();
const currentPath = sessionStorage.getItem("currentPath");
useEffect(() => {
if (!isLogged) {
sessionStorage.clear();
navigate("/");
} else if (isLogged && location.pathname != currentPath) {
navigate(currentPath);
}
}, [isLogged, location.pathname, navigate]);
// const location = useLocation();
// const currentPath = sessionStorage.getItem("currentPath");
// useEffect(() => {
// if (!isLogged) {
// sessionStorage.clear();
// navigate("/");
// } else if (isLogged && location.pathname != currentPath) {
// navigate(currentPath);
// }
// }, [isLogged, location.pathname, navigate]);
// If logged in (session has a value), render the protected component
if (isLogged && location.pathname == currentPath) {
// if (isLogged && location.pathname == currentPath) {
// return <Component {...props} />;
// }
if (isLogged) {
return <Component {...props} />;
}
......
src/components/top-level/confirmation/index.js
......@@ -8,7 +8,7 @@ function Confirmation({ seatCount, seats, onLogOut, onEdit }) {
return (
<Layout title="Booking Confirmed">
<div className={style.confirmation}>
<img src={Image} loading="lazy" />
<img src={Image} loading="lazy" alt="image" />
<span>
Seat's Count:<h4>{seatCount}</h4>
</span>
......
src/components/top-level/seat-layout/index.js
......@@ -11,9 +11,9 @@ function SeatLayout({
selectedSeats,
seatLimit,
onClick,
isLoading,
}) {
const [selectedseat, setSelectedSeat] = useState([...selectedSeats]);
const handleSeats = (seat) => {
if (!selectedseat?.includes(seat) && selectedseat.length < seatLimit) {
setSelectedSeat([...selectedseat, seat]);
......@@ -40,54 +40,64 @@ function SeatLayout({
return (
<>
<div className={styles.container}>
<h1>Choose Seats</h1>
<div className="booking">
<div className={styles.curve}>
<div className={styles["curve-shadow"]}></div>
</div>
<div className={styles["seat-container"]}>
{seats?.map((seat, i) => (
<div key={i} className={styles.seat}>
{seat?.map((e, i) => (
<div
key={i}
className={`${e === 0 ? styles["remove-seats"] : ""}`}
>
<Seat
seatNo={e}
onChange={() => handleSeats(e)}
status={
selectedseat?.includes(e)
? "selected"
: reservedSeats?.includes(e)
? "reserved"
: "available"
}
/>
</div>
))}
</div>
))}
{isLoading && seats?.length ? (
<div className={styles.container}>
<h1>Choose Seats</h1>
<div className="booking">
<div className={styles.curve}>
<div className={styles["curve-shadow"]}></div>
</div>
<div className={styles["seat-container"]}>
{seats?.map((seat, i) => (
<div key={i} className={styles.seat}>
{seat?.map((e, i) => (
<div
key={i}
className={`${e === 0 ? styles["remove-seats"] : ""}`}
>
<Seat
seatNo={e}
onChange={() => handleSeats(e)}
status={
selectedseat?.includes(e)
? "selected"
: reservedSeats?.includes(e)
? "reserved"
: "available"
}
/>
</div>
))}
</div>
))}
</div>
</div>
</div>
<Button onClick={handleConfirm}>Confirm</Button>
<div className={styles["seat-status"]}>
<div className={styles.selected}>
<div></div>
<p>Selected</p>
</div>
<div className={styles.reserved}>
<div></div>
<p>Reserved</p>
</div>
<div className={styles.available}>
<div></div>
<p>Available</p>
<Button onClick={handleConfirm}>Confirm</Button>
<div className={styles["seat-status"]}>
<div className={styles.selected}>
<div></div>
<p>Selected</p>
</div>
<div className={styles.reserved}>
<div></div>
<p>Reserved</p>
</div>
<div className={styles.available}>
<div></div>
<p>Available</p>
</div>
</div>
</div>
</div>
) : (
<div className={styles["loader-container"]}>
<div className={styles["dot"]}></div>
<div className={styles["dot"]}></div>
<div className={styles["dot"]}></div>
<div className={styles["dot"]}></div>
<div className={styles["dot"]}></div>
</div>
)}
</>
);
}
......
src/components/top-level/seat-layout/seat-layout.module.css
......@@ -96,3 +96,46 @@
clip-path: polygon(30% 0, 73% 0, 80% 100%, 22% 99%);
}
}
.loader-container {
display: flex;
}
.loader-container .dot {
width: 15px;
height: 15px;
background-color: white;
border-radius: 50%;
margin: 0 5px;
animation: bounce 1.1s ease infinite;
}
.loader-container .dot:nth-child(1) {
animation-delay: 0s;
}
.loader-container .dot:nth-child(2) {
animation-delay: 0.1s;
}
.loader-container .dot:nth-child(3) {
animation-delay: 0.2s;
}
.loader-container .dot:nth-child(4) {
animation-delay: 0.3s;
}
.loader-container .dot:nth-child(5) {
animation-delay: 0.4s;
}
@keyframes bounce {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-60px);
}
60% {
transform: translateY(25px);
}
}
src/lib/api.js
......@@ -43,6 +43,11 @@ export async function GetAllSeats() {
return await response.json();
}
export async function GetSeats() {
const response = await fetch(`${BASE_URL}/bookingSeats`);
return await response.json();
}
export async function GetUserByMobile({ mobile }) {
const response = await fetch(`${BASE_URL}/users?mobile=${mobile}`);
return await response.json();
......
src/pages/confirmation.js
......@@ -26,8 +26,6 @@ export function _Confirmation() {
const handleModify = (e) => {
e.preventDefault();
//for Auth Guard
sessionStorage.setItem("currentPath", "/booking");
navigate("/booking");
};
......
src/pages/login.js
import { useEffect } from "react";
import { useEffect, useState } from "react";
import { useAppContext } from "../_context";
import Login from "../components/top-level/login";
import { useNavigate } from "react-router-dom";
export function _Login() {
const navigate = useNavigate();
const { LoginOrRegister } = useAppContext();
const { userseats, LoginOrRegister, GetAllSeats } = useAppContext();
const [isLogged, setIsLogged] = useState(false);
useEffect(() => {
sessionStorage.clear();
}, []);
useEffect(() => {
isLogged && handleSeats();
}, [isLogged]);
const handleLogin = async ({ mobile }) => {
//get all seats and then login
const users = await LoginOrRegister({ mobile });
sessionStorage.setItem("userId", users.response.id);
if (users.isRegistered) {
//for Auth Guard
sessionStorage.setItem("currentPath", "/seat-limit");
sessionStorage.setItem("userId", users?.id);
await GetAllSeats();
setIsLogged(true);
};
const handleSeats = async () => {
const id = sessionStorage.getItem("userId");
const userReservedSeats = userseats.filter((e) => e.id == id);
if (!userReservedSeats.length) {
navigate("/seat-limit");
} else {
//for Auth Guard
sessionStorage.setItem("currentPath", "/booking");
navigate("/booking");
sessionStorage.setItem("seatLimit", userReservedSeats[0].seats.length);
navigate("/booking", { state: { seats: userseats } });
}
};
return <Login onSubmit={handleLogin} />;
}
src/pages/seat-layout.js
import { useEffect, useLayoutEffect, useState } from "react";
import { useEffect, useState } from "react";
import SeatLayout from "../components/top-level/seat-layout";
import { useAppContext } from "../_context";
import { useNavigate } from "react-router-dom";
import { bookingSeats } from "./seed";
import { useLocation, useNavigate } from "react-router-dom";
export function _Seatlayout() {
let { userseats, AddOrUpdateSeats, GetAllSeats } = useAppContext();
let { userseats, isLoading, seats, AddOrUpdateSeats, GetAllSeats, GetSeats } =
useAppContext();
const [reservedSeat, setReservedSeat] = useState([]);
const [selectedSeat, setSelectedSeat] = useState([]);
const [seatLimit, setSeatLimit] = useState(0);
const navigate = useNavigate();
const userId = sessionStorage.getItem("userId");
const seatLimit = sessionStorage.getItem("seatLimit");
const location = useLocation();
useEffect(() => {
GetSeats();
if (!location?.state?.seats.length) {
GetAllSeats();
}
const handleBeforeUnload = (event) => {
// Check if the page is about to unload or refresh
if (event.type === "beforeunload") {
navigate("/booking", { replace: true });
}
};
window.addEventListener("beforeunload", handleBeforeUnload);
return () => {
window.removeEventListener("beforeunload", handleBeforeUnload);
};
}, []);
// useEffect(() => {
// GetSeats();
// const handleBeforeUnload = (event) => {
// // Check if the page is about to unload or refresh
// if (event.type === "beforeunload") {
// sessionStorage.setItem("pageload", true);
// }
// };
// window.addEventListener("beforeunload", handleBeforeUnload);
// return () => {
// window.removeEventListener("beforeunload", handleBeforeUnload);
// };
// }, []);
// useEffect(() => {
// const reloadPage = sessionStorage.getItem("pageload");
// reloadPage && GetAllSeats();
// }, []);
useEffect(() => {
handleReservedSeats();
}, [userseats]);
useLayoutEffect(() => {
GetAllSeats();
}, []);
const handleReservedSeats = async () => {
let seatArray = [];
const selectedSeats = await userseats?.find((e) => e.id == userId);
const results = selectedSeats?.seats;
setSelectedSeat(results);
const reservedSeats = userseats?.filter((e) => e.id != userId);
reservedSeats.forEach((element) => {
element.seats.forEach((e) => {
reservedSeats?.forEach((element) => {
element?.seats.forEach((e) => {
seatArray = [...seatArray, e];
setReservedSeat(seatArray);
});
});
const selectedSeats = await userseats?.find((e) => e.id == userId);
const results = selectedSeats?.seats;
setSelectedSeat(results);
const sessionSeatLimit = sessionStorage.getItem("seatLimit");
setTimeout(() => {
sessionStorage.setItem("seatLimit", sessionSeatLimit ?? results?.length);
setSeatLimit(sessionStorage.getItem("seatLimit"));
}, 500);
};
const handleConfirmed = async ({ id, seats }) => {
await AddOrUpdateSeats({ id, seats });
sessionStorage.setItem("currentPath", "/confirmation");
navigate("/confirmation", { state: { seats: seats } });
};
return (
<SeatLayout
isLoading={isLoading}
userId={userId}
seatLimit={seatLimit}
seats={bookingSeats}
seats={seats}
selectedSeats={selectedSeat}
reservedSeats={reservedSeat}
onClick={handleConfirmed}
......
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