Skip to content

implement a async function to get all the products and set categorys … #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Elad-Abutbul wants to merge 3 commits into
base: main
Choose a base branch
from
Open

implement a async function to get all the products and set categorys … #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a788a68
implement a async function to get all the products and set categorys …
Elad-Abutbul Dec 21, 2025
f482571
add a modal
Elad-Abutbul Dec 22, 2025
9918edc
elad abutbul
Elad-Abutbul Dec 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 0 additions & 10 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

48 changes: 44 additions & 4 deletions src/assets/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
padding: 15px;
padding-left: 60px;
font-size: 18px;
font-family: 'Nunito Sans', sans-serif;
font-family: "Nunito Sans", sans-serif;
font-weight: inherit;
outline: none;
border: none;
Expand Down Expand Up @@ -181,7 +181,9 @@
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
background: white;
overflow: hidden;
transition: transform 0.3s linear, box-shadow 0.2s linear, background-color 0.2s linear;
cursor: pointer;
transition: transform 0.3s linear, box-shadow 0.2s linear,
background-color 0.2s linear;
}

.products-grid .product:hover {
Expand All @@ -208,7 +210,45 @@
height: 100%;
object-fit: cover;
}

.modal-container {
position: fixed;
display: flex;
z-index: 10;

@Tamir198 Tamir198 Dec 27, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If this is your only z-index you can have 1m you dont need to have 10, its large starting point

@Elad-Abutbul Elad-Abutbul Dec 27, 2025

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.filters .dropdown-wrapper.open .dropdown-body {
opacity: 1;
visibility: visible;
transform: translateY(0);
z-index: 9;
}

this is why i used z-index 10

width: 100%;
height: 100%;
background-color: var(--faded-gray);
justify-content: center;
align-items: center;
}
.modal {
background-color: var(--gray);
height: 80%;
width: 50%;
display: flex;
padding: 2rem;
border-radius: 2rem;
color: var(--white);
background-blend-mode: multiply;
background-size: cover;
flex-direction: column;
gap: 4rem ;
}
.modal-header {
display: flex;
width: 100%;
justify-content: flex-end;
}
.modal .close {
font-size: 2rem;
cursor: pointer;
}
.modal .modal-content {
display: flex;
flex-direction: column;
height: 50%;
justify-content: space-around;
font-size: 1.1rem;
}
.products-grid .product-info {
position: relative;
padding: 30px 25px;
Expand All @@ -222,4 +262,4 @@
font-size: 16px;
text-transform: capitalize;
margin-bottom: 15px;
}
}
28 changes: 15 additions & 13 deletions src/components/product-components/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,24 @@
import React from 'react';
import { Product } from '../../types';
import React from "react";
import { Product } from "../../types";

interface CardProps {
product: Product;
openModal: (product: Product) => void;
}

const Card: React.FC<CardProps> = () => {

const Card: React.FC<CardProps> = ({ product, openModal }: CardProps) => {
const { image, price, rating, category } = product;
return (
<div className='product scale-effect'>
<div className='product-image'>
<img />
<div className="product scale-effect" onClick={() => openModal(product)}>
<div className="product-image">
<img src={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>
<div className="product-info">
<h2 className="product-title"></h2>
<div className="product-brief">
<p>Price: {price}</p>
<p>Rating:{rating.rate}</p>
<p>Category: {category} </p>
</div>
</div>
</div>
Expand Down
49 changes: 49 additions & 0 deletions src/components/product-components/Modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import React from "react";
import { Product } from "../../types";
import { MODAL_CONSTANTS } from "../../constants/Modal";

interface ModalProps {
product: Product;
closeModal: () => void;
}

const Modal = ({ product, closeModal }: ModalProps) => {

@Tamir198 Tamir198 Dec 27, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Destruct product

const { image, title, category, price, rating } = product;
return (
<div className="modal-container" onClick={closeModal}>

<div
className="modal"
onClick={(e) => e.stopPropagation()}
style={{

@Tamir198 Tamir198 Dec 27, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No inline style, your styles should come from css

backgroundImage: `url(${image})`,
}}
>
<div className="modal-header">
<p className="close" onClick={closeModal}>
{MODAL_CONSTANTS.X}
</p>
</div>
<div className="modal-content">
<p>
{MODAL_CONSTANTS.TITLE} {title}
</p>
<p>
{MODAL_CONSTANTS.CATEGORY} {category}
</p>
<p>
{MODAL_CONSTANTS.PRICE} {price}
</p>
<p>
{MODAL_CONSTANTS.RATING_COUNT} {rating.count}
</p>
<p>
{MODAL_CONSTANTS.RATING_RATE} {rating.rate}
</p>
</div>
</div>
</div>
);
};

export default Modal;
6 changes: 6 additions & 0 deletions src/constants/Home.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export const HOME_CONSTANTS = {
URL_API: "https://fakestoreapi.com/products",
FAILED: "failed",
ALL: "All",
ERROR: "Error:",
}as const;
8 changes: 8 additions & 0 deletions src/constants/Modal.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
export const MODAL_CONSTANTS = {
X: "x",
TITLE: "Title:",
CATEGORY: "Category:",
PRICE: "Price:",
RATING_COUNT: "Rating Count:",
RATING_RATE: "Rating Rate:",
} as const;
3 changes: 3 additions & 0 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
--faded-gray:rgba(124, 124, 124, 0.775);
--gray:rgb(82, 82, 82);
--white:rgb(255, 255, 255);
}

a {
Expand Down
85 changes: 61 additions & 24 deletions src/pages/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,56 @@
import React, { useState, useEffect } from 'react';
import axios 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 React, { useState, useEffect } from "react";
import axios 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 Modal from "../components/product-components/Modal";
import { HOME_CONSTANTS } from "../constants/Home";

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 [selectedCategory, setSelectedCategory] = useState<string>("All");
const [loading, setLoading] = useState<boolean>(true);
const [error, setError] = useState<string | null>(null);

//TODO - useEffect + axios

const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
const [modalProduct, setModalProduct] = useState<Product | null>(null);
useEffect(() => {
const getData = async () => {
try {
const res = await axios.get(HOME_CONSTANTS.URL_API);
setProducts(res.data);
setAllProducts(res.data);
} catch (error) {
setError(HOME_CONSTANTS.FAILED);
} finally {
setLoading(false);
}
};
getData();
}, []);
const showFilterByCategory = () => {
setIsDropdownOpen(!isDropdownOpen);
};

// TODO - filter products by category - BONUS
const openModal = (product: Product): void => {
setIsModalOpen(true);
setModalProduct(product);
};
const closeModal = (): void => {
setIsModalOpen(false);
setModalProduct(null);
};
const filterByCategory = (category: string) => {
setSelectedCategory(category);
//TODO - filter products by category
if (category === HOME_CONSTANTS.ALL) {
setProducts(allProducts);
return;
}
setProducts(allProducts.filter((p) => p.category === category));
};

if (loading) {
Expand All @@ -34,17 +59,21 @@ const Home: React.FC = () => {

if (error) {
return (
<div className='error-screen'>
<p>Error: {error}</p>
<div className="error-screen">
<p>{HOME_CONSTANTS.ERROR} {error}</p>
</div>
);
}

return (
<>
{isModalOpen && modalProduct && (
<Modal product={modalProduct} closeModal={closeModal} />
)}

<Navbar />
<section className='filters'>
<div className='container'>
<section className="filters">
<div className="container">
<DropDownFilter
onClick={showFilterByCategory}
isOpen={isDropdownOpen}
Expand All @@ -53,11 +82,19 @@ const Home: React.FC = () => {
/>
</div>
</section>
<main className='main'>
<div className='container'>
<main className="main">
<div className="container">
<section>
<div className='products-grid' id='products-list'>
{/* TODO - map products */}
<div className="products-grid" id="products-list">

@Tamir198 Tamir198 Dec 27, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not critical but you could extract this entire block of jsx into separate component

{products.map((product) => {
return (
<Card
key={product.id}
product={product}
openModal={openModal}
/>
);
})}
</div>
</section>
</div>
Expand Down
Loading