OUETSCOAST_WEB_HOUR2

app/api/fakeFetch.js

@@ -1,4 +1,5 @@
 import wallets from './wallets.json';
+import orders from './orders.json';
 
 const delay = (ms) => (
   new Promise((resolve) => setTimeout(resolve, ms))
@@ -8,12 +9,18 @@ export const fakeFetch = (urlGetter, options) => (
   delay(300).then(() => {
     //ugly hack to create immutable copy of file.
     const walletsCopied = JSON.parse(JSON.stringify(wallets));
+    const ordersCopied = JSON.parse(JSON.stringify(orders));
     switch (urlGetter) {
       case "/api/wallets":
         switch (true) {
           default:
             return walletsCopied;
         }
+        case "/api/orders":
+        switch (true) {
+          default:
+            return ordersCopied;
+        }
       default:
         throw new Error('Unknown urlGetter:');
     }

app/containers/Book/actions.js

@@ -0,0 +1,7 @@
+import { LOAD_ORDERS } from './constants';
+
+export function loadOrders() {
+  return {
+    type: LOAD_ORDERS,
+  };
+}

app/containers/Book/constants.js

@@ -0,0 +1,2 @@
+export const LOAD_ORDERS = 'crypto_exchange/App/LOAD_ORDERS';
+export const ORDERS = 'orders';

app/containers/Book/index.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { withStyles } from 'material-ui/styles/index';
+
+import { createStructuredSelector } from 'reselect';
+import { loadOrders } from './actions';
+import injectReducer from '../../utils/injectReducer';
+import injectSaga from '../../utils/injectSaga';
+import { ORDERS } from './constants';
+import reducer from './reducer';
+import saga from './saga';
+import { selectOrders, makeSelectOrders } from './selectors';
+import { makeSelectLoading } from '../../asyncDisplayer/containers/IsLoading/selectors';
+import { makeSelectError } from '../../asyncDisplayer/containers/HasError/selectors';
+import LoadingError from '../../asyncDisplayer/components/LoadingError';
+
+
+const styles = () => ({
+  test: {
+    border: '2px solid',
+  },
+});
+
+class Order extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  render() {
+    return (
+      <div>
+        <button onClick={this.props.onLoadOrders} className={this.props.classes.test}>
+          click here to load orders
+        </button>
+        <LoadingError
+          loading={this.props.ordersLoading}
+          error={this.props.ordersError}
+          errorNode={<p>error</p>}
+        >
+          <div>
+            {this.props.orders.map((order, index) => (
+                <div>
+                  <div><span>orderType: </span><span>{wallet.orderType}</span></div>
+                  <div><span>price: </span><span>{wallet.price}</span></div>
+                  <div><span>currency: </span><span>{wallet.currency}</span></div>
+                  <div><span>quantity: </span><span>{wallet.quantity}</span></div>
+                  <div><span>ownerWallet: </span><span>{wallet.ownerWallet}</span></div>
+                </div>
+            ))}
+          </div>
+        </LoadingError>
+      </div>
+    );
+  }
+}
+
+export const mapStateToProps = createStructuredSelector({
+  orders: makeSelectOrders(),
+  ordersLoading: makeSelectLoading(selectOrders),
+  ordersError: makeSelectError(selectOrders),
+});
+
+export const mapDispatchToProps = (dispatch, ownProps) => ({
+  onLoadOrders: (evt) => {
+    if (evt !== undefined && evt.preventDefault) evt.preventDefault();
+    dispatch(loadOrders());
+  },
+});
+
+const withConnect = connect(mapStateToProps, mapDispatchToProps);
+
+const withSurveyReducer = injectReducer({
+  key: ORDERS,
+  reducer,
+});
+
+const withSurveySaga = injectSaga({
+  key: ORDERS,
+  saga,
+});
+
+
+export default compose(
+  withSurveyReducer,
+  withSurveySaga,
+  withConnect,
+)(withStyles(styles)(Order));

app/containers/Book/reducer.js

@@ -0,0 +1,35 @@
+import { fromJS } from 'immutable';
+import { combineReducers } from 'redux-immutable';
+
+import {
+  LOAD_ORDERS
+} from './constants';
+import isLoadingReducer from '../../asyncDisplayer/containers/IsLoading/reducer';
+import hasErrorReducer from '../../asyncDisplayer/containers/HasError/reducer';
+import { SUCCESS } from '../../asyncDisplayer/containers/constants';
+
+
+
+export const WALLETS_REDUCER_INITIAL_STATE = fromJS({
+  wallets: []
+});
+
+function orderReducer(state = WALLETS_REDUCER_INITIAL_STATE, action) {
+  switch (action.type) {
+    case `${LOAD_ORDERS}${SUCCESS}`:
+      return state
+      .set('orders', fromJS(action.entity));
+    default:
+      return state;
+  }
+}
+
+const options = {
+  action: LOAD_ORDERS,
+};
+
+export default combineReducers({
+  entity: orderReducer,
+  isLoading: isLoadingReducer(options),
+  hasError: hasErrorReducer(options),
+});

app/containers/Book/saga.js

@@ -0,0 +1,22 @@
+import { call, put, takeLatest } from 'redux-saga/effects';
+
+import request from '../../api/request';
+import { errorAction, successAction } from '../../asyncDisplayer/containers/actions';
+import { LOAD_ORDERS } from './constants';
+
+export function* fetchOrders(url, data) {
+  try {
+    const orders = yield call(request, url, data);
+    yield put(successAction(LOAD_ORDERS, orders));
+  } catch (err) {
+    yield put(errorAction(LOAD_ORDERS, err));
+  }
+}
+
+export function* getOrders(data) {
+  yield fetchOrders("/api/orders", data);
+}
+
+export default function* instrumentResultData() {
+  yield takeLatest(LOAD_ORDERS, getOrders);
+}

app/containers/Book/selectors.js

@@ -0,0 +1,13 @@
+import { createSelector } from 'reselect';
+
+const selectOrders = (state) => state.get('orders');
+
+const makeSelectOrders = () => createSelector(
+  selectOrders,
+  (state) => state.getIn(['entity', 'orders']).toJS()
+);
+
+export {
+  selectOrders,
+  makeSelectOrders,
+};

app/containers/HomePage/index.js

@@ -13,6 +13,8 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import messages from './messages';
 import Wallet from '../Wallet';
+import Order from '../Book';
+import { TextField } from 'material-ui';
 
 export default class HomePage extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
   render() {

app/containers/Wallet/index.js

@@ -24,6 +24,7 @@ const styles = () => ({
 
 class Wallet extends React.Component { // eslint-disable-line react/prefer-stateless-function
   render() {
+
     return (
       <div>
         <button onClick={this.props.onLoadWallets} className={this.props.classes.test}>
@@ -41,6 +42,7 @@ class Wallet extends React.Component { // eslint-disable-line react/prefer-state
                 <div>
                   <div><span>address: </span><span>{wallet.address}</span></div>
                   <div><span>username: </span><span>{wallet.username }</span></div>
+                  <div><span>Amount :</span><span>{wallet.amount} {wallet.currency }</span></div>
                 </div>
               </div>
             ))}