Merge pull request #85 from loeck/master

Add orderAccounts

src/actions/accounts.js

@@ -1,9 +1,27 @@
 // @flow
 
 import db from 'helpers/db'
+import sortBy from 'lodash/sortBy'
 
+import type { Dispatch } from 'redux'
 import type { Account } from 'types/common'
 
+function sortAccounts(accounts, orderAccounts) {
+  const accountsSorted = sortBy(accounts, a => {
+    if (orderAccounts === 'balance') {
+      return a.data.balance
+    }
+
+    return a[orderAccounts]
+  })
+
+  if (orderAccounts === 'balance') {
+    accountsSorted.reverse()
+  }
+
+  return accountsSorted
+}
+
 export type AddAccount = Account => { type: string, payload: Account }
 export const addAccount: AddAccount = payload => ({
   type: 'DB:ADD_ACCOUNT',
@@ -16,11 +34,24 @@ export const updateAccount: AddAccount = payload => ({
   payload,
 })
 
-type FetchAccounts = () => { type: string }
-export const fetchAccounts: FetchAccounts = () => {
-  const payload = db.get('accounts')
-  return {
+export type FetchAccounts = () => (Dispatch<*>, Function) => void
+export const fetchAccounts: FetchAccounts = () => (dispatch, getState) => {
+  const { settings: { orderAccounts } } = getState()
+  const accounts = db.get('accounts')
+  dispatch({
     type: 'SET_ACCOUNTS',
-    payload,
-  }
+    payload: sortAccounts(accounts, orderAccounts),
+  })
+}
+
+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),
+  })
 }

src/actions/settings.js

@@ -2,6 +2,7 @@
 
 import db from 'helpers/db'
 
+import type { Dispatch } from 'redux'
 import type { Settings } from 'types/common'
 
 export type SaveSettings = Settings => { type: string, payload: Settings }
@@ -10,7 +11,8 @@ export const saveSettings: SaveSettings = payload => ({
   payload,
 })
 
-export const fetchSettings: Function = () => dispatch => {
+type FetchSettings = () => (Dispatch<*>) => void
+export const fetchSettings: FetchSettings = () => dispatch => {
   const settings = db.get('settings')
   if (Object.keys(settings).length === 0) {
     return

src/components/DevToolbar.js

@@ -195,30 +195,32 @@ class DevToolbar extends PureComponent<any, State> {
             </GrowScroll>
           </Box>
           <Box flow={10}>
-            {Object.keys(cpuUsage).map(k => (
-              <Box key={k} grow>
-                <Box horizontal align="center">
-                  <Box grow>{k}</Box>
-                  <Box fontSize="8px">{last(cpuUsage[k]).value}%</Box>
+            {Object.keys(cpuUsage)
+              .sort()
+              .map(k => (
+                <Box key={k} grow>
+                  <Box horizontal align="center">
+                    <Box grow>{k}</Box>
+                    <Box fontSize="8px">{last(cpuUsage[k]).value}%</Box>
+                  </Box>
+                  <Box>
+                    <AreaChart
+                      width={100}
+                      height={40}
+                      data={cpuUsage[k]}
+                      margin={{ top: 10, right: 0, left: 0, bottom: 0 }}
+                    >
+                      <Area
+                        type="monotone"
+                        stroke="#8884d8"
+                        fill="#8884d8"
+                        dataKey="value"
+                        isAnimationActive={false}
+                      />
+                    </AreaChart>
+                  </Box>
                 </Box>
-                <Box>
-                  <AreaChart
-                    width={100}
-                    height={40}
-                    data={cpuUsage[k]}
-                    margin={{ top: 10, right: 0, left: 0, bottom: 0 }}
-                  >
-                    <Area
-                      type="monotone"
-                      stroke="#8884d8"
-                      fill="#8884d8"
-                      dataKey="value"
-                      isAnimationActive={false}
-                    />
-                  </AreaChart>
-                </Box>
-              </Box>
-            ))}
+              ))}
           </Box>
         </Box>
       </Container>

src/components/SettingsPage/Display.js

@@ -14,7 +14,6 @@ type InputValue = SettingsDisplay
 
 type Props = {
   t: T,
-  i18n: Object,
   settings: SettingsDisplay,
   onSaveSettings: Function,
 }
@@ -26,22 +25,43 @@ class TabProfile extends PureComponent<Props, State> {
   state = {
     inputValue: {
       language: this.props.settings.language,
+      orderAccounts: this.props.settings.orderAccounts,
     },
   }
 
-  getLanguages() {
+  getDatas() {
     const { t } = this.props
 
-    return [
-      {
-        key: 'en',
-        name: t('language.en'),
-      },
-      {
-        key: 'fr',
-        name: t('language.fr'),
-      },
-    ]
+    return {
+      languages: [
+        {
+          key: 'en',
+          name: t('language.en'),
+        },
+        {
+          key: 'fr',
+          name: t('language.fr'),
+        },
+      ],
+      orderAccounts: [
+        {
+          key: 'custom',
+          name: t('orderAccounts.custom'),
+        },
+        {
+          key: 'name',
+          name: t('orderAccounts.name'),
+        },
+        {
+          key: 'balance',
+          name: t('orderAccounts.balance'),
+        },
+        {
+          key: 'type',
+          name: t('orderAccounts.type'),
+        },
+      ],
+    }
   }
 
   handleChangeInput = (key: $Keys<InputValue>) => (value: $Values<InputValue>) =>
@@ -55,24 +75,22 @@ class TabProfile extends PureComponent<Props, State> {
   handleSubmit = (e: SyntheticEvent<HTMLFormElement>) => {
     e.preventDefault()
 
-    const { onSaveSettings, i18n } = this.props
+    const { onSaveSettings } = this.props
     const { inputValue } = this.state
 
-    const settings = {
-      language: inputValue.language,
-    }
-
-    i18n.changeLanguage(settings.language)
-
-    onSaveSettings(settings)
+    onSaveSettings({
+      ...inputValue,
+    })
   }
 
   render() {
     const { t } = this.props
     const { inputValue } = this.state
 
-    const languages = this.getLanguages()
+    const { languages, orderAccounts } = this.getDatas()
+
     const currentLanguage = languages.find(l => l.key === inputValue.language)
+    const currentOrderAccounts = orderAccounts.find(l => l.key === inputValue.orderAccounts)
 
     return (
       <form onSubmit={this.handleSubmit}>
@@ -86,6 +104,15 @@ class TabProfile extends PureComponent<Props, State> {
               items={languages}
             />
           </Box>
+          <Box flow={1}>
+            <Label>{t('settings.display.orderAccounts')}</Label>
+            <Select
+              onChange={item => this.handleChangeInput('orderAccounts')(item.key)}
+              renderSelected={item => item && item.name}
+              value={currentOrderAccounts}
+              items={orderAccounts}
+            />
+          </Box>
           <Box horizontal justify="flex-end">
             <Button primary type="submit">
               Save

src/components/SettingsPage/index.js

@@ -7,7 +7,10 @@ import { translate } from 'react-i18next'
 
 import type { MapStateToProps } from 'react-redux'
 import type { Settings, T } from 'types/common'
+import type { SaveSettings } from 'actions/settings'
+import type { UpdateOrderAccounts } from 'actions/accounts'
 
+import { updateOrderAccounts } from 'actions/accounts'
 import { saveSettings } from 'actions/settings'
 
 import Box from 'components/base/Box'
@@ -23,12 +26,15 @@ const mapStateToProps: MapStateToProps<*, *, *> = state => ({
 
 const mapDispatchToProps = {
   saveSettings,
+  updateOrderAccounts,
 }
 
 type Props = {
-  t: T,
+  i18n: Object,
+  saveSettings: SaveSettings,
   settings: Settings,
-  saveSettings: Function,
+  t: T,
+  updateOrderAccounts: UpdateOrderAccounts,
 }
 
 type State = {
@@ -42,7 +48,19 @@ class SettingsPage extends PureComponent<Props, State> {
 
   handleChangeTab = (tab: number) => this.setState({ tab })
 
-  handleSaveSettings = settings => this.props.saveSettings(settings)
+  handleSaveSettings = newSettings => {
+    const { saveSettings, i18n, settings, updateOrderAccounts } = this.props
+
+    if (newSettings.language !== settings.language) {
+      i18n.changeLanguage(newSettings.language)
+    }
+
+    if (newSettings.orderAccounts !== settings.orderAccounts) {
+      updateOrderAccounts(newSettings.orderAccounts)
+    }
+
+    saveSettings(newSettings)
+  }
 
   render() {
     const { settings, t } = this.props

src/reducers/settings.js

@@ -10,6 +10,7 @@ export type SettingsState = Object
 
 const state: SettingsState = {
   language: 'en',
+  orderAccounts: 'balance',
   password: {
     state: false,
   },
@@ -20,7 +21,10 @@ const handlers: Object = {
     ...state,
     ...settings,
   }),
-  FETCH_SETTINGS: (state: SettingsState, { payload: settings }: { payload: Settings }) => settings,
+  FETCH_SETTINGS: (state: SettingsState, { payload: settings }: { payload: Settings }) => ({
+    ...state,
+    ...settings,
+  }),
 }
 
 export const hasPassword = (state: Object) => get(state.settings, 'password.state', false)

src/types/common.js

@@ -45,6 +45,7 @@ export type SettingsProfile = {
 }
 export type SettingsDisplay = {
   language: string,
+  orderAccounts: string,
 }
 export type Settings = SettingsProfile & SettingsDisplay
 

static/i18n/en/translation.yml

@@ -8,6 +8,12 @@ language:
   en: English
   fr: French
 
+orderAccounts:
+  custom: Custom
+  name: By name
+  balance: By balance
+  type: By type
+
 sidebar:
   menu: Menu
   accounts: Accounts
@@ -45,6 +51,7 @@ settings:
 
   display:
     language: Language
+    orderAccounts: Order accounts
 
 SelectAccount:
   placeholder: Select a account

static/i18n/fr/translation.yml

@@ -8,6 +8,12 @@ language:
   en: Anglais
   fr: Français
 
+orderAccounts:
+  custom: Personnalisé
+  name: Par nom
+  balance: Par solde
+  type: Par type
+
 sidebar:
   menu: Menu
   accounts: Comptes
@@ -45,6 +51,7 @@ settings:
 
   display:
     language: Langage
+    orderAccounts: Ordre des comptes
 
 SelectAccount:
   placeholder: Sélectionner un compte