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,22 +20,23 @@ 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() {
+    const { counterValue, account, onClick, daysCount, ...props } = this.props
+    return (
+      <Wrapper onClick={onClick ? () => onClick(account) : null} {...props}>
         <Box flow={4}>
           <Box horizontal ff="Open Sans|SemiBold" flow={3} alignItems="center">
-        <Box alignItems="center" justifyContent="center" style={{ color: account.currency.color }}>
+            <Box
+              alignItems="center"
+              justifyContent="center"
+              style={{ color: account.currency.color }}
+            >
               <CryptoCurrencyIcon currency={account.currency} size={20} />
             </Box>
             <Box>
@@ -94,6 +95,8 @@ const AccountCard = ({
           )}
         </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}>
-                  {accountsChunk.map((accountsByLine, i) => (
                 <Box
-                      key={i} // eslint-disable-line react/no-array-index-key
                   horizontal
-                      flow={5}
+                  flexWrap="wrap"
+                  justifyContent="flex-start"
+                  alignItems="center"
+                  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
-                              key={j} // eslint-disable-line react/no-array-index-key
-                              p={4}
-                              flex={1}
-                            />
-                          ) : (
                         <AccountCard
+                          key={account.id}
                           counterValue={counterValue}
                           account={account}
                           daysCount={daysCount}
-                              key={account.id}
+                          onClick={this.onAccountClick}
-                              onClick={() => push(`/account/${account.id}`)}
                         />
-                          ),
+                      ) : null}
-                      )}
                     </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