products.react.jsx

var React = require('react');
var Router = require('react-router');
var Link = Router.Link;
var ReactPropTypes = React.PropTypes;
var ProductStore = require('../../stores/ProductStore.react.jsx')
var ErrorNotice = require('../../components/common/ErrorNotice.react.jsx');
var ProductActionCreators = require('../../actions/ProductActionCreators.react.jsx');
var AuthenticatedMixin = require('../../components/common/AuthenticatedMixin.react.jsx');
var ReactInfinity = require('react-infinity');


var ProductsPage = React.createClass({

  	mixins: [AuthenticatedMixin],

	propTypes: {
		user: ReactPropTypes.object
	},

	getInitialState: function() {
    	console.log('ProductsPage.react: getInitialState')
		return {
			products: ProductStore.getAllProducts(), // get form product store
			errors: []
		}
	},

	componentDidMount: function() {
    	console.log('ProductsPage.react: componentDidMount')
		ProductStore.addChangeListener(this._onChange);
		ProductActionCreators.loadCustomerProducts();
	},

	componentWillUnmount: function() {
    	console.log('ProductsPage.react: componentWillUnmount')
		ProductStore.removeChangeListener(this._onChange);
	},

	_onChange: function() {
    	console.log('ProductsPage.react: _onChange')
		this.setState({
			products: ProductStore.getAllProducts(),
			errors: ProductStore.getErrors()
		});
	},

	render: function() {
		return (
			<div className="content">
				<ProductList products={this.state.products} />
			</div>
		);
	}

});

var ProductList = React.createClass({
	render: function() {
		return (
			<ReactInfinity
		      data={this.props.products}
		      elementWidth={300}
		      elementHeight={310}
		      margin={10}
		      childComponent={React.createFactory(ProductItem)}
		      />
		);
	}
});

var ProductItem = React.createClass({
	render: function() {
		var imageURL = this.props.image.split(',')[0];
		return (
			<div className="grid simple">
				<div className="grid-title text-center">
					<h3>{this.props.name}</h3>
				</div>
				<div className="grid-body">
					<div class="text-center">
	                    <div class="product-image m-b-10">
	                    	<img src="/assets/images/ajax-loader.gif" 
	                    		data-src={ imageURL } className="center lazy"
	                    		alt="gambar produk"/>
	                    </div>
	                </div>
	                <hr />
	                <p>
	                	{ this.props.is_affiliate_ready ? (
	                			<h5>
	                				affiliate fee &nbsp;
	                				<strong>Rp { this.props.affiliate_fee }</strong>
	                			</h5>
	                		) : (
	                			<span>produk belum mendukung affiliate</span>
	                		) 
	                	}
	                </p>
	                <hr className="m-b-10"/>
		    		<Link to='product' params={ {productId: this.props.id} }>lihat detail produk</Link>
		    	</div>
		    </div>
    	);
	}
});

module.exports = ProductsPage;

react infinity exception

Uncaught TypeError: Cannot read property '__reactAutoBindMap' of undefinedReactClass.createClass.Constructor @ app.min.js:5580render @ app.min.js:35201ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext @ app.min.js:11770ReactCompositeComponentMixin._renderValidatedComponent @ app.min.js:11797ReactPerf.measure.wrapper @ app.min.js:3409ReactCompositeComponentMixin.mountComponent @ app.min.js:11218ReactPerf.measure.wrapper @ app.min.js:3409ReactReconciler.mountComponent @ app.min.js:3484ReactMultiChild.Mixin.mountChildren @ app.min.js:12773ReactDOMComponent.Mixin._createContentMarkup @ app.min.js:12357ReactDOMComponent.Mixin.mountComponent @ app.min.js:12267ReactReconciler.mountComponent @ app.min.js:3484ReactCompositeComponentMixin.mountComponent @ app.min.js:11228ReactPerf.measure.wrapper @ app.min.js:3409ReactReconciler.mountComponent @ app.min.js:3484ReactCompositeComponentMixin.mountComponent @ app.min.js:11228ReactPerf.measure.wrapper @ app.min.js:3409ReactReconciler.mountComponent @ app.min.js:3484ReactCompositeComponentMixin.mountComponent @ app.min.js:11228ReactPerf.measure.wrapper @ app.min.js:3409ReactReconciler.mountComponent @ app.min.js:3484ReactCompositeComponentMixin.mountComponent @ app.min.js:11228ReactPerf.measure.wrapper @ app.min.js:3409ReactReconciler.mountComponent @ app.min.js:3484ReactMultiChild.Mixin.mountChildren @ app.min.js:12773ReactDOMComponent.Mixin._createContentMarkup @ app.min.js:12357ReactDOMComponent.Mixin.mountComponent @ app.min.js:12267ReactReconciler.mountComponent @ app.min.js:3484ReactCompositeComponentMixin.mountComponent @ app.min.js:11228ReactPerf.measure.wrapper @ app.min.js:3409ReactReconciler.mountComponent @ app.min.js:3484ReactMultiChild.Mixin.mountChildren @ app.min.js:12773ReactDOMComponent.Mixin._createContentMarkup @ app.min.js:12357ReactDOMComponent.Mixin.mountComponent @ app.min.js:12267ReactReconciler.mountComponent @ app.min.js:3484ReactCompositeComponentMixin.mountComponent @ app.min.js:11228ReactPerf.measure.wrapper @ app.min.js:3409ReactReconciler.mountComponent @ app.min.js:3484ReactMultiChild.Mixin.mountChildren @ app.min.js:12773ReactDOMComponent.Mixin._createContentMarkup @ app.min.js:12357ReactDOMComponent.Mixin.mountComponent @ app.min.js:12267ReactReconciler.mountComponent @ app.min.js:3484ReactCompositeComponentMixin.mountComponent @ app.min.js:11228ReactPerf.measure.wrapper @ app.min.js:3409ReactReconciler.mountComponent @ app.min.js:3484ReactCompositeComponentMixin.mountComponent @ app.min.js:11228ReactPerf.measure.wrapper @ app.min.js:3409ReactReconciler.mountComponent @ app.min.js:3484ReactCompositeComponentMixin.mountComponent @ app.min.js:11228ReactPerf.measure.wrapper @ app.min.js:3409ReactReconciler.mountComponent @ app.min.js:3484mountComponentIntoNode @ app.min.js:8678Mixin.perform @ app.min.js:4534batchedMountComponentIntoNode @ app.min.js:8699Mixin.perform @ app.min.js:4534ReactDefaultBatchingStrategy.batchedUpdates @ app.min.js:15758batchedUpdates @ app.min.js:3061ReactMount._renderNewRootComponent @ app.min.js:8834ReactPerf.measure.wrapper @ app.min.js:3409ReactMount.render @ app.min.js:8923ReactPerf.measure.wrapper @ app.min.js:3409(anonymous function) @ app.min.js:55React.createClass.statics.run.dispatchHandler @ app.min.js:31091(anonymous function) @ app.min.js:31059(anonymous function) @ app.min.js:31415(anonymous function) @ app.min.js:31420Transition.to @ app.min.js:31423(anonymous function) @ app.min.js:31058Transition.from @ app.min.js:31402dispatch @ app.min.js:31055refresh @ app.min.js:31106run @ app.min.js:31102(anonymous function) @ app.min.js:54__webpack_require__ @ app.min.js:20(anonymous function) @ app.min.js:40(anonymous function) @ app.min.js:43