Merge pull request #223 from AntonNazarenko/fix/orderhistory

add dynamic order history table

src/components/OrderHistoryTable/OrderHistoryTable.columns.js

@@ -10,12 +10,17 @@ export default [{
   dataKey: 'amount',
   width: 120,
   cellRenderer: ({ rowData = {} }) => (rowData.amount < 0 // eslint-disable-line
-    ? <span className='hfui-red'>{rowData.amount}</span>
-    : <span className='hfui-green'>{rowData.amount}</span>
+    ? <span className='hfui-red'>{rowData.originalAmount}</span>
+    : <span className='hfui-green'>{rowData.originalAmount}</span>
   ),
 }, {
   label: 'Type',
   dataKey: 'type',
-  width: 100,
+  width: 150,
   cellRenderer: ({ rowData = {} }) => rowData.type,
+}, {
+  label: 'Status',
+  dataKey: 'status',
+  width: 100,
+  cellRenderer: ({ rowData = {} }) => rowData.status,
 }]

src/components/OrderHistoryTable/OrderHistoryTable.container.js

@@ -0,0 +1,11 @@
+import { connect } from 'react-redux'
+
+import OrderHistoryTable from './OrderHistoryTable'
+
+const mapStateToProps = (state = {}) => ({
+  orderHistory: state.ws.orderHistory.orders,
+}) //eslint-disable-line
+
+const mapDispatchToProps = dispatch => ({}) //eslint-disable-line
+
+export default connect(mapStateToProps, mapDispatchToProps)(OrderHistoryTable)

src/components/OrderHistoryTable/OrderHistoryTable.js

@@ -0,0 +1,43 @@
+import React from 'react'
+
+import Table from '../../ui/Table'
+import Panel from '../../ui/Panel'
+import OrderHistoryTableColumns from './OrderHistoryTable.columns'
+import { propTypes, defaultProps } from './OrderHistoryTable.props'
+
+export default class OrderHistoryTable extends React.PureComponent {
+  static propTypes = propTypes
+  static defaultProps = defaultProps
+
+  constructor(props) {
+    super(props)
+    this.onRowClick = this.onRowClick.bind(this)
+  }
+
+  onRowClick({ index } = {}) {
+    const { onSelect, orders } = this.props
+    onSelect(orders[index])
+  }
+
+  render() {
+    const {
+      onRemove, dark, orderHistory,
+    } = this.props
+    return (
+      <Panel
+        label='ORDER HISTORY'
+        onRemove={onRemove}
+        dark={dark}
+        darkHeader={dark}
+      >
+        <Table
+          data={orderHistory}
+          columns={OrderHistoryTableColumns}
+          onRowClick={this.onRowClick}
+          defaultSortBy='mts'
+          defaultSortDirection='ASC'
+        />
+      </Panel>
+    )
+  }
+}

src/components/OrderHistoryTable/index.js

@@ -1,42 +1,3 @@
-import React from 'react'
+import OrderHistoryTable from './OrderHistoryTable.container'
 
-import Table from '../../ui/Table'
-import Panel from '../../ui/Panel'
-import OrderHistoryTableColumns from './OrderHistoryTable.columns'
-import { propTypes, defaultProps } from './OrderHistoryTable.props'
-
-export default class OrderHistoryTable extends React.PureComponent {
-  static propTypes = propTypes
-  static defaultProps = defaultProps
-
-  constructor(props) {
-    super(props)
-    this.onRowClick = this.onRowClick.bind(this)
-  }
-
-  onRowClick({ index } = {}) {
-    const { onSelect, orders } = this.props
-    onSelect(orders[index])
-  }
-
-  render() {
-    const { orders, onRemove, dark } = this.props
-
-    return (
-      <Panel
-        label='ORDER HISTORY'
-        onRemove={onRemove}
-        dark={dark}
-        darkHeader={dark}
-      >
-        <Table
-          data={orders}
-          columns={OrderHistoryTableColumns}
-          onRowClick={this.onRowClick}
-          defaultSortBy='mts'
-          defaultSortDirection='ASC'
-        />
-      </Panel>
-    )
-  }
-}
+export default OrderHistoryTable

src/redux/reducers/ws/index.js

@@ -12,6 +12,7 @@ import apiClients from './api_clients'
 import positions from './positions'
 import balances from './balances'
 import orders from './orders'
+import orderHistory from './order_history'
 import algoOrders from './algo_orders'
 import backtest from './backtest'
 
@@ -21,6 +22,7 @@ export default combineReducers({
   positions,
   balances,
   orders,
+  orderHistory,
   apiClients,
   strategies,
   tickers,

src/redux/reducers/ws/order_history.js

@@ -0,0 +1,29 @@
+import types from '../../constants/ws'
+import { orderAdapter } from '../../adapters/ws'
+
+const getInitialState = () => {
+  return {}
+}
+
+export default (state = getInitialState(), action = {}) => {
+  const { type, payload = [] } = action
+
+  switch (type) {
+    case types.DATA_ORDER_CLOSE: {
+      const { order = [] } = payload
+      const { orders = [] } = state
+      const o = orderAdapter(order)
+      return {
+        ...state,
+        orders: [
+          o,
+          ...orders,
+        ],
+      }
+    }
+
+    default: {
+      return state
+    }
+  }
+}