<commit_before>import React, { PureComponent, PropTypes } from 'react';
import Helmet from 'react-helmet';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import { createStructuredSelector } from 'reselect';
import * as Actions from './actions';
import { addItemToCart } from '../../CheckoutPage/actions';
import { selectProducts, selectLoading, selectFilteredProducts, selectAutocomplete } from './selectors';
import getStyles from './styles';
import CatalogMenu from '../CatalogMenu';
import ProductCard from '../ProductCard';
import Body from '../../../components/styled/Body';
import Paper from 'material-ui/Paper';
import CircularProgress from 'material-ui/CircularProgress/CircularProgress';
import FlatButton from 'material-ui/FlatButton';
import AutoComplete from 'material-ui/AutoComplete';
import FileUploadIcon from 'material-ui/svg-icons/file/file-upload';
import UnhappyFaceIcon from 'material-ui/svg-icons/social/sentiment-dissatisfied';


const PRODUCT_ROW_WIDTH = 4;

class CatalogPage extends PureComponent {
  static propTypes = {
    products: PropTypes.array,
    filteredProducts: PropTypes.array,
    autocomplete: PropTypes.array,
    loading: PropTypes.bool,
    getProducts: PropTypes.func,
    searchProducts: PropTypes.func,
    onAddToCart: PropTypes.func,
  };

  static contextTypes = {
    theme: PropTypes.object,
  };

  constructor(props) {
    super(props);
    this.props.getProducts();
  }

  searchProducts = (query) => {
    this.props.searchProducts(this.props.products, query.toLowerCase());
  };

  renderRows = () => {
    const rows = [];
    const products = this.props.filteredProducts;
    for (let i = 0; i < products.length / PRODUCT_ROW_WIDTH; i += 1) {
      rows.push(this.renderRow(products, i));
    }
    return (
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        {rows}
      </div>
    );
  };

  renderRow = (products, i) => {
    const cards = [];
    for (let j = 0; j < PRODUCT_ROW_WIDTH; j += 1) {
      if ((i * PRODUCT_ROW_WIDTH) + j < products.length) {
        const product = products[(i * PRODUCT_ROW_WIDTH) + j];
        cards.push(
          <ProductCard
            key={j}
            isBuyer
            product={product}
            onAddToCart={() => this.props.onAddToCart(product)}
          />);
      }
    }
    return (
      <div key={i} style={{ display: 'flex', flexDirection: 'row' }}>
        {cards}
      </div>
    );
  }

  filterAutocomplete(searchText, key) {
    return key.toLowerCase().indexOf(searchText.toLowerCase()) !== -1;
  }

  renderLoading() {
    return (
      <Paper style={{ margin: 'auto', textAlign: 'center', width: '500px' }}>
        <CircularProgress />
      </Paper>
    );
  }

  render() {
    const styles = getStyles();
    const message = 'You have not opened any buying channels on the Ruah marketplace.';
    return (
      <article>
        <Helmet
          title="Catalog"
          meta={[
            { name: 'description', content: 'Catalog Page' },
          ]}<commit_msg>Search functionality so far, lint compliance issues<commit_after>import React, { PureComponent, PropTypes } from 'react';
import Helmet from 'react-helmet';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import { createStructuredSelector } from 'reselect';
import * as Actions from './actions';
import { addItemToCart } from '../../CheckoutPage/actions';
import { selectProducts, selectLoading, selectFilteredProducts, selectAutocomplete } from './selectors';
import getStyles from './styles';
import CatalogMenu from '../CatalogMenu';
import ProductCard from '../ProductCard';
import Body from '../../../components/styled/Body';
import Paper from 'material-ui/Paper';
import CircularProgress from 'material-ui/CircularProgress/CircularProgress';
import FlatButton from 'material-ui/FlatButton';
import AutoComplete from 'material-ui/AutoComplete';
import FileUploadIcon from 'material-ui/svg-icons/file/file-upload';
import UnhappyFaceIcon from 'material-ui/svg-icons/social/sentiment-dissatisfied';


const PRODUCT_ROW_WIDTH = 4;

class CatalogPage extends PureComponent {
  static propTypes = {
    products: PropTypes.array,
    filteredProducts: PropTypes.array,
    autocomplete: PropTypes.array,
    loading: PropTypes.bool,
    getProducts: PropTypes.func,
    searchProducts: PropTypes.func,
    onAddToCart: PropTypes.func,
  };

  static contextTypes = {
    theme: PropTypes.object,
  };

  constructor(props) {
    super(props);
    this.props.getProducts();
  }

  searchProducts = (query) => {
    this.props.searchProducts(this.props.products, query.toLowerCase());
  };

  filterAutocomplete(searchText, key) {
    return key.toLowerCase().indexOf(searchText.toLowerCase()) !== -1;
  }

  renderRows = () => {
    const rows = [];
    const products = this.props.filteredProducts;
    for (let i = 0; i < products.length / PRODUCT_ROW_WIDTH; i += 1) {
      rows.push(this.renderRow(products, i));
    }
    return (
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        {rows}
      </div>
    );
  };

  renderRow = (products, i) => {
    const cards = [];
    for (let j = 0; j < PRODUCT_ROW_WIDTH; j += 1) {
      if ((i * PRODUCT_ROW_WIDTH) + j < products.length) {
        const product = products[(i * PRODUCT_ROW_WIDTH) + j];
        cards.push(
          <ProductCard
            key={j}
            isBuyer
            product={product}
            onAddToCart={() => this.props.onAddToCart(product)}
          />);
      }
    }
    return (
      <div key={i} style={{ display: 'flex', flexDirection: 'row' }}>
        {cards}
      </div>
    );
  }

  renderLoading() {
    return (
      <Paper style={{ margin: 'auto', textAlign: 'center', width: '500px' }}>
        <CircularProgress />
      </Paper>
    );
  }

  render() {
    const styles = getStyles();
    const message = 'You have not opened any buying channels on the Ruah marketplace.';
    return (
      <article>
        <Helmet
          title="Catalog"
          meta={[
            { name: 'description', content: 'Catalog Page' },
          ]}
{'fraction_non_alphanumeric': 0.1387894565571103, 'fraction_numerical': 0.00292873413602343, 'mean_word_length': 2.978640776699029, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 29, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6265881', 'n_tokens_mistral': 1855, 'n_tokens_neox': 1818, 'n_words': 450}