[Flux] Component / Views

The application will dislay a some catalogs, and each catalog has title image, description. 

 

Catalog:

import React from 'react';
import AppStore from '../stores/app-store';
import CatalogItem from './app-catalogitem';

function getCatalog(){
  return { items: AppStore.getCatalog() }
}

class Catalog extends React.Component {
  constructor(){
    super();
    this.state = getCatalog()
  }
  render(){
    let items = this.state.items.map( item => {
      return <CatalogItem key={ item.id } item={ item } />
    });
    return (
      <div className="row">
        { items }
      </div>
    )
  }
}
export default Catalog;

 

Each Catalog render CatalogItem:

import React from 'react';
import AppActions from '../actions/app-actions';
import CartButton from './app-cart-button';

export default (props) => {
  return (
      <div className="col-xs-6 col-sm-4 col-md-3">
          <h4>{ props.item.title }</h4>
          <img src="http://placehold.it/250x250" width="100%" className="img-responsive"/>
          <p>{ props.item.summary }</p>
          <p>${ props.item.cost }</p>
          <CartButton
            handler={
              AppActions.addItem.bind(null, props.item)
            }
            txt="Add To Cart"
            />
      </div>
  )
}

 

CartButton handle the click event whcih passed in:

import React from 'react';

export default (props) => {
  return (
        <button
            className="btn btn-default btn-sm"
            onClick={ props.handler }>
            { props.txt }
        </button>
  )
}