Persist some component state on route changes.

master
Tom Hacohen 7 years ago
parent 025bb57b35
commit 3cfdb07b6a

@ -3,6 +3,8 @@ import { Route, Switch, withRouter } from 'react-router';
import { routeResolver } from './App'; import { routeResolver } from './App';
import { historyPersistor } from './persist-state-history';
import Calendar from './Calendar'; import Calendar from './Calendar';
import Event from './Event'; import Event from './Event';
@ -30,6 +32,7 @@ class JournalCalendar extends React.Component {
} }
render() { render() {
const PersistCalendar = historyPersistor(Calendar, 'Calendar');
let items = this.props.entries; let items = this.props.entries;
return ( return (
@ -38,7 +41,7 @@ class JournalCalendar extends React.Component {
path={routeResolver.getRoute('journals._id')} path={routeResolver.getRoute('journals._id')}
exact={true} exact={true}
render={() => ( render={() => (
<Calendar entries={Array.from(items.values())} onItemClick={this.eventClicked} /> <PersistCalendar entries={Array.from(items.values())} onItemClick={this.eventClicked} />
) )
} }
/> />

@ -10,6 +10,8 @@ import { EventType, ContactType } from './pim-types';
import { routeResolver } from './App'; import { routeResolver } from './App';
import { historyPersistor } from './persist-state-history';
const addressBookTitle = 'Address Book'; const addressBookTitle = 'Address Book';
const calendarTitle = 'Calendar'; const calendarTitle = 'Calendar';
@ -17,6 +19,7 @@ class PimMain extends React.Component {
props: { props: {
contacts: Array<ContactType>, contacts: Array<ContactType>,
events: Array<EventType>, events: Array<EventType>,
location?: any,
history?: any, history?: any,
}; };
@ -46,6 +49,7 @@ class PimMain extends React.Component {
} }
render() { render() {
const PersistCalendar = historyPersistor(Calendar, 'Calendar');
return ( return (
<Tabs <Tabs
@ -62,11 +66,11 @@ class PimMain extends React.Component {
value={calendarTitle} value={calendarTitle}
label={calendarTitle} label={calendarTitle}
> >
<Calendar entries={this.props.events} onItemClick={this.eventClicked} /> <PersistCalendar entries={this.props.events} onItemClick={this.eventClicked} />
</Tab> </Tab>
</Tabs> </Tabs>
); );
} }
} }
export default PimMain; export default historyPersistor(PimMain, 'PimMain');

@ -0,0 +1,31 @@
import * as React from 'react';
import { withRouter } from 'react-router';
// FIXME: Should probably tie this to the history object, or at least based on the depth of the history
let stateCache = {};
type Constructor<T> = new(...args: any[]) => T;
export function historyPersistor<T extends Constructor<React.Component>>(Base: T, tag: string) {
return withRouter(class extends Base {
constructor(...rest: any[]) {
const props = rest[0];
super(...rest);
const tagName = this.getKeyForTag(props, tag);
if (tagName in stateCache) {
this.state = stateCache[tagName];
}
}
componentWillUnmount() {
if (super.componentWillUnmount) {
super.componentWillUnmount();
}
stateCache[this.getKeyForTag(this.props, tag)] = this.state;
}
getKeyForTag(props: any, tagName: string) {
return props.location.pathname + ':' + tagName;
}
});
}
Loading…
Cancel
Save