code changes

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.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

+
+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);
-}
+export const postUser = async (userData) => {
+  return await axios.post(API_URL, userData);
+};
\ No newline at end of file

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;
 };