Merge pull request #610 from gre/selectedDayRange-settings

selectedDayRange is now a settings

src/components/AccountPage/index.js

@@ -16,8 +16,15 @@ import type { T } from 'types/common'
 
 import { rgba } from 'styles/helpers'
 
+import { saveSettings } from 'actions/settings'
 import { accountSelector } from 'reducers/accounts'
-import { counterValueCurrencySelector, localeSelector } from 'reducers/settings'
+import {
+  counterValueCurrencySelector,
+  localeSelector,
+  selectedTimeRangeSelector,
+  timeRangeDaysByKey,
+} from 'reducers/settings'
+import type { TimeRange } from 'reducers/settings'
 import { openModal } from 'reducers/modals'
 
 import IconAccountSettings from 'icons/AccountSettings'
@@ -63,10 +70,12 @@ const mapStateToProps = (state, props) => ({
   account: accountSelector(state, { accountId: props.match.params.id }),
   counterValue: counterValueCurrencySelector(state),
   settings: localeSelector(state),
+  selectedTimeRange: selectedTimeRangeSelector(state),
 })
 
 const mapDispatchToProps = {
   openModal,
+  saveSettings,
 }
 
 type Props = {
@@ -74,30 +83,20 @@ type Props = {
   t: T,
   account?: Account,
   openModal: Function,
+  saveSettings: ({ selectedTimeRange: TimeRange }) => *,
+  selectedTimeRange: TimeRange,
 }
 
-type State = {
-  selectedTime: string,
-  daysCount: number,
-}
-
-class AccountPage extends PureComponent<Props, State> {
-  state = {
-    selectedTime: 'month',
-    daysCount: 30,
+class AccountPage extends PureComponent<Props> {
+  handleChangeSelectedTime = item => {
+    this.props.saveSettings({ selectedTimeRange: item.key })
   }
 
-  handleChangeSelectedTime = item =>
-    this.setState({
-      selectedTime: item.key,
-      daysCount: item.value,
-    })
-
   _cacheBalance = null
 
   render() {
-    const { account, openModal, t, counterValue } = this.props
-    const { selectedTime, daysCount } = this.state
+    const { account, openModal, t, counterValue, selectedTimeRange } = this.props
+    const daysCount = timeRangeDaysByKey[selectedTimeRange]
 
     // Don't even throw if we jumped in wrong account route
     if (!account) {
@@ -148,7 +147,7 @@ class AccountPage extends PureComponent<Props, State> {
                 chartId={`account-chart-${account.id}`}
                 counterValue={counterValue}
                 daysCount={daysCount}
-                selectedTime={selectedTime}
+                selectedTimeRange={selectedTimeRange}
                 renderHeader={({ totalBalance, sinceBalance, refBalance }) => (
                   <Box flow={4} mb={2}>
                     <Box horizontal>
@@ -165,7 +164,7 @@ class AccountPage extends PureComponent<Props, State> {
                       </BalanceTotal>
                       <Box>
                         <PillsDaysCount
-                          selectedTime={selectedTime}
+                          selected={selectedTimeRange}
                           onChange={this.handleChangeSelectedTime}
                         />
                       </Box>
@@ -177,7 +176,7 @@ class AccountPage extends PureComponent<Props, State> {
                         totalBalance={totalBalance}
                         sinceBalance={sinceBalance}
                         refBalance={refBalance}
-                        since={selectedTime}
+                        since={selectedTimeRange}
                       />
                       <BalanceSinceDiff
                         t={t}
@@ -186,7 +185,7 @@ class AccountPage extends PureComponent<Props, State> {
                         totalBalance={totalBalance}
                         sinceBalance={sinceBalance}
                         refBalance={refBalance}
-                        since={selectedTime}
+                        since={selectedTimeRange}
                       />
                     </Box>
                   </Box>

src/components/BalanceSummary/index.js

@@ -14,10 +14,10 @@ type Props = {
   chartColor: string,
   chartId: string,
   accounts: Account[],
-  selectedTime: string,
+  selectedTimeRange: string,
   daysCount: number,
   renderHeader?: ({
-    selectedTime: *,
+    selectedTimeRange: *,
     totalBalance: number,
     sinceBalance: number,
     refBalance: number,
@@ -31,7 +31,7 @@ const BalanceSummary = ({
   counterValue,
   daysCount,
   renderHeader,
-  selectedTime,
+  selectedTimeRange,
 }: Props) => {
   const account = accounts.length === 1 ? accounts[0] : undefined
   return (
@@ -43,7 +43,7 @@ const BalanceSummary = ({
               {renderHeader ? (
                 <Box px={6}>
                   {renderHeader({
-                    selectedTime,
+                    selectedTimeRange,
                     // FIXME refactor these
                     totalBalance: balanceEnd,
                     sinceBalance: balanceStart,
@@ -59,7 +59,7 @@ const BalanceSummary = ({
                   data={balanceHistory}
                   height={200}
                   currency={counterValue}
-                  tickXScale={selectedTime}
+                  tickXScale={selectedTimeRange}
                   renderTickY={val => formatShort(counterValue.units[0], val)}
                   renderTooltip={
                     isAvailable && !account

src/components/DashboardPage/index.js

@@ -13,7 +13,13 @@ import type { T } from 'types/common'
 import { colors } from 'styles/theme'
 
 import { accountsSelector } from 'reducers/accounts'
-import { counterValueCurrencySelector, localeSelector } from 'reducers/settings'
+import {
+  counterValueCurrencySelector,
+  localeSelector,
+  selectedTimeRangeSelector,
+  timeRangeDaysByKey,
+} from 'reducers/settings'
+import type { TimeRange } from 'reducers/settings'
 
 import { reorderAccounts } from 'actions/accounts'
 import { saveSettings } from 'actions/settings'
@@ -35,6 +41,7 @@ const mapStateToProps = createStructuredSelector({
   accounts: accountsSelector,
   counterValue: counterValueCurrencySelector,
   locale: localeSelector,
+  selectedTimeRange: selectedTimeRangeSelector,
 })
 
 const mapDispatchToProps = {
@@ -48,20 +55,11 @@ type Props = {
   accounts: Account[],
   push: Function,
   counterValue: Currency,
+  selectedTimeRange: TimeRange,
+  saveSettings: ({ selectedTimeRange: TimeRange }) => *,
 }
 
-type State = {
-  selectedTime: string,
-  daysCount: number,
-}
-
-class DashboardPage extends PureComponent<Props, State> {
-  state = {
-    // save to user preference?
-    selectedTime: 'month',
-    daysCount: 30,
-  }
-
+class DashboardPage extends PureComponent<Props> {
   onAccountClick = account => this.props.push(`/account/${account.id}`)
 
   handleGreeting = () => {
@@ -77,17 +75,15 @@ class DashboardPage extends PureComponent<Props, State> {
     return 'app:dashboard.greeting.morning'
   }
 
-  handleChangeSelectedTime = item =>
-    this.setState({
-      selectedTime: item.key,
-      daysCount: item.value,
-    })
+  handleChangeSelectedTime = item => {
+    this.props.saveSettings({ selectedTimeRange: item.key })
+  }
 
   _cacheBalance = null
 
   render() {
-    const { accounts, t, counterValue } = this.props
-    const { selectedTime, daysCount } = this.state
+    const { accounts, t, counterValue, selectedTimeRange } = this.props
+    const daysCount = timeRangeDaysByKey[selectedTimeRange]
     const timeFrame = this.handleGreeting()
     const totalAccounts = accounts.length
 
@@ -111,7 +107,7 @@ class DashboardPage extends PureComponent<Props, State> {
                 </Box>
                 <Box>
                   <PillsDaysCount
-                    selectedTime={selectedTime}
+                    selected={selectedTimeRange}
                     onChange={this.handleChangeSelectedTime}
                   />
                 </Box>
@@ -122,14 +118,14 @@ class DashboardPage extends PureComponent<Props, State> {
                   chartId="dashboard-chart"
                   chartColor={colors.wallet}
                   accounts={accounts}
-                  selectedTime={selectedTime}
+                  selectedTimeRange={selectedTimeRange}
                   daysCount={daysCount}
-                  renderHeader={({ totalBalance, selectedTime, sinceBalance, refBalance }) => (
+                  renderHeader={({ totalBalance, selectedTimeRange, sinceBalance, refBalance }) => (
                     <BalanceInfos
                       t={t}
                       counterValue={counterValue}
                       totalBalance={totalBalance}
-                      since={selectedTime}
+                      since={selectedTimeRange}
                       sinceBalance={sinceBalance}
                       refBalance={refBalance}
                     />

src/components/PillsDaysCount.js

@@ -2,33 +2,28 @@
 
 import React, { PureComponent } from 'react'
 import { translate } from 'react-i18next'
-
 import type { T } from 'types/common'
-
 import Pills from 'components/base/Pills'
+import { timeRangeDaysByKey } from 'reducers/settings'
+import type { TimeRange } from 'reducers/settings'
 
 type Props = {
-  selectedTime: string,
-  onChange: ({ key: string, value: *, label: string }) => void,
+  selected: string,
+  onChange: ({ key: string, value: *, label: string }) => *,
   t: T,
 }
 
-const itemsTimes = [
-  { key: 'week', value: 7 },
-  { key: 'month', value: 30 },
-  { key: 'year', value: 365 },
-]
-
 class PillsDaysCount extends PureComponent<Props> {
   render() {
-    const { selectedTime, onChange, t } = this.props
+    const { selected, onChange, t } = this.props
     return (
       <Pills
-        items={itemsTimes.map(item => ({
-          ...item,
-          label: t(`app:time.${item.key}`),
+        items={Object.keys(timeRangeDaysByKey).map((key: TimeRange) => ({
+          key,
+          value: timeRangeDaysByKey[key],
+          label: t(`app:time.${key}`),
         }))}
-        activeKey={selectedTime}
+        activeKey={selected}
         onChange={onChange}
       />
     )

src/components/base/Chart/refreshDraw.js

@@ -24,8 +24,8 @@ const RENDER_TICK_X = {
   default: 'MMM D',
 }
 
-function getRenderTickX(selectedTime) {
-  return t => moment(t).format(RENDER_TICK_X[selectedTime] || RENDER_TICK_X.default)
+function getRenderTickX(selectedTimeRange) {
+  return t => moment(t).format(RENDER_TICK_X[selectedTimeRange] || RENDER_TICK_X.default)
 }
 
 export default function refreshDraw({ ctx, props }: { ctx: CTX, props: Props }) {

src/reducers/settings.js

@@ -18,6 +18,14 @@ import type { State } from 'reducers'
 
 export const intermediaryCurrency = getCryptoCurrencyById('bitcoin')
 
+export const timeRangeDaysByKey = {
+  week: 7,
+  month: 30,
+  year: 365,
+}
+
+export type TimeRange = $Keys<typeof timeRangeDaysByKey>
+
 export type SettingsState = {
   loaded: boolean, // is the settings loaded from db (it not we don't save them)
   hasCompletedOnboarding: boolean,
@@ -29,6 +37,7 @@ export type SettingsState = {
     isEnabled: boolean,
     value: string,
   },
+  selectedTimeRange: TimeRange,
   marketIndicator: 'eastern' | 'western',
   currenciesSettings: {
     [currencyId: string]: CurrencySettings,
@@ -67,6 +76,7 @@ const INITIAL_STATE: SettingsState = {
     isEnabled: false,
     value: '',
   },
+  selectedTimeRange: 'month',
   marketIndicator: 'western',
   currenciesSettings: {},
   region,
@@ -207,5 +217,6 @@ export const exchangeSettingsForAccountSelector: ESFAS = createSelector(
 
 export const marketIndicatorSelector = (state: State) => state.settings.marketIndicator
 export const sentryLogsBooleanSelector = (state: State) => state.settings.sentryLogs
+export const selectedTimeRangeSelector = (state: State) => state.settings.selectedTimeRange
 
 export default handleActions(handlers, INITIAL_STATE)