Skip to content

Instantly share code, notes, and snippets.

@mohandere
Last active May 12, 2019 14:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mohandere/b1252ccc7870ca1ab46a946b77e5cee8 to your computer and use it in GitHub Desktop.
Save mohandere/b1252ccc7870ca1ab46a946b77e5cee8 to your computer and use it in GitHub Desktop.
Higher-Order Components
const ProductCard = props => {
return (
<div>
<hr />
<p>
<b>Title:</b> {props.title}
</p>
<p>
<b>Style:</b> {props.style}
</p>
<p>
<b>Price:</b> {props.price}
</p>
<p>
<b>Description:</b> {props.description}
</p>
<p>
<b>Free shipping:</b> {props.isFreeShipping}
</p>
<hr />
</div>
);
};
const filterProducts = (searchTerm) => {
searchTerm = searchTerm.toUpperCase()
return products.filter(product => {
let str = `${product.title} ${product.style} ${product.sku}`.toUpperCase();
return str.indexOf(searchTerm) >= 0;
})
}
const ProductsList = (props) => {
const { searchTerm } = props
let filteredProducts = filterProducts(searchTerm);
return (
<div>
<div>
<div>
<h2>Products</h2>
</div>
</div>
<div>
{filteredProducts.map((product) => <ProductCard key={product.sku} {...product} />)}
</div>
</div>
)
}
const getDisplayName = (WrappedComponent) => {
return WrappedComponent.displayName || WrappedComponent.name || 'Component';
}
const withSearch = WrappedComponent => {
class WithSearch extends React.Component {
state = {
searchTerm: ""
};
handleSearch = event => {
this.setState({ searchTerm: event.target.value });
};
render() {
let { searchTerm } = this.state;
return (
<div>
<div>
<input
onChange={this.handleSearch}
value={searchTerm}
type="text"
placeholder="Search"
/>
</div>
<WrappedComponent searchTerm={searchTerm} />
</div>
);
}
};
WithSearch.displayName = `WithSearch(${getDisplayName(WrappedComponent)})`;
return WithSearch;
};
const ProductsListWithSearch = withSearch(ProductsList);
function App() {
return (
<div className="App">
<ProductsListWithSearch />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
const products = [
{
"availableSizes": ["S", "XS"],
"currencyFormat": "$",
"currencyId": "USD",
"description": "4 MSL",
"id": 12,
"installments": 9,
"isFreeShipping": true,
"price": 10.9,
"sku": 12064273040195392,
"style": "Black with custom print",
"title": "Cat Tee Black T-Shirt"
},
{
"availableSizes": ["M"],
"currencyFormat": "$",
"currencyId": "USD",
"description": "",
"id": 13,
"installments": 5,
"isFreeShipping": true,
"price": 29.45,
"sku": 51498472915966370,
"style": "Front print and paisley print",
"title": "Dark Thug Blue-Navy T-Shirt"
},
{
"availableSizes": ["X", "L", "XL"],
"currencyFormat": "$",
"currencyId": "USD",
"description": "GPX Poly 1",
"id": 14,
"installments": 3,
"isFreeShipping": true,
"price": 9,
"sku": 10686354557628304,
"style": "Front tie dye print",
"title": "Sphynx Tie Dye Wine T-Shirt"
},
{
"availableSizes": ["X", "L", "XL", "XXL"],
"currencyFormat": "$",
"currencyId": "USD",
"description": "Treino 2014",
"id": 15,
"installments": 5,
"isFreeShipping": true,
"price": 14,
"sku": 11033926921508488,
"style": "Black T-Shirt with front print",
"title": "Skuul"
},
{
"availableSizes": ["X", "L"],
"currencyFormat": "$",
"currencyId": "USD",
"description": "",
"id": 11,
"installments": 3,
"isFreeShipping": true,
"price": 13.25,
"sku": 39876704341265610,
"style": "Wine",
"title": "Wine Skul T-Shirt"
},
{
"availableSizes": ["X", "L", "XL", "XXL"],
"currencyFormat": "$",
"currencyId": "USD",
"description": "14/15 s/nº",
"id": 0,
"installments": 9,
"isFreeShipping": true,
"price": 10.9,
"sku": 8552515751438644,
"style": "Branco com listras pretas",
"title": "Cat Tee Black T-Shirt"
},
{
"availableSizes": ["X", "L", "XL", "XXL"],
"currencyFormat": "$",
"currencyId": "USD",
"description": "14/15 s/nº",
"id": 1,
"installments": 9,
"isFreeShipping": true,
"price": 10.9,
"sku": 18644119330491310,
"style": "Preta com listras brancas",
"title": "Sphynx Tie Dye Grey T-Shirt"
},
{
"availableSizes": ["X", "L"],
"currencyFormat": "$",
"currencyId": "USD",
"description": "14/15 s/nº",
"id": 2,
"installments": 7,
"isFreeShipping": true,
"price": 14.9,
"sku": 11854078013954528,
"style": "Branco com listras pretas",
"title": "Danger Knife Grey"
},
{
"availableSizes": ["X", "L"],
"currencyFormat": "$",
"currencyId": "USD",
"description": "2014 s/nº",
"id": 3,
"installments": 7,
"isFreeShipping": true,
"price": 14.9,
"sku": 876661122392077,
"style": "Preto com listras brancas",
"title": "White DGK Script Tee"
},
{
"availableSizes": ["XL"],
"currencyFormat": "$",
"currencyId": "USD",
"description": "14/15 s/nº - Jogador",
"id": 4,
"installments": 12,
"isFreeShipping": false,
"price": 25.9,
"sku": 9197907543445676,
"style": "Branco com listras pretas",
"title": "Born On The Streets"
},
{
"availableSizes": ["X", "L", "XL"],
"currencyFormat": "$",
"currencyId": "USD",
"description": "14/15 + Camiseta 1º Mundial",
"id": 5,
"installments": 9,
"isFreeShipping": false,
"price": 10.9,
"sku": 10547961582846888,
"style": "Preto",
"title": "Tso 3D Short Sleeve T-Shirt A"
},
{
"availableSizes": ["XL", "XXL"],
"currencyFormat": "$",
"currencyId": "USD",
"description": "Goleiro 13/14",
"id": 6,
"installments": 0,
"isFreeShipping": true,
"price": 49.9,
"sku": 6090484789343891,
"style": "Branco",
"title": "Man Tie Dye Cinza Grey T-Shirt"
},
{
"availableSizes": ["S"],
"currencyFormat": "$",
"currencyId": "USD",
"description": "1977 Infantil",
"id": 7,
"installments": 4,
"isFreeShipping": true,
"price": 22.5,
"sku": 18532669286405344,
"style": "Preto com listras brancas",
"title": "Crazy Monkey Black T-Shirt"
},
{
"availableSizes": ["XL"],
"currencyFormat": "$",
"currencyId": "USD",
"description": "",
"id": 8,
"installments": 4,
"isFreeShipping": false,
"price": 18.7,
"sku": 5619496040738316,
"style": "Azul escuro",
"title": "Tso 3D Black T-Shirt"
},
{
"availableSizes": ["L", "XL"],
"currencyFormat": "$",
"currencyId": "USD",
"description": "",
"id": 9,
"installments": 5,
"isFreeShipping": true,
"price": 134.9,
"sku": 11600983276356164,
"style": "",
"title": "Crazy Monkey Grey"
},
{
"availableSizes": ["L", "XL"],
"currencyFormat": "$",
"currencyId": "USD",
"description": "",
"id": 10,
"installments": 9,
"isFreeShipping": true,
"price": 49,
"sku": 27250082398145996,
"style": "",
"title": "On The Streets Black T-Shirt"
}
]
export default products;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment