From 7b2152c035f5375b4eabe369d3e38cb99ae67095 Mon Sep 17 00:00:00 2001 From: Cyberslash17 Date: Sat, 24 Mar 2018 15:53:39 -0400 Subject: [PATCH] Hour2-attempt --- app/api/fakeFetch.js | 7 +++ app/containers/Book/actions.js | 7 +++ app/containers/Book/constants.js | 2 + app/containers/Book/index.js | 84 ++++++++++++++++++++++++++++++++ app/containers/Book/reducer.js | 35 +++++++++++++ app/containers/Book/saga.js | 22 +++++++++ app/containers/Book/selectors.js | 13 +++++ app/containers/HomePage/index.js | 2 + app/containers/Wallet/index.js | 2 + 9 files changed, 174 insertions(+) create mode 100644 app/containers/Book/actions.js create mode 100644 app/containers/Book/constants.js create mode 100644 app/containers/Book/index.js create mode 100644 app/containers/Book/reducer.js create mode 100644 app/containers/Book/saga.js create mode 100644 app/containers/Book/selectors.js diff --git a/app/api/fakeFetch.js b/app/api/fakeFetch.js index ab3c212..4ed3972 100644 --- a/app/api/fakeFetch.js +++ b/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:'); } diff --git a/app/containers/Book/actions.js b/app/containers/Book/actions.js new file mode 100644 index 0000000..4132349 --- /dev/null +++ b/app/containers/Book/actions.js @@ -0,0 +1,7 @@ +import { LOAD_ORDERS } from './constants'; + +export function loadOrders() { + return { + type: LOAD_ORDERS, + }; +} \ No newline at end of file diff --git a/app/containers/Book/constants.js b/app/containers/Book/constants.js new file mode 100644 index 0000000..fa9d7e5 --- /dev/null +++ b/app/containers/Book/constants.js @@ -0,0 +1,2 @@ +export const LOAD_ORDERS = 'crypto_exchange/App/LOAD_ORDERS'; +export const ORDERS = 'orders'; diff --git a/app/containers/Book/index.js b/app/containers/Book/index.js new file mode 100644 index 0000000..cb7b866 --- /dev/null +++ b/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 ( +
+ + error

} + > +
+ {this.props.orders.map((order, index) => ( +
+
orderType: {wallet.orderType}
+
price: {wallet.price}
+
currency: {wallet.currency}
+
quantity: {wallet.quantity}
+
ownerWallet: {wallet.ownerWallet}
+
+ ))} +
+ +
+ ); + } +} + +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)); diff --git a/app/containers/Book/reducer.js b/app/containers/Book/reducer.js new file mode 100644 index 0000000..aa46826 --- /dev/null +++ b/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), +}); \ No newline at end of file diff --git a/app/containers/Book/saga.js b/app/containers/Book/saga.js new file mode 100644 index 0000000..e2b1212 --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/app/containers/Book/selectors.js b/app/containers/Book/selectors.js new file mode 100644 index 0000000..97d267f --- /dev/null +++ b/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, +}; diff --git a/app/containers/HomePage/index.js b/app/containers/HomePage/index.js index fce5986..42ff3f1 100644 --- a/app/containers/HomePage/index.js +++ b/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() { diff --git a/app/containers/Wallet/index.js b/app/containers/Wallet/index.js index af0be71..0ea4e56 100644 --- a/app/containers/Wallet/index.js +++ b/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 (
))}