/* 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