gistfile1.js

-- Actions

'use strict';

import { Actions } from 'flummox';
import ApiUtils from '../utils/ApiUtils';

class RestaurantActions extends Actions {

  getProductsByRestaurant() {
    return ApiUtils.get('api/');
  }

}

export default RestaurantActions;



-- Store

'use strict';

import { Store } from 'flummox';
import { Map } from 'immutable';
import _ from 'lodash';

class RestaurantStore extends Store {

  constructor({ restaurantActions }) {
    super();

    this.state = {
      products: [],
      restaurant: ''
    };

    //this.registerAsync(restaurantActions.getProductsByRestaurant,null, this._getProductsSuccess, null);
    this.register(restaurantActions.getProductsByRestaurant, this._getProducts);
  }

  _getProducts(res) {
    debugger;
    this.setState({
      products: this.state.products.push(res.data)
    });
  }

  getProducts () {
    debugger;
    return this.state.products;
  }

}

export default RestaurantStore;


-- React component

'use strict';

if(process.env.BROWSER) {
  require('bootstrap/dist/css/bootstrap.min.css');
  require('shop.css');
}

import React from 'react';
import ProductCategories from '../dumb/ProductCategories';
import connectToStores from 'flummox/connect';

class Restaurant extends React.Component {

  constructor() {
    super();
    //this.onUpdateTime = this.onUpdateTime.bind(this);
  }

  componentDidMount() {
    const restaurantActions = this.props.flux.getActions('restaurants');
    restaurantActions.getProductsByRestaurant();
  }

  render() {
    const products = this.props.products;
    const productPhoto = this.props.productPhoto;
    return (
      <div className="container">
        <div className="restaurant_description">
          <h2 style={{ color: '#93573D' }}>Cafe Habitu</h2><span style={{ color: '#FC571F' }}>at Elements Mall</span><br/>
                  <span style={{ color: '#FC571F' }}>Shop 1001, 1 Austin Road West, Kowloon Station<br/>
                  Tel: 2196-8466 </span>
        </div>
        <div className="row">
          <div className="col-md-12">
            <ProductCategories data={products}/>
            <div className="product__category">
              <span className="category_title" id="complementary">Complementary</span>
              <div className="row">
                <div className="col-lg-4 col-md-4">
                  <div className="product__item">
                    <div className="thumbnail">
                      <img className="product__photo" src={productPhoto} />
                      <div className="caption clearfix">
                        <div className="product__name-wrapper">
                          <h3>Quintessential Cake</h3>
                          <h3>精選蛋糕</h3>
                        </div>
                        <div className="product__description">FREE with any Meego purchases</div>
                        <div className="product__price-discounted">FREE!</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <h3 style={{ color: '#FC571F' }}>Enjoy your lunch!</h3>
          </div>
        </div>
      </div>
    );
  }

  //onUpdateTime(time) {
  //  this.props.flux.getActions('widget').getProducts(time);
  //}
}

if(process.env.BROWSER) {
  var productPhoto = require('products/cake.jpg');
}

Restaurant.defaultProps = { productPhoto: productPhoto };

Restaurant = connectToStores(Restaurant, {
  restaurants: (store) => {
    debugger;
    return {
      products: store.getProducts()
    };
  }
});

export default Restaurant;