Merge pull request #453 from gre/fix-sort-bugs

fix sort bugs + re-implement the Balance & name + fix countervalue for btc

package.json

@@ -42,7 +42,7 @@
     "@ledgerhq/hw-transport": "^4.12.0",
     "@ledgerhq/hw-transport-node-hid": "^4.12.0",
     "@ledgerhq/ledger-core": "1.4.5",
-    "@ledgerhq/live-common": "2.27.0",
+    "@ledgerhq/live-common": "2.27.1",
     "axios": "^0.18.0",
     "babel-runtime": "^6.26.0",
     "bcryptjs": "^2.4.3",

src/components/CalculateBalance.js

@@ -51,18 +51,15 @@ const mapStateToProps = (state: State, props: OwnProps) => {
       originalValues.push(value)
       const fromExchange = exchangeSettingsForAccountSelector(state, { account })
 
-      const cv =
-        fromExchange &&
-        counterValueExchange &&
-        CounterValues.calculateWithIntermediarySelector(state, {
-          value,
-          date,
-          from: account.currency,
-          fromExchange,
-          intermediary: intermediaryCurrency,
-          toExchange: counterValueExchange,
-          to: counterValueCurrency,
-        })
+      const cv = CounterValues.calculateWithIntermediarySelector(state, {
+        value,
+        date,
+        from: account.currency,
+        fromExchange,
+        intermediary: intermediaryCurrency,
+        toExchange: counterValueExchange,
+        to: counterValueCurrency,
+      })
       if (!cv && cv !== 0) {
         isAvailable = false
         return 0

src/components/CounterValue/index.js

@@ -39,18 +39,15 @@ const mapStateToProps = (state: State, props: OwnProps) => {
   const counterValueCurrency = counterValueCurrencySelector(state)
   const fromExchange = currencySettingsSelector(state, { currency }).exchange
   const toExchange = counterValueExchangeSelector(state)
-  const counterValue =
-    fromExchange &&
-    toExchange &&
-    CounterValues.calculateWithIntermediarySelector(state, {
-      from: currency,
-      fromExchange,
-      intermediary: intermediaryCurrency,
-      toExchange,
-      to: counterValueCurrency,
-      value,
-      date,
-    })
+  const counterValue = CounterValues.calculateWithIntermediarySelector(state, {
+    from: currency,
+    fromExchange,
+    intermediary: intermediaryCurrency,
+    toExchange,
+    to: counterValueCurrency,
+    value,
+    date,
+  })
 
   return {
     counterValueCurrency,

src/components/DashboardPage/AccountsOrder.js

@@ -1,18 +1,21 @@
 // @flow
 
 import React, { Component } from 'react'
-import sortBy from 'lodash/sortBy'
 import styled from 'styled-components'
 import { compose } from 'redux'
 import { translate } from 'react-i18next'
 import { connect } from 'react-redux'
-import debounce from 'lodash/debounce'
 import type { Account } from '@ledgerhq/live-common/lib/types'
+import CounterValues from 'helpers/countervalues'
 
 import type { T } from 'types/common'
 
-import { getOrderAccounts } from 'reducers/settings'
-import { createStructuredSelector } from 'reselect'
+import {
+  getOrderAccounts,
+  intermediaryCurrency,
+  currencySettingsForAccountSelector,
+} from 'reducers/settings'
+import { createStructuredSelector, createSelector } from 'reselect'
 import { reorderAccounts } from 'actions/accounts'
 import { accountsSelector } from 'reducers/accounts'
 import { saveSettings } from 'actions/settings'
@@ -26,22 +29,42 @@ import IconAngleDown from 'icons/AngleDown'
 import IconArrowDown from 'icons/ArrowDown'
 import IconArrowUp from 'icons/ArrowUp'
 
-function sortAccounts(accounts: Account[], orderAccounts: string) {
-  const [order, sort] = orderAccounts.split('|')
+type Props = {
+  t: T,
+  orderAccounts: string,
+  accounts: Account[],
+  accountsBtcBalance: number[], // eslint-disable-line
+  reorderAccounts: (string[]) => *,
+  saveSettings: (*) => *,
+}
 
-  const accountsSorted = sortBy(accounts, a => {
-    if (order === 'balance') {
-      return a.balance
-    }
+type SortMethod = 'name' | 'balance'
 
-    return a[order]
-  })
+const sortMethod: { [_: SortMethod]: (Account[], Props) => string[] } = {
+  balance: (accounts, { accountsBtcBalance }: Props) =>
+    accounts
+      .map((a, i) => [a.id, accountsBtcBalance[i]])
+      .sort((a, b) => a[1] - b[1])
+      .map(o => o[0]),
 
-  if (sort === 'asc') {
-    accountsSorted.reverse()
-  }
+  name: accounts =>
+    accounts
+      .slice(0)
+      .sort((a, b) => a.name.localeCompare(b.name))
+      .map(a => a.id),
+}
 
-  return accountsSorted
+function sortAccounts(accounts: Account[], orderAccounts: string, props: Props) {
+  const [order, sort] = orderAccounts.split('|')
+  if (order === 'name' || order === 'balance') {
+    const ids = sortMethod[order](accounts, props)
+    if (sort === 'asc') {
+      ids.reverse()
+    }
+    return ids
+  }
+  console.warn(`sortAccounts not implemented for ${orderAccounts}`)
+  return null
 }
 
 const OrderIcon = styled(Box).attrs({
@@ -52,9 +75,27 @@ const OrderIcon = styled(Box).attrs({
   opacity: ${p => (p.isActive ? 1 : 0)};
 `
 
+const accountsBtcBalanceSelector = createSelector(
+  accountsSelector,
+  state => state,
+  (accounts, state) =>
+    accounts.map(account => {
+      const { exchange } = currencySettingsForAccountSelector(state, { account })
+      return (
+        CounterValues.calculateSelector(state, {
+          from: account.currency,
+          to: intermediaryCurrency,
+          exchange,
+          value: account.balance,
+        }) || 0
+      )
+    }),
+)
+
 const mapStateToProps = createStructuredSelector({
   orderAccounts: getOrderAccounts,
   accounts: accountsSelector,
+  accountsBtcBalance: accountsBtcBalanceSelector,
 })
 
 const mapDispatchToProps = {
@@ -62,74 +103,53 @@ const mapDispatchToProps = {
   saveSettings,
 }
 
-type Props = {
-  t: T,
-  orderAccounts: string,
-  accounts: Account[],
-  reorderAccounts: (string[]) => *,
-  saveSettings: (*) => *,
-}
+class AccountsOrder extends Component<Props> {
+  onStateChange = ({ selectedItem: item }) => {
+    if (!item) {
+      return
+    }
+    const currentAccountOrder = this.getCurrentValue()
+    const [accountOrder] = item.key.split('|')
 
-type State = {
-  cachedValue: string | null,
-}
+    const order =
+      currentAccountOrder === accountOrder ? this.getReverseOrder() : this.getCurrentOrder()
 
-class AccountsOrder extends Component<Props, State> {
-  state = {
-    cachedValue: null,
+    this.setAccountOrder(`${accountOrder}|${order}`)
   }
 
-  componentWillMount() {
-    this.setState({ cachedValue: this.props.orderAccounts })
+  setAccountOrder = order => {
+    const { saveSettings, reorderAccounts } = this.props
+    const maybeIds = sortAccounts(this.props.accounts, order, this.props)
+    if (maybeIds) {
+      reorderAccounts(maybeIds)
+      saveSettings({ orderAccounts: order })
+    }
   }
 
-  setAccountOrder = debounce(
-    order => {
-      const { saveSettings } = this.props
-      this.setState({ cachedValue: order }, () => {
-        window.requestIdleCallback(() => {
-          this.props.reorderAccounts(sortAccounts(this.props.accounts, order).map(a => a.id))
-          saveSettings({ orderAccounts: order })
-        })
-      })
-    },
-    250,
-    {
-      leading: true,
-    },
-  )
-
   getCurrentOrder = () => {
-    const { cachedValue } = this.state
-
-    if (cachedValue !== null) {
-      return cachedValue.split('|')[1]
+    const { orderAccounts } = this.props
+    if (orderAccounts !== null) {
+      return orderAccounts.split('|')[1]
     }
-
     return 'desc'
   }
 
   getCurrentValue = () => {
-    const { cachedValue } = this.state
-
-    if (cachedValue !== null) {
-      return cachedValue.split('|')[0]
+    const { orderAccounts } = this.props
+    if (orderAccounts !== null) {
+      return orderAccounts.split('|')[0]
     }
-
     return null
   }
 
   getReverseOrder = () => {
     const currentOrder = this.getCurrentOrder()
-
     return currentOrder === 'desc' ? 'asc' : 'desc'
   }
 
   getSortItems = () => {
     const { t } = this.props
-
     const currentOrder = this.getCurrentOrder()
-
     return [
       {
         key: 'name',
@@ -139,10 +159,6 @@ class AccountsOrder extends Component<Props, State> {
         key: 'balance',
         label: t('accountsOrder:balance'),
       },
-      {
-        key: 'type',
-        label: t('accountsOrder:type'),
-      },
     ].map(item => ({
       ...item,
       key: `${item.key}|${currentOrder}`,
@@ -151,7 +167,6 @@ class AccountsOrder extends Component<Props, State> {
 
   renderItem = ({ item, isHighlighted, isActive }) => {
     const [, order] = item.key.split('|')
-
     return (
       <DropDownItem
         alignItems="center"
@@ -172,8 +187,7 @@ class AccountsOrder extends Component<Props, State> {
   }
 
   render() {
-    const { t } = this.props
-    const { cachedValue } = this.state
+    const { t, orderAccounts } = this.props
 
     const sortItems = this.getSortItems()
 
@@ -184,21 +198,8 @@ class AccountsOrder extends Component<Props, State> {
         horizontal
         items={sortItems}
         renderItem={this.renderItem}
-        keepOpenOnChange
-        onStateChange={({ selectedItem: item }) => {
-          if (!item) {
-            return
-          }
-
-          const currentAccountOrder = this.getCurrentValue()
-          const [accountOrder] = item.key.split('|')
-
-          const order =
-            currentAccountOrder === accountOrder ? this.getReverseOrder() : this.getCurrentOrder()
-
-          this.setAccountOrder(`${accountOrder}|${order}`)
-        }}
-        value={sortItems.find(item => item.key === cachedValue)}
+        onStateChange={this.onStateChange}
+        value={sortItems.find(item => item.key === orderAccounts)}
       >
         <Text ff="Open Sans|SemiBold" fontSize={4}>
           {t('common:sortBy')}

src/components/RequestAmount/index.js

@@ -80,8 +80,6 @@ const mapStateToProps = (state: State, props: OwnProps) => {
   const fromExchange = currencySettingsSelector(state, { currency }).exchange
   const toExchange = counterValueExchangeSelector(state)
   const getCounterValue = value =>
-    fromExchange &&
-    toExchange &&
     CounterValues.calculateWithIntermediarySelector(state, {
       from: currency,
       fromExchange,
@@ -92,8 +90,6 @@ const mapStateToProps = (state: State, props: OwnProps) => {
     })
 
   const getReverseCounterValue = value =>
-    fromExchange &&
-    toExchange &&
     CounterValues.reverseWithIntermediarySelector(state, {
       from: currency,
       fromExchange,

src/components/SettingsPage/sections/Currencies.js

@@ -110,19 +110,21 @@ class TabCurrencies extends PureComponent<Props, State> {
           }
         />
         <Body>
-          <Row
-            title={`Exchange (${currency.ticker}${intermediaryCurrency.ticker})`}
-            desc="The exchange to use"
-          >
-            <ExchangeSelect
-              small
-              from={currency}
-              to={intermediaryCurrency}
-              exchangeId={exchange}
-              onChange={this.handleChangeExchange}
-              minWidth={200}
-            />
-          </Row>
+          {currency !== intermediaryCurrency ? (
+            <Row
+              title={`Exchange (${currency.ticker}${intermediaryCurrency.ticker})`}
+              desc="The exchange to use"
+            >
+              <ExchangeSelect
+                small
+                from={currency}
+                to={intermediaryCurrency}
+                exchangeId={exchange}
+                onChange={this.handleChangeExchange}
+                minWidth={200}
+              />
+            </Row>
+          ) : null}
           {defaults.confirmationsNb ? (
             <Row
               title={t('settings:currencies.confirmationsNb')}

static/i18n/en/accountsOrder.yml

@@ -1,3 +1,2 @@
 name: Alphabetic
 balance: Balance
-type: Cryptocurrency

yarn.lock

@@ -1495,9 +1495,9 @@
     npm "^5.7.1"
     prebuild-install "^2.2.2"
 
-"@ledgerhq/live-common@2.27.0":
-  version "2.27.0"
-  resolved "https://registry.yarnpkg.com/@ledgerhq/live-common/-/live-common-2.27.0.tgz#342478f7b85607a11f20803e2f2862394b6f2bbe"
+"@ledgerhq/live-common@2.27.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/live-common/-/live-common-2.27.1.tgz#3ea96eb80b3e2676529c805c76e6b20ce14b95f0"
   dependencies:
     axios "^0.18.0"
     invariant "^2.2.2"