seat layout mobile repsonsive

db.json

@@ -2,9 +2,7 @@
   "users": [
     {
       "mobile": "12345678",
-      "password": "password",
-      "id": 1,
-      "isLogged": true
+      "id": 1
     }
   ],
   "reservedSeats": [

package.json

@@ -20,7 +20,7 @@
     "eject": "react-scripts eject",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "server": "json-server --watch db.json --port 5000"
+    "server": "json-server --watch db.json --port 5000 --host 192.168.1.91"
   },
   "eslintConfig": {
     "extends": [

src/App.js

@@ -4,6 +4,7 @@ import { useEffect } from "react";
 import { _Login } from "../src/pages/login";
 import { _Seatlayout } from "../src/pages/seat-layout";
 import { _Confirmation } from "../src/pages/confirmation";
+import { AuthGuard } from "./auth/index";
 function App() {
   const navigate = useNavigate();
   useEffect(() => {
@@ -14,8 +15,14 @@ function App() {
     <div className="App">
       <Routes>
         <Route path="/" element={<_Login />} />
-        <Route path="/booking/:id" element={<_Seatlayout />} />
-        <Route path="/confirmation" element={<_Confirmation />} />
+        <Route
+          path="/booking/:id"
+          element={<AuthGuard component={_Seatlayout} />}
+        />
+        <Route
+          path="/confirmation"
+          element={<AuthGuard component={_Confirmation} />}
+        />
       </Routes>
     </div>
   );

src/_context/index.js

@@ -5,9 +5,11 @@ export const useAppContext = () => useContext(AppContext);
 
 export function ContextProvider({ children }) {
   const [userseats, setUserSeats] = useState([]);
-  const LoginOrRegister = async ({ mobile, password }) => {
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const LoginOrRegister = async ({ mobile }) => {
     try {
-      const response = await api.LoginOrRegister({ mobile, password });
+      const response = await api.LoginOrRegister({ mobile });
+      setIsLoggedIn(true);
       return response;
     } catch (err) {
       console.log(err.message);
@@ -42,6 +44,7 @@ export function ContextProvider({ children }) {
   };
   const value = {
     userseats,
+    isLoggedIn,
     LoginOrRegister,
     AddOrUpdateSeats,
     GetAllReservedSeats,

src/auth/index.js

+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { useAppContext } from "../_context";
+
+export function AuthGuard({ component: Component, ...props }) {
+  const { isLoggedIn } = useAppContext();
+  const navigate = useNavigate();
+
+  if (!isLoggedIn) {
+    // Redirect to the home page if the user is not logged in
+    navigate("/");
+    return null; // You can return null or another component if needed
+  }
+
+  return <Component {...props} />;
+}

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

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

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

 .confirmation {
   text-align: center;
   padding: 2rem;
-  margin: 2rem;
 }
 
 .confirmation img {
   max-width: 100%;
+  height: 200px;
   margin: 0 auto;
   animation: fadeIn ease 3s;
 }

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

@@ -7,7 +7,7 @@ function Confirmation({ id, seatCount, seats, ...props }) {
   return (
     <Layout title="Booking Confirmed">
       <div className={style.confirmation}>
-        <img src={Image} height={150} width="auto" />
+        <img src={Image} />
         <h3>Seat's Count:{seatCount}</h3>
         <h4>
           Booked Seats:

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

@@ -6,12 +6,12 @@ import styles from "./login.module.css";
 
 function Login({ onSubmit }) {
   const [mobile, setMobile] = useState("");
-  const [password, setPassword] = useState("");
+  // const [password, setPassword] = useState("");
   const handleSubmit = (e) => {
     e.preventDefault();
-    onSubmit({ mobile, password });
+    onSubmit({ mobile });
     setMobile("");
-    setPassword("");
+    //setPassword("");
   };
 
   return (
@@ -20,24 +20,24 @@ function Login({ onSubmit }) {
         <label>Mobile:</label>
         <Input
           placeholder="Enter Mobile"
-          type="text"
+          type="tel"
           required
-          onKeyPress={(event) => {
-            if (!/[0-9]/.test(event.key)) {
-              event.preventDefault();
-            }
-          }}
+          // onKeyPress={(event) => {
+          //   if (!/[0-9]/.test(event.key)) {
+          //     event.preventDefault();
+          //   }
+          // }}
           maxLength={10}
           onChange={(e) => setMobile(e.target.value)}
         />
-        <label>Password:</label>
+        {/* <label>Password:</label>
         <Input
           placeholder="Enter Password"
           required
-          type="text"
+          type="password"
           maxLength={8}
           onChange={(e) => setPassword(e.target.value)}
-        />
+        /> */}
         <Button>Submit</Button>
       </form>
     </Layout>

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

@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
 import Button from "../../Base/button";
 import styles from "./seat-layout.module.css";
 import Seat from "../seat";
-
+import Layout from "../../Base/layout";
 function SeatLayout({
   userId = 1,
   seats,
@@ -37,31 +37,34 @@ function SeatLayout({
     <>
       <div className={styles.container}>
         <h1>Choose Seats</h1>
-        <div className={styles.curve}>
-          <div className={styles["curve-shadow"]}></div>
-        </div>
-        <div className={styles["seat-container"]}>
-          {seats?.map((seat) => (
-            <div className={styles.seat}>
-              {seat?.map((e, i) => (
-                <div className={`${e === 0 ? styles["remove-seats"] : ""}`}>
-                  <Seat
-                    key={e}
-                    seatNo={e}
-                    onChange={() => handleSeats(e)}
-                    status={
-                      selectedseat?.includes(e)
-                        ? "selected"
-                        : reservedSeats?.includes(e)
-                        ? "reserved"
-                        : "available"
-                    }
-                  />
-                </div>
-              ))}
-            </div>
-          ))}
+        <div className="booking">
+          <div className={styles.curve}>
+            <div className={styles["curve-shadow"]}></div>
+          </div>
+          <div className={styles["seat-container"]}>
+            {seats?.map((seat) => (
+              <div className={styles.seat}>
+                {seat?.map((e, i) => (
+                  <div className={`${e === 0 ? styles["remove-seats"] : ""}`}>
+                    <Seat
+                      key={e}
+                      seatNo={e}
+                      onChange={() => handleSeats(e)}
+                      status={
+                        selectedseat?.includes(e)
+                          ? "selected"
+                          : reservedSeats?.includes(e)
+                          ? "reserved"
+                          : "available"
+                      }
+                    />
+                  </div>
+                ))}
+              </div>
+            ))}
+          </div>
         </div>
+
         <Button onClick={handleConfirm} {...props}>
           Confirm
         </Button>

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

@@ -5,12 +5,12 @@
 
 .seat-container {
   position: relative;
-  bottom: 50px;
-  left: 15px;
+  bottom: 20px;
+  left: 5px;
 }
 .seat {
   display: grid;
-  grid-template-columns: repeat(9, 40px);
+  grid-template-columns: repeat(9, 30px);
   grid-template-rows: repeat(8, 5px);
   place-content: center;
 }
@@ -31,6 +31,7 @@
   justify-content: center;
   font-weight: bold;
   color: white;
+  flex-wrap: wrap;
 }
 .seat-status > :is(.available, .reserved, .selected) > div {
   height: 15px;
@@ -57,7 +58,7 @@
 .curve {
   position: relative;
   margin: auto;
-  width: 309px;
+  width: auto;
   height: 100px;
   border: solid 4px #000;
   border-color: #fff transparent transparent transparent;
@@ -65,12 +66,33 @@
 }
 .curve-shadow {
   position: absolute;
-  width: 632px;
-  top: 1px;
-  right: -153px;
-  height: 100px;
+  width: 100%;
+  top: -5px;
+  /* right: -153px; */
+  height: 114px;
   background: linear-gradient(180deg, #fff 0%, #fff 0%, #655ccc 100%);
   opacity: 0.3;
-  border-radius: 100%/100px 100px 0 0;
-  clip-path: polygon(30% 0, 73% 0, 80% 100%, 22% 99%);
+  border-radius: 100%/53px 47px 0 0;
+  clip-path: polygon(5% 0, 95% 0, 100% 86%, 0% 86%);
+}
+
+@media screen and (min-width: 414px) {
+  .seat-container {
+    left: 15px;
+  }
+  .seat {
+    grid-template-columns: repeat(9, 40px);
+  }
+  .curve {
+    width: 309px;
+  }
+
+  .curve-shadow {
+    width: 632px;
+    top: 1px;
+    right: -153px;
+    height: 100px;
+    border-radius: 100%/100px 100px 0 0;
+    clip-path: polygon(30% 0, 73% 0, 80% 100%, 22% 99%);
+  }
 }

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

 import { useState } from "react";
 import styles from "./seat.module.css";
 
-function Seat({ onChange, status, seatNo, ...props }) {
+function Seat({ onChange, status, seatNo }) {
   const [show, setShow] = useState(false);
   const handleCheckbox = () => {
     if (status == "available" || status == "selected") {
@@ -13,29 +13,20 @@ function Seat({ onChange, status, seatNo, ...props }) {
   };
 
   return (
-    <>
-      <div
-        className={styles.tooltip}
-        style={show ? { visibility: "visible" } : {}}
-      >
-        {seatNo}
-        <span className={styles["tooltip-arrow"]} />
-      </div>
-      <input
-        type="checkbox"
-        onChange={handleCheckbox}
-        className={` ${
-          status == "selected"
-            ? styles["checkbox-selected"]
-            : status == "reserved"
-            ? styles["checkbox-reserved"]
-            : styles["checkbox-available"]
-        }`}
-        {...props}
-        onMouseEnter={() => setShow(true)}
-        onMouseLeave={() => setShow(false)}
-      />
-    </>
+    <input
+      type="checkbox"
+      onChange={handleCheckbox}
+      className={` ${
+        status == "selected"
+          ? styles["checkbox-selected"]
+          : status == "reserved"
+          ? styles["checkbox-reserved"]
+          : styles["checkbox-available"]
+      }`}
+      title={seatNo}
+      onMouseEnter={() => setShow(true)}
+      onMouseLeave={() => setShow(false)}
+    />
   );
 }
 

src/lib/api.js

 const BASE_URL = "http://192.168.1.91:5000";
 
-export async function LoginOrRegister({ mobile, password }) {
+export async function LoginOrRegister({ mobile }) {
   try {
     // Attempt to fetch user data
     const response = await fetch(
-      `http://192.168.1.91:5000/users?mobile=${mobile}&password=${password}`
+      `http://192.168.1.91:5000/users?mobile=${mobile}`
     );
     const result = await response.json();
 
@@ -13,7 +13,7 @@ export async function LoginOrRegister({ mobile, password }) {
       const user = await fetch(`${BASE_URL}/users`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ mobile, password, isLogged: true }),
+        body: JSON.stringify({ mobile, isLogged: true }),
       });
       let _userData = [{ ...user }];
       return _userData;
@@ -34,7 +34,6 @@ export async function AddOrUpdateSeats({ userId, seats }) {
     const result = await userSeat.json();
     if (!result.length) {
       //add seat
-      console.log("add");
       const response = await fetch(BASE_URL + "/reservedSeats", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -47,7 +46,6 @@ export async function AddOrUpdateSeats({ userId, seats }) {
       };
     } else {
       //update
-      console.log("update");
       const response = await fetch(
         `http://192.168.1.91:5000/reservedSeats/${userId}`,
         {

src/pages/login.js

@@ -6,8 +6,8 @@ export function _Login() {
 
   const { LoginOrRegister } = useAppContext();
 
-  const handleLogin = async ({ mobile, password }) => {
-    const user = await LoginOrRegister({ mobile, password });
+  const handleLogin = async ({ mobile }) => {
+    const user = await LoginOrRegister({ mobile });
     if (user?.length) {
       navigate(`/booking/${user[0].id}`);
     }