Merge pull request #126 from loeck/master

Improved some perf on Dashboard page

src/components/DashboardPage/AccountCard.js

@@ -9,6 +9,7 @@ import IconCurrencyBitcoin from 'icons/currencies/Bitcoin'
 import { AreaChart } from 'components/base/Chart'
 import Bar from 'components/base/Bar'
 import Box, { Card } from 'components/base/Box'
+import Defer from 'components/base/Defer'
 import FormattedVal from 'components/base/FormattedVal'
 
 const AccountCard = ({
@@ -46,15 +47,17 @@ const AccountCard = ({
         />
       )}
     </Box>
-    <AreaChart
-      tiny
-      id={`account-chart-${account.id}`}
-      color="#fcb653"
-      height={52}
-      data={data}
-      strokeWidth={1}
-      linearGradient={[[5, 0.4], [80, 0]]}
-    />
+    <Defer>
+      <AreaChart
+        tiny
+        id={`account-chart-${account.id}`}
+        color="#fcb653"
+        height={52}
+        data={data}
+        strokeWidth={1}
+        linearGradient={[[5, 0.4], [80, 0]]}
+      />
+    </Defer>
   </Card>
 )
 

src/components/DashboardPage/index.js

@@ -25,6 +25,7 @@ import { saveSettings } from 'actions/settings'
 import { AreaChart } from 'components/base/Chart'
 import Box, { Card } from 'components/base/Box'
 import Pills from 'components/base/Pills'
+import Defer from 'components/base/Defer'
 import Text from 'components/base/Text'
 import TransactionsList from 'components/TransactionsList'
 
@@ -48,6 +49,8 @@ type Props = {
 }
 
 type State = {
+  accountsChunk: Array<any>,
+  allTransactions: Array<Object>,
   fakeDatas: Array<any>,
   selectedTime: string,
 }
@@ -92,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() {
@@ -103,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
 
@@ -154,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
 
@@ -185,31 +192,33 @@ class DashboardPage extends PureComponent<Props, State> {
               <Box px={6}>
                 <BalanceInfos since={selectedTime} />
               </Box>
-              <Box ff="Open Sans" fontSize={4} color="warmGrey">
-                <AreaChart
-                  id="dashboard-chart"
-                  margin={{
-                    top: space[6],
-                    bottom: 0,
-                    left: space[6] - 10,
-                    right: space[6],
-                  }}
-                  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,
-                  )}
-                />
-              </Box>
+              <Defer>
+                <Box ff="Open Sans" fontSize={4} color="warmGrey">
+                  <AreaChart
+                    id="dashboard-chart"
+                    margin={{
+                      top: space[6],
+                      bottom: 0,
+                      left: space[6] - 10,
+                      right: space[6],
+                    }}
+                    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,
+                    )}
+                  />
+                </Box>
+              </Defer>
             </Card>
             <Box flow={4}>
               <Box horizontal align="flex-end">
@@ -224,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
@@ -252,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>
         )}

src/components/TopBar.js

@@ -35,6 +35,7 @@ const Inner = styled(Box).attrs({
   horizontal: true,
   grow: true,
   borderBottom: true,
+  flow: 4,
   borderWidth: 1,
   borderColor: p => rgba(p.theme.colors.black, 0.15),
 })``
@@ -146,15 +147,17 @@ class TopBar extends PureComponent<Props, State> {
             <Box justify="center">
               <Bar />
             </Box>
-            <Box justify="flex-end" horizontal>
-              {hasPassword && <LockApplication onLock={this.handleLock} />}
-            </Box>
           </Box>
           <Box horizontal noShrink>
             <DropDown
-              items={[{ key: 'empty', label: 'Nothing here yet' }]}
+              items={
+                hasPassword
+                  ? [{ key: 'lock', label: 'Lock application', onClick: this.handleLock }]
+                  : []
+              }
               ff="Open Sans|SemiBold"
               fontSize={4}
+              offsetTop={-2}
             >
               <Box horizontal align="center" flow={1} color="warmGrey">
                 <Box>{'Khalil Benihoud'}</Box>
@@ -168,31 +171,4 @@ class TopBar extends PureComponent<Props, State> {
   }
 }
 
-const LockApplication = ({ onLock }: { onLock: Function }) => (
-  <Box
-    relative
-    color="night"
-    mr={20}
-    horizontal
-    flow={10}
-    onClick={onLock}
-    style={{ cursor: 'pointer' }}
-  >
-    <LockIcon height={20} width={20} />
-  </Box>
-)
-
-const LockIcon = props => (
-  <svg {...props} viewBox="0 0 482.8 482.8">
-    <path
-      d="M395.95 210.4h-7.1v-62.9c0-81.3-66.1-147.5-147.5-147.5-81.3 0-147.5 66.1-147.5 147.5 0 7.5 6 13.5 13.5 13.5s13.5-6 13.5-13.5c0-66.4 54-120.5 120.5-120.5 66.4 0 120.5 54 120.5 120.5v62.9h-275c-14.4 0-26.1 11.7-26.1 26.1v168.1c0 43.1 35.1 78.2 78.2 78.2h204.9c43.1 0 78.2-35.1 78.2-78.2V236.5c0-14.4-11.7-26.1-26.1-26.1zm-.9 194.2c0 28.2-22.9 51.2-51.2 51.2h-204.8c-28.2 0-51.2-22.9-51.2-51.2V237.4h307.2v167.2z"
-      fill="currentColor"
-    />
-    <path
-      d="M241.45 399.1c27.9 0 50.5-22.7 50.5-50.5 0-27.9-22.7-50.5-50.5-50.5-27.9 0-50.5 22.7-50.5 50.5s22.6 50.5 50.5 50.5zm0-74.1c13 0 23.5 10.6 23.5 23.5s-10.5 23.6-23.5 23.6-23.5-10.6-23.5-23.5 10.5-23.6 23.5-23.6z"
-      fill="currentColor"
-    />
-  </svg>
-)
-
 export default connect(mapStateToProps, mapDispatchToProps)(TopBar)

src/components/base/DropDown/index.js

@@ -14,6 +14,7 @@ type ItemType = {
 
 type Props = {
   children: any,
+  offsetTop: number | string,
   items: Array<ItemType>,
   value?: ItemType | null,
   onChange?: ItemType => void,
@@ -28,7 +29,6 @@ const Drop = styled(Box).attrs({
   bg: 'white',
   boxShadow: 0,
   borderRadius: 1,
-  mt: 1,
 })`
   position: absolute;
   top: 100%;
@@ -45,6 +45,7 @@ const Item = styled(Box).attrs({
   px: 4,
   bg: p => (p.isHighlighted ? 'pearl' : ''),
 })`
+  cursor: pointer;
   white-space: nowrap;
 `
 
@@ -56,18 +57,28 @@ class DropDown extends PureComponent<Props> {
   static defaultProps = {
     value: null,
     onChange: noop,
+    offsetTop: 1,
   }
 
   renderItems = (items: Array<ItemType>, selectedItem: ItemType, downshiftProps: Object) => {
+    const { offsetTop } = this.props
     const { getItemProps, highlightedIndex } = downshiftProps
 
     return (
-      <Drop>
-        {items.map((item, i) => (
-          <Item isHighlighted={highlightedIndex === i} key={item.key} {...getItemProps({ item })}>
-            {item.label}
-          </Item>
-        ))}
+      <Drop mt={offsetTop}>
+        {items.map((item, i) => {
+          const { key, label, ...props } = item
+          return (
+            <Item
+              isHighlighted={highlightedIndex === i}
+              key={item.key}
+              {...getItemProps({ item })}
+              {...props}
+            >
+              {item.label}
+            </Item>
+          )
+        })}
       </Drop>
     )
   }

src/main/app.js

@@ -186,6 +186,7 @@ function createPreloadWindow() {
     alwaysOnTop: true,
     closable: false,
     fullscreenable: false,
+    resizable: false,
   }
 
   const window = new BrowserWindow(windowOptions)

src/renderer/init.js

@@ -20,8 +20,7 @@ import App from 'components/App'
 
 import 'styles/global'
 
-// init db with defaults if needed
-db.init('accounts', [])
+// Init settings with defaults if needed
 db.init('settings', {})
 
 const history = createHistory()
@@ -35,6 +34,9 @@ const language = getLanguage(state)
 const locked = isLocked(state)
 
 if (!locked) {
+  // Init accounts with defaults if needed
+  db.init('accounts', [])
+
   store.dispatch(fetchAccounts())
 }