improve perfs, use flex-wrap on dashboard

7 years ago · d423f620ae
4 changed files with 100 additions and 122 deletions
--- a/src/components/DashboardPage/AccountCard.js
+++ b/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 = ({
-  counterValue,
-  account,
-  onClick,
-  daysCount,
-  ...props
-}: {
+class AccountCard extends PureComponent<{
  counterValue: Currency,
  account: Account,
-  onClick?: () => void,
+  onClick?: Account => void,
  daysCount: number,
-}) => (
-  <Wrapper onClick={onClick} {...props}>
-    <Box flow={4}>
-      <Box horizontal ff="Open Sans|SemiBold" flow={3} alignItems="center">
-        <Box alignItems="center" justifyContent="center" style={{ color: account.currency.color }}>
-          <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 }) => (
+}> {
+  render() {
+    const { counterValue, account, onClick, daysCount, ...props } = this.props
+    return (
+      <Wrapper onClick={onClick ? () => onClick(account) : null} {...props}>
        <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 horizontal ff="Open Sans|SemiBold" flow={3} alignItems="center">
+            <Box
+              alignItems="center"
+              justifyContent="center"
+              style={{ color: account.currency.color }}
+            >
+              <CryptoCurrencyIcon currency={account.currency} size={20} />
            </Box>
-            <Box grow justifyContent="center">
-              {balanceStart && isAvailable ? (
-                <DeltaChange from={balanceStart} to={balanceEnd} alwaysShowSign fontSize={3} />
-              ) : null}
+            <Box>
+              <Box style={{ textTransform: 'uppercase' }} fontSize={0} color="graphite">
+                {account.unit.code}
+              </Box>
+              <Box fontSize={4} color="dark">
+                {account.name}
+              </Box>
            </Box>
          </Box>
-          <Chart
-            data={balanceHistory}
-            color={account.currency.color}
-            height={52}
-            hideAxis
-            isInteractive={false}
-            id={`account-chart-${account.id}`}
-            unit={account.unit}
-          />
+          <Bar size={1} color="fog" />
+          <Box justifyContent="center">
+            <FormattedVal
+              alwaysShowSign={false}
+              color="dark"
+              unit={account.unit}
+              showCode
+              val={account.balance}
+            />
+          </Box>
        </Box>
-      )}
-    </CalculateBalance>
-  </Wrapper>
-)
+        <CalculateBalance counterValue={counterValue} accounts={[account]} daysCount={daysCount}>
+          {({ isAvailable, balanceHistory, balanceStart, balanceEnd }) => (
+            <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
--- a/src/components/DashboardPage/index.js
+++ b/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) {
-    if (nextProps.accounts !== this.props.accounts) {
-      this.setState({
-        accountsChunk: getAccountsChunk(nextProps.accounts),
-      })
-    }
-  }
+  onAccountClick = account => this.props.push(`/account/${account.id}`)

  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 { accountsChunk, selectedTime, daysCount } = this.state
+    const { accounts, t, counterValue } = this.props
+    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}
-                    >
-                      {accountsByLine.map(
-                        (account: any, j) =>
-                          account === null ? (
-                            <Box
-                              key={j} // eslint-disable-line react/no-array-index-key
-                              p={4}
-                              flex={1}
-                            />
-                          ) : (
-                            <AccountCard
-                              counterValue={counterValue}
-                              account={account}
-                              daysCount={daysCount}
-                              key={account.id}
-                              onClick={() => push(`/account/${account.id}`)}
-                            />
-                          ),
-                      )}
+                <Box
+                  horizontal
+                  flexWrap="wrap"
+                  justifyContent="flex-start"
+                  alignItems="center"
+                  style={{ margin: '0 -16px' }}
+                >
+                  {accounts.concat(Array(3 - accounts.length % 3).fill(null)).map((account, i) => (
+                    <Box key={account ? account.id : `placeholder_${i}`} flex="33%" p={16}>
+                      {account ? (
+                        <AccountCard
+                          key={account.id}
+                          counterValue={counterValue}
+                          account={account}
+                          daysCount={daysCount}
+                          onClick={this.onAccountClick}
+                        />
+                      ) : 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
--- a/src/components/base/Box/index.js
+++ b/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};
--- a/src/components/base/FormattedVal/tests/snapshots/FormattedVal.test.js.snap
+++ b/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