Persist some component state on route changes.

src/JournalCalendar.tsx

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

src/PimMain.tsx

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

src/persist-state-history.tsx

@@ -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;
+    }
+  });
+}