Taking first baby steps in React & Redux and rewriting foobar-kiosk

Author: kjagiello

.gitignore

@@ -0,0 +1,2 @@
+.DS_Store
+node_modules/

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Uppsala Datavetare and individual contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,3 @@
+# foobar-kiosk
+
+This repository contains the frontend for the FooBar kiosk and inventory system.

actions/index.js

@@ -0,0 +1,58 @@
+import fetch from 'isomorphic-fetch';
+
+export const ADD_PRODUCT = 'ADD_PRODUCT';
+export const INCREASE_PRODUCT_QTY = 'INCREASE_PRODUCT_QTY';
+export const SELECT_PRODUCT = 'SELECT_PRODUCT';
+export const REMOVE_PRODUCT = 'REMOVE_PRODUCT';
+export const REQUEST_PRODUCT = 'REQUEST_PRODUCT';
+
+export function addProduct(ean) {
+  return dispatch => {
+    dispatch(requestProduct(ean));
+    return fetch(`http://dev.foocash.me/api/products/?code=${ean}`, {
+        headers: {
+          'Authorization': 'Token ###'
+        }
+      })
+      .then(response => response.json())
+      .then(data => {
+        if (data.length) {
+          dispatch(receiveProduct(data[0]))
+        }
+      });
+  }
+};
+
+export function requestProduct(ean) {
+  return {
+    type: REQUEST_PRODUCT,
+    ean
+  };
+}
+
+export function receiveProduct(data) {
+  return {
+    type: ADD_PRODUCT,
+    ...data
+  }
+}
+
+export function increaseProductQty(count) {
+  return {
+    type: INCREASE_PRODUCT_QTY,
+    count
+  };
+}
+
+export function selectProduct(ean) {
+  return {
+    type: SELECT_PRODUCT,
+    ean
+  };
+}
+
+export function removeProduct() {
+  return {
+    type: REMOVE_PRODUCT
+  }
+};

components/AccountBar.js

@@ -0,0 +1,18 @@
+import React, { PropTypes, Component } from 'react';
+
+export default class AccountBar extends Component {
+  render() {
+    const {dispatch} = this.props;
+    return (
+      <div id="account">
+        <div className="name">{this.props.name}</div>
+        <div id="balance">Balance: <span>{this.props.balance}</span> kr</div>
+      </div>
+    );
+  }
+}
+
+AccountBar.propTypes = {
+  name: PropTypes.string,
+  balance: PropTypes.string
+};

components/Product.js

@@ -0,0 +1,21 @@
+import React, { PropTypes, Component } from 'react';
+import selectProduct from '../actions';
+
+export default class Product extends Component {
+  render() {
+    const {dispatch} = this.props;
+    return (
+      <colu className={this.props.selected ? 'selected' : ''} onClick={(e) => this.props.onSelect(this.props.ean)}>
+        <cell className="image"><img src={this.props.image} alt="" /></cell>
+        <cell className="name">{this.props.name}</cell>
+        <cell className="quantity">{this.props.qty} x</cell>
+        <cell className="price"><span>{this.props.price} kr</span></cell>
+        <div className="overlay"></div>
+      </colu>
+    );
+  }
+}
+
+Product.propTypes = {
+  name: PropTypes.string
+};

components/ProductList.js

@@ -0,0 +1,20 @@
+import React, { PropTypes, Component } from 'react';
+import Product from './Product';
+
+export default class ProductList extends Component {
+  render() {
+    const {products} = this.props;
+    return (
+      <div id="purchase">
+        {products.products.map((product, index) =>
+          <Product {...product} key={index}
+                   onSelect={this.props.onSelect} />
+        )}
+      </div>
+    );
+  }
+}
+
+// ProductList.propTypes = {
+//   products: PropTypes.array
+// };

components/PurchaseButton.js

@@ -0,0 +1,24 @@
+import React, { PropTypes, Component } from 'react';
+
+export default class PurchaseButton extends Component {
+  render() {
+    const {products} = this.props.products;
+    let total = products
+      .filter((p) => !p.loading)
+      .map((p) => p.price * p.qty).reduce((x, y) => x + y, 0)
+    return (
+      <span id="buy" className="button" href="#">
+        <span>{total}</span>
+        <span> kr</span>
+        <div>
+          <i className="fa fa-shopping-cart"></i>
+          <span></span>
+        </div>
+      </span>
+    );
+  }
+}
+
+// PurchaseButton.propTypes = {
+//   products: PropTypes.array
+// };

containers/App.js

@@ -0,0 +1,85 @@
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import {
+  addProduct,
+  removeProduct,
+  selectProduct,
+  increaseProductQty
+} from '../actions';
+import ProductList from '../components/ProductList';
+import PurchaseButton from '../components/PurchaseButton';
+import AccountBar from '../components/AccountBar';
+
+
+class App extends Component {
+  componentDidMount() {
+  }
+
+  componentWillReceiveProps(nextProps) {
+  }
+
+  addRandomProduct() {
+    var eans = [
+      '7310500088853',
+      '7340083438684',
+      '7611612221351',
+      '7310500114934',
+      '7310070765840',
+      '7315360010754',
+      '7622300342753'
+    ];
+
+    var randomIndex = Math.floor(Math.random() * eans.length);
+    this.props.dispatch(addProduct(eans[randomIndex]));
+  }
+
+  render() {
+    const { dispatch, products } = this.props;
+    return (
+      <div id="container">
+        <ProductList products={products}
+                     onSelect={(ean) => dispatch(selectProduct(ean))} />
+            <span id="trash" className="button"></span>
+            <div id="sidebar">
+                <AccountBar name="Krzysztof" balance="0" />
+                <div id="menubox"></div>
+                <PurchaseButton products={products} />
+            </div>
+            <div id="edit">
+                <span className="button scroll up" onClick={(e) => this.addRandomProduct()}><i className="fa fa-chevron-up"></i></span>
+                <div className="container">
+                    <span className="button plus"
+                          onClick={(e) => dispatch(increaseProductQty(1))}>
+                      <i className="fa fa-plus"></i>
+                    </span>
+                    <span className="button minus"
+                          onClick={(e) => dispatch(increaseProductQty(-1))}>
+                      <i className="fa fa-minus"></i>
+                    </span>
+                    <span className="button trash"
+                          onClick={(e) => dispatch(removeProduct())}>
+                      <i className="fa fa-trash"></i>
+                    </span>
+                </div>
+                <span className="button scroll down">
+                  <i className="fa fa-chevron-down"></i>
+                </span>
+            </div>
+        </div>
+    );
+  }
+}
+
+App.propTypes = {
+  dispatch: PropTypes.func.isRequired
+};
+
+function mapStateToProps(state) {
+  const { products } = state;
+
+  return {
+    products
+  };
+}
+
+export default connect(mapStateToProps)(App);