Skip to content

T
training-seat-booking
Commit 3c447e4f by Manivasagam S
Options

code changes

parent 40192bec
Showing with 107 additions and 41 deletions
src/db.json → db.json
......@@ -14,8 +14,15 @@
"phoneNumber": "9361775481",
"name": "mani",
"reservedSeats": [
"F2",
"B3"
"D2",
"E2",
"A4",
"B8",
"C8",
"D8",
"A5",
"D5",
"D6"
]
},
{
......@@ -180,6 +187,25 @@
"email": "mani@gmail.com",
"phoneNumber": "2134567809",
"reservedSeats": []
},
{
"id": "0f1d",
"name": "mani",
"email": "kani@gmail.com",
"phoneNumber": "3214567891",
"reservedSeats": []
},
{
"id": "9ce4",
"name": "Test",
"email": "test@krds.fr",
"phoneNumber": "9999999999",
"reservedSeats": [
"F5",
"E5",
"E6",
"E7"
]
}
]
}
\ No newline at end of file
package-lock.json
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
......@@ -9,7 +9,8 @@
"lint": "eslint .",
"preview": "vite preview",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"
"build-storybook": "storybook build",
"start:server": "node server.cjs"
},
"dependencies": {
"axios": "^1.9.0",
......@@ -43,7 +44,7 @@
"eslint-plugin-react-refresh": "^0.4.19",
"eslint-plugin-storybook": "^0.12.0",
"globals": "^16.0.0",
"json-server": "^1.0.0-beta.3",
"json-server": "^0.17.3",
"playwright": "^1.52.0",
"prop-types": "^15.8.1",
"storybook": "^8.6.14",
......
server.cjs 0 → 100644
const jsonServer = require('json-server');
const server = jsonServer.create();
const router = jsonServer.router('db.json');
const middlewares = jsonServer.defaults();
server.use(middlewares);
server.use(jsonServer.bodyParser);
server.get('/reserved-seats', (req, res) => {
const users = router.db.get('users').value();
const filtered = users.map(({ id, reservedSeats }) => ({
id,
reservedSeats,
}));
res.json(filtered);
});
server.use(router);
const PORT = 3000;
server.listen(PORT, () => {
console.log(`JSON Server running at http://localhost:${PORT}`);
});
src/Api/Api.js
import axios from "axios";
const API_URL = "http://192.168.1.59:3000/users";
const API_URL = "http://localhost:3000/users";
export const getAllUsers = () => axios.get(API_URL);
export const getReservedSeatsOnly = () =>
axios.get("http://localhost:3000/reserved-seats");
export const getAllUsers = () => axios.get(`${API_URL}`);
export const getUserByPhone = (phoneNumber) =>
axios.get(`${API_URL}?phoneNumber=${phoneNumber}`);
......@@ -10,6 +13,6 @@ export const getUserByPhone = (phoneNumber) =>
export const updateUserReservedSeats = (userId, reservedSeats) =>
axios.patch(`${API_URL}/${userId}`, { reservedSeats });
export const postUser=async(userData)=>{
return await axios.post(API_URL,userData);
}
\ No newline at end of file
export const postUser = async (userData) => {
return await axios.post(API_URL, userData);
};
src/Components/Top-level/Seatselect/Selectseat.jsx
import { useEffect, useState, useRef } from "react";
import { getAllUsers, updateUserReservedSeats } from "@/Api/Api";
import {
getReservedSeatsOnly,
getUserByPhone,
updateUserReservedSeats,
} from "@/Api/Api";
import { Button } from "@/Components/Base/Buttons/Button";
import { Legend } from "@/Components/Top-level/Seat-legend/Legend";
import { SeatLayout } from "@/Components/Top-level/SeatLayout/SeatLayout";
......@@ -11,6 +15,7 @@ import { Modal } from "@/Components/Base/Modal/Modal";
import { SeatSelectForm } from "@/Components/Form/SeatSelectForm/SeatSelectForm";
import { Screen } from "@/Components/Shared/Screen/Screen";
import { AiOutlineLogout } from "react-icons/ai";
import { useNavigate } from "react-router-dom";
export const Selectseat = ({ onLogout }) => {
const [selectedSeats, setSelectedSeats] = useState([]);
......@@ -19,25 +24,30 @@ export const Selectseat = ({ onLogout }) => {
const [seatCount, setSeatCount] = useState(1);
const [availableSeats, setAvailableSeats] = useState(0);
const [showSelect, setShowSelect] = useState(true);
const hasWelcomed = useRef(false);
const navigate = useNavigate();
useEffect(() => {
getAllUsers()
const currentUser = getCurrentUser();
if (!currentUser || !currentUser.phoneNumber) {
toast.error("No user found");
return;
}
getUserByPhone(currentUser.phoneNumber)
.then((res) => {
const users = res.data;
const loggedUser = getCurrentUser();
const totalSeats = 60;
const user = res.data?.[0];
const userReserved = user?.reservedSeats || [];
const currentUser = users.find(
(u) => u.phoneNumber === loggedUser.phoneNumber
return getReservedSeatsOnly().then((response) => {
const allReserved = response.data.flatMap(
(u) => u.reservedSeats || []
);
const userReserved = currentUser?.reservedSeats || [];
const allReserved = users.flatMap((u) => u.reservedSeats || []);
const othersReserved = allReserved.filter(
(seat) => !userReserved.includes(seat)
);
const totalSeats = 60;
setUserSeats(userReserved);
setSelectedSeats(userReserved);
setReservedSeats(othersReserved);
......@@ -45,13 +55,14 @@ export const Selectseat = ({ onLogout }) => {
setAvailableSeats(totalSeats - allReserved.length);
setShowSelect(true);
if (currentUser?.name && !hasWelcomed.current) {
toast.success(`Welcome 😊, ${currentUser.name}`);
if (user?.name && !hasWelcomed.current) {
toast.success(`Welcome 😊, ${user.name}`);
hasWelcomed.current = true;
}
});
})
.catch((err) => {
console.error("Error fetching users", err);
console.error("Error fetching seats", err);
toast.error("Failed to load seat data.");
});
}, []);
......@@ -76,55 +87,51 @@ export const Selectseat = ({ onLogout }) => {
) {
toast.error(
`You unselected ${unselectedMine.length} seat(s), select ${unselectedMine.length} new.`
);
hasWelcomed.current = true;
return;
}
if (selectedSeats.length !== seatCount) {
toast.error(`You must select exactly ${seatCount} seat(s).`);
hasWelcomed.current = true;
return;
}
getAllUsers()
getUserByPhone(user.phoneNumber)
.then((res) => {
const users = res.data;
const currentUser = users.find(
(u) => u.phoneNumber === user.phoneNumber
);
const currentUser = res.data?.[0];
if (!currentUser) {
toast.error("User not found");
return;
}
const latestOthersReserved = users
return getReservedSeatsOnly().then((response) => {
const latestOthersReserved = response.data
.flatMap((u) => u.reservedSeats || [])
.filter((seat) => !currentUser.reservedSeats.includes(seat));
const conflict = selectedSeats.filter((seat) =>
latestOthersReserved.includes(seat)
);
if (conflict.length > 0) {
toast.error(`These seats were just taken: ${conflict.join(", ")}`);
return;
}
return updateUserReservedSeats(currentUser.id, selectedSeats);
});
})
.then((res) => {
if (res) {
toast.success("Seats booked!");
hasWelcomed.current = true;
localStorage.setItem("bookedSeats", JSON.stringify(selectedSeats));
setTimeout(() => window.location.replace("/success"), 1000);
setTimeout(() => navigate("/success"), 1000);
}
})
.catch((err) => {
console.error("Error confirming seats", err);
toast.error("Failed to confirm seats.");
setTimeout(() => window.location.replace("/error"), 1000);
setTimeout(() => navigate("/error"), 1000);
});
};
......
src/Pages/AuthPage.jsx
......@@ -3,16 +3,18 @@ import { SignUp } from "@/Components/Form/SignUp/SignUp";
import { toast } from "react-toastify";
import { Auth } from "@/Components/Auth/Auth.jsx";
import { getUserByPhone,postUser } from "@/Api/Api.js";
import { useNavigate } from "react-router-dom";
export const AuthPage = () => {
const navigate=useNavigate();
const handleLogin = async (phoneNumber) => {
try {
const response = await fetch(`http://192.168.1.59:3000/users?phoneNumber=${phoneNumber}`);
const response = await fetch(`http://localhost:3000/users?phoneNumber=${phoneNumber}`);
const users = await response.json();
if (users.length > 0) {
const user = users[0];
localStorage.setItem("user", JSON.stringify(user));
window.location.replace("/booking");
navigate("/booking");
} else {
toast.warn("User not found. Please register or check the number.");
}
......@@ -30,7 +32,6 @@ const handleSignUp = async (formData) => {
return;
}
// ✅ Check if phone number already exists
const response = await getUserByPhone(formData.phoneNumber);
if (response.data.length > 0) {
toast.warn("📱 Phone number already registered.");
......
src/Pages/BookingPage.jsx
import { Selectseat } from "@/Components/Top-level/Seatselect/Selectseat";
import { logout } from "@/lib/authService";
import { useNavigate } from "react-router-dom";
export const Bookingpage = () => {
const navigate=useNavigate();
const onLogout = () => {
navigate("/");
logout();
};
......
src/Pages/SuccessPage.jsx
......@@ -2,9 +2,11 @@ import { Success } from "@/Components/Top-level/Response/Success/Success";
import { logout } from "@/lib/authService";
import { AiOutlineLogout } from "react-icons/ai";
import "@/index.css";
import { useNavigate } from "react-router-dom";
export const SuccessPage = () => {
const navigate=useNavigate();
const onLogout = () => {
navigate("/");
logout();
};
......
src/lib/authService.js
export const login = async (phoneNumber) => {
const response = await fetch(`http://localhost:3000/users?phoneNumber=${phoneNumber}`);
const users = await response.json();
......@@ -18,6 +19,5 @@ export const getCurrentUser = () => {
export const logout = () => {
localStorage.removeItem("user");
localStorage.removeItem("bookedSeats");
window.location.replace('/');
return;
};
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