product_list

import React, { Component } from 'react';
// React mixin for reactively tracking Meteor data
import { createContainer } from 'meteor/react-meteor-data';
import { Products } from '../../imports/collections/products';
import ProductDetail from './product_detail';
import {Search} from './search';

const PER_PAGE = 20;


class ProductList extends Component {
   componentWillMount() {
     this.page = 1;
   }

    handleInput(event){
     event.preventDefault();
     let queryValue=this.refs.inputValue.value;
    Meteor.call('search.receive',queryValue);


  }
   handleButtonClick() {
     Meteor.subscribe('products', PER_PAGE * (this.page+1));
     this.page += 1;
   }



   render() {
     // props.products => returns an array of products objects

     return (

       <div>

       <form onSubmit={this.handleInput.bind(this)} >
       <input ref="inputValue" />

       </form>
        {this.props.queryValue}
         <div className="product-list">
           {this.props.products.map(product =><ProductDetail key={product._id} product={product} />
              )
            }
         </div>
         <button onClick={this.handleButtonClick.bind(this)}
           className="btn btn-primary">
           Load More...
         </button>


       </div>
     );
   }
};

export default createContainer (() => {
   // set up our subscription
   Meteor.subscribe('products', PER_PAGE);


     return {products: Products.find({}).fetch()};}, ProductList);