Almog Lavi

src/components/product-components/Card.tsx

@@ -2,21 +2,22 @@ import React from 'react';
 import { Product } from '../../types';
 
 interface CardProps {
+  product: Product
 }
 
-const Card: React.FC<CardProps> = () => {
+const Card: React.FC<CardProps> = ({product}: CardProps) => {
 
   return (
     <div className='product scale-effect'>
       <div className='product-image'>
-        <img />
+        <img src={product.image} />
       </div>
       <div className='product-info'>
         <h2 className='product-title'></h2>
         <div className='product-brief'>
-          <p><strong>Price: </strong></p>
-          <p><strong>Rating: </strong></p>
-          <p><strong>Category: </strong></p>
+          <p><strong>Price: {product.price} </strong></p>
+          <p><strong>Rating: {product.rating.rate} </strong></p>
+          <p><strong>Category: {product.category}</strong></p>
         </div>
       </div>
     </div>

src/main.tsx

@@ -6,8 +6,6 @@ import App from './App'
 const container = document.getElementById('root');
 if (container) {
   createRoot(container).render(
-    <StrictMode>
-      <App />
-    </StrictMode>,
+    <App />
   )
 }

src/pages/Home.tsx

@@ -7,6 +7,7 @@ import DropDownFilter from '../components/filters/DropDownFilter';
 import Loading from '../components/ui-elements/Loading';
 import Card from '../components/product-components/Card';
 import { Product } from '../types';
+import { lookupService } from 'node:dns';
 
 const Home: React.FC = () => {
   const [allProducts, setAllProducts] = useState<Product[]>([]);
@@ -16,16 +17,30 @@ const Home: React.FC = () => {
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
 
-//TODO - useEffect + axios
-
+useEffect(() => {
+  const api = async () => {
+    try{
+      const response = await axios.get('https://fakestoreapi.com/products');
+      setProducts(response.data);
+      setAllProducts(response.data);
+    } catch (error: any){
+      setError(error.message);
+    } finally {
+      setLoading(false);
+    }
+  }
+  api();
+},[])
   const showFilterByCategory = () => {
     setIsDropdownOpen(!isDropdownOpen);
   };
 
-  // TODO - filter products by category - BONUS
   const filterByCategory = (category: string) => {
     setSelectedCategory(category);
-    //TODO - filter products by category
+    if(category === 'All')
+      setProducts(allProducts);
+    else
+      setProducts(allProducts.filter(product =>  product.category === category))
   };
 
   if (loading) {
@@ -57,7 +72,9 @@ const Home: React.FC = () => {
         <div className='container'>
           <section>
             <div className='products-grid' id='products-list'>
-              {/* TODO - map products */}
+              {products.map((product) => {
+                return <Card product = {product} key={product.id}/>
+              })}
             </div>
           </section>
         </div>

src/types.ts

@@ -1,11 +1,19 @@
 export interface Rating {
-//TODO
+    rate: number,
+    count: number
 }
 
 export interface Product {
-//TODO
+    id: number,
+    title: string,
+    price: number,
+    description: string,
+    category: string,
+    image: string,
+    rating: Rating
 }
 
 export interface Category {
-//TODO
+    id: string, 
+    name: string
 }