Put the journals in the sidemenu.

src/App.tsx

@@ -1,33 +1,24 @@
 import * as React from 'react';
 import { connect } from 'react-redux';
-import { HashRouter, NavLink } from 'react-router-dom';
+import { HashRouter } from 'react-router-dom';
 import getMuiTheme from 'material-ui/styles/getMuiTheme';
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
 import { amber500, amber700, lightBlue500, darkBlack, white } from 'material-ui/styles/colors';
 import AppBar from 'material-ui/AppBar';
 import Drawer from 'material-ui/Drawer';
 import IconButton from 'material-ui/IconButton';
-import { List, ListItem } from 'material-ui/List';
-import Subheader from 'material-ui/Subheader';
-import Divider from 'material-ui/Divider';
-import ActionCode from 'material-ui/svg-icons/action/code';
-import ActionHome from 'material-ui/svg-icons/action/home';
-import ActionBugReport from 'material-ui/svg-icons/action/bug-report';
-import ActionQuestionAnswer from 'material-ui/svg-icons/action/question-answer';
-import LogoutIcon from 'material-ui/svg-icons/action/power-settings-new';
 
 import NavigationMenu from 'material-ui/svg-icons/navigation/menu';
 
 import './App.css';
 
+import SideMenu from './SideMenu';
 import EteSyncContext from './EteSyncContext';
 import { RouteResolver } from './routes';
 
 import * as C from './Constants';
 import * as store from './store';
 
-const logo = require('./images/logo.svg');
-
 const muiTheme = getMuiTheme({
   palette: {
     primary1Color: amber500,
@@ -84,7 +75,6 @@ class App extends React.Component {
 
     this.toggleDrawer = this.toggleDrawer.bind(this);
     this.closeDrawer = this.closeDrawer.bind(this);
-    this.logout = this.logout.bind(this);
   }
 
   toggleDrawer() {
@@ -95,15 +85,8 @@ class App extends React.Component {
     this.setState({drawerOpen: false});
   }
 
-  logout() {
-    store.store.dispatch(store.logout());
-    this.closeDrawer();
-  }
-
   render() {
-    const username = (this.props.credentials && this.props.credentials.value) ?
+    const credentials = (this.props.credentials) ? this.props.credentials.value : null;
-      this.props.credentials.value.credentials.email
-      : C.appName;
 
     return (
       <MuiThemeProvider muiTheme={muiTheme}>
@@ -119,27 +102,7 @@ class App extends React.Component {
             open={this.state.drawerOpen}
             onRequestChange={this.toggleDrawer}
           >
-            <div className="App-drawer-header">
+            <SideMenu etesync={credentials} onCloseDrawerRequest={this.closeDrawer} />
-              <img className="App-drawer-logo" src={logo} />
-              <div style={{color: getPalette('alternateTextColor')}} >
-                {username}
-              </div>
-            </div>
-            <List>
-              <NavLink
-                to={routeResolver.getRoute('home')}
-                exact={true}
-              >
-                <ListItem primaryText="Main" leftIcon={<ActionHome />}  onClick={this.closeDrawer} />
-              </NavLink>
-              <ListItem primaryText="Log Out" leftIcon={<LogoutIcon/>}  onClick={this.logout} />
-              <Divider />
-              <Subheader>External Links</Subheader>
-              <ListItem primaryText="Website" leftIcon={<ActionHome />} href={C.homePage} />
-              <ListItem primaryText="FAQ" leftIcon={<ActionQuestionAnswer />} href={C.faq} />
-              <ListItem primaryText="Source Code" leftIcon={<ActionCode />} href={C.sourceCode} />
-              <ListItem primaryText="Report Issue" leftIcon={<ActionBugReport />} href={C.reportIssue} />
-            </List>
           </Drawer>
 
           <EteSyncContext />

src/SideMenu.tsx

@@ -0,0 +1,125 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router';
+import { NavLink } from 'react-router-dom';
+import { List, ListItem } from 'material-ui/List';
+import Subheader from 'material-ui/Subheader';
+import Divider from 'material-ui/Divider';
+import ActionCode from 'material-ui/svg-icons/action/code';
+import ActionHome from 'material-ui/svg-icons/action/home';
+import ActionBugReport from 'material-ui/svg-icons/action/bug-report';
+import ActionQuestionAnswer from 'material-ui/svg-icons/action/question-answer';
+import LogoutIcon from 'material-ui/svg-icons/action/power-settings-new';
+
+const logo = require('./images/logo.svg');
+
+import SideMenuJournals from './SideMenuJournals';
+
+import { routeResolver, getPalette } from './App';
+
+import { store, logout, JournalsType, fetchJournals, StoreState, CredentialsData } from './store';
+
+import * as C from './Constants';
+
+interface PropsType {
+  etesync: CredentialsData | null;
+  onCloseDrawerRequest: () => void;
+}
+
+interface PropsTypeInner extends PropsType {
+  journals: JournalsType;
+}
+
+class SideMenu extends React.Component {
+  props: PropsTypeInner;
+
+  constructor(props: any) {
+    super(props);
+    this.logout = this.logout.bind(this);
+  }
+
+  logout() {
+    store.dispatch(logout());
+    this.props.onCloseDrawerRequest();
+  }
+
+  fetchJournals() {
+    if (this.props.etesync !== null) {
+      store.dispatch(fetchJournals(this.props.etesync));
+    }
+  }
+
+  componentDidMount() {
+    this.fetchJournals();
+  }
+
+  componentWillReceiveProps(nextProps: PropsTypeInner) {
+    if (this.props.etesync !== nextProps.etesync) {
+      this.fetchJournals();
+    }
+  }
+
+  render() {
+    const username = (this.props.etesync && this.props.etesync.credentials.email) ?
+      this.props.etesync.credentials.email
+      : C.appName;
+
+    let loggedInItems;
+    if (this.props.etesync) {
+      const journals = (this.props.journals && this.props.journals.value) && (
+        <React.Fragment>
+          <Divider />
+          <Subheader>Journals</Subheader>
+          <SideMenuJournals
+            etesync={this.props.etesync}
+            journals={this.props.journals.value}
+            onItemClick={this.props.onCloseDrawerRequest}
+          />
+        </React.Fragment>
+      );
+
+      loggedInItems = (
+        <React.Fragment>
+          <ListItem primaryText="Log Out" leftIcon={<LogoutIcon/>}  onClick={this.logout} />
+          {journals}
+        </React.Fragment>
+      );
+    }
+
+    return (
+      <React.Fragment>
+        <div className="App-drawer-header">
+          <img className="App-drawer-logo" src={logo} />
+          <div style={{color: getPalette('alternateTextColor')}} >
+            {username}
+          </div>
+        </div>
+        <List>
+          <NavLink
+            to={routeResolver.getRoute('home')}
+            exact={true}
+          >
+            <ListItem primaryText="Main" leftIcon={<ActionHome />}  onClick={this.props.onCloseDrawerRequest} />
+          </NavLink>
+          {loggedInItems}
+          <Divider />
+          <Subheader>External Links</Subheader>
+          <ListItem primaryText="Website" leftIcon={<ActionHome />} href={C.homePage} />
+          <ListItem primaryText="FAQ" leftIcon={<ActionQuestionAnswer />} href={C.faq} />
+          <ListItem primaryText="Source Code" leftIcon={<ActionCode />} href={C.sourceCode} />
+          <ListItem primaryText="Report Issue" leftIcon={<ActionBugReport />} href={C.reportIssue} />
+        </List>
+      </React.Fragment>
+    );
+  }
+}
+
+const mapStateToProps = (state: StoreState, props: PropsType) => {
+  return {
+    journals: state.cache.journals,
+  };
+};
+
+export default withRouter(connect(
+  mapStateToProps
+)(SideMenu));

src/SideMenuJournals.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+
+import { ListItem } from 'material-ui/List';
+
+import * as EteSync from './api/EteSync';
+
+import { routeResolver } from './App';
+import { JournalsData, CredentialsData } from './store';
+
+class SideMenuJournals extends React.Component {
+  props: {
+    etesync: CredentialsData;
+    journals: JournalsData;
+    onItemClick: () => void;
+  };
+
+  constructor(props: any) {
+    super(props);
+  }
+
+  render() {
+    const derived = this.props.etesync.encryptionKey;
+    const journalMap = this.props.journals.reduce(
+      (ret, journal) => {
+        if (journal.key) {
+          const key = 'UNSUPPORTED';
+          ret[key] = ret[key] || [];
+          ret[key].push(
+            <ListItem
+              key={journal.uid}
+            >
+              {journal.uid.slice(0, 20)}
+            </ListItem>
+          );
+        } else {
+          let cryptoManager = new EteSync.CryptoManager(derived, journal.uid, journal.version);
+          let info = journal.getInfo(cryptoManager);
+          ret[info.type] = ret[info.type] || [];
+          ret[info.type].push(
+            <ListItem key={journal.uid}>
+              <Link
+                to={routeResolver.getRoute('journals._id', { journalUid: journal.uid })}
+                onClick={this.props.onItemClick}
+              >
+                {info.displayName} ({journal.uid.slice(0, 5)})
+              </Link>
+            </ListItem>
+          );
+        }
+
+        return ret;
+      },
+      { CALENDAR: [],
+        ADDRESS_BOOK: [],
+        UNSUPPORTED: [] as Array<JSX.Element>});
+
+    return (
+      <React.Fragment>
+        <ListItem
+          primaryText="Address Books"
+          nestedItems={journalMap.ADDRESS_BOOK}
+        />
+
+        <ListItem
+          primaryText="Calendars"
+          nestedItems={journalMap.CALENDAR}
+        />
+
+        { journalMap.UNSUPPORTED && (
+          <ListItem
+            primaryText="UNSUPPORTED"
+            nestedItems={journalMap.UNSUPPORTED}
+          />
+        )}
+      </React.Fragment>
+    );
+  }
+}
+
+export default SideMenuJournals;