Move the journals to their own page.

src/Journals.tsx

@@ -1,21 +1,25 @@
 import * as React from 'react';
+import { History } from 'history';
 
-import { ListItem } from '../widgets/List';
+import { List, ListItem } from './widgets/List';
 
-import * as EteSync from '../api/EteSync';
+import * as EteSync from './api/EteSync';
 
-import { JournalsData, UserInfoData, CredentialsData } from '../store';
+import { routeResolver } from './App';
 
-class SideMenuJournals extends React.PureComponent {
+import { JournalsData, UserInfoData, CredentialsData } from './store';
+
+class Journals extends React.PureComponent {
   props: {
     etesync: CredentialsData;
     journals: JournalsData;
     userInfo: UserInfoData;
-    onItemClick: (journalUid: string) => void;
+    history: History;
   };
 
   constructor(props: any) {
     super(props);
+    this.journalClicked = this.journalClicked.bind(this);
   }
 
   render() {
@@ -38,7 +42,7 @@ class SideMenuJournals extends React.PureComponent {
         let info = journal.getInfo(cryptoManager);
         ret[info.type] = ret[info.type] || [];
         ret[info.type].push(
-          <ListItem key={journal.uid} onClick={() => this.props.onItemClick(journal.uid)}>
+          <ListItem key={journal.uid} onClick={() => this.journalClicked(journal.uid)}>
             {info.displayName} ({journal.uid.slice(0, 5)})
           </ListItem>
         );
@@ -51,7 +55,7 @@ class SideMenuJournals extends React.PureComponent {
       });
 
     return (
-      <React.Fragment>
+      <List>
         <ListItem
           primaryText="Address Books"
           nestedItems={journalMap.ADDRESS_BOOK}
@@ -66,9 +70,13 @@ class SideMenuJournals extends React.PureComponent {
           primaryText="Tasks"
           nestedItems={journalMap.TASKS}
         />
-      </React.Fragment>
+      </List>
     );
   }
+
+  private journalClicked(journalUid: string) {
+    this.props.history.push(routeResolver.getRoute('journals._id', { journalUid: journalUid }));
+  }
 }
 
-export default SideMenuJournals;
+export default Journals;

src/SideMenu/index.tsx

@@ -5,15 +5,13 @@ import { List, ListItem, ListSubheader, ListDivider } from '../widgets/List';
 import { Theme, withTheme } from '@material-ui/core/styles';
 import ActionCode from '@material-ui/icons/Code';
 import ActionHome from '@material-ui/icons/Home';
+import ActionJournals from '@material-ui/icons/LibraryBooks';
 import ActionBugReport from '@material-ui/icons/BugReport';
 import ActionQuestionAnswer from '@material-ui/icons/QuestionAnswer';
 import LogoutIcon from '@material-ui/icons/PowerSettingsNew';
 
 const logo = require('../images/logo.svg');
 
-import SideMenuJournals from './SideMenuJournals';
-import ErrorBoundary from '../components/ErrorBoundary';
-
 import { routeResolver } from '../App';
 
 import { store, JournalsType, UserInfoData, StoreState, CredentialsData } from '../store';
@@ -36,7 +34,6 @@ class SideMenu extends React.PureComponent<PropsTypeInner> {
   constructor(props: PropsTypeInner) {
     super(props);
     this.logout = this.logout.bind(this);
-    this.journalClicked = this.journalClicked.bind(this);
   }
 
   logout() {
@@ -44,11 +41,6 @@ class SideMenu extends React.PureComponent<PropsTypeInner> {
     this.props.onCloseDrawerRequest();
   }
 
-  journalClicked(journalUid: string) {
-    this.props.onCloseDrawerRequest();
-    this.props.history.push(routeResolver.getRoute('journals._id', { journalUid: journalUid }));
-  }
-
   render() {
     const { theme } = this.props;
     const username = (this.props.etesync && this.props.etesync.credentials.email) ?
@@ -57,27 +49,17 @@ class SideMenu extends React.PureComponent<PropsTypeInner> {
 
     let loggedInItems;
     if (this.props.etesync) {
-      const journals = (this.props.etesync.encryptionKey && this.props.journals && this.props.journals.value
-        && this.props.userInfo) && (
-
-        <React.Fragment>
-          <ListDivider />
-          <ListSubheader>Journals</ListSubheader>
-          <ErrorBoundary>
-            <SideMenuJournals
-              etesync={this.props.etesync}
-              journals={this.props.journals.value}
-              userInfo={this.props.userInfo}
-              onItemClick={this.journalClicked}
-            />
-          </ErrorBoundary>
-        </React.Fragment>
-      );
-
       loggedInItems = (
         <React.Fragment>
+          <ListItem
+            primaryText="Journals"
+            leftIcon={<ActionJournals />}
+            onClick={() => {
+              this.props.onCloseDrawerRequest();
+              this.props.history.push(routeResolver.getRoute('journals'));
+            }}
+          />
           <ListItem primaryText="Log Out" leftIcon={<LogoutIcon/>}  onClick={this.logout} />
-          {journals}
         </React.Fragment>
       );
     }

src/SyncGate.tsx

@@ -11,6 +11,7 @@ import { routeResolver } from './App';
 import LoadingIndicator from './widgets/LoadingIndicator';
 import PrettyError from './widgets/PrettyError';
 
+import Journals from './Journals';
 import Journal from './Journal';
 import Pim from './Pim';
 
@@ -201,6 +202,18 @@ class SyncGate extends React.PureComponent<PropsTypeInner> {
             />
           )}
         />
+        <Route
+          path={routeResolver.getRoute('journals')}
+          exact={true}
+          render={({ history }) => (
+            <Journals
+              userInfo={this.props.userInfo.value!}
+              etesync={this.props.etesync}
+              journals={journals}
+              history={history}
+            />
+          )}
+        />
         <Route
           path={routeResolver.getRoute('journals._id')}
           render={({match}) => (