improve perfs, use flex-wrap on dashboard

src/components/DashboardPage/AccountCard.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React from 'react'
+import React, { PureComponent } from 'react'
 import styled from 'styled-components'
 
 import type { Account, Currency } from '@ledgerhq/live-common/lib/types'
@@ -20,80 +20,83 @@ const Wrapper = styled(Card).attrs({
   cursor: ${p => (p.onClick ? 'pointer' : 'default')};
 `
 
-const AccountCard = ({
+class AccountCard extends PureComponent<{
-  counterValue,
-  account,
-  onClick,
-  daysCount,
-  ...props
-}: {
   counterValue: Currency,
   account: Account,
-  onClick?: () => void,
+  onClick?: Account => void,
   daysCount: number,
-}) => (
+}> {
-  <Wrapper onClick={onClick} {...props}>
+  render() {
-    <Box flow={4}>
+    const { counterValue, account, onClick, daysCount, ...props } = this.props
-      <Box horizontal ff="Open Sans|SemiBold" flow={3} alignItems="center">
+    return (
-        <Box alignItems="center" justifyContent="center" style={{ color: account.currency.color }}>
+      <Wrapper onClick={onClick ? () => onClick(account) : null} {...props}>
-          <CryptoCurrencyIcon currency={account.currency} size={20} />
-        </Box>
-        <Box>
-          <Box style={{ textTransform: 'uppercase' }} fontSize={0} color="graphite">
-            {account.unit.code}
-          </Box>
-          <Box fontSize={4} color="dark">
-            {account.name}
-          </Box>
-        </Box>
-      </Box>
-      <Bar size={1} color="fog" />
-      <Box justifyContent="center">
-        <FormattedVal
-          alwaysShowSign={false}
-          color="dark"
-          unit={account.unit}
-          showCode
-          val={account.balance}
-        />
-      </Box>
-    </Box>
-    <CalculateBalance counterValue={counterValue} accounts={[account]} daysCount={daysCount}>
-      {({ isAvailable, balanceHistory, balanceStart, balanceEnd }) => (
         <Box flow={4}>
-          <Box flow={2} horizontal>
+          <Box horizontal ff="Open Sans|SemiBold" flow={3} alignItems="center">
-            <Box justifyContent="center">
+            <Box
-              {isAvailable ? (
+              alignItems="center"
-                <FormattedVal
+              justifyContent="center"
-                  animateTicker
+              style={{ color: account.currency.color }}
-                  unit={counterValue.units[0]}
+            >
-                  val={balanceEnd}
+              <CryptoCurrencyIcon currency={account.currency} size={20} />
-                  alwaysShowSign={false}
-                  showCode
-                  fontSize={3}
-                  color="graphite"
-                />
-              ) : null}
             </Box>
-            <Box grow justifyContent="center">
+            <Box>
-              {balanceStart && isAvailable ? (
+              <Box style={{ textTransform: 'uppercase' }} fontSize={0} color="graphite">
-                <DeltaChange from={balanceStart} to={balanceEnd} alwaysShowSign fontSize={3} />
+                {account.unit.code}
-              ) : null}
+              </Box>
+              <Box fontSize={4} color="dark">
+                {account.name}
+              </Box>
             </Box>
           </Box>
-          <Chart
+          <Bar size={1} color="fog" />
-            data={balanceHistory}
+          <Box justifyContent="center">
-            color={account.currency.color}
+            <FormattedVal
-            height={52}
+              alwaysShowSign={false}
-            hideAxis
+              color="dark"
-            isInteractive={false}
+              unit={account.unit}
-            id={`account-chart-${account.id}`}
+              showCode
-            unit={account.unit}
+              val={account.balance}
-          />
+            />
+          </Box>
         </Box>
-      )}
+        <CalculateBalance counterValue={counterValue} accounts={[account]} daysCount={daysCount}>
-    </CalculateBalance>
+          {({ isAvailable, balanceHistory, balanceStart, balanceEnd }) => (
-  </Wrapper>
+            <Box flow={4}>
-)
+              <Box flow={2} horizontal>
+                <Box justifyContent="center">
+                  {isAvailable ? (
+                    <FormattedVal
+                      animateTicker
+                      unit={counterValue.units[0]}
+                      val={balanceEnd}
+                      alwaysShowSign={false}
+                      showCode
+                      fontSize={3}
+                      color="graphite"
+                    />
+                  ) : null}
+                </Box>
+                <Box grow justifyContent="center">
+                  {balanceStart && isAvailable ? (
+                    <DeltaChange from={balanceStart} to={balanceEnd} alwaysShowSign fontSize={3} />
+                  ) : null}
+                </Box>
+              </Box>
+              <Chart
+                data={balanceHistory}
+                color={account.currency.color}
+                height={52}
+                hideAxis
+                isInteractive={false}
+                id={`account-chart-${account.id}`}
+                unit={account.unit}
+              />
+            </Box>
+          )}
+        </CalculateBalance>
+      </Wrapper>
+    )
+  }
+}
 
 export default AccountCard

src/components/DashboardPage/index.js

@@ -5,7 +5,6 @@ import { compose } from 'redux'
 import { translate } from 'react-i18next'
 import { connect } from 'react-redux'
 import { push } from 'react-router-redux'
-import chunk from 'lodash/chunk'
 import { createStructuredSelector } from 'reselect'
 
 import type { Account, Currency } from '@ledgerhq/live-common/lib/types'
@@ -51,36 +50,17 @@ type Props = {
 }
 
 type State = {
-  accountsChunk: Array<Array<?Account>>,
   selectedTime: string,
   daysCount: number,
 }
 
-const ACCOUNTS_BY_LINE = 3
-
-const getAccountsChunk = accounts => {
-  // create shallow copy of accounts, to be mutated
-  const listAccounts = [...accounts]
-
-  while (listAccounts.length % ACCOUNTS_BY_LINE !== 0) listAccounts.push(null)
-
-  return chunk(listAccounts, ACCOUNTS_BY_LINE)
-}
-
 class DashboardPage extends PureComponent<Props, State> {
   state = {
-    accountsChunk: getAccountsChunk(this.props.accounts),
     selectedTime: 'week',
     daysCount: 7,
   }
 
-  componentWillReceiveProps(nextProps) {
+  onAccountClick = account => this.props.push(`/account/${account.id}`)
-    if (nextProps.accounts !== this.props.accounts) {
-      this.setState({
-        accountsChunk: getAccountsChunk(nextProps.accounts),
-      })
-    }
-  }
 
   handleGreeting = () => {
     const localTimeHour = new Date().getHours()
@@ -104,8 +84,8 @@ class DashboardPage extends PureComponent<Props, State> {
   _cacheBalance = null
 
   render() {
-    const { push, accounts, t, counterValue } = this.props
+    const { accounts, t, counterValue } = this.props
-    const { accountsChunk, selectedTime, daysCount } = this.state
+    const { selectedTime, daysCount } = this.state
     const timeFrame = this.handleGreeting()
     const totalAccounts = accounts.length
 
@@ -161,31 +141,24 @@ class DashboardPage extends PureComponent<Props, State> {
                     <AccountsOrder />
                   </Box>
                 </Box>
-                <Box flow={5}>
+                <Box
-                  {accountsChunk.map((accountsByLine, i) => (
+                  horizontal
-                    <Box
+                  flexWrap="wrap"
-                      key={i} // eslint-disable-line react/no-array-index-key
+                  justifyContent="flex-start"
-                      horizontal
+                  alignItems="center"
-                      flow={5}
+                  style={{ margin: '0 -16px' }}
-                    >
+                >
-                      {accountsByLine.map(
+                  {accounts.concat(Array(3 - accounts.length % 3).fill(null)).map((account, i) => (
-                        (account: any, j) =>
+                    <Box key={account ? account.id : `placeholder_${i}`} flex="33%" p={16}>
-                          account === null ? (
+                      {account ? (
-                            <Box
+                        <AccountCard
-                              key={j} // eslint-disable-line react/no-array-index-key
+                          key={account.id}
-                              p={4}
+                          counterValue={counterValue}
-                              flex={1}
+                          account={account}
-                            />
+                          daysCount={daysCount}
-                          ) : (
+                          onClick={this.onAccountClick}
-                            <AccountCard
+                        />
-                              counterValue={counterValue}
+                      ) : null}
-                              account={account}
-                              daysCount={daysCount}
-                              key={account.id}
-                              onClick={() => push(`/account/${account.id}`)}
-                            />
-                          ),
-                      )}
                     </Box>
                   ))}
                 </Box>
@@ -193,7 +166,7 @@ class DashboardPage extends PureComponent<Props, State> {
               {displayOperations && (
                 <OperationsList
                   canShowMore
-                  onAccountClick={account => push(`/account/${account.id}`)}
+                  onAccountClick={this.onAccountClick}
                   accounts={accounts}
                   title={t('dashboard:recentActivity')}
                   withAccount

src/components/base/Box/index.js

@@ -8,6 +8,7 @@ import {
   boxShadow,
   color,
   flex,
+  flexWrap,
   fontSize,
   justifyContent,
   space,
@@ -34,6 +35,7 @@ const Box = styled.div`
   ${boxShadow};
   ${color};
   ${flex};
+  ${flexWrap};
   ${fontFamily};
   ${fontSize};
   ${justifyContent};

src/components/base/FormattedVal/__tests__/__snapshots__/FormattedVal.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`components FormattedVal renders a formatted val 1`] = `
 <div
-  className="k45ou1-0 iqaJGf e345n3-0 kZMOmW"
+  className="k45ou1-0 iqaJGf e345n3-0 ghfAOi"
   color="#66be54"
 >
   4
@@ -11,7 +11,7 @@ exports[`components FormattedVal renders a formatted val 1`] = `
 
 exports[`components FormattedVal renders a percent 1`] = `
 <div
-  className="k45ou1-0 iqaJGf e345n3-0 kZMOmW"
+  className="k45ou1-0 iqaJGf e345n3-0 ghfAOi"
   color="#66be54"
 >
   30 %
@@ -20,7 +20,7 @@ exports[`components FormattedVal renders a percent 1`] = `
 
 exports[`components FormattedVal shows code 1`] = `
 <div
-  className="k45ou1-0 iqaJGf e345n3-0 kZMOmW"
+  className="k45ou1-0 iqaJGf e345n3-0 ghfAOi"
   color="#66be54"
 >
   BTC 4
@@ -29,7 +29,7 @@ exports[`components FormattedVal shows code 1`] = `
 
 exports[`components FormattedVal shows sign 1`] = `
 <div
-  className="k45ou1-0 iqaJGf e345n3-0 kZMOmW"
+  className="k45ou1-0 iqaJGf e345n3-0 ghfAOi"
   color="#66be54"
 >
   + 4
@@ -38,7 +38,7 @@ exports[`components FormattedVal shows sign 1`] = `
 
 exports[`components FormattedVal shows sign 2`] = `
 <div
-  className="k45ou1-0 iqaJGf e345n3-0 fMRVKr"
+  className="k45ou1-0 iqaJGf e345n3-0 dBXPqF"
   color="#ea2e49"
 >
   - 4