Fix viewing journals.

src/Journal.tsx

@@ -1,6 +1,4 @@
 import * as React from 'react';
-import { connect } from 'react-redux';
-import { withRouter } from 'react-router';
 import { Tabs, Tab } from 'material-ui/Tabs';
 
 import * as EteSync from './api/EteSync';
@@ -12,16 +10,16 @@ import LoadingIndicator from './LoadingIndicator';
 
 import { syncEntriesToItemMap, syncEntriesToCalendarItemMap } from './journal-processors';
 
-import { store, StoreState, JournalsData, EntriesType, CredentialsData, fetchEntries } from './store';
+import { JournalsData, EntriesType, CredentialsData } from './store';
 
 interface PropsType {
   journals: JournalsData;
+  entries: EntriesType;
   etesync: CredentialsData;
   match: any;
 }
 
 interface PropsTypeInner extends PropsType {
-  entries: EntriesType;
 }
 
 class Journal extends React.Component {
@@ -35,12 +33,6 @@ class Journal extends React.Component {
     super(props);
   }
 
-  componentDidMount() {
-    const journal = this.props.match.params.journalUid;
-
-    store.dispatch(fetchEntries(this.props.etesync, journal, null));
-  }
-
   render() {
     const journalUid = this.props.match.params.journalUid;
     const entries = this.props.entries[journalUid];
@@ -99,12 +91,4 @@ class Journal extends React.Component {
   }
 }
 
-const mapStateToProps = (state: StoreState, props: PropsType) => {
+export default Journal;
-  return {
-    entries: state.cache.entries,
-  };
-};
-
-export default withRouter(connect(
-  mapStateToProps
-)(Journal));

src/SyncGate.tsx

@@ -1,9 +1,12 @@
 import * as React from 'react';
 import { connect } from 'react-redux';
-import { withRouter } from 'react-router';
+import { Route, Switch, withRouter } from 'react-router';
+
+import { routeResolver } from './App';
 
 import LoadingIndicator from './LoadingIndicator';
 
+import Journal from './Journal';
 import Main from './Main';
 
 import { store, JournalsType, EntriesType, fetchJournals, fetchEntries, StoreState, CredentialsData } from './store';
@@ -57,13 +60,30 @@ class SyncGate extends React.Component {
       return this.props.entries[key].value;
     });
 
-    if ((this.props.journals.value === null) ||
+    const journals = this.props.journals.value;
+
+    if ((journals === null) ||
       (entryArrays.length === 0) || !entryArrays.every((x: any) => (x !== null))) {
       return (<LoadingIndicator />);
     }
 
     return (
-      <Main etesync={this.props.etesync} journals={this.props.journals.value} entries={this.props.entries} />
+      <Switch>
+        <Route
+          path={routeResolver.getRoute('home')}
+          exact={true}
+          render={() => (
+            <Main etesync={this.props.etesync} journals={journals} entries={this.props.entries} />
+            )
+          }
+        />
+        <Route
+          path={routeResolver.getRoute('journals._id')}
+          render={({match}) => (
+            <Journal etesync={this.props.etesync} journals={journals} entries={this.props.entries} match={match} />
+            )}
+        />
+      </Switch>
     );
   }
 }