storybook seat-limit

.storybook/preview.js

-/** @type { import('@storybook/react').Preview } */
+import { MemoryRouter } from "react-router-dom";
 import "../src/index.css";
+/** @type { import('@storybook/react').Preview } */
+
 const preview = {
   parameters: {
     actions: { argTypesRegex: "^on[A-Z].*" },
@@ -11,5 +13,11 @@ const preview = {
     },
   },
 };
-
+export const decorators = [
+  (Story) => (
+    <MemoryRouter initialEntries={["/"]}>
+      <Story />
+    </MemoryRouter>
+  ),
+];
 export default preview;

db.json

@@ -7,25 +7,14 @@
     {
       "mobile": "9999999999",
       "id": 2
-    }
-  ],
-  "reservedSeats": [
-    {
-      "userId": 1,
-      "seats": [
-        "E1",
-        "E4",
-        "F3"
-      ],
-      "id": 1
     },
     {
-      "userId": 2,
-      "seats": [
-        "C5",
-        "C6"
-      ],
-      "id": 2
+      "mobile": "9999999998",
+      "id": 3
     }
+  
+  ],
+  "reservedSeats": [
+   
   ]
 }
\ No newline at end of file

src/App.js

@@ -28,7 +28,7 @@ function App() {
             element={<AuthGuard component={_seatLimit} />}
           />
           <Route
-            path="/booking/:id"
+            path="/booking/:id/:limit?"
             element={<AuthGuard component={_Seatlayout} />}
           />
           <Route

src/_context/index.js

@@ -6,7 +6,6 @@ export const useAppContext = () => useContext(AppContext);
 
 export function ContextProvider({ children }) {
   const [userseats, setUserSeats] = useState([]);
-
   const LoginOrRegister = async ({ mobile }) => {
     try {
       const response = await api.LoginOrRegister({ mobile });
@@ -16,17 +15,17 @@ export function ContextProvider({ children }) {
       toast.error(err.message);
     }
   };
-  const AddOrUpdateSeats = async ({ userId, seats }) => {
+  const AddOrUpdateSeats = async ({ id, seats }) => {
     try {
       const response = await api.AddOrUpdateSeats({
-        userId,
+        id,
         seats,
       });
       if (response.isAddSeat) {
         setUserSeats([...userseats, response.response]);
       } else {
         const result = userseats.map((e) =>
-          e.userId === userId ? response.response : e
+          e.id === id ? response.response : e
         );
         setUserSeats(result);
       }

src/components/Base/layout/index.js

@@ -3,7 +3,7 @@ import styles from "./layout.module.css";
 function Layout({ title, ...props }) {
   return (
     <div className={styles.card}>
-      <h2 className={styles.header2}>{title}</h2>
+      <h2 className={styles.header}>{title}</h2>
       <div {...props}></div>
     </div>
   );

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

@@ -24,6 +24,7 @@
   padding: 0.3rem;
 }
 
-h2.header2 {
+.header {
   text-align: center;
+  margin: 0.6em;
 }

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

@@ -28,3 +28,7 @@ h3,
 h4 {
   margin: 0.6rem;
 }
+
+.logout {
+  margin: 10px;
+}

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

@@ -3,7 +3,10 @@ import Confirmation from ".";
 export default {
   title: "Top-Level/Confirmation",
   component: Confirmation,
-  argTypes: { onEdit: { action: "onEdit" } },
+  argTypes: {
+    onEdit: { action: "onEdit" },
+    onLogOut: { action: "logout triggered" },
+  },
 };
 
 export const confirmation = {

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

@@ -2,8 +2,9 @@ import Layout from "../../Base/layout";
 import Image from "../../../assets/conform.png";
 import style from "./confirmation.module.css";
 import Button from "../../Base/button";
+import { Link } from "react-router-dom";
 
-function Confirmation({ seatCount, seats, onEdit }) {
+function Confirmation({ seatCount, seats, onLogOut, onEdit }) {
   return (
     <Layout title="Booking Confirmed">
       <div className={style.confirmation}>
@@ -17,6 +18,9 @@ function Confirmation({ seatCount, seats, onEdit }) {
           <h3> {seats.toString()}</h3>
         </span>
         <Button onClick={onEdit}>Modify</Button>
+        <div className={style.logout} onClick={onLogOut}>
+          <Link to="/">LogOut</Link>
+        </div>
       </div>
     </Layout>
   );

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

@@ -2,36 +2,42 @@ import { useState } from "react";
 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";
+import styles from "./login.module.css";
 function Login({ onSubmit }) {
   const [mobile, setMobile] = useState("");
+  const [iserror, setIsError] = useState(false);
   const handleSubmit = (e) => {
     e.preventDefault();
+    console.log("mobile", mobile.length);
     if (mobile.length < 10) {
+      setIsError(true);
+
       toast.info("mobile should be 10 digits");
     } else {
       onSubmit({ mobile });
       setMobile("");
+      setIsError(false);
     }
   };
+  const handleChange = (e) => {
+    setMobile(e.target.value);
+  };
 
   return (
     <Layout title="Login">
-      <form onSubmit={handleSubmit}>
-        <label>Mobile:</label>
+      <form className="form" onSubmit={handleSubmit}>
+        <div>
+          <label className="label">Mobile:</label>
           <Input
             placeholder="Enter Mobile"
             type="tel"
             required
-          onKeyPress={(event) => {
-            if (!/[0-9]/.test(event.key)) {
-              event.preventDefault();
-            }
-          }}
             maxLength={10}
-          onChange={(e) => setMobile(e.target.value)}
+            onChange={handleChange}
           />
+          {iserror && <span>Please enter 10 digits</span>}
+        </div>
         <Button>Submit</Button>
       </form>
     </Layout>

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

-label {
-  color: #6c6a6a;
-}
-form {
-  padding: 1.5rem;
-
-  > * {
-    inset: 0;
-    margin: 10px auto;
-  }
-}
-input[type="number"]::-webkit-inner-spin-button {
-  display: none;
-}
-input[type="number"] {
-  -moz-appearence: textfield;
+span {
+  color: red;
 }

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

@@ -4,8 +4,9 @@ import Button from "../../Base/button";
 import styles from "./seat-layout.module.css";
 import Seat from "../seat";
 import { toast } from "react-toastify";
-import { useLocation } from "react-router-dom";
+
 function SeatLayout({
+  userId,
   seats,
   reservedSeats,
   selectedSeats,
@@ -13,18 +14,15 @@ function SeatLayout({
   onClick,
   ...props
 }) {
-  const location = useLocation();
-  console.log(seatLimit, location.state.seatLimit);
-  const _seatLimit = seatLimit ?? location.state.seatLimit;
   const [selectedseat, setSelectedSeat] = useState([...selectedSeats]);
 
   const handleSeats = (seat) => {
-    if (!selectedseat?.includes(seat) && selectedseat.length < _seatLimit) {
+    if (!selectedseat?.includes(seat) && selectedseat.length < seatLimit) {
       setSelectedSeat([...selectedseat, seat]);
     } else if (selectedseat?.includes(seat)) {
       setSelectedSeat(selectedseat?.filter((e) => e != seat));
     } else {
-      toast.info(`Cannot select seat more than ${_seatLimit}`);
+      toast.info(`Cannot select seat more than ${seatLimit}`);
     }
   };
   useEffect(() => {
@@ -34,11 +32,11 @@ function SeatLayout({
     e.preventDefault();
     //check if already have data then update otherwise create,
     //write code
-    if (!selectedseat.length || selectedseat.length < _seatLimit) {
+    if (!selectedseat.length || selectedseat.length < seatLimit) {
       toast.error(`please select upto ${seatLimit} `);
     } else {
       onClick({
-        userId: parseInt(props.userId),
+        id: parseInt(userId) || 1,
         seats: selectedseat,
       });
     }

src/components/top-level/seatlimit/index.js → src/components/top-level/seat-limit/index.js

 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";
-
+import { toast } from "react-toastify";
 function SeatLimit({ onLimit, ...props }) {
   const [limit, setLimit] = useState(0);
-  const handleLimit = () => {
+  const handleLimit = (e) => {
+    e.preventDefault();
+    if (limit > 0) {
       onLimit({ limit });
+    } else {
+      toast.info("Please enter atleast 1 seat");
+    }
   };
   return (
     <Layout title="How many seats?">
-      <form onSubmit={handleLimit} className={styles["form"]}>
+      <form onSubmit={handleLimit} className="form">
         <div>
-          <label>No of seats:</label>
+          <label className="label">No of seats:</label>
           <Input
             type="number"
             value={limit}
             onChange={(e) => setLimit(e.target.value)}
+            min="1"
+            max="10"
           />
           {/* <input
             className={styles.input}

src/components/top-level/seat-limit/seat-limit.module.css

+/* .label {
+  color: #6c6a6a;
+}
+
+.form > *:not(input) {
+  padding: 17px;
+}
+
+input[type="number"]::-webkit-inner-spin-button {
+  display: none;
+}
+input[type="number"] {
+  -moz-appearence: textfield;
+} */

src/components/top-level/seat-limit/seat-limit.stories.js

+import SeatLimit from ".";
+
+export default {
+  title: "Top-Level/Seat-limit",
+  component: SeatLimit,
+  argTypes: { onLimit: { action: "onLimit" } },
+};
+export const seatlimit = {};

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

-.input {
-  height: 30px;
-  width: 100%;
-}
-.form {
-  padding: 1rem 3rem;
-}
-.form > div {
-  padding: 10px;
-}

src/index.css

@@ -17,3 +17,17 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+.label {
+  color: #6c6a6a;
+}
+
+.form > *:not(input) {
+  padding: 17px;
+}
+input[type="number"]::-webkit-inner-spin-button {
+  display: none;
+}
+input[type="number"] {
+  -moz-appearence: textfield;
+}

src/lib/api.js

@@ -16,29 +16,30 @@ export async function LoginOrRegister({ mobile }) {
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ mobile }),
       });
-      let _userData = [{ ...user }];
-      return _userData;
+
+      return await user.json();
     } else {
       // User data found, return JSON
-      return result;
+      return result?.[0];
     }
   } catch (err) {
     toast.error(err.message);
   }
 }
 
-export async function AddOrUpdateSeats({ userId, seats }) {
+export async function AddOrUpdateSeats({ id, seats }) {
   try {
     const userSeat = await fetch(
-      `http://192.168.1.91:5000/reservedSeats?userId=${userId}`
+      `http://192.168.1.91:5000/reservedSeats/${id}`
     );
     const result = await userSeat.json();
-    if (!result.length) {
+    console.log("oidufuf", result);
+    if (!Object.keys(result).length) {
       //add seat
       const response = await fetch(BASE_URL + "/reservedSeats", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ userId, seats }),
+        body: JSON.stringify({ id, seats }),
       });
       const res = await response.json();
       return {
@@ -47,10 +48,11 @@ export async function AddOrUpdateSeats({ userId, seats }) {
       };
     } else {
       //update
+      console.log("patch");
       const response = await fetch(
-        `http://192.168.1.91:5000/reservedSeats/${userId}`,
+        `http://192.168.1.91:5000/reservedSeats/${id}`,
         {
-          method: "PATCH",
+          method: "PUT",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({ seats }),
         }

src/pages/confirmation.js

@@ -6,11 +6,11 @@ export function _Confirmation() {
   const seatCount = location.state.seatCount;
   const seats = location.state.seats;
   const id = location.state.id;
-  const seatLimit = location.state.seatlimit;
+  const seatLimit = location.state.limit;
   const navigate = useNavigate();
   const handleModify = (e) => {
     e.preventDefault();
-    navigate(`/booking/${id}`, { state: { seatLimit } });
+    navigate(`/booking/${id}/${seatLimit}`);
   };
   return (
     <Confirmation

src/pages/login.js

+import { useEffect, useState } from "react";
 import { useAppContext } from "../_context";
 import Login from "../components/top-level/login";
 import { useNavigate } from "react-router-dom";
 export function _Login() {
   const navigate = useNavigate();
 
-  const { LoginOrRegister } = useAppContext();
-
+  const { userseats, LoginOrRegister, GetAllReservedSeats } = useAppContext();
+  useEffect(() => {
+    GetAllReservedSeats();
+  }, []);
   const handleLogin = async ({ mobile }) => {
-    const user = await LoginOrRegister({ mobile });
-    if (user?.length) {
-      navigate(`/seat-limit/${user[0].id}`);
-      //navigate(`/booking/${user[0].id}`);
+    const users = await LoginOrRegister({ mobile });
+    if (users != null) {
+      const userstate = userseats.filter((e) =>
+        e.id == users.id ? true : false
+      );
+      if (userstate.length) {
+        navigate(`/booking/${userstate[0].id}/${userstate[0].seats.length}`);
+      } else {
+        navigate(`/seat-limit/${users.id}`);
+      }
     }
   };
   return <Login onSubmit={handleLogin} />;

src/pages/seat-layout.js

@@ -4,18 +4,14 @@ import { useAppContext } from "../_context";
 import { useParams } from "react-router-dom";
 import { useNavigate } from "react-router-dom";
 import { bookingSeats } from "./seed";
-import { useLocation } from "react-router-dom";
+
 export function _Seatlayout({ ...props }) {
   const { userseats, AddOrUpdateSeats, GetAllReservedSeats } = useAppContext();
   const [reservedSeat, setReservedSeat] = useState([]);
   const [selectedSeat, setSelectedSeat] = useState([]);
   const navigate = useNavigate();
-  const { id } = useParams();
-  const location = useLocation();
-
-  console.log("seat", bookingSeats);
+  const { id, limit } = useParams();
 
-  const seatlimit = location.state.seatLimit;
   useLayoutEffect(() => {
     GetAllReservedSeats();
   }, []);
@@ -25,32 +21,34 @@ export function _Seatlayout({ ...props }) {
 
   const handleReservedSeats = () => {
     let seatArray = [];
-    const reservedSeats = userseats?.filter((e) => e.userId != id);
+
+    const reservedSeats = userseats?.filter((e) => e.id != id);
+
     reservedSeats.forEach((element) => {
       element.seats.forEach((e) => {
         seatArray = [...seatArray, e];
         setReservedSeat(seatArray);
       });
     });
-    const selectedSeats = userseats?.find((e) => e.userId == id);
+    const selectedSeats = userseats?.find((e) => e.id == id);
     const results = selectedSeats?.seats;
     setSelectedSeat(results);
   };
 
-  const handleConfirmed = async ({ userId, seats }) => {
-    await AddOrUpdateSeats({ userId, seats });
+  const handleConfirmed = async ({ id, seats }) => {
+    await AddOrUpdateSeats({ id, seats });
 
     const count = seats?.length;
 
     navigate("/confirmation", {
-      state: { seatCount: count ?? 0, seats: seats, id, seatlimit },
+      state: { seatCount: count ?? 0, seats: seats, id, limit },
     });
   };
 
   return (
     <SeatLayout
       userId={id}
-      seatLimit={seatlimit}
+      seatLimit={limit}
       seats={bookingSeats}
       selectedSeats={selectedSeat}
       reservedSeats={reservedSeat}

src/pages/seat-limit.js

-import SeatLimit from "../components/top-level/seatlimit";
+import SeatLimit from "../components/top-level/seat-limit";
 import { useParams, useNavigate } from "react-router-dom";
 
 export function _seatLimit() {
@@ -6,7 +6,7 @@ export function _seatLimit() {
   const navigate = useNavigate();
 
   const handleLimit = (e) => {
-    navigate(`/booking/${id}`, { state: { seatLimit: e.limit } });
+    navigate(`/booking/${id}/${e.limit}`);
   };
   return <SeatLimit onLimit={handleLimit} />;
 }