Merge pull request #395 from pooranjoyb/dev

Final Merge to Production : GSSoC'2024 🚀

package.json

@@ -25,6 +25,7 @@
     "bcryptjs": "^2.4.3",
     "chart.js": "^4.4.3",
     "cookies-next": "^4.2.1",
+    "font-awesome": "^4.7.0",
     "framer-motion": "^11.2.6",
     "jwt-decode": "^4.0.0",
     "react": "^18.2.0",

src/Favourite/liked.tsx

@@ -0,0 +1,97 @@
+import { useEffect, useState } from "react";
+import { supabase } from "../utils/client"; // Adjust the path as necessary
+import { useNavigate } from "react-router-dom";
+
+interface LikedProduct {
+  id: number;
+  name: string;
+  image: string;
+  price: number;
+  desc: string;
+  created_at: string;
+  rating: string;
+}
+
+function Liked() {
+  const [likedProducts, setLikedProducts] = useState<LikedProduct[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchLikedProducts = async () => {
+      const { data, error } = await supabase
+        .from("liked_products") // Replace with your table name
+        .select("*");
+      console.log("liked", data);
+      if (error) {
+        setError("Failed to fetch liked products");
+        console.error("Error fetching liked products:", error);
+      } else {
+        setLikedProducts(data || []);
+      }
+      setLoading(false);
+    };
+
+    fetchLikedProducts();
+  }, []);
+
+  const navigate = useNavigate();
+
+  const handleAddToCart = (product: LikedProduct) => {
+    navigate("/home/shop/product", { state: product });
+  };
+
+  if (loading) {
+    return <p>Loading...</p>;
+  }
+
+  if (error) {
+    return <p>{error}</p>;
+  }
+
+  return (
+    <div className="p-4">
+      <h1 className="text-2xl font-bold mb-4">Liked Products</h1>
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+        {likedProducts.length === 0 ? (
+          <p>No liked products found.</p>
+        ) : (
+          likedProducts.map((product) => (
+            <div
+              key={product.id}
+              className="relative bg-white border border-gray-300 rounded-lg shadow-lg overflow-hidden"
+            >
+              <img
+                src={product.image}
+                alt={product.name}
+                className="w-full h-64 object-cover"
+              />
+              <div className="p-4">
+                <h3 className="text-lg font-semibold text-gray-800">
+                  {product.name}
+                </h3>
+                <p className="text-gray-600 mt-2">{product.desc}</p>
+                <div className="flex space-x-1">
+                  <p className="text-xl font-bold text-gray-900 mt-2">
+                    ₹{product.price}
+                  </p>{" "}
+                  <span className="bg-mygreen  px-4 py-2 font-bold text-mywhite rounded-md">
+                    {product.rating} ⭐
+                  </span>
+                </div>
+                <button
+                  onClick={() => handleAddToCart(product)}
+                  className="mt-4 px-4 py-2 bg-blue-500 text-white font-bold rounded hover:bg-blue-600 border border-gray-300"
+                >
+                  Add to Cart
+                </button>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Liked;

src/components/Footer.tsx

@@ -150,7 +150,7 @@ export default function NewFooter() {
       </div>
       <footer
         id="Footer"
-        className="text-mynavy mx-auto max-w-screen-xl px-4 my-12 flex flex-wrap items-center gap-8 lg:grid lg:grid-cols-5 max-sm:flex-col"
+        className="text-mynavy mx-auto max-w-screen-xl w-full px-4 mt-12 py-12 flex flex-wrap items-center gap-8 lg:grid lg:grid-cols-5 max-sm:flex-col"
       >
         <div className="lg:col-span-2 h-full w-full p-2 sm:p-0">
           <img

src/components/Navbar.tsx

@@ -285,23 +285,12 @@ function Navbar() {
           </div>
           <div className="lg:hidden">
             <button
-              className="btn btn-ghost btn-circle"
+              className={`btn btn-ghost btn-circle fa ${showHamburgerMenu?'fa-times':'fa-bars'}`}
+              // <i onClick={handleToggleHamburgerMenu}
+              // className={}
               onClick={handleToggleHamburgerMenu}
             >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="h-5 w-5"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  d="M4 6h16M4 12h16m-7 6h7"
-                />
-              </svg>
+
             </button>
           </div>
         </div>

src/components/Product.tsx

@@ -1,36 +1,71 @@
+import { useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { HiHeart } from "react-icons/hi";
+import { supabase } from "../utils/client";
 
 interface Data {
   name: string;
   image: string;
   price: number;
   desc: string;
+  rating: string;
 }
 
-function Product({ name, image, price, desc }: Data) {
+function Product({ name, image, price, desc, rating }: Data) {
   const navigate = useNavigate();
+  const [liked, setLiked] = useState<boolean>(false);
 
   const handleNavigate = () => {
-    navigate("/home/shop/product", { state: { name, image, price, desc } });
+    navigate("/home/shop/product", {
+      state: { name, image, price, desc, rating }
+    });
+    console.log("Product rating ", rating);
   };
+
+  const handleLike = async () => {
+    setLiked(!liked);
+    if (!liked) {
+      const { error } = await supabase
+        .from("liked_products")
+        .insert([
+          {
+            name,
+            image,
+            price,
+            desc,
+            created_at: new Date().toISOString(),
+            rating
+          }
+        ]);
+      if (error) {
+        console.error("Error inserting product into Supabase", error);
+      }
+    }
+  };
+
   return (
-    <>
-      <div className="flex flex-col">
-        <button onClick={handleNavigate}>
-          <div className="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-h-8 xl:aspect-w-7">
-            <img
-              src={image}
-              alt="Tall slender porcelain bottle with natural clay textured body and cork stopper."
-              className="h-[500px] w-full object-cover object-center group-hover:opacity-75 hover:duration-300"
-            />
-          </div>
-          <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 className="flex flex-col">
+      <div
+        className={`relative top-[10%] left-[75%] p-2 z-10 rounded-full ${
+          liked ? "text-red-500" : "text-gray-500"
+        } hover:text-red-500 transition-colors duration-300 cursor-pointer`}
+        onClick={handleLike}
+      >
+        <HiHeart size={24} color={liked ? "red" : "white"} />
       </div>
-
-    </>
+      <button onClick={handleNavigate}>
+        <div className="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-h-8 xl:aspect-w-7">
+          <img
+            src={image}
+            alt={name}
+            className="h-[500px] w-full object-cover object-center"
+          />
+        </div>
+        <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

@@ -1,3 +1,4 @@
+@import 'font-awesome/css/font-awesome.min.css';
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

src/pages/Home/Home.tsx

@@ -242,6 +242,7 @@ function Home() {
                 image={elem.Image_Link}
                 price={elem.Price}
                 name={elem.Name}
+                rating={elem.rating}
               />
             );
           })}

src/pages/Profile/Profile.tsx

@@ -6,6 +6,7 @@ import { useNavigate } from "react-router-dom";
 import Head from "../../components/Head";
 import Loader from "../../components/Loader/Loader";
 import EditProfileModal from "./EditProfileModal";
+import Liked from "../../Favourite/liked";
 
 interface USER {
   username: string;
@@ -66,7 +67,14 @@ function Profile() {
 
       <div className="avatar">
         <div className="w-24 sm:w-80 rounded-full">
-          <img src={userData.profilepicture ? userData.profilepicture : "/images/winter2.jpg"} alt="" />
+          <img
+            src={
+              userData.profilepicture
+                ? userData.profilepicture
+                : "/images/winter2.jpg"
+            }
+            alt=""
+          />
         </div>
       </div>
       <div className="w-full text-center">
@@ -137,8 +145,10 @@ function Profile() {
                 </span>
               </div>
             </div>
+
           </div>
         </div>
+            <Liked />
       </div>
     </div>
   );