Change JournalFetcher to be a container instead of a gate.

It now not only fetches the journals, but also holds all of the children
and passes them the journals.

src/EteSyncContext.tsx

@@ -1,15 +1,13 @@
 import * as React from 'react';
 import { connect } from 'react-redux';
-import { Switch, Route, Redirect, withRouter } from 'react-router';
+import { withRouter } from 'react-router';
 import Paper from 'material-ui/Paper';
 
-import JournalList from './JournalList';
-import JournalView from './JournalView';
 import JournalFetcher from './JournalFetcher';
 import LoginForm from './LoginForm';
+import LoadingIndicator from './LoadingIndicator';
 
-import { routeResolver } from './App';
-import { store, StoreState, CredentialsType, CredentialsData, fetchCredentials } from './store';
+import { store, StoreState, CredentialsType, fetchCredentials } from './store';
 
 class EteSyncContext extends React.Component {
   props: {
@@ -27,10 +25,10 @@ class EteSyncContext extends React.Component {
 
   render() {
     if (this.props.credentials.fetching) {
-      return (<div>Loading</div>);
+      return (<LoadingIndicator />);
     } else if (this.props.credentials.value === null) {
-      const styles = {
-        paper: {
+      const style = {
+        holder: {
           margin: 'auto',
           maxWidth: 400,
           padding: 20,
@@ -38,33 +36,14 @@ class EteSyncContext extends React.Component {
       };
 
       return (
-        <Paper zDepth={2} style={styles.paper}>
+        <Paper zDepth={2} style={style.holder}>
           <LoginForm onSubmit={this.onFormSubmit} error={this.props.credentials.error} />
         </Paper>
       );
     }
 
-    let context = this.props.credentials.value as CredentialsData;
-
     return (
-      <JournalFetcher etesync={context}>
-        <Switch>
-          <Route
-            path={routeResolver.getRoute('home')}
-            exact={true}
-            render={() => <Redirect to={routeResolver.getRoute('journals')} />}
-          />
-          <Route
-            path={routeResolver.getRoute('journals')}
-            exact={true}
-            render={() => <JournalList etesync={context} />}
-          />
-          <Route
-            path={routeResolver.getRoute('journals._id')}
-            render={({match}) => <JournalView match={match} etesync={context} />}
-          />
-        </Switch>
-      </JournalFetcher>
+      <JournalFetcher etesync={this.props.credentials.value} />
     );
   }
 }

src/JournalFetcher.tsx

@@ -1,12 +1,17 @@
 import * as React from 'react';
 import { connect } from 'react-redux';
-import { withRouter } from 'react-router';
+import { Switch, Route, Redirect, withRouter } from 'react-router';
+import LoadingIndicator from './LoadingIndicator';
+
+import JournalList from './JournalList';
+import JournalView from './JournalView';
+
+import { routeResolver } from './App';
 
 import { store, JournalsType, fetchJournals, StoreState, CredentialsData } from './store';
 
 interface PropsType {
   etesync: CredentialsData;
-  children: any;
 }
 
 interface PropsTypeInner extends PropsType {
@@ -26,10 +31,29 @@ class JournalFetcher extends React.Component {
 
   render() {
     if (this.props.journals.value === null) {
-      return (<div/>);
+      return (<LoadingIndicator />);
     }
 
-    return this.props.children;
+    const journals = this.props.journals.value;
+
+    return (
+      <Switch>
+        <Route
+          path={routeResolver.getRoute('home')}
+          exact={true}
+          render={() => <Redirect to={routeResolver.getRoute('journals')} />}
+        />
+        <Route
+          path={routeResolver.getRoute('journals')}
+          exact={true}
+          render={() => <JournalList etesync={this.props.etesync} journals={journals} />}
+        />
+        <Route
+          path={routeResolver.getRoute('journals._id')}
+          render={({match}) => <JournalView match={match} etesync={this.props.etesync} journals={journals} />}
+        />
+      </Switch>
+    );
   }
 }
 

src/JournalList.tsx

@@ -1,6 +1,4 @@
 import * as React from 'react';
-import { connect } from 'react-redux';
-import { withRouter } from 'react-router';
 import { Link } from 'react-router-dom';
 
 import { List, ListItem } from 'material-ui/List';
@@ -9,30 +7,21 @@ import Paper from 'material-ui/Paper';
 import * as EteSync from './api/EteSync';
 
 import { routeResolver } from './App';
-import { JournalsType, StoreState, CredentialsData } from './store';
-
-interface PropsType {
-  etesync: CredentialsData;
-}
-
-interface PropsTypeInner extends PropsType {
-  journals: JournalsType;
-}
+import { JournalsData, CredentialsData } from './store';
 
 class JournalList extends React.Component {
-  props: PropsTypeInner;
+  props: {
+    etesync: CredentialsData;
+    journals: JournalsData;
+  };
 
   constructor(props: any) {
     super(props);
   }
 
   render() {
-    if (this.props.journals.value === null) {
-      return (<div/>);
-    }
-
     const derived = this.props.etesync.encryptionKey;
-    const journalMap = this.props.journals.value.filter((x) => (
+    const journalMap = this.props.journals.filter((x) => (
         // Skip shared journals for now.
         !x.key
       )).reduce(
@@ -79,12 +68,4 @@ class JournalList extends React.Component {
   }
 }
 
-const mapStateToProps = (state: StoreState, props: PropsType) => {
-  return {
-    journals: state.cache.journals,
-  };
-};
-
-export default withRouter(connect(
-  mapStateToProps
-)(JournalList));
+export default JournalList;

src/JournalView.tsx

@@ -9,15 +9,15 @@ import JournalViewEntries from './JournalViewEntries';
 import JournalViewAddressBook from './JournalViewAddressBook';
 import JournalViewCalendar from './JournalViewCalendar';
 
-import { store, StoreState, JournalsType, EntriesType, CredentialsData, fetchEntries } from './store';
+import { store, StoreState, JournalsData, EntriesType, CredentialsData, fetchEntries } from './store';
 
 interface PropsType {
+  journals: JournalsData;
   etesync: CredentialsData;
   match: any;
 }
 
 interface PropsTypeInner extends PropsType {
-  journals: JournalsType;
   entries: EntriesType;
 }
 
@@ -42,12 +42,11 @@ class JournalView extends React.Component {
     const journalUid = this.props.match.params.journalUid;
     const entries = this.props.entries[journalUid];
 
-    if ((this.props.journals.value === null) ||
-      (!entries) || (entries.value === null)) {
+    if ((!entries) || (entries.value === null)) {
       return (<div>Loading</div>);
     }
 
-    const journal = this.props.journals.value.find((x) => (x.uid === journalUid));
+    const journal = this.props.journals.find((x) => (x.uid === journalUid));
 
     if (journal === undefined) {
       return (<div>Journal not found!</div>);
@@ -99,7 +98,6 @@ class JournalView extends React.Component {
 
 const mapStateToProps = (state: StoreState, props: PropsType) => {
   return {
-    journals: state.cache.journals,
     entries: state.cache.entries,
   };
 };