From 4efcc3c47f1305ed36f2769606641a71780053dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=ABck=20V=C3=A9zien?= <nainpuissant@gmail.com>
Date: Wed, 14 Feb 2018 18:14:51 +0100
Subject: [PATCH] Improved some perf on Dashboard page
---
src/components/DashboardPage/index.js | 44 +++++++++++++++------------
1 file changed, 25 insertions(+), 19 deletions(-)
diff --git a/src/components/DashboardPage/index.js b/src/components/DashboardPage/index.js
index dda36a6c..04910c34 100644
--- a/src/components/DashboardPage/index.js
+++ b/src/components/DashboardPage/index.js
@@ -49,6 +49,8 @@ type Props = {
}
type State = {
+ accountsChunk: Array<any>,
+ allTransactions: Array<Object>,
fakeDatas: Array<any>,
selectedTime: string,
}
@@ -93,10 +95,21 @@ const getAllTransactions = accounts => {
return sortBy(allTransactions, t => t.received_at).reverse()
}
+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 = {
- selectedTime: 'day',
+ accountsChunk: getAccountsChunk(this.props.accounts),
+ allTransactions: getAllTransactions(this.props.accounts),
fakeDatas: generateFakeDatas(this.props.accounts),
+ selectedTime: 'day',
}
componentDidMount() {
@@ -104,31 +117,24 @@ class DashboardPage extends PureComponent<Props, State> {
}
componentWillReceiveProps(nextProps) {
- if (
- this.state.fakeDatas.length === 0 &&
- nextProps.accounts.length !== this.props.accounts.length
- ) {
+ if (this.state.fakeDatas.length === 0) {
this.setState({
fakeDatas: generateFakeDatas(nextProps.accounts),
})
}
+
+ if (nextProps.accounts.length !== this.props.accounts.length) {
+ this.setState({
+ accountsChunk: getAccountsChunk(nextProps.accounts),
+ allTransactions: getAllTransactions(nextProps.accounts),
+ })
+ }
}
componentWillUnmount() {
clearTimeout(this._timeout)
}
- getAccountsChunk() {
- const { accounts } = this.props
-
- // 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)
- }
-
addFakeDatasOnAccounts = () => {
const { accounts } = this.props
@@ -155,7 +161,7 @@ class DashboardPage extends PureComponent<Props, State> {
render() {
const { push, accounts } = this.props
- const { selectedTime, fakeDatas } = this.state
+ const { accountsChunk, allTransactions, selectedTime, fakeDatas } = this.state
const totalAccounts = accounts.length
@@ -227,7 +233,7 @@ class DashboardPage extends PureComponent<Props, State> {
</Box>
</Box>
<Box flow={5}>
- {this.getAccountsChunk().map((accountsByLine, i) => (
+ {accountsChunk.map((accountsByLine, i) => (
<Box
key={i} // eslint-disable-line react/no-array-index-key
horizontal
@@ -255,7 +261,7 @@ class DashboardPage extends PureComponent<Props, State> {
</Box>
</Box>
<Card p={0} px={4} title="Recent activity">
- <TransactionsList withAccounts transactions={getAllTransactions(accounts)} />
+ <TransactionsList withAccounts transactions={allTransactions} />
</Card>
</Fragment>
)}