Add a component that acts as a gate for journal fetching.

src/EteSyncContext.tsx

@@ -8,6 +8,7 @@ import Toggle from 'material-ui/Toggle';
 
 import JournalList from './JournalList';
 import JournalView from './JournalView';
+import JournalFetcher from './JournalFetcher';
 
 import * as EteSync from './api/EteSync';
 
@@ -225,7 +226,7 @@ class EteSyncContext extends React.Component {
     let context = this.props.credentials.value as store.CredentialsData;
 
     return (
-      <div>
+      <JournalFetcher etesync={context}>
         <Switch>
           <Route
             path={routeResolver.getRoute('home')}
@@ -242,7 +243,7 @@ class EteSyncContext extends React.Component {
             render={({match}) => <JournalView match={match} etesync={context} />}
           />
         </Switch>
-      </div>
+      </JournalFetcher>
     );
   }
 }

src/JournalFetcher.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router';
+
+import { EteSyncContextType } from './EteSyncContext';
+import * as EteSync from './api/EteSync';
+
+import * as store from './store';
+
+interface PropsType {
+  etesync: EteSyncContextType;
+  children: any;
+}
+
+interface PropsTypeInner extends PropsType {
+  journals: store.JournalsType;
+}
+
+function fetchJournals(etesync: EteSyncContextType) {
+  const credentials = etesync.credentials;
+  const apiBase = etesync.serviceApiUrl;
+
+  return (dispatch: any) => {
+    dispatch(store.journalsRequest());
+
+    let journalManager = new EteSync.JournalManager(credentials, apiBase);
+    journalManager.list().then(
+      (journals) => {
+        dispatch(store.journalsSuccess(journals));
+      },
+      (error) => {
+        dispatch(store.journalsFailure(error));
+      }
+    );
+  };
+}
+
+class JournalFetcher extends React.Component {
+  props: PropsTypeInner;
+
+  constructor(props: any) {
+    super(props);
+  }
+
+  componentDidMount() {
+    store.store.dispatch(fetchJournals(this.props.etesync));
+  }
+
+  render() {
+    if (this.props.journals.value === null) {
+      return (<div/>);
+    }
+
+    return this.props.children;
+  }
+}
+
+const mapStateToProps = (state: store.StoreState, props: PropsType) => {
+  return {
+    journals: state.cache.journals,
+  };
+};
+
+export default withRouter(connect(
+  mapStateToProps
+)(JournalFetcher));

src/JournalList.tsx

@@ -20,25 +20,6 @@ interface PropsTypeInner extends PropsType {
   journals: store.JournalsType;
 }
 
-function fetchJournals(etesync: EteSyncContextType) {
-  const credentials = etesync.credentials;
-  const apiBase = etesync.serviceApiUrl;
-
-  return (dispatch: any) => {
-    dispatch(store.journalsRequest());
-
-    let journalManager = new EteSync.JournalManager(credentials, apiBase);
-    journalManager.list().then(
-      (journals) => {
-        dispatch(store.journalsSuccess(journals));
-      },
-      (error) => {
-        dispatch(store.journalsFailure(error));
-      }
-    );
-  };
-}
-
 class JournalList extends React.Component {
   props: PropsTypeInner;
 
@@ -46,10 +27,6 @@ class JournalList extends React.Component {
     super(props);
   }
 
-  componentDidMount() {
-    store.store.dispatch(fetchJournals(this.props.etesync));
-  }
-
   render() {
     if (this.props.journals.value === null) {
       return (<div/>);