React Example - VibloShoppingCart Page

Starting point for creating JSFiddles with React. This uses React with Addons. Fork and develop more for Viblo post

by Trong TranBa

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

CSS

.viblo-cart {
    min-width: 600px;
    max-width: 700px;
}
.banner {
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-color: #4679bd;
    color: white;
}
.banner > .page-title {
    font-weight: bold;
    margin-left: 15px;
}
.banner > .total-cost {
    float: right;
    margin-right: 15px;
}
table {
    width: 100%;
    border: 1px solid #4679bd;
    text-align: center;
}

JavaScript 1.7

function caculate_total_cost(items) {
  var cost_array = items.map(function(item){return item["price"]*item["quantity"]});
  var total_cost = 0;
  for(var i in cost_array){ total_cost += cost_array[i]; }
    return total_cost;
}

var CartDiv = React.createClass({
  getInitialState: function() {
    var items = [];
    var total_cost = caculate_total_cost(items);
    var left_items = [{id:1, name:"Framgia Super Server", price:5000}, {id:2, name:"Framgia Super Laptop", price:4000}, {id:3, name:"Framgia Super Watch", price:3000}, {id:4, name:"Framgia Super Keyboard", price:2000}, {id:5, name:"Framgia Super Mouse", price:1000}];
    return {items: items, left_items: left_items, total_cost: total_cost};
  },
  AddItemHandle: function(id) {
    var left_items = this.state.left_items;
    var item = left_items.filter(function(item){return item.id==id})[0];
    left_items.splice(left_items.indexOf(item), 1);
    item.quantity = 1;
    var items = this.state.items.concat(item);
    this.setState({left_items: left_items, items: items, total_cost: caculate_total_cost(items)});
  },
  RemoveItemHandle: function(id) {
    var items = this.state.items;
    var item = items.filter(function(item){return item.id==id})[0];
    items.splice(items.indexOf(item), 1);
    delete item.quantity;
    var left_items = this.state.left_items.concat(item);
    this.setState({left_items: left_items, items: items, total_cost: caculate_total_cost(items)});
  },
  QuantityHandle: function(item_index, method) {
    var items = this.state.items;
    if (method == "plus") {
      items[item_index].quantity++;
    } else if(this.state.items[item_index].quantity > 0) {
      items[item_index].quantity--;
    }
    this.setState({items: items, total_cost: caculate_total_cost(items)});
  },
  render: function() {
    return (
      <div className={"viblo-cart"}>
      <Banner total_cost={this.state.total_cost} />
      <ItemTable quantityHandle={this.QuantityHandle} addItemHandle={this.AddItemHandle}...