Now that the category menu is complete, continue by implementing the product listing, as depicted in this diagram, by following the next steps:
Follow the following steps:
- Create the following folders:
- /src/components/market/ProductCard
- /src/components/market/ProductList
- Implement the ProductCard component's behavior by creating this file and adding the following JavaScript code:
/src/components/market/ProductCard/ProductCard.js
import React from 'react';
import './ProductCard.css';
function primaryImageSrc(product) {
return product && product.media &&
product.media.length > 0
? product.media[0].url
: null;
}
const ProductCard = ({product}) => (
<div className="item-card">
<div className="item-card-content-container">
<img
className="item-card-content-container-
img"
alt="product"
src={primaryImageSrc(product)}
/>
<span className="item-card-content-
container-
title">
{product.title}
</span>
<span className="item-card-content-
container-
text">
{product.description}
</span>
</div>
</div>
);
export default ProductCard;
- Implement ProductCard component styles by creating this file and adding the following CSS styles:
/src/components/market/ProductCard/ProductCard.css
.item-card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
background-color: white;
width: 280px;
height: 200px;
float: left;
margin: 10;
}
.item-card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.item-card-content-container {
padding: 2px 16px;
display: flex;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
}
.item-card-content-container-img {
display: block;
max-width: 80px;
max-height: 80px;
width: auto;
height: auto;
text-align: center;
}
.item-card-content-container-title {
display: block;
font-size: 1.6rem;
}
.item-card-content-container-text {
word-wrap: normal;
font-size: 1.2rem;
overflow: hidden;
}
- Re-export the ProductCard component by writing the following in /src/components/market/index.js:
import CategoryMenu from './CategoryMenu/CategoryMenu';
import CategoryMenuItem from
'./CategoryMenuItem/CategoryMenuItem';
import ProductCard from './ProductCard/ProductCard';
import ProductsPage from './ProductsPage/ProductsPage';
export {
CategoryMenu,
CategoryMenuItem,
ProductCard,
ProductsPage,
};
- Implement the ProductList component's behavior by creating this file and adding the following JavaScript code:
/src/components/market/ProductList/ProductList.js
import React from 'react';
import './ProductList.css';
import {ProductCard} from '../';
const ProductList = ({products}) => (
<div>
<ul id="products-container">
{products.map(p => (
<li key={p.productId}>
<ProductCard product={p} />
</li>
))}
</ul>
</div>
);
export default ProductList;
- Implement ProductList component styles by creating this file and adding the following CSS styles:
/src/components/market/ProductList/ProductList.css
#products-container, #products-container > li {
list-style: none;
padding: 0;
margin: 0;
display: inline;
}
#products-container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
- Re-export the ProductList component, and then write the following in /src/components/market/index.js:
import CategoryMenu from './CategoryMenu/CategoryMenu';
import CategoryMenuItem from
'./CategoryMenuItem/CategoryMenuItem';
import ProductCard from './ProductCard/ProductCard';
import ProductList from './ProductList/ProductList';
import ProductsPage from './ProductsPage/ProductsPage';
export {
CategoryMenu,
CategoryMenuItem,
ProductCard,
ProductList,
ProductsPage,
};
- Modify the ProductsPage component:
- Add an empty products array as the default starting state
- Load products when the selected category is changed
- Render the ProductList component:
import React from 'react';
import MarketService from
'../../../services/marketService';
import {CategoryMenu, ProductList} from '../';
class ProductsPage extends React.Component {
state = {
categories: [],
products: [],
};
componentDidMount() {
MarketService.loadCategories()
.then(o => this.setState({categories: o}));
}
onCategoryChanged = (category) => {
MarketService.loadProducts(category.name)
.then(o => this.setState({products: o}));
}
render() {
return (
<div>
<CategoryMenu
categories={this.state.categories}
onCategoryChanged={this.onCategoryChanged}
/>
<ProductList products={this.state.products} />
</div>
);
}
}
export default ProductsPage;
That's it! You have just completed implementing the product listing. Go ahead and run the app and see it in action; it should look similar to this: