Prevent calculs on Dashboard

src/components/DashboardPage/index.js

@@ -51,6 +51,7 @@ type State = {
   accountsChunk: Array<any>,
   allTransactions: Array<Object>,
   fakeDatas: Array<any>,
+  fakeDatasMerge: Array<any>,
   selectedTime: string,
 }
 
@@ -73,6 +74,20 @@ const generateFakeData = v => ({
 const generateFakeDatas = accounts =>
   accounts.map(() => [...Array(25).keys()].map(v => generateFakeData(v + 1)))
 
+const mergeFakeDatas = fakeDatas =>
+  takeRight(
+    fakeDatas.reduce((res, data) => {
+      data.forEach((d, i) => {
+        res[i] = {
+          name: d.name,
+          value: (res[i] ? res[i].value : 0) + d.value,
+        }
+      })
+      return res
+    }, []),
+    25,
+  )
+
 const getAllTransactions = accounts => {
   const allTransactions = accounts.reduce((result, account) => {
     const transactions = get(account, 'data.transactions', [])
@@ -107,11 +122,18 @@ const getAccountsChunk = accounts => {
 }
 
 class DashboardPage extends PureComponent<Props, State> {
-  state = {
-    accountsChunk: getAccountsChunk(this.props.accounts),
-    allTransactions: getAllTransactions(this.props.accounts),
-    fakeDatas: generateFakeDatas(this.props.accounts),
-    selectedTime: 'day',
+  constructor(props) {
+    super()
+
+    const fakeDatas = generateFakeDatas(props.accounts)
+
+    this.state = {
+      accountsChunk: getAccountsChunk(props.accounts),
+      allTransactions: getAllTransactions(props.accounts),
+      fakeDatas: generateFakeDatas(props.accounts),
+      fakeDatasMerge: mergeFakeDatas(fakeDatas),
+      selectedTime: 'day',
+    }
   }
 
   componentDidMount() {
@@ -120,8 +142,11 @@ class DashboardPage extends PureComponent<Props, State> {
 
   componentWillReceiveProps(nextProps) {
     if (this.state.fakeDatas.length === 0) {
+      const fakeDatas = generateFakeDatas(nextProps.accounts)
+
       this.setState({
-        fakeDatas: generateFakeDatas(nextProps.accounts),
+        fakeDatas,
+        fakeDatasMerge: mergeFakeDatas(fakeDatas),
       })
     }
 
@@ -139,19 +164,22 @@ class DashboardPage extends PureComponent<Props, State> {
 
   addFakeDatasOnAccounts = () => {
     const { accounts } = this.props
-
-    window.requestAnimationFrame(() => {
-      this.setState(prev => ({
-        fakeDatas: [
-          ...accounts.reduce((res, acc, i) => {
-            if (res[i]) {
-              const nextIndex = res[i].length
-              res[i][nextIndex] = generateFakeData(nextIndex)
-            }
-            return res
-          }, prev.fakeDatas),
-        ],
-      }))
+    const { fakeDatas } = this.state
+
+    const newFakeDatas = accounts.reduce((res, acc, i) => {
+      if (res[i]) {
+        const nextIndex = res[i].length
+        res[i][nextIndex] = generateFakeData(nextIndex)
+        res[i] = takeRight(res[i], 25)
+      }
+      return res
+    }, fakeDatas)
+
+    window.requestIdleCallback(() => {
+      this.setState({
+        fakeDatas: newFakeDatas,
+        fakeDatasMerge: mergeFakeDatas(newFakeDatas),
+      })
 
       this._timeout = setTimeout(() => {
         this.addFakeDatasOnAccounts()
@@ -163,8 +191,9 @@ class DashboardPage extends PureComponent<Props, State> {
 
   render() {
     const { push, accounts } = this.props
-    const { accountsChunk, allTransactions, selectedTime, fakeDatas } = this.state
+    const { accountsChunk, allTransactions, selectedTime, fakeDatas, fakeDatasMerge } = this.state
 
+    let accountIndex = 0
     const totalAccounts = accounts.length
 
     return (
@@ -205,18 +234,7 @@ class DashboardPage extends PureComponent<Props, State> {
                   }}
                   color="#5286f7"
                   height={250}
-                  data={takeRight(
-                    fakeDatas.reduce((res, data) => {
-                      data.forEach((d, i) => {
-                        res[i] = {
-                          name: d.name,
-                          value: (res[i] ? res[i].value : 0) + d.value,
-                        }
-                      })
-                      return res
-                    }, []),
-                    25,
-                  )}
+                  data={fakeDatasMerge}
                 />
               </Box>
             </Card>
@@ -251,7 +269,7 @@ class DashboardPage extends PureComponent<Props, State> {
                           <AccountCard
                             key={account.id}
                             account={account}
-                            data={takeRight(fakeDatas[j], 25)}
+                            data={fakeDatas[accountIndex++]}
                             onClick={() => push(`/account/${account.id}`)}
                           />
                         ),
@@ -261,7 +279,11 @@ class DashboardPage extends PureComponent<Props, State> {
               </Box>
             </Box>
             <Card p={0} px={4} title="Recent activity">
-              <TransactionsList withAccounts transactions={allTransactions} />
+              <TransactionsList
+                withAccounts
+                transactions={allTransactions}
+                onAccountClick={account => push(`/account/${account.id}`)}
+              />
             </Card>
           </Fragment>
         )}

src/components/TransactionsList/index.js

@@ -4,6 +4,7 @@ import React, { Component } from 'react'
 import styled from 'styled-components'
 import moment from 'moment'
 import get from 'lodash/get'
+import noop from 'lodash/noop'
 import isEqual from 'lodash/isEqual'
 
 import type { Transaction as TransactionType } from 'types/common'
@@ -70,7 +71,13 @@ const Cell = styled(Box).attrs({
   width: ${p => (p.size ? `${p.size}px` : '')};
 `
 
-const Transaction = ({ tx }: { tx: TransactionType }) => {
+const Transaction = ({
+  onAccountClick,
+  tx,
+}: {
+  onAccountClick?: Function,
+  tx: TransactionType,
+}) => {
   const time = moment(tx.received_at)
   return (
     <TransactionRaw>
@@ -81,7 +88,13 @@ const Transaction = ({ tx }: { tx: TransactionType }) => {
         </Box>
       </Cell>
       {tx.account && (
-        <Cell size={ACCOUNT_COL_SIZE} horizontal flow={2}>
+        <Cell
+          size={ACCOUNT_COL_SIZE}
+          horizontal
+          flow={2}
+          style={{ cursor: 'pointer' }}
+          onClick={() => onAccountClick && onAccountClick(tx.account)}
+        >
           <Box align="center" justify="center" style={{ color: '#fcb653' }}>
             <IconCurrencyBitcoin height={16} width={16} />
           </Box>
@@ -114,13 +127,19 @@ const Transaction = ({ tx }: { tx: TransactionType }) => {
   )
 }
 
+Transaction.defaultProps = {
+  onAccountClick: noop,
+}
+
 type Props = {
+  onAccountClick?: Function,
   transactions: Array<TransactionType>,
   withAccounts?: boolean,
 }
 
 class TransactionsList extends Component<Props> {
   static defaultProps = {
+    onAccountClick: noop,
     withAccounts: false,
   }
 
@@ -137,7 +156,7 @@ class TransactionsList extends Component<Props> {
   _hashCache = null
 
   render() {
-    const { transactions, withAccounts } = this.props
+    const { transactions, withAccounts, onAccountClick } = this.props
 
     this._hashCache = this.getHashCache(transactions)
 
@@ -154,7 +173,11 @@ class TransactionsList extends Component<Props> {
         <Defer>
           <Box>
             {transactions.map(t => (
-              <Transaction key={`{${t.hash}-${t.account ? t.account.id : ''}`} tx={t} />
+              <Transaction
+                key={`{${t.hash}-${t.account ? t.account.id : ''}`}
+                onAccountClick={onAccountClick}
+                tx={t}
+              />
             ))}
           </Box>
         </Defer>