From 2a6220e6d40c4ff9af27cb111a586459e9e98238 Mon Sep 17 00:00:00 2001
From: Tom Hacohen <tom@stosb.com>
Date: Mon, 4 Dec 2017 17:52:26 +0000
Subject: [PATCH] Make it possible to navigate between collection items and
 journal entries.

---
 src/JournalView.tsx | 42 +++++++++++++++++++++++++++++++-----------
 1 file changed, 31 insertions(+), 11 deletions(-)

diff --git a/src/JournalView.tsx b/src/JournalView.tsx
index c63d42d..c913587 100644
--- a/src/JournalView.tsx
+++ b/src/JournalView.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { Route, Redirect } from 'react-router';
+import { Link } from 'react-router-dom';
+import { Tabs, Tab } from 'material-ui/Tabs';
 
 import { EteSyncContextType } from './EteSyncContext';
 import * as EteSync from './api/EteSync';
@@ -66,30 +68,48 @@ export class JournalView extends React.Component {
       return syncEntry;
     });
 
+    let itemsTitle: string;
+    let itemsView: JSX.Element;
+    if (collectionInfo.type === 'CALENDAR') {
+      itemsView = <JournalViewCalendar journal={journal} entries={syncEntries} />;
+      itemsTitle = 'Events';
+    } else if (collectionInfo.type === 'ADDRESS_BOOK') {
+      itemsView = <JournalViewAddressBook journal={journal} entries={syncEntries} />;
+      itemsTitle = 'Contacts';
+    } else {
+      itemsView = <div>Unsupported type</div>;
+      itemsTitle = 'Items';
+    }
+
     return (
       <div>
+        <Tabs>
+          <Tab
+            label={itemsTitle}
+            containerElement={<Link to={routeResolver.getRoute('journals._id.items', {journalUid: journal.uid})} />}
+          />
+          <Tab
+            label="Journal Entries"
+            containerElement={<Link to={routeResolver.getRoute('journals._id.entries', {journalUid: journal.uid})} />}
+          />
+        </Tabs>
         <Route
           path={routeResolver.getRoute('journals._id')}
           exact={true}
-          render={() => <Redirect to={routeResolver.getRoute('journals._id.entries', {journalUid: journal.uid})} />}
+          render={() => <Redirect to={routeResolver.getRoute('journals._id.items', {journalUid: journal.uid})} />}
         />
-        <h2>Welcome to Journal!</h2>
+        <h2>{collectionInfo.displayName}</h2>
         <Route
           path={routeResolver.getRoute('journals._id.entries')}
-          render={() =>
-            <JournalViewEntries journal={journal} entries={syncEntries} />
+          render={() => {
+              return <JournalViewEntries journal={journal} entries={syncEntries} />;
+            }
           }
         />
         <Route
           path={routeResolver.getRoute('journals._id.items')}
           render={() => {
-              if (collectionInfo.type === 'CALENDAR') {
-                return <JournalViewCalendar journal={journal} entries={syncEntries} />;
-              } else if (collectionInfo.type === 'ADDRESS_BOOK') {
-                return <JournalViewAddressBook journal={journal} entries={syncEntries} />;
-              } else {
-                return <div>Unsupported type</div>;
-              }
+              return itemsView;
             }
           }
         />