status-im/fathom
2
0
Fork 0
mirror of https://github.com/status-im/fathom.git synced 2025-03-01 03:20:27 +00:00
Code Issues Projects Releases Wiki Activity

remember view when loading dashboard without explicit period in location hash. closes #128

Browse Source
This commit is contained in:
Danny van Kooten 2018-09-18 12:03:45 +02:00
parent d1728ba501
commit c66e69b797
2 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
assets/src/js/components/DatePicker.js
View File

@ -53,6 +53,7 @@ const availablePeriods = {
}, },
} }
const defaultPeriod = 'last-7-days';
const padZero = function(n){return n<10? '0'+n:''+n;} const padZero = function(n){return n<10? '0'+n:''+n;}
class DatePicker extends Component { class DatePicker extends Component {
@ -60,7 +61,7 @@ class DatePicker extends Component {
super(props) super(props)
this.state = { this.state = {
period: props.value, period: window.location.hash.substring(2) || window.localStorage.getItem('period') || defaultPeriod,
before: 0, // UTC timestamp before: 0, // UTC timestamp
after: 0, // UTC timestamp after: 0, // UTC timestamp
startDate: null, // local date object startDate: null, // local date object
@ -109,6 +110,9 @@ class DatePicker extends Component {
this.timeout = window.setTimeout(() => { this.timeout = window.setTimeout(() => {
this.props.onChange(this.state); this.props.onChange(this.state);
this.timeout = null; this.timeout = null;
window.localStorage.setItem('period', this.state.period)
window.history.replaceState(this.state, null, '#!' + this.state.period)
}, 2) }, 2)
} }
} }

11
assets/src/js/pages/dashboard.js
View File

@ -14,7 +14,6 @@ class Dashboard extends Component {
super(props) super(props)
this.state = { this.state = {
period: (window.location.hash.substring(2) || 'last-7-days'),
before: 0, before: 0,
after: 0, after: 0,
isPublic: document.cookie.indexOf('auth') < 0, isPublic: document.cookie.indexOf('auth') < 0,
@ -22,9 +21,11 @@ class Dashboard extends Component {
} }
@bind @bind
changePeriod(s) { updateDateRange(s) {
this.setState({ period: s.period, before: s.before, after: s.after }) this.setState({
window.history.replaceState(this.state, null, `#!${s.period}`) before: s.before,
after: s.after
})
} }
render(props, state) { render(props, state) {
@ -48,7 +49,7 @@ class Dashboard extends Component {
<section class="section animated fadeInUp delayed_02s"> <section class="section animated fadeInUp delayed_02s">
<nav class="date-nav"> <nav class="date-nav">
<DatePicker onChange={this.changePeriod} value={state.period} /> <DatePicker onChange={this.updateDateRange} />
</nav> </nav>
<div class="boxes"> <div class="boxes">