Merge branch 'test' into profile-ui

src/browserRoutes/routes/Routes.tsx

@@ -10,8 +10,6 @@ import Cart from "../../pages/Cart/Cart";
 import Checkout from "../../pages/Checkout/Checkout";
 import { Navigate, createBrowserRouter } from "react-router-dom";
 import ProtectedRoute from "../../pages/Auth/ProtectedRoute";
-import { useSelector } from "react-redux";
-import { RootState } from "../../utils/features/store";
 import Profile from "../../pages/Profile/Profile";
 import TopButton from "../../components/TopButton/TopButton";
 import TermsandConditions from "../../pages/T&C/TermsCond";
@@ -26,10 +24,11 @@ import AddProduct from "../../admin/AddProduct";
 import Login from "../../pages/AdminPage/Login";
 import ResetPassword from "../../pages/Auth/ResetPassword";
 
+
 const Routes = () => {
-  const isAuthenticated = useSelector(
-    (state: RootState) => state?.auth?.isAuthenticated
-  );
+  // const isAuthenticated = useSelector(
+  //   (state: RootState) => state?.auth?.isAuthenticated
+  // );
 
   const isAdmin = useSelector((state: RootState) => state?.auth?.isAdmin)
 
@@ -74,19 +73,27 @@ const Routes = () => {
     {
       path: "/home",
       element: (
-        <ProtectedRoute>
+        <>
           <Layout />
           <TopButton />
-        </ProtectedRoute>
+        </>
       ),
       children: [
         {
           index: true,
           element: <Home />,
         },
+        {
+          path: "login",
+          element: <Auth />,
+        },
         {
           path: "profile",
-          element: <Profile />,
+          element: (
+            <ProtectedRoute>
+              <Profile />
+            </ProtectedRoute>
+          ),
         },
         {
           path: "shop",
@@ -121,8 +128,10 @@ const Routes = () => {
           path: "my-orders",
           element: <MyOrders />,
         },
-      ]
+      ],
+      errorElement: <Error />,
     },
+
     {
       path: "*",
       element: <Error />,

src/components/Floating_Nav.tsx

@@ -25,17 +25,17 @@ function Floatingnav() {
         className="navbar rounded-3xl fixed top-4 w-auto flex justify-center backdrop-filter backdrop-blur-md shadow-2xl max-w-screen-xl"
       >
         <ul className="flex justify-between px-12">
-          <a href="/home">
+          <a href="/">
             <li className="hover:scale-105 duration-75 text-sm hover:font-semibold px-4 rounded-full">
               Home
             </li>
           </a>
-          <a href="/home#Collections">
+          <a href="/#Collections">
             <li className="hover:scale-105 duration-75 text-sm hover:font-semibold px-4 rounded-full">
               Collections
             </li>
           </a>
-          <a href="/home#Products">
+          <a href="/#Products">
             <li className="hover:scale-105 duration-75 text-sm hover:font-semibold px-4 rounded-full">
               Products
             </li>

src/components/Footer.tsx

@@ -189,6 +189,7 @@ export default function NewFooter() {
             <p className="text-xs text-gray-500">
               &copy; 2024. PopShop.com. All rights reserved.
             </p>
+
           </div>
         </div>
       </footer>

src/components/Navbar.tsx

@@ -148,6 +148,74 @@ function Navbar() {
     };
   }, [userName]);
 
+  useEffect(() => {
+    if (!userName) return;
+
+    // Fetch initial cart items count
+    const fetchCartItems = async () => {
+      const { data, error } = await supabase
+        .from("Cart")
+        .select("products")
+        .eq("username", userName);
+
+      console.log("items in cart:  ", data);
+
+      if (error) {
+        console.error("Error fetching cart items:", error);
+      } else {
+        // Assuming products is an array within each row in the Cart table
+        const totalItems = data.reduce(
+          (acc, item) => acc + item.products.length,
+          0
+        );
+        setItemsInCart(totalItems);
+      }
+    };
+
+    fetchCartItems();
+
+    const cartChannel = supabase
+      .channel("cart_updates")
+      .on(
+        "postgres_changes",
+        { event: "INSERT", schema: "public", table: "Cart" },
+        (payload) => {
+          console.log("Insert Change received!", payload);
+          // Assuming payload.new.products is an array of the inserted products
+          const productsCount = payload.new.products
+            ? payload.new.products.length
+            : 0;
+          setItemsInCart((prevCount) => prevCount + productsCount);
+        }
+      )
+      .on(
+        "postgres_changes",
+        { event: "DELETE", schema: "public", table: "Cart" },
+        (payload) => {
+          console.log("Delete Change received!", payload);
+          // Assuming payload.old.products is an array of the deleted products
+          const productsCount = payload.old.products
+            ? payload.old.products.length
+            : 0;
+          setItemsInCart((prevCount) => Math.max(0, prevCount - productsCount));
+        }
+      )
+      .on(
+        "postgres_changes",
+        { event: "UPDATE", schema: "public", table: "Cart" },
+        (payload) => {
+          console.log("Update Change received!", payload);
+          // Fetch the latest cart items on update to ensure consistency
+          fetchCartItems();
+        }
+      )
+      .subscribe();
+
+    return () => {
+      supabase.removeChannel(cartChannel);
+    };
+  }, [userName]);
+
   const toastNotification = (message: string) => {
     toast(message, {
       position: "top-right",
@@ -170,7 +238,7 @@ function Navbar() {
     <>
       <div className="navbar flex justify-between">
         <div className="flex md:ml-16 ml-2">
-          <Link to="/home">
+          <Link to="/">
             <img
               src="/logo.png"
               alt="PopShop Logo"
@@ -253,21 +321,25 @@ function Navbar() {
                 <img src={userInfo?.profilepicture ? userInfo.profilepicture : "/images/winter2.jpg"} />
               </div>
             </div>
+
             {showMenu && (
               <ul
                 tabIndex={0}
                 className="menu menu-sm dropdown-content mt-3 z-[1] p-2 bg-base-100 rounded-box w-52 shadow-2xl"
               >
                 <li onClick={handleCloseMenu}>
-                  <Link to={"/home/profile"} className="justify-between">
-                    {`${userName}` || <p>Profile</p>}
+                  <Link to={"/profile"} className="justify-between">
+                    {userName ? `${userName}` : <p>Profile</p>}
                   </Link>
                 </li>
                 <li onClick={handleCloseMenu}>
-                  <Link to={"/home/shop"}>{<p>Shop</p>}</Link>
+                  <Link to={"/shop"}>{<p>Shop</p>}</Link>
+                </li>
+                <li onClick={handleCloseMenu}>
+                  <Link to={"/shop/cart"}>{<p>Cart</p>}</Link>
                 </li>
                 <li onClick={handleCloseMenu}>
-                  <Link to={"/home/shop/cart"}>{<p>Cart</p>}</Link>
+                  <Link to="/my-orders">{<p>Orders</p>}</Link>
                 </li>
                 <li onClick={handleCloseMenu}>
                   <Link to="/home/my-orders">{<p>Orders</p>}</Link>

src/components/Product.tsx

@@ -9,9 +9,8 @@ interface Data {
 
 function Product({ name, image, price, desc }: Data) {
   const navigate = useNavigate();
-
   const handleNavigate = () => {
-    navigate("/home/shop/product", { state: { name, image, price, desc } });
+    navigate("/shop/product", { state: { name, image, price, desc } });
   };
   return (
     <>
@@ -27,9 +26,7 @@ function Product({ name, image, price, desc }: Data) {
           <h3 className="mt-4 text-sm text-gray-700">{name}</h3>
           <p className="mt-1 text-lg font-medium text-gray-900">₹{price}</p>
         </button>
-
       </div>
-
     </>
   );
 }

src/index.css

@@ -2,6 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
+
 *,
 html,
 body {

src/pages/Auth/Auth.tsx

@@ -13,6 +13,8 @@ import { login } from "../../utils/features/Auth/authSlice";
 import { Slide, toast, TypeOptions } from "react-toastify";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
+import { LuEye, LuEyeOff } from "react-icons/lu";
+
 
 interface USER {
   username: string;
@@ -46,7 +48,9 @@ function Auth() {
     createdAt: new Date().toISOString(),
   });
   const [errors, setErrors] = useState<Record<string, string[]>>({});
-  const [autoFillData, setAutoFillData] = useState<USER | null>(null);
+  const [showPassword, setShowPassword] = useState(false);
+  const [isTyping, setIsTyping] = useState(true);
+  const [autoFillData, setAutoFillData] = useState<USER | null>(null);  // State to store signup data for auto-fill
 
   const formRef = useRef<HTMLFormElement>(null);
 
@@ -57,7 +61,7 @@ function Auth() {
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
     setUserData((prev) => ({ ...prev, [name]: value }));
-    setErrors((prev) => ({ ...prev, [name]: [] }));
+    setErrors((prev) => ({ ...prev, [name]: [] }));  // Clear the error for the specific field
   };
 
   type ToastType = TypeOptions;
@@ -88,6 +92,7 @@ function Auth() {
 
       const hashedPassword = await bcrypt.hash(validateData.password, 10);
 
+
       const { error } = await supabase.from("users").insert([
         {
           username: validateData.username,
@@ -228,7 +233,7 @@ function Auth() {
 
       toastNotification("User LoggedIn !!", "success");
       dispatch(login({ username: validateData.username }));
-      navigate("/home");
+      navigate("/");
     } catch (err) {
       if (err instanceof z.ZodError) {
         const newErrors = err.flatten().fieldErrors;
@@ -242,6 +247,14 @@ function Auth() {
     }
   };
 
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+
+  const handleBlur = () => {
+    setIsTyping(false); 
+  };
+
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     if (isForgotPassword) {
@@ -258,7 +271,7 @@ function Auth() {
       setUserData(autoFillData);
     }
   }, [autoFillData]);
-
+    
   return (
     <>
       <div className="text-mynavy flex md:flex-row-reverse flex-col my-12">
@@ -510,11 +523,13 @@ function Auth() {
                     <input
                       type={isPasswordVisible ? "text" : "password"}
                       id="pass"
+                      type={showPassword || isTyping  ? "text" : "password"}
                       name="pass"
                       placeholder="Enter password"
                       className="mt-2 p-2 w-full placeholder:text-sm border border-[#C4C4C4] rounded-xl shadow focus:border-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-300 transition-colors duration-300"
                       value={userData.pass}
                       onChange={handleInputChange}
+                      onBlur={handleBlur}
                     />
                     <FontAwesomeIcon
                       icon={isPasswordVisible ? faEyeSlash : faEye}
@@ -532,6 +547,17 @@ function Auth() {
                       </ul>
                     )}
 
+                    <button
+                    type="button"
+                    className="absolute inset-y-0 right-0 px-3 flex items-center"
+                    onClick={togglePasswordVisibility}
+                  >
+                    {showPassword ? (
+                      <LuEyeOff className="h-6 w-6 text-gray-700" />
+                    ) : (
+                      <LuEye className="h-6 w-6 text-gray-700" />
+                    )}
+                  </button>
                     {errors.password && (
                       <ul
                         className="px-2 text-xs mt-1"