rating display dynamically

pooranjoyb · Aug 9, 2024 · f0e79aa · f0e79aa
1 parent 1a6d024
commit f0e79aa
Show file tree

Hide file tree

Showing 4 changed files with 287 additions and 261 deletions.
diff --git a/src/Favourite/liked.tsx b/src/Favourite/liked.tsx
@@ -9,6 +9,7 @@ interface LikedProduct {
   price: number;
   desc: string;
   created_at: string;
+  rating: string;
 }
 
 function Liked() {
@@ -19,12 +20,12 @@ function Liked() {
   useEffect(() => {
     const fetchLikedProducts = async () => {
       const { data, error } = await supabase
-        .from('liked_products') // Replace with your table name
-        .select('*');
-
+        .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);
+        setError("Failed to fetch liked products");
+        console.error("Error fetching liked products:", error);
       } else {
         setLikedProducts(data || []);
       }
@@ -56,16 +57,28 @@ function Liked() {
           <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">
+            <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>
+                <h3 className="text-lg font-semibold text-gray-800">
+                  {product.name}
+                </h3>
                 <p className="text-gray-600 mt-2">{product.desc}</p>
-                <p className="text-xl font-bold text-gray-900 mt-2">₹{product.price}</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"

diff --git a/src/components/Product.tsx b/src/components/Product.tsx
@@ -8,54 +8,64 @@ interface Data {
   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 product is liked, add it to Supabase
     if (!liked) {
       const { error } = await supabase
         .from("liked_products")
         .insert([
-          { name, image, price, desc, created_at: new Date().toISOString() }
+          {
+            name,
+            image,
+            price,
+            desc,
+            created_at: new Date().toISOString(),
+            rating
+          }
         ]);
-        if(error){
-          console.error("error inserting product into supabase",error)
-        }
+      if (error) {
+        console.error("Error inserting product into Supabase", error);
+      }
     }
   };
-  return (
-    <>
-      <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="Tall slender porcelain bottle with natural clay textured body and cork stopper."
-              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>
+  return (
+    <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>
   );
 }