From 7b2a883313a82128ef3aa269c0ae8d7d5abeffe1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABtan=20Renaudeau?= Date: Tue, 19 Jun 2018 09:00:10 +0200 Subject: [PATCH] selectedDayRange is now a settings --- src/components/AccountPage/index.js | 43 +++++++++++------------ src/components/BalanceSummary/index.js | 10 +++--- src/components/DashboardPage/index.js | 44 +++++++++++------------- src/components/PillsDaysCount.js | 25 ++++++-------- src/components/base/Chart/refreshDraw.js | 4 +-- src/reducers/settings.js | 11 ++++++ 6 files changed, 69 insertions(+), 68 deletions(-) diff --git a/src/components/AccountPage/index.js b/src/components/AccountPage/index.js index 312c6d35..5aadb530 100644 --- a/src/components/AccountPage/index.js +++ b/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 { - state = { - selectedTime: 'month', - daysCount: 30, +class AccountPage extends PureComponent { + 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 { chartId={`account-chart-${account.id}`} counterValue={counterValue} daysCount={daysCount} - selectedTime={selectedTime} + selectedTimeRange={selectedTimeRange} renderHeader={({ totalBalance, sinceBalance, refBalance }) => ( @@ -165,7 +164,7 @@ class AccountPage extends PureComponent { @@ -177,7 +176,7 @@ class AccountPage extends PureComponent { totalBalance={totalBalance} sinceBalance={sinceBalance} refBalance={refBalance} - since={selectedTime} + since={selectedTimeRange} /> { totalBalance={totalBalance} sinceBalance={sinceBalance} refBalance={refBalance} - since={selectedTime} + since={selectedTimeRange} /> diff --git a/src/components/BalanceSummary/index.js b/src/components/BalanceSummary/index.js index 78d47a7c..9c04ec94 100644 --- a/src/components/BalanceSummary/index.js +++ b/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 ? ( {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 diff --git a/src/components/DashboardPage/index.js b/src/components/DashboardPage/index.js index 6894b765..4267a429 100644 --- a/src/components/DashboardPage/index.js +++ b/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 { - state = { - // save to user preference? - selectedTime: 'month', - daysCount: 30, - } - +class DashboardPage extends PureComponent { onAccountClick = account => this.props.push(`/account/${account.id}`) handleGreeting = () => { @@ -77,17 +75,15 @@ class DashboardPage extends PureComponent { 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 { @@ -122,14 +118,14 @@ class DashboardPage extends PureComponent { chartId="dashboard-chart" chartColor={colors.wallet} accounts={accounts} - selectedTime={selectedTime} + selectedTimeRange={selectedTimeRange} daysCount={daysCount} - renderHeader={({ totalBalance, selectedTime, sinceBalance, refBalance }) => ( + renderHeader={({ totalBalance, selectedTimeRange, sinceBalance, refBalance }) => ( diff --git a/src/components/PillsDaysCount.js b/src/components/PillsDaysCount.js index 12b49f89..5d28d47a 100644 --- a/src/components/PillsDaysCount.js +++ b/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 { render() { - const { selectedTime, onChange, t } = this.props + const { selected, onChange, t } = this.props return ( ({ - ...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} /> ) diff --git a/src/components/base/Chart/refreshDraw.js b/src/components/base/Chart/refreshDraw.js index fa3d2e31..dfe861bf 100644 --- a/src/components/base/Chart/refreshDraw.js +++ b/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 }) { diff --git a/src/reducers/settings.js b/src/reducers/settings.js index eb6b8ec3..cf314c51 100644 --- a/src/reducers/settings.js +++ b/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 + 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)