From face2c7e8a0da5a621649473f6392e29e9f6a4b8 Mon Sep 17 00:00:00 2001
From: Madhankumar <madhankumar.r@krds.fr>
Date: Thu, 5 Oct 2023 11:42:11 +0530
Subject: [PATCH] seat limit and toaster added
---
db.json | 21 ++++-----------------
package-lock.json | 35 ++++++++++++++++++++---------------
package.json | 1 +
public/index.html | 2 +-
src/_context/index.js | 10 +++++-----
src/components/Base/layout/layout.module.css | 3 ++-
src/components/top-level/confirmation/confirmation.module.css | 4 ++--
src/components/top-level/confirmation/confirmation.stories.js | 1 +
src/components/top-level/confirmation/index.js | 2 +-
src/components/top-level/login/index.js | 20 +++++++-------------
src/components/top-level/login/login.module.css | 1 +
src/components/top-level/seat-layout/index.js | 6 ++++--
src/components/top-level/seatlimit/index.js | 10 ++++++++--
src/index.js | 14 ++++++++++++++
src/lib/api.js | 9 +++++----
15 files changed, 76 insertions(+), 63 deletions(-)
diff --git a/db.json b/db.json
index d8e735c..ff5dbcd 100644
--- a/db.json
+++ b/db.json
@@ -1,23 +1,8 @@
{
"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
}
diff --git a/package-lock.json b/package-lock.json
index 71d2c38..7c5165c 100644
--- a/package-lock.json
+++ b/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": {
diff --git a/package.json b/package.json
index 2fe0631..6642c9d 100644
--- a/package.json
+++ b/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": {
diff --git a/public/index.html b/public/index.html
index aa069f2..69f0a84 100644
--- a/public/index.html
+++ b/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>
diff --git a/src/_context/index.js b/src/_context/index.js
index 63457b5..864b287 100644
--- a/src/_context/index.js
+++ b/src/_context/index.js
@@ -1,5 +1,6 @@
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 = {
diff --git a/src/components/Base/layout/layout.module.css b/src/components/Base/layout/layout.module.css
index 9538217..0580048 100644
--- a/src/components/Base/layout/layout.module.css
+++ b/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;
diff --git a/src/components/top-level/confirmation/confirmation.module.css b/src/components/top-level/confirmation/confirmation.module.css
index a18a568..31e0c2b 100644
--- a/src/components/top-level/confirmation/confirmation.module.css
+++ b/src/components/top-level/confirmation/confirmation.module.css
@@ -1,7 +1,7 @@
.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 {
diff --git a/src/components/top-level/confirmation/confirmation.stories.js b/src/components/top-level/confirmation/confirmation.stories.js
index 316b3ea..a23dcfc 100644
--- a/src/components/top-level/confirmation/confirmation.stories.js
+++ b/src/components/top-level/confirmation/confirmation.stories.js
@@ -9,5 +9,6 @@ export default {
export const confirmation = {
args: {
seats: ["A1", "A2", "A3"],
+ seatCount: 3,
},
};
diff --git a/src/components/top-level/confirmation/index.js b/src/components/top-level/confirmation/index.js
index c3da1cf..4d1c02e 100644
--- a/src/components/top-level/confirmation/index.js
+++ b/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}>
diff --git a/src/components/top-level/login/index.js b/src/components/top-level/login/index.js
index 37a8fd6..145b41b 100644
--- a/src/components/top-level/login/index.js
+++ b/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();
- onSubmit({ mobile });
- setMobile("");
- //setPassword("");
+ if (mobile.length < 10) {
+ toast.info("mobile should be 10 digits");
+ } else {
+ onSubmit({ mobile });
+ setMobile("");
+ }
};
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>
diff --git a/src/components/top-level/login/login.module.css b/src/components/top-level/login/login.module.css
index e629a35..d088773 100644
--- a/src/components/top-level/login/login.module.css
+++ b/src/components/top-level/login/login.module.css
@@ -3,6 +3,7 @@ label {
}
form {
padding: 1.5rem;
+
> * {
inset: 0;
margin: 10px auto;
diff --git a/src/components/top-level/seat-layout/index.js b/src/components/top-level/seat-layout/index.js
index 079be0f..26230d1 100644
--- a/src/components/top-level/seat-layout/index.js
+++ b/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(() => {
diff --git a/src/components/top-level/seatlimit/index.js b/src/components/top-level/seatlimit/index.js
index 6922191..1c725fe 100644
--- a/src/components/top-level/seatlimit/index.js
+++ b/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>
diff --git a/src/index.js b/src/index.js
index 92bf2f3..4e0423a 100644
--- a/src/index.js
+++ b/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>
);
diff --git a/src/lib/api.js b/src/lib/api.js
index 108bec3..8675689 100644
--- a/src/lib/api.js
+++ b/src/lib/api.js
@@ -1,3 +1,4 @@
+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);
}
}
--
libgit2 0.27.0