Restructure the journals route.

This puts the jorunal list and the journal view in the same place
and will make it easier to add new/edit.

src/Journals/JournalsList.tsx

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import { History } from 'history';
 
-import { List, ListItem } from './widgets/List';
+import { List, ListItem } from '../widgets/List';
 
-import * as EteSync from './api/EteSync';
+import * as EteSync from '../api/EteSync';
 
-import { routeResolver } from './App';
+import { routeResolver } from '../App';
 
-import { JournalsData, UserInfoData, CredentialsData } from './store';
+import { JournalsData, UserInfoData, CredentialsData } from '../store';
 
-class Journals extends React.PureComponent {
+class JournalsList extends React.PureComponent {
   props: {
     etesync: CredentialsData;
     journals: JournalsData;
@@ -79,4 +79,4 @@ class Journals extends React.PureComponent {
   }
 }
 
-export default Journals;
+export default JournalsList;

src/Journals/index.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { Location, History } from 'history';
+import { Route, Switch } from 'react-router';
+
+import Journal from './Journal';
+import JournalsList from './JournalsList';
+
+import AppBarOverride from '../widgets/AppBarOverride';
+import { routeResolver } from '../App';
+
+import { JournalsData, UserInfoData, CredentialsData } from '../store';
+import { SyncInfo } from '../SyncGate';
+
+class Journals extends React.PureComponent {
+  props: {
+    etesync: CredentialsData;
+    journals: JournalsData;
+    userInfo: UserInfoData;
+    syncInfo: SyncInfo;
+    history: History;
+    location: Location;
+  };
+
+  constructor(props: any) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <Switch>
+        <Route
+          path={routeResolver.getRoute('journals')}
+          exact={true}
+          render={({ history }) => (
+            <>
+              <AppBarOverride title="Journals" />
+              <JournalsList
+                userInfo={this.props.userInfo}
+                etesync={this.props.etesync}
+                journals={this.props.journals}
+                history={history}
+              />
+            </>
+          )}
+        />
+        <Route
+          path={routeResolver.getRoute('journals._id')}
+          render={({match}) => (
+            <Journal
+              syncInfo={this.props.syncInfo}
+              match={match}
+            />
+          )}
+        />
+      </Switch>
+    );
+  }
+}
+
+export default Journals;

src/SyncGate.tsx

@@ -13,7 +13,6 @@ import LoadingIndicator from './widgets/LoadingIndicator';
 import PrettyError from './widgets/PrettyError';
 
 import Journals from './Journals';
-import Journal from './Journal';
 import Pim from './Pim';
 
 import * as EteSync from './api/EteSync';
@@ -208,26 +207,15 @@ class SyncGate extends React.PureComponent<PropsTypeInner> {
         />
         <Route
           path={routeResolver.getRoute('journals')}
-          exact={true}
+          render={({ location, history }) => (
-          render={({ history }) => (
-            <>
-              <AppBarOverride title="Journals" />
             <Journals
-                userInfo={this.props.userInfo.value!}
               etesync={this.props.etesync}
+              userInfo={this.props.userInfo.value!}
+              syncInfo={journalMap}
               journals={journals}
+              location={location}
               history={history}
             />
-            </>
-          )}
-        />
-        <Route
-          path={routeResolver.getRoute('journals._id')}
-          render={({match}) => (
-            <Journal
-              syncInfo={journalMap}
-              match={match}
-            />
           )}
         />
       </Switch>