Added a hacky journal view.

A lot of code duplication.

src/App.tsx

@@ -4,6 +4,7 @@ import { Switch, Route } from 'react-router';
 import './App.css';
 
 import { JournalList } from './JournalList';
+import { JournalView } from './JournalView';
 import { RouteResolver, RouteKeysType } from './routes';
 
 interface RouteItem {
@@ -25,8 +26,7 @@ const navigationRoutes: RouteItem[] = [
     path: 'journals._id',
     exact: true,
     name: 'Journal',
-    keys: {journalUid: 1},
+    component: JournalView,
-    component: JournalList,
   },
 ];
 

src/JournalList.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Link } from 'react-router-dom';
 
 import * as EteSync from './api/EteSync';
 
@@ -7,6 +8,17 @@ const USER = 'test@localhost';
 const PASSWORD = 'SomePassword';
 const derived = EteSync.deriveKey(USER, PASSWORD);
 
+import { RouteResolver } from './routes';
+const routeResolver = new RouteResolver({
+  home: '',
+  journals: {
+    _base: 'journals',
+    _id: {
+      _base: ':journalUid',
+    },
+  },
+});
+
 export class JournalList extends React.Component {
   state: {
     journals: Array<EteSync.Journal>,
@@ -40,7 +52,16 @@ export class JournalList extends React.Component {
     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}>{info.displayName}: {info.type} ({journal.uid})</li>);
+      return (
+        <li key={journal.uid}>
+          <Link
+            to={routeResolver.getRoute('journals._id', { journalUid: journal.uid })}
+            className="Drawer-navlink"
+          >
+            {info.displayName}: {info.type} ({journal.uid})
+          </Link>
+          </li>
+      );
     });
 
     return (

src/JournalView.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+
+import * as EteSync from './api/EteSync';
+
+const SERVICE_API = 'http://localhost:8000';
+const USER = 'hacj';
+const PASSWORD = 'hack';
+const derived = EteSync.deriveKey(USER, PASSWORD);
+
+export class JournalView extends React.Component {
+  static defaultProps = {
+    prevUid: null,
+  };
+
+  state: {
+    entries: Array<EteSync.Entry>,
+  };
+  props: {
+    match: any,
+    prevUid: string | null,
+  };
+
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      entries: [],
+    };
+  }
+
+  componentDidMount() {
+    const journal = this.props.match.params.journalUid;
+    let authenticator = new EteSync.Authenticator(SERVICE_API);
+
+    authenticator.getAuthToken(USER, PASSWORD).then((authToken) => {
+      const credentials = new EteSync.Credentials(USER, authToken);
+
+      let entryManager = new EteSync.EntryManager(credentials, SERVICE_API, journal);
+      entryManager.list(this.props.prevUid).then((entries) => {
+        this.setState({ entries });
+      });
+    });
+  }
+
+  render() {
+    const journal = this.props.match.params.journalUid;
+    let prevUid = this.props.prevUid;
+    const journals = this.state.entries.map((entry) => {
+      // FIXME: actually get the correct version!
+      let cryptoManager = new EteSync.CryptoManager(derived, journal, 1);
+      let syncEntry = entry.getSyncEntry(cryptoManager, prevUid);
+      prevUid = entry.uid;
+      return (<li key={entry.uid}>{syncEntry.type}: {syncEntry.content}</li>);
+    });
+
+    return (
+      <div>
+        <div className="App-header">
+          <h2>Welcome to React</h2>
+        </div>
+        <ul>
+          {journals}
+        </ul>
+      </div>
+    );
+  }
+}