From b668e6478a60aef7862ec579935b997ca6894aab Mon Sep 17 00:00:00 2001
From: Tom Hacohen <tom@stosb.com>
Date: Mon, 4 Dec 2017 17:13:35 +0000
Subject: [PATCH] Organise calendars and address books in lists.

---
 src/JournalList.tsx | 38 ++++++++++++++++++++++++++------------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/JournalList.tsx b/src/JournalList.tsx
index d5fffbc..bdbfa64 100644
--- a/src/JournalList.tsx
+++ b/src/JournalList.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 
+import { List, ListItem } from 'material-ui/List';
+
 import { EteSyncContextType } from './EteSyncContext';
 import * as EteSync from './api/EteSync';
 
@@ -38,26 +40,38 @@ export class JournalList extends React.Component {
 
   render() {
     const derived = this.props.etesync.encryptionKey;
-    const journals = this.state.journals.map((journal, idx) => {
-      let cryptoManager = new EteSync.CryptoManager(derived, journal.uid, journal.version);
-      let info = journal.getInfo(cryptoManager);
-      return (
-        <li key={journal.uid}>
+    const journalMap = this.state.journals.reduce(
+      (ret, journal) => {
+        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(
           <Link
+            key={journal.uid}
             to={routeResolver.getRoute('journals._id', { journalUid: journal.uid })}
             className="Drawer-navlink"
           >
-            {info.displayName}: {info.type} ({journal.uid})
+            <ListItem>
+              {info.displayName} ({journal.uid.slice(0, 5)})
+            </ListItem>
           </Link>
-          </li>
-      );
-    });
+        );
+        return ret;
+      },
+      { CALENDAR: [],
+        ADDRESS_BOOK: []});
 
     return (
       <div>
-        <ul>
-          {journals}
-        </ul>
+        <h2>Address Books</h2>
+        <List>
+          {journalMap.ADDRESS_BOOK}
+        </List>
+
+        <h2>Calendars</h2>
+        <List>
+          {journalMap.CALENDAR}
+        </List>
       </div>
     );
   }