seat limit and toaster added

db.json

 {
   "users": [
     {
-      "mobile": "12345678",
-      "id": 1
-    },
-    {
-      "mobile": "123456789",
-      "isLogged": true,
-      "id": 2
-    },
-    {
-      "mobile": "1234567891",
-      "isLogged": true,
-      "id": 3
-    },
-    {
       "mobile": "1234567890",
-      "isLogged": true,
-      "id": 4
+      "id": 1
     }
   ],
   "reservedSeats": [
@@ -25,7 +10,9 @@
       "userId": 1,
       "seats": [
         "D1",
-        "D4"
+        "D4",
+        "D2",
+        "D3"
       ],
       "id": 1
     }

package-lock.json

@@ -16,7 +16,7 @@
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.16.0",
         "react-scripts": "5.0.1",
-        "react-tooltip": "^5.21.5",
+        "react-toastify": "^9.1.3",
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
@@ -2945,6 +2945,7 @@
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz",
       "integrity": "sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==",
+      "dev": true,
       "dependencies": {
         "@floating-ui/utils": "^0.1.3"
       }
@@ -2953,6 +2954,7 @@
       "version": "1.5.3",
       "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
       "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
+      "dev": true,
       "dependencies": {
         "@floating-ui/core": "^1.4.2",
         "@floating-ui/utils": "^0.1.3"
@@ -2974,7 +2976,8 @@
     "node_modules/@floating-ui/utils": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.4.tgz",
-      "integrity": "sha512-qprfWkn82Iw821mcKofJ5Pk9wgioHicxcQMxx+5zt5GSKoqdWvgG5AxVmpmUUjzTLPVSH5auBrhI93Deayn/DA=="
+      "integrity": "sha512-qprfWkn82Iw821mcKofJ5Pk9wgioHicxcQMxx+5zt5GSKoqdWvgG5AxVmpmUUjzTLPVSH5auBrhI93Deayn/DA==",
+      "dev": true
     },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.11",
@@ -10583,11 +10586,6 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.3.tgz",
       "integrity": "sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ=="
     },
-    "node_modules/classnames": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
-      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
-    },
     "node_modules/clean-css": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz",
@@ -10700,6 +10698,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -21549,17 +21555,16 @@
         }
       }
     },
-    "node_modules/react-tooltip": {
-      "version": "5.21.5",
-      "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.21.5.tgz",
-      "integrity": "sha512-ey70qf6pBGi4U6xpyNlZAHobAhlo2dfxmImR2Bzd/DbLTsAYWz3TEaK+RMFuUZMq6hSPRbUHQSkP2rHBq4uFVg==",
+    "node_modules/react-toastify": {
+      "version": "9.1.3",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.1.3.tgz",
+      "integrity": "sha512-fPfb8ghtn/XMxw3LkxQBk3IyagNpF/LIKjOBflbexr2AWxAH1MJgvnESwEwBn9liLFXgTKWgBSdZpw9m4OTHTg==",
       "dependencies": {
-        "@floating-ui/dom": "^1.0.0",
-        "classnames": "^2.3.0"
+        "clsx": "^1.1.1"
       },
       "peerDependencies": {
-        "react": ">=16.14.0",
-        "react-dom": ">=16.14.0"
+        "react": ">=16",
+        "react-dom": ">=16"
       }
     },
     "node_modules/read-cache": {

package.json

@@ -11,6 +11,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.1",
+    "react-toastify": "^9.1.3",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

public/index.html

@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Seat Booking</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

src/_context/index.js

 import { createContext, useContext, useState } from "react";
 import * as api from "../lib/api";
+import { toast } from "react-toastify";
 export const AppContext = createContext();
 export const useAppContext = () => useContext(AppContext);
 
@@ -12,15 +13,14 @@ export function ContextProvider({ children }) {
       setIsLoggedIn(true);
       return response;
     } catch (err) {
-      console.log(err.message);
+      toast.error(err.message);
     }
   };
-  const AddOrUpdateSeats = async ({ userId, seats, bookingId }) => {
+  const AddOrUpdateSeats = async ({ userId, seats }) => {
     try {
       const response = await api.AddOrUpdateSeats({
         userId,
         seats,
-        bookingId,
       });
       if (response.isAddSeat) {
         setUserSeats([...userseats, response.response]);
@@ -31,7 +31,7 @@ export function ContextProvider({ children }) {
         setUserSeats(result);
       }
     } catch (err) {
-      console.log(err.message);
+      toast.error(err.message);
     }
   };
   const GetAllReservedSeats = async () => {
@@ -39,7 +39,7 @@ export function ContextProvider({ children }) {
       const response = await api.GetAllSeats();
       setUserSeats(response);
     } catch (err) {
-      console.log(err.message);
+      toast.error(err.message);
     }
   };
   const value = {

src/components/Base/layout/layout.module.css

@@ -14,7 +14,8 @@
 
 .card {
   display: block;
-  max-width: 30em;
+  min-width: 30em;
+  max-width: 40dvw;
   border-radius: 10px;
   min-height: 15em;
   background-color: white;

src/components/top-level/confirmation/confirmation.module.css

 .confirmation {
   text-align: center;
-  padding: 1.5rem 3rem 1rem 3rem;
-  margin: 1.5rem 3rem 1rem 3rem;
+  padding: 1.5rem 2rem 1rem 2rem;
+  margin: 1.5rem 2rem 1rem 2rem;
 }
 
 .confirmation img {

src/components/top-level/confirmation/confirmation.stories.js

@@ -9,5 +9,6 @@ export default {
 export const confirmation = {
   args: {
     seats: ["A1", "A2", "A3"],
+    seatCount: 3,
   },
 };

src/components/top-level/confirmation/index.js

@@ -3,7 +3,7 @@ import Image from "../../../assets/conform.png";
 import style from "./confirmation.module.css";
 import Button from "../../Base/button";
 
-function Confirmation({ id, seatCount = 3, seats, onEdit, ...props }) {
+function Confirmation({ seatCount, seats, onEdit }) {
   return (
     <Layout title="Booking Confirmed">
       <div className={style.confirmation}>

src/components/top-level/login/index.js

@@ -3,15 +3,17 @@ import Button from "../../Base/button";
 import Input from "../../Base/input";
 import Layout from "../../Base/layout";
 import styles from "./login.module.css";
-
+import { toast } from "react-toastify";
 function Login({ onSubmit }) {
   const [mobile, setMobile] = useState("");
-  // const [password, setPassword] = useState("");
   const handleSubmit = (e) => {
     e.preventDefault();
+    if (mobile.length < 10) {
+      toast.info("mobile should be 10 digits");
+    } else {
       onSubmit({ mobile });
       setMobile("");
-    //setPassword("");
+    }
   };
 
   return (
@@ -30,14 +32,6 @@ function Login({ onSubmit }) {
           maxLength={10}
           onChange={(e) => setMobile(e.target.value)}
         />
-        {/* <label>Password:</label>
-        <Input
-          placeholder="Enter Password"
-          required
-          type="password"
-          maxLength={8}
-          onChange={(e) => setPassword(e.target.value)}
-        /> */}
         <Button>Submit</Button>
       </form>
     </Layout>

src/components/top-level/login/login.module.css

@@ -3,6 +3,7 @@ label {
 }
 form {
   padding: 1.5rem;
+
   > * {
     inset: 0;
     margin: 10px auto;

src/components/top-level/seat-layout/index.js

@@ -4,7 +4,7 @@ import Button from "../../Base/button";
 import styles from "./seat-layout.module.css";
 import Seat from "../seat";
 import Layout from "../../Base/layout";
-
+import { toast } from "react-toastify";
 function SeatLayout({
   seats,
   reservedSeats,
@@ -18,8 +18,10 @@ function SeatLayout({
   const handleSeats = (seat) => {
     if (!selectedseat?.includes(seat) && selectedseat.length < seatLimit) {
       setSelectedSeat([...selectedseat, seat]);
-    } else {
+    } else if (selectedseat?.includes(seat)) {
       setSelectedSeat(selectedseat?.filter((e) => e != seat));
+    } else {
+      toast.info(`Cannot select seat more than ${seatLimit}`);
     }
   };
   useEffect(() => {

src/components/top-level/seatlimit/index.js

@@ -2,6 +2,7 @@ import { useState } from "react";
 import Button from "../../Base/button";
 import Layout from "../../Base/layout";
 import styles from "./seatlimit.module.css";
+import Input from "../../Base/input";
 
 function SeatLimit({ onLimit, ...props }) {
   const [limit, setLimit] = useState(0);
@@ -13,12 +14,17 @@ function SeatLimit({ onLimit, ...props }) {
       <form onSubmit={handleLimit} className={styles["form"]}>
         <div>
           <label>No of seats:</label>
-          <input
-            className={styles.input}
+          <Input
             type="number"
             value={limit}
             onChange={(e) => setLimit(e.target.value)}
           />
+          {/* <input
+            className={styles.input}
+            type="number"
+            value={limit}
+            onChange={(e) => setLimit(e.target.value)}
+          /> */}
         </div>
         <Button {...props}>Book Seats</Button>
       </form>

src/index.js

@@ -5,12 +5,26 @@ import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 import { ContextProvider } from "./_context";
 import { BrowserRouter as Router } from "react-router-dom";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <ContextProvider>
     <Router>
       <App />
     </Router>
+    <ToastContainer
+      position="top-right"
+      autoClose={3000}
+      hideProgressBar={false}
+      newestOnTop={false}
+      closeOnClick
+      rtl={false}
+      pauseOnFocusLoss
+      draggable
+      pauseOnHover
+      theme="colored"
+    />
   </ContextProvider>
 );
 

src/lib/api.js

+import { toast } from "react-toastify";
 const BASE_URL = "http://192.168.1.91:5000";
 
 export async function LoginOrRegister({ mobile }) {
@@ -13,7 +14,7 @@ export async function LoginOrRegister({ mobile }) {
       const user = await fetch(`${BASE_URL}/users`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ mobile, isLogged: true }),
+        body: JSON.stringify({ mobile }),
       });
       let _userData = [{ ...user }];
       return _userData;
@@ -22,7 +23,7 @@ export async function LoginOrRegister({ mobile }) {
       return result;
     }
   } catch (err) {
-    throw err; // Rethrow the error for the caller to handle
+    toast.error(err.message);
   }
 }
 
@@ -62,7 +63,7 @@ export async function AddOrUpdateSeats({ userId, seats }) {
       };
     }
   } catch (err) {
-    throw err;
+    toast.error(err.message);
   }
 }
 
@@ -71,6 +72,6 @@ export async function GetAllSeats() {
     const response = await fetch(BASE_URL + "/reservedSeats");
     return await response.json();
   } catch (err) {
-    throw err;
+    toast.error(err.message);
   }
 }