Add option to see orders of all coins in the order panel [WIP]

orko-ui/.gitignore

@@ -21,3 +21,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 /target/
+
+.idea

orko-ui/src/containers/OpenOrdersContainer.js

@@ -23,7 +23,7 @@ import WithCoin from "./WithCoin"
 import WhileLoading from "../components/WhileLoading"
 import * as exchangeActions from "../store/exchanges/actions"
 import * as jobActions from "../store/job/actions"
-import { getOrdersForSelectedCoin } from "../selectors/coins"
+import { getOrdersForAllCoin, getOrdersForSelectedCoin } from '../selectors/coins'
 
 class OpenOrdersContainer extends React.Component {
   onCancelExchange = (id, coin) => {
@@ -42,7 +42,7 @@ class OpenOrdersContainer extends React.Component {
             <WhileLoading data={this.props.orders} padded>
               {() => (
                 <OpenOrders
-                  orders={this.props.orders}
+                  orders={this.props.showAll? this.props.allOrders: this.props.orders}
                   onCancelExchange={id => this.onCancelExchange(id, coin)}
                   onCancelServer={this.onCancelServer}
                   onWatch={this.onWatch}
@@ -59,7 +59,8 @@ class OpenOrdersContainer extends React.Component {
 
 function mapStateToProps(state, props) {
   return {
-    orders: getOrdersForSelectedCoin(state)
+    orders: getOrdersForSelectedCoin(state),
+    allOrders: getOrdersForAllCoin(state)
   }
 }
 

orko-ui/src/containers/OrdersContainer.js

@@ -15,40 +15,61 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import React from "react"
-import Section from "../components/primitives/Section"
-import Tab from "../components/primitives/Tab"
-import OpenOrdersContainer from "./OpenOrdersContainer"
-import UserTradeHistoryContainer from "./UserTradeHistoryContainer"
-import GetPageVisibility from "../components/GetPageVisibility"
-import RenderIf from "../components/RenderIf"
+import React from 'react'
+import Section from '../components/primitives/Section'
+import Tab from '../components/primitives/Tab'
+import OpenOrdersContainer from './OpenOrdersContainer'
+import UserTradeHistoryContainer from './UserTradeHistoryContainer'
+import GetPageVisibility from '../components/GetPageVisibility'
+import RenderIf from '../components/RenderIf'
+import { Checkbox } from 'semantic-ui-react'
+import { getValueFromLS, saveValueToLS } from '../util/localStorage'
+
+const ORDER_STORAGE_KEY = 'OrdersContainer.order_show_all'
 
 class OrdersContainer extends React.Component {
-  constructor(props) {
+  constructor (props) {
     super(props)
-    this.state = { selected: "open" }
+    var showAll = getValueFromLS(ORDER_STORAGE_KEY) !== 'false'
+    if (showAll === null) showAll = false
+    this.state = {
+      selected: 'open',
+      showAll
+    }
   }
 
   buttons = () => (
     <span>
+    <Tab
+      selected={this.state.showAll}
+      onClick={() => {
+        this.setState(
+          prev => ({showAll: !prev.showAll}),
+          () => saveValueToLS(ORDER_STORAGE_KEY, this.state.showAll)
+        )
+      }}
+      title="Show orders for all coins or selected coins"
+      >
+        Show All
+      </Tab>
       <Tab
-        selected={this.state.selected === "open"}
-        onClick={() => this.setState({ selected: "open" })}
-        title="Show open orders for the selected coin"
+        selected={this.state.selected === 'open'}
+        onClick={() => this.setState({selected: 'open'})}
+        title={this.state.showAll ? 'Show open orders for all coin' : 'Show open orders for the selected coin'}
       >
         Open
       </Tab>
       <Tab
-        selected={this.state.selected === "history"}
-        onClick={() => this.setState({ selected: "history" })}
-        title="Show order history for the selected coin"
+        selected={this.state.selected === 'history'}
+        onClick={() => this.setState({selected: 'history'})}
+        title={this.state.showAll ? 'Show order history for all coin' : 'Show order history for the selected coin'}
       >
         History
       </Tab>
     </span>
   )
 
-  render() {
+  render () {
     return (
       <GetPageVisibility>
         {visible => (
@@ -59,10 +80,10 @@ class OrdersContainer extends React.Component {
               heading="Orders"
               buttons={this.buttons}
             >
-              {this.state.selected === "open" ? (
-                <OpenOrdersContainer />
+              {this.state.selected === 'open' ? (
+                <OpenOrdersContainer showAll={this.state.showAll}/>
               ) : (
-                <UserTradeHistoryContainer />
+                <UserTradeHistoryContainer showAll={this.state.showAll}/>
               )}
             </Section>
           </RenderIf>

orko-ui/src/selectors/coins.js

@@ -65,6 +65,30 @@ function jobTriggerMatchesCoin(job, coin) {
   )
 }
 
+function serverJobDecorate(job) {
+  return {
+    runningAt: "SERVER",
+    jobId: job.id,
+    type: job.high
+      ? job.high.job.direction === "BUY"
+        ? "BID"
+        : "ASK"
+      : job.low.job.direction === "BUY"
+        ? "BID"
+        : "ASK",
+    stopPrice: job.high
+      ? Number(job.high.thresholdAsString)
+      : Number(job.low.thresholdAsString),
+    limitPrice: job.high
+      ? Number(job.high.job.limitPrice)
+      : Number(job.low.job.limitPrice),
+    originalAmount: job.high
+      ? Number(job.high.job.amount)
+      : Number(job.low.job.amount),
+    cumulativeAmount: "--"
+  }
+}
+
 export const getOrdersForSelectedCoin = createSelector(
   [getOrders, getStopJobs, getSelectedCoin],
   (orders, stopJobs, selectedCoin) => {
@@ -74,27 +98,23 @@ export const getOrdersForSelectedCoin = createSelector(
 
     const server = stopJobs
       .filter(job => jobTriggerMatchesCoin(job, selectedCoin))
-      .map(job => ({
-        runningAt: "SERVER",
-        jobId: job.id,
-        type: job.high
-          ? job.high.job.direction === "BUY"
-            ? "BID"
-            : "ASK"
-          : job.low.job.direction === "BUY"
-          ? "BID"
-          : "ASK",
-        stopPrice: job.high
-          ? Number(job.high.thresholdAsString)
-          : Number(job.low.thresholdAsString),
-        limitPrice: job.high
-          ? Number(job.high.job.limitPrice)
-          : Number(job.low.job.limitPrice),
-        originalAmount: job.high
-          ? Number(job.high.job.amount)
-          : Number(job.low.job.amount),
-        cumulativeAmount: "--"
-      }))
+      .map(job => serverJobDecorate(job))
+
+    result = result.concat(server)
+
+    if (result.length === 0 && !orders) return null
+
+    return result
+  }
+)
+
+export const getOrdersForAllCoin = createSelector(
+  [getOrders, getStopJobs],
+  (orders, stopJobs) => {
+    var result = !orders ? [] : orders.filter(o => !o.deleted)
+
+    const server = stopJobs
+      .map(job => serverJobDecorate(job))
 
     result = result.concat(server)