ProductsList.jsx

/* 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 InputRange from 'react-input-range';

import {setFilterTerm, setFilterPrice, 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>
            <CardText>{elem.manufacturer}</CardText>
            <Button>Add to Cart</Button>
          </CardBlock>
        </Card>

      )
    }

    return (
      this.props.products
        .filter((elem) => ((elem.category === this.props.match.params.category) &&
          (elem.manufacturer.toUpperCase().indexOf(this.props.filterVal.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="filter1"
                     value={this.props.filterVal}
                     onChange={this.props.handleFilterTermChange}
                     placeholder="Grown in:"
                     aria-describedby="basic-addon1"/>
            </InputGroup>
            <br/>
            <InputGroup>
              <InputRange
                maxValue={20}
                minValue={0}
                value={this.props.FAKE}
                onChange={value => this.props.handleFilterRangeChange({value})}/>
            </InputGroup>
            <br/>
            <p>{JSON.stringify(this.props.FAKE)}</p>
          </Col>
        </Row>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  const filterTerm = state.filterTerm ? state.filterTerm : "";
  const filterPrice = state.filterPrice;
  /* ? state.filterPrice : {min: 1, max: 20};*/
  const apiData = state.apiData ? state.apiData : [];

  return {
    products: apiData,
    filterVal: filterTerm,
    filterRange: filterPrice
  };
};

const mapDispatchToProps = (dispatch) => ({
  getAPIData() {
    dispatch(getAPIDetails());
  },
  handleFilterTermChange(evt) {
    dispatch(setFilterTerm(evt.target.value));
  },
  handleFilterRangeChange(value) {
    dispatch(setFilterPrice(value));
  }
});

export default connect(mapStateToProps, mapDispatchToProps)(ProductsList);

ProductsList.defaultProps = {
  getAPIData: null,
  products: [],
  filterVal: "",
  FAKE: {min: 1, max: 10}
};

ProductsList.propTypes = {
  products: PropTypes.arrayOf(PropTypes.object),
  getAPIData: PropTypes.func,
  match: PropTypes.shape({
    params: PropTypes.shape({
      category: PropTypes.string
    })
  }).isRequired,
  handleFilterTermChange: PropTypes.func.isRequired,
  handleFilterRangeChange: PropTypes.func.isRequired,
  filterVal: PropTypes.string,
  FAKE: PropTypes.shape({
    min: PropTypes.number,
    max: PropTypes.number
  })
};