Merge pull request #26 from BlendRush/Imasha_dev_connector

ImashaNawodi · web-flow · commit ab07f1121103 · 2025-09-05T10:36:39.000+05:30
Imasha dev connector
diff --git a/src/App.js b/src/App.js
@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import { useContext } from "react";
 import { Routes, Route, Navigate } from "react-router-dom";
 import HomePage from "./Pages/HomePage.jsx";
 import SignIn from "./Pages/SignIn";
@@ -8,7 +8,7 @@ import ForgotPW from "./Pages/forgot-pw.jsx";
 import Menu from "./Pages/Menu.jsx";
 import Cart from "./Pages/Cart.jsx";
 import Orders from "./Pages/Order.jsx";
-import About from "./Pages/About.jsx"; // Assuming you have an About page
+import About from "./Pages/About.jsx"; 
 import { AuthContext } from "./context/AuthContext.jsx";
 import ResetPW from "./Pages/reset-pw.jsx";
 
@@ -23,17 +23,17 @@ export default function App() {
       <Route path="/register" element={<Register />} />
       <Route path="/forgot-pw" element={<ForgotPW />} />
       <Route path="/reset-pw" element={<ResetPW />} />
+      <Route path="/about" element={<About />} />
+      <Route path="/menu" element={<Menu />} />
 
       {token !== null && token !== "" ? (
         <>
-          <Route path="/menu" element={<Menu />} />
           <Route path="/cart" element={<Cart />} />
           <Route path="/orders" element={<Orders />} />
-          <Route path="/about" element={<About />} />
           <Route path="*" element={<div>Not Found</div>} />
         </>
       ) : (
-        <Route path="*" element={<Navigate to="/sign-in" />} />
+        <Route path="*" element={<Navigate to="/home" />} />
       )}
     </Routes>
   );
diff --git a/src/Component/N-SearchBar.js b/src/Component/N-SearchBar.js
@@ -2,11 +2,13 @@
 import { NavLink, Link, useNavigate } from "react-router-dom";
 import { useNotification } from "../context/NotificationContext";
 import { useCart } from "./CartContext";
+import { getLocalStoragedata } from "../helpers/Storage";
 
 export default function NavBar({ search = "", onSearchChange }) {
   const navigate = useNavigate();
   const { openNotification } = useNotification();
   const { count } = useCart();
+  const token = getLocalStoragedata("token");
   const navLink = ({ isActive }) =>
     [
       "relative inline-flex items-center gap-2 px-3 py-1 rounded-lg",
@@ -104,33 +106,34 @@ export default function NavBar({ search = "", onSearchChange }) {
           {/* Right cluster: Cart (left) + Search (middle) + Logout icon (right) */}
           <div className="flex items-center gap-3">
             {/* Cart (left of search) */}
-            <Link
-              to="/cart"
-              className="relative grid place-items-center rounded-xl border border-white/30 bg-white/60 p-2 hover:bg-white/80 transition"
-              aria-label={`Cart${
-                count ? `, ${count} item${count > 1 ? "s" : ""}` : ""
-              }`}
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="h-6 w-6 text-emerald-700"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="1.8"
+            {token && (
+              <Link
+                to="/cart"
+                className="relative grid place-items-center rounded-xl border border-white/30 bg-white/60 p-2 hover:bg-white/80 transition"
+                aria-label={`Cart${
+                  count ? `, ${count} item${count > 1 ? "s" : ""}` : ""
+                }`}
               >
-                <path d="M6 6h15l-1.5 9h-12z" />
-                <path d="M6 6l-1-3H2" />
-                <circle cx="9" cy="20" r="1.6" />
-                <circle cx="18" cy="20" r="1.6" />
-              </svg>
-              {count > 0 && (
-                <span className="absolute -top-1.5 -right-1.5 grid h-5 min-w-[1.25rem] place-items-center rounded-full bg-emerald-600 px-1.5 text-[11px] font-bold text-white shadow ring-1 ring-white">
-                  {count}
-                </span>
-              )}
-            </Link>
-
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-6 w-6 text-emerald-700"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.8"
+                >
+                  <path d="M6 6h15l-1.5 9h-12z" />
+                  <path d="M6 6l-1-3H2" />
+                  <circle cx="9" cy="20" r="1.6" />
+                  <circle cx="18" cy="20" r="1.6" />
+                </svg>
+                {count > 0 && (
+                  <span className="absolute -top-1.5 -right-1.5 grid h-5 min-w-[1.25rem] place-items-center rounded-full bg-emerald-600 px-1.5 text-[11px] font-bold text-white shadow ring-1 ring-white">
+                    {count}
+                  </span>
+                )}
+              </Link>
+            )}
             {/* Search (middle) */}
             <div className="hidden md:block w-[340px]">
               <div className="relative">
diff --git a/src/Component/NavBar.js b/src/Component/NavBar.js
@@ -1,4 +1,3 @@
-import React from "react";
 import { NavLink } from "react-router-dom";
 import Button from "../Component/Button";
 import { useNavigate } from "react-router-dom";
diff --git a/src/Pages/About.jsx b/src/Pages/About.jsx
@@ -1,7 +1,5 @@
-// src/Pages/About.jsx
-import React from "react";
 import { Link } from "react-router-dom";
-import AboutBg from "../assets/AboutBg.png"; // <-- put your about/background image here
+import AboutBg from "../assets/AboutBg.png";
 
 export default function About() {
   return (
@@ -29,43 +27,50 @@ export default function About() {
         </h1>
 
         <p className="mt-10 text-slate-700">
-          blendRUSH is a small, quality-obsessed juice bar focused on fresh smoothies,
-          cold-pressed juices, and nourishing bowls. We keep it simple: real fruit,
-          real flavor, blended to order—fast.
+          blendRUSH is a small, quality-obsessed juice bar focused on fresh
+          smoothies, cold-pressed juices, and nourishing bowls. We keep it
+          simple: real fruit, real flavor, blended to order—fast.
         </p>
 
         <p className="mt-3 text-slate-700">
-          Our menu is built around seasonal produce, balanced recipes, and feel-good
-          nutrition. Whether you’re post-workout, mid-study, or on the go, we’ve got a
-          cup that matches your vibe.
+          Our menu is built around seasonal produce, balanced recipes, and
+          feel-good nutrition. Whether you’re post-workout, mid-study, or on the
+          go, we’ve got a cup that matches your vibe.
         </p>
 
-        <h2 className="mt-6 text-xl font-bold text-slate-900">What we stand for</h2>
+        <h2 className="mt-6 text-xl font-bold text-slate-900">
+          What we stand for
+        </h2>
         <ul className="mt-2 list-disc pl-5 text-slate-700 space-y-1">
           <li>100% natural ingredients—whole fruit and greens</li>
           <li>No added sugar or syrups; sweetness comes from fruit</li>
           <li>Made-to-order for peak freshness and flavor</li>
           <li>Eco-conscious packaging where possible</li>
         </ul>
 
-        <h2 className="mt-6 text-xl font-bold text-slate-900">Sourcing & sustainability</h2>
+        <h2 className="mt-6 text-xl font-bold text-slate-900">
+          Sourcing & sustainability
+        </h2>
         <p className="mt-2 text-slate-700">
-          We prioritize local markets and seasonal produce when possible, reduce waste
-          with smart prep, and use recyclable/compostable cups where facilities exist.
+          We prioritize local markets and seasonal produce when possible, reduce
+          waste with smart prep, and use recyclable/compostable cups where
+          facilities exist.
         </p>
 
         <div className="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-4 rounded-xl border bg-white p-4">
           <div>
             <h3 className="font-semibold text-slate-900">Hours</h3>
             <p className="text-slate-700 text-sm mt-1">
-              Mon–Fri: 8:00–18:00<br />
+              Mon–Fri: 8:00–18:00
+              <br />
               Sat–Sun: 9:00–17:00
             </p>
           </div>
           <div>
             <h3 className="font-semibold text-slate-900">Contact</h3>
             <p className="text-slate-700 text-sm mt-1">
-              hello@blendrush.example<br />
+              hello@blendrush.example
+              <br />
               +94 71 234 5678
             </p>
           </div>
@@ -93,15 +98,25 @@ export default function About() {
                 <div className="text-base font-extrabold tracking-tight text-emerald-600">
                   blend<span className="text-slate-800">RUSH</span>
                 </div>
-                <p className="text-xs text-slate-500">Fresh. Fast. Fruit-first.</p>
+                <p className="text-xs text-slate-500">
+                  Fresh. Fast. Fruit-first.
+                </p>
               </div>
             </div>
 
             <nav className="text-sm text-slate-700 flex flex-wrap gap-4">
-              <Link className="hover:text-slate-900" to="/home">Home</Link>
-              <Link className="hover:text-slate-900" to="/menu">Menu</Link>
-              <Link className="hover:text-slate-900" to="/orders">Orders</Link>
-              <Link className="hover:text-slate-900" to="/about">About</Link>
+              <Link className="hover:text-slate-900" to="/home">
+                Home
+              </Link>
+              <Link className="hover:text-slate-900" to="/menu">
+                Menu
+              </Link>
+              <Link className="hover:text-slate-900" to="/orders">
+                Orders
+              </Link>
+              <Link className="hover:text-slate-900" to="/about">
+                About
+              </Link>
             </nav>
 
             <div className="text-sm text-slate-600">
diff --git a/src/Pages/Menu.jsx b/src/Pages/Menu.jsx
@@ -6,6 +6,7 @@ import { getMenuService } from "../services/MenuService.jsx";
 import { getLocalStoragedata } from "../helpers/Storage.js";
 import { useNotification } from "../context/NotificationContext.jsx";
 import { useCart } from "../Component/CartContext.jsx";
+import NavBar from "../Component/NavBar.js";
 
 const formatCurrency = (n) => `$${n.toFixed(2)}`;
 
@@ -21,12 +22,13 @@ export default function MenuPage() {
   const [categories, setCategories] = useState([]);
   const { openNotification } = useNotification();
   const serviceURL = process.env.REACT_APP_API_URL;
+  const token = getLocalStoragedata("token");
   const { fetchCart } = useCart();
 
   useEffect(() => {
     fetchMenuItemData();
     fetchCart();
-  }, []);
+  }, [fetchCart]);
 
   const fetchMenuItemData = async () => {
     setLoading(true);
@@ -142,7 +144,11 @@ export default function MenuPage() {
 
       {/* Main content */}
       <div className="relative">
-        <NavSearchBar search={search} onSearchChange={(v) => setSearch(v)} />
+        {token ? (
+          <NavSearchBar search={search} onSearchChange={(v) => setSearch(v)} />
+        ) : (
+          <NavBar />
+        )}
         <main id="menu" className="mx-auto max-w-6xl px-4 pb-24">
           {/* Hero */}
           <section className="mt-8 rounded-2xl bg-emerald-600/90 text-white p-6 md:p-8 flex flex-col md:flex-row items-center gap-6">
@@ -259,12 +265,14 @@ export default function MenuPage() {
                     </div>
 
                     <div className="mt-3 flex items-center justify-between">
-                      <button
-                        onClick={() => handleAdd(item)}
-                        className="rounded-xl bg-emerald-600 text-white px-4 py-2 text-sm font-medium hover:bg-emerald-700 active:scale-[0.99] transition"
-                      >
-                        Add
-                      </button>
+                      {token && (
+                        <button
+                          onClick={() => handleAdd(item)}
+                          className="rounded-xl bg-emerald-600 text-white px-4 py-2 text-sm font-medium hover:bg-emerald-700 active:scale-[0.99] transition"
+                        >
+                          Add
+                        </button>
+                      )}
 
                       <details>
                         <summary className="cursor-pointer text-sm text-emerald-700 hover:underline">
diff --git a/src/Pages/Register.jsx b/src/Pages/Register.jsx
@@ -1,5 +1,4 @@
-// src/Pages/Register.jsx
-import React, { useRef, useState, useEffect, useContext } from "react";
+import { useRef, useState, useEffect, useContext } from "react";
 import signupBg from "../assets/signup.png";
 import { Form, Input, Checkbox, Button, Typography, Modal } from "antd";
 import { MailOutlined, LockOutlined } from "@ant-design/icons";
@@ -90,7 +89,22 @@ export default function Register() {
       className="relative min-h-screen bg-cover bg-center flex items-center justify-center"
       style={{ backgroundImage: `url(${signupBg})` }}
     >
-      {/* CARD — centered, then nudged DOWN to sit inside the monitor */}
+      <div className="absolute top-6 left-64">
+        <Button
+          type="link"
+          className="!text-white !font-semibold"
+          onClick={() => navigate("/home")}
+        >
+          <span className="inline-grid place-items-center h-9 w-9 rounded-xl bg-emerald-500 text-white font-black">
+            bR
+          </span>
+          <div className="leading-tight">
+            <div className="text-base font-extrabold tracking-tight text-emerald-600">
+              blend<span className="text-slate-800">RUSH</span>
+            </div>
+          </div>
+        </Button>
+      </div>
       <div
         className="
           bg-white/0 rounded-2xl shadow-xl ring-1 ring-black/5 backdrop-blur
diff --git a/src/Pages/SignIn.jsx b/src/Pages/SignIn.jsx
@@ -1,5 +1,4 @@
-// src/Pages/SignIn.jsx
-import React, { useContext, useState } from "react";
+import { useContext, useState } from "react";
 import signupBg from "../assets/signup.png";
 import { Form, Input, Button, Typography, Checkbox } from "antd";
 import { MailOutlined, LockOutlined, GoogleOutlined } from "@ant-design/icons";
@@ -69,6 +68,23 @@ export default function SignIn() {
       className="relative min-h-screen bg-cover bg-center flex flex-col items-center justify-center px-4"
       style={{ backgroundImage: `url(${signupBg})` }}
     >
+      <div className="absolute top-6 left-64">
+        <Button
+          type="link"
+          className="!text-white !font-semibold"
+          onClick={() => navigate("/home")}
+        >
+          <span className="inline-grid place-items-center h-9 w-9 rounded-xl bg-emerald-500 text-white font-black">
+            bR
+          </span>
+          <div className="leading-tight">
+            <div className="text-base font-extrabold tracking-tight text-emerald-600">
+              blend<span className="text-slate-800">RUSH</span>
+            </div>
+          </div>
+        </Button>
+      </div>
+
       {/* CARD */}
       <div
         className="

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-import React from "react";`
`2`	`1`	`import { NavLink } from "react-router-dom";`
`3`	`2`	`import Button from "../Component/Button";`
`4`	`3`	`import { useNavigate } from "react-router-dom";`