Added env, Implemented try catch and code cleanup completed

.env

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