Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/* eslint no-console: 0 */
import React, {Component} from "react";
import PropTypes from 'prop-types'
import {connect} from 'react-redux';
import {
Card, Button, CardImg, CardTitle, CardText,
CardBlock, Row, Col, InputGroup, InputGroupAddon
} from 'reactstrap';
import {setFilterTerm, getAPIDetails} from '../redux/actionCreators';
class ProductsList extends Component {
componentDidMount() {
if (!this.props.products[0]) {
this.props.getAPIData();
}
}
renderProductsList() {
function mapProductCards(elem) {
return (
<Card className="m-1" style={{width: '18rem'}} key={elem.id}>
<CardImg top width="100%" src={`/public/img/${elem.image}`} alt="Card image cap"/>
<CardBlock>
<CardTitle>{elem.name}</CardTitle>
<CardText>{elem.price}</CardText>
<CardText>isAvailable</CardText>
<Button>Add to Cart</Button>
</CardBlock>
</Card>
)
}
return (
this.props.products
.filter((elem) => ((elem.category === this.props.match.params.category))
/* && (this.textInput.val && elem.name.toUpperCase().indexOf(this.textInput.val.toUpperCase()) >= 0)*/
)
.map(mapProductCards)
)
}
render() {
return (
<div className="landing">
<Row>
<Col>
<div className="d-flex flex-row flex-wrap">{this.renderProductsList()}</div>
</Col>
<Col xs="4" sm="2">
<InputGroup>
<InputGroupAddon>@</InputGroupAddon>
<input type="text" className="form-control"
ref={(filterInput) => {
this.textInput = filterInput;
}}
name="filter"
onChange={this.props.handleFilterTermChange}
placeholder="Filter"
aria-describedby="basic-addon1"/>
{this.textInput && console.log(this.textInput)}
</InputGroup>
{this.props.filterVal}
</Col>
</Row>
</div>
);
}
}
const mapStateToProps = (state) => {
const apiData = state.apiData ? state.apiData : [];
const filterTerm = state.searchTerm ? state.searchTerm : "";
return {
products: apiData,
filterVal: filterTerm
};
};
const mapDispatchToProps = (dispatch) => ({
getAPIData() {
dispatch(getAPIDetails());
},
handleFilterTermChange(evt) {
dispatch(setFilterTerm(evt.target.value));
}
});
export default connect(mapStateToProps, mapDispatchToProps)(ProductsList);
ProductsList.defaultProps = {
getAPIData: null,
products: [],
filterVal: ""
};
ProductsList.propTypes = {
products: PropTypes.arrayOf(PropTypes.object),
getAPIData: PropTypes.func,
/* match: PropTypes.shape().isRequired*/
match: PropTypes.shape({
params: PropTypes.shape({
category: PropTypes.string
})
}).isRequired,
handleFilterTermChange: PropTypes.func.isRequired,
filterVal: PropTypes.string
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment