liron's pr

src/components/filters/DropDownFilter.tsx

@@ -9,15 +9,16 @@ interface DropDownFilterProps {
   genre: string;
 }
 
-const DropDownFilter: React.FC<DropDownFilterProps> = ({ onClick, isOpen, filterByGenre, genre }) => {
-  const categories: Category[] = [
+export const categories: Category[] = [
     { id: 'All', name: 'All Categories' },
     { id: "men's clothing", name: "Men's Clothing" },
     { id: "women's clothing", name: "Women's Clothing" },
     { id: 'electronics', name: 'Electronics' },
     { id: 'jewelery', name: 'Jewelery' },
   ];
 
+const DropDownFilter: React.FC<DropDownFilterProps> = ({ onClick, isOpen, filterByGenre, genre }) => {
+
   return (
     <div className={`dropdown-wrapper ${isOpen ? 'open' : ''}`}>
       <div

src/components/product-components/Card.tsx

@@ -1,22 +1,25 @@
 import React from 'react';
 import { Product } from '../../types';
+import { categories } from '../filters/DropDownFilter';
 
 interface CardProps {
+  product: Product
 }
 
-const Card: React.FC<CardProps> = () => {
+const Card: React.FC<CardProps> = (props: CardProps) => {
+  const maxRatings = 5
 
   return (
     <div className='product scale-effect'>
       <div className='product-image'>
-        <img />
+        <img src={props.product.image}/>
       </div>
       <div className='product-info'>
-        <h2 className='product-title'></h2>
+        <h2 className='product-title'>{props.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: ${props.product.price}`}</strong></p>
+          <p><strong>{`Rating: ${props.product.rating.rate}/${maxRatings} (${props.product.rating.count} Reviews)`}</strong></p>
+          <p><strong>{`Category:  ${categories.find((category) => category.id == props.product.category)?.name}`}</strong></p>
         </div>
       </div>
     </div>

src/pages/Home.tsx

@@ -1,31 +1,45 @@
 import React, { useState, useEffect } from 'react';
-import axios from 'axios';
+import axios, { all } from 'axios';
 import '../assets/css/common.css';
 import '../assets/css/main.css';
 import Navbar from '../components/ui-elements/Navbar';
 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 InputFilter from '../components/filters/InputFilter';
 
 const Home: React.FC = () => {
   const [allProducts, setAllProducts] = useState<Product[]>([]);
   const [products, setProducts] = useState<Product[]>([]);
   const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
-  const [selectedCategory, setSelectedCategory] = useState<string>('All');
+  const allProductsCategory = "All";
+  const [selectedCategory, setSelectedCategory] = useState<string>(allProductsCategory);
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
+  const baseURL = "https://fakestoreapi.com/products";
 
-//TODO - useEffect + axios
+  useEffect(() => {
+    axios.get(baseURL)
+            .then((response) => {
+              setAllProducts(response.data)
+              setProducts(response.data)
+              setLoading(false)
+            })
+          .catch((error) => {
+            setError(error)
+            setLoading(false)
+          })
+  },[])
 
   const showFilterByCategory = () => {
     setIsDropdownOpen(!isDropdownOpen);
   };
 
-  // TODO - filter products by category - BONUS
   const filterByCategory = (category: string) => {
     setSelectedCategory(category);
-    //TODO - filter products by category
+    const filteredProducts = category === allProductsCategory? allProducts : allProducts.filter((product) => product.category === category)
+    setProducts(filteredProducts)
   };
 
   if (loading) {
@@ -57,7 +71,9 @@ const Home: React.FC = () => {
         <div className='container'>
           <section>
             <div className='products-grid' id='products-list'>
-              {/* TODO - map products */}
+              {products.map((product) => { 
+                return <Card key={product.id} product={product}></Card>
+              })}
             </div>
           </section>
         </div>

src/types.ts

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