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 {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
};