Add a basic journal list view.

src/App.tsx

@@ -2,24 +2,16 @@ import * as React from 'react';
 import { Router } from 'react-router';
 import './App.css';
 
+import { JournalList } from './JournalList';
+
 import createBrowserHistory from 'history/createBrowserHistory';
 const customHistory = createBrowserHistory();
 
-const logo = require('./logo.svg');
-
 class App extends React.Component {
   render() {
     return (
       <Router history={customHistory}>
-        <div className="App">
+        <JournalList />
-          <div className="App-header">
-            <img src={logo} className="App-logo" alt="logo" />
-            <h2>Welcome to React</h2>
-          </div>
-          <p className="App-intro">
-            To get started, edit <code>src/App.tsx</code> and save to reload.
-          </p>
-        </div>
       </Router>
     );
   }

src/JournalList.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+
+import * as EteSync from './api/EteSync';
+
+const SERVICE_API = 'http://localhost:8000';
+const USER = 'test@localhost';
+const PASSWORD = 'SomePassword';
+const derived = EteSync.deriveKey(USER, PASSWORD);
+
+export class JournalList extends React.Component {
+  state: {
+    journals: Array<EteSync.Journal>,
+  };
+
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      journals: [],
+    };
+  }
+
+  componentDidMount() {
+    let authenticator = new EteSync.Authenticator(SERVICE_API);
+
+    authenticator.getAuthToken(USER, PASSWORD).then((authToken) => {
+      const credentials = new EteSync.Credentials(USER, authToken);
+
+      let journalManager = new EteSync.JournalManager(credentials, SERVICE_API);
+      journalManager.list().then((journals) => {
+        journals = journals.filter((x) => (
+          // Skip shared journals for now.
+          !x.key
+        ));
+        this.setState({ journals });
+      });
+    });
+  }
+
+  render() {
+    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 (
+      <div>
+        <div className="App-header">
+          <h2>Welcome to React</h2>
+        </div>
+        <ul>
+          {journals}
+        </ul>
+      </div>
+    );
+  }
+}

src/api/EteSync.tsx

@@ -7,7 +7,7 @@ import * as fetch from 'isomorphic-fetch';
 
 import { byte, base64, stringToByteArray } from './Helpers';
 import { CryptoManager, HMAC_SIZE_BYTES } from './Crypto';
-export { CryptoManager } from './Crypto';
+export { CryptoManager, deriveKey } from './Crypto';
 
 class ExtendableError extends Error {
   constructor(message: any) {
@@ -121,6 +121,10 @@ export class Journal extends BaseJournal<JournalJson> {
     this._json.version = version;
   }
 
+  get key(): base64 | undefined {
+    return this._json.key;
+  }
+
   get version(): number {
     return this._json.version;
   }