Browse Source

refactor how sort accounts is implemented to only refresh if reorg

master
Gaëtan Renaudeau 7 years ago
parent
commit
fe2790ca43
  1. 88
      src/actions/accounts.js
  2. 41
      src/components/DashboardPage/AccountsOrder.js
  3. 4
      src/components/DashboardPage/index.js
  4. 3
      src/reducers/accounts.js

88
src/actions/accounts.js

@ -1,50 +1,14 @@
// @flow // @flow
import sortBy from 'lodash/sortBy'
import type { Account } from '@ledgerhq/live-common/lib/types' import type { Account } from '@ledgerhq/live-common/lib/types'
import db from 'helpers/db' import db from 'helpers/db'
import type { Dispatch } from 'redux' export type AddAccount = Account => *
export const addAccount: AddAccount = payload => ({
function sortAccounts(accounts, orderAccounts) { type: 'ADD_ACCOUNT',
const [order, sort] = orderAccounts.split('|') payload,
})
const accountsSorted = sortBy(accounts, a => {
if (order === 'balance') {
return a.balance
}
return a[order]
})
if (sort === 'asc') {
accountsSorted.reverse()
}
return accountsSorted
}
export type UpdateOrderAccounts = string => (Dispatch<*>, Function) => void
export const updateOrderAccounts: UpdateOrderAccounts = (orderAccounts: string) => (
dispatch,
getState,
) => {
const { accounts } = getState()
dispatch({
type: 'DB:SET_ACCOUNTS',
payload: sortAccounts(accounts, orderAccounts),
})
}
export type AddAccount = Account => (Function, Function) => void
export const addAccount: AddAccount = payload => (dispatch, getState) => {
const {
settings: { orderAccounts },
} = getState()
dispatch({ type: 'ADD_ACCOUNT', payload })
dispatch(updateOrderAccounts(orderAccounts))
}
export type RemoveAccount = Account => { type: string, payload: Account } export type RemoveAccount = Account => { type: string, payload: Account }
export const removeAccount: RemoveAccount = payload => ({ export const removeAccount: RemoveAccount = payload => ({
@ -52,16 +16,19 @@ export const removeAccount: RemoveAccount = payload => ({
payload, payload,
}) })
export type FetchAccounts = () => (Function, Function) => * export type ReorderAccounts = (string[]) => { type: string, payload: string[] }
export const fetchAccounts: FetchAccounts = () => (dispatch, getState) => { export const reorderAccounts: ReorderAccounts = payload => ({
const { type: 'DB:REORDER_ACCOUNTS',
settings: { orderAccounts }, payload,
} = getState() })
export type FetchAccounts = () => *
export const fetchAccounts: FetchAccounts = () => {
const accounts = db.get('accounts') const accounts = db.get('accounts')
dispatch({ return {
type: 'SET_ACCOUNTS', type: 'SET_ACCOUNTS',
payload: sortAccounts(accounts, orderAccounts), payload: accounts,
}) }
} }
export type UpdateAccountWithUpdater = (accountId: string, (Account) => Account) => * export type UpdateAccountWithUpdater = (accountId: string, (Account) => Account) => *
@ -71,20 +38,13 @@ export const updateAccountWithUpdater: UpdateAccountWithUpdater = (accountId, up
payload: { accountId, updater }, payload: { accountId, updater },
}) })
export type UpdateAccount = ($Shape<Account>) => (Function, Function) => void export type UpdateAccount = ($Shape<Account>) => *
export const updateAccount: UpdateAccount = payload => (dispatch, getState) => { export const updateAccount: UpdateAccount = payload => ({
const { type: 'DB:UPDATE_ACCOUNT',
settings: { orderAccounts }, payload: {
} = getState() updater: account => ({ ...account, ...payload }),
dispatch({ accountId: payload.id,
type: 'DB:UPDATE_ACCOUNT', },
payload: { })
updater: account => ({ ...account, ...payload }),
accountId: payload.id,
},
})
dispatch(updateOrderAccounts(orderAccounts))
// TODO should not be here IMO.. feels wrong for perf, probably better to move in reducer too
}
export const cleanAccountsCache = () => ({ type: 'CLEAN_ACCOUNTS_CACHE' }) export const cleanAccountsCache = () => ({ type: 'CLEAN_ACCOUNTS_CACHE' })

41
src/components/DashboardPage/AccountsOrder.js

@ -1,17 +1,20 @@
// @flow // @flow
import React, { Component } from 'react' import React, { Component } from 'react'
import sortBy from 'lodash/sortBy'
import styled from 'styled-components' import styled from 'styled-components'
import { compose } from 'redux' import { compose } from 'redux'
import { translate } from 'react-i18next' import { translate } from 'react-i18next'
import { connect } from 'react-redux' import { connect } from 'react-redux'
import debounce from 'lodash/debounce' import debounce from 'lodash/debounce'
import type { Account } from '@ledgerhq/live-common/lib/types'
import type { T } from 'types/common' import type { T } from 'types/common'
import { getOrderAccounts } from 'reducers/settings' import { getOrderAccounts } from 'reducers/settings'
import { createStructuredSelector } from 'reselect'
import { updateOrderAccounts } from 'actions/accounts' import { reorderAccounts } from 'actions/accounts'
import { accountsSelector } from 'reducers/accounts'
import { saveSettings } from 'actions/settings' import { saveSettings } from 'actions/settings'
import BoldToggle from 'components/base/BoldToggle' import BoldToggle from 'components/base/BoldToggle'
@ -23,6 +26,24 @@ import IconAngleDown from 'icons/AngleDown'
import IconArrowDown from 'icons/ArrowDown' import IconArrowDown from 'icons/ArrowDown'
import IconArrowUp from 'icons/ArrowUp' import IconArrowUp from 'icons/ArrowUp'
function sortAccounts(accounts: Account[], orderAccounts: string) {
const [order, sort] = orderAccounts.split('|')
const accountsSorted = sortBy(accounts, a => {
if (order === 'balance') {
return a.balance
}
return a[order]
})
if (sort === 'asc') {
accountsSorted.reverse()
}
return accountsSorted
}
const OrderIcon = styled(Box).attrs({ const OrderIcon = styled(Box).attrs({
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
@ -31,20 +52,22 @@ const OrderIcon = styled(Box).attrs({
opacity: ${p => (p.isActive ? 1 : 0)}; opacity: ${p => (p.isActive ? 1 : 0)};
` `
const mapStateToProps = state => ({ const mapStateToProps = createStructuredSelector({
orderAccounts: getOrderAccounts(state), orderAccounts: getOrderAccounts,
accounts: accountsSelector,
}) })
const mapDispatchToProps = { const mapDispatchToProps = {
updateOrderAccounts, reorderAccounts,
saveSettings, saveSettings,
} }
type Props = { type Props = {
t: T, t: T,
orderAccounts: string, orderAccounts: string,
updateOrderAccounts: Function, accounts: Account[],
saveSettings: Function, reorderAccounts: (string[]) => *,
saveSettings: (*) => *,
} }
type State = { type State = {
@ -62,10 +85,10 @@ class AccountsOrder extends Component<Props, State> {
setAccountOrder = debounce( setAccountOrder = debounce(
order => { order => {
const { updateOrderAccounts, saveSettings } = this.props const { saveSettings } = this.props
this.setState({ cachedValue: order }, () => { this.setState({ cachedValue: order }, () => {
window.requestIdleCallback(() => { window.requestIdleCallback(() => {
updateOrderAccounts(order) this.props.reorderAccounts(sortAccounts(this.props.accounts, order).map(a => a.id))
saveSettings({ orderAccounts: order }) saveSettings({ orderAccounts: order })
}) })
}) })

4
src/components/DashboardPage/index.js

@ -16,7 +16,7 @@ import { colors } from 'styles/theme'
import { accountsSelector } from 'reducers/accounts' import { accountsSelector } from 'reducers/accounts'
import { counterValueCurrencySelector, localeSelector } from 'reducers/settings' import { counterValueCurrencySelector, localeSelector } from 'reducers/settings'
import { updateOrderAccounts } from 'actions/accounts' import { reorderAccounts } from 'actions/accounts'
import { saveSettings } from 'actions/settings' import { saveSettings } from 'actions/settings'
import UpdateNotifier from 'components/UpdateNotifier' import UpdateNotifier from 'components/UpdateNotifier'
@ -39,7 +39,7 @@ const mapStateToProps = createStructuredSelector({
const mapDispatchToProps = { const mapDispatchToProps = {
push, push,
updateOrderAccounts, reorderAccounts,
saveSettings, saveSettings,
} }

3
src/reducers/accounts.js

@ -17,6 +17,9 @@ const handlers: Object = {
{ payload: accounts }: { payload: Account[] }, { payload: accounts }: { payload: Account[] },
): AccountsState => accounts, ): AccountsState => accounts,
REORDER_ACCOUNTS: (state: AccountsState, { payload }: { payload: string[] }) =>
state.slice(0).sort((a, b) => payload.indexOf(a.id) - payload.indexOf(b.id)),
ADD_ACCOUNT: ( ADD_ACCOUNT: (
state: AccountsState, state: AccountsState,
{ payload: account }: { payload: Account }, { payload: account }: { payload: Account },

Loading…
Cancel
Save