From 796e991e91356f82917a522e8667756445476539 Mon Sep 17 00:00:00 2001
From: Rachel Shtern <Rachelishteren1@gmail.com>
Date: Sat, 10 Jan 2026 22:44:37 +0200
Subject: [PATCH] Implement products fetch, filter and card rendering

---
 src/components/product-components/Card.tsx | 19 +++++++-----
 src/pages/Home.tsx                         | 36 +++++++++++++++++++++-
 src/types.ts                               | 10 ++++++
 3 files changed, 57 insertions(+), 8 deletions(-)

diff --git a/src/components/product-components/Card.tsx b/src/components/product-components/Card.tsx
index c25aa5f..b66ee86 100644
--- a/src/components/product-components/Card.tsx
+++ b/src/components/product-components/Card.tsx
@@ -1,22 +1,27 @@
 import React from 'react';
 import { Product } from '../../types';
+import { Rating } from '../../types';
 
 interface CardProps {
+image:string;
+title:string;
+price:number;
+rating:number;
+category:string;  
 }
 
-const Card: React.FC<CardProps> = () => {
-
+const Card: React.FC<CardProps> = ({image, title, price, rating, category}) => {
   return (
     <div className='product scale-effect'>
       <div className='product-image'>
-        <img />
+        <img src = {image} alt={title} />
       </div>
       <div className='product-info'>
-        <h2 className='product-title'></h2>
+        <h2 className='product-title'>{title}</h2>
         <div className='product-brief'>
-          <p><strong>Price: </strong></p>
-          <p><strong>Rating: </strong></p>
-          <p><strong>Category: </strong></p>
+          <p><strong>Price: </strong>{price}</p>
+          <p><strong>Rating: </strong>{rating.rate} ({rating.count})</p>
+          <p><strong>Category: </strong>{category}</p>
         </div>
       </div>
     </div>
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 4eff3ea..a611f81 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -17,6 +17,23 @@ const Home: React.FC = () => {
   const [error, setError] = useState<string | null>(null);
 
 //TODO - useEffect + axios
+  useEffect(() => {
+    async function load(){
+      try {
+        setLoading(true);
+        setError(null);
+
+        const res = await axios.get('https://fakestoreapi.com/products');
+     setAllProducts(res.data);
+      setProducts(res.data);
+      } catch (err: any){
+        setError("failed") 
+      }
+      finally{ setLoading(false);}
+    }
+    load();
+  },[])
+
 
   const showFilterByCategory = () => {
     setIsDropdownOpen(!isDropdownOpen);
@@ -25,6 +42,18 @@ const Home: React.FC = () => {
   // TODO - filter products by category - BONUS
   const filterByCategory = (category: string) => {
     setSelectedCategory(category);
+
+    if(category === "All")
+    {
+      setProducts(allProducts);
+      return;
+    }
+
+    const filtered = allProducts.filter(
+    (product) => product.category === category
+  );
+
+  setProducts(filtered);
     //TODO - filter products by category
   };
 
@@ -57,7 +86,12 @@ const Home: React.FC = () => {
         <div className='container'>
           <section>
             <div className='products-grid' id='products-list'>
-              {/* TODO - map products */}
+              {products.map((product) => (<Card key={product.id} 
+              image={product.image} 
+              title={product.title} 
+              price={product.price} 
+              rating={product.price} 
+              category={product.category.category}/>))}
             </div>
           </section>
         </div>
diff --git a/src/types.ts b/src/types.ts
index 1e3d610..9c0c6a6 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,11 +1,21 @@
 export interface Rating {
 //TODO
+ rate : number;
+ count : number
 }
 
 export interface Product {
 //TODO
+id:number;
+title : string;
+price: number;
+description : string;
+image: string;
+rating: Rating;
+category : Category
 }
 
 export interface Category {
 //TODO
+category : string;
 }