Move all of the etesync context to a separate place.

This means that encryption key derivation and token access
are not called as often.

src/App.tsx

@@ -1,34 +1,9 @@
 import * as React from 'react';
 import { HashRouter } from 'react-router-dom';
-import { Switch, Route } from 'react-router';
 import './App.css';
 
-import { JournalList } from './JournalList';
+import { EteSyncContext } from './EteSyncContext';
-import { JournalView } from './JournalView';
+import { RouteResolver } from './routes';
-import { RouteResolver, RouteKeysType } from './routes';
-
-interface RouteItem {
-  path: string;
-  exact?: boolean;
-  keys?: RouteKeysType;
-  name: string;
-  component: React.ComponentType<any>;
-}
-
-const navigationRoutes: RouteItem[] = [
-  {
-    path: 'home',
-    exact: true,
-    name: 'Home',
-    component: JournalList,
-  },
-  {
-    path: 'journals._id',
-    exact: true,
-    name: 'Journal',
-    component: JournalView,
-  },
-];
 
 export const routeResolver = new RouteResolver({
   home: '',
@@ -44,16 +19,7 @@ class App extends React.Component {
   render() {
     return (
       <HashRouter>
-        <Switch>
+        <EteSyncContext />
-          {navigationRoutes.map((route, index) => (
-            <Route
-              key={index}
-              path={routeResolver.getRoute(route.path)}
-              exact={route.exact}
-              component={route.component}
-            />
-          ))}
-        </Switch>
       </HashRouter>
     );
   }

src/EteSyncContext.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { Switch, Route } from 'react-router';
+
+import { JournalList } from './JournalList';
+import { JournalView } from './JournalView';
+
+import * as EteSync from './api/EteSync';
+
+import { routeResolver } from './App';
+
+const SERVICE_API = 'http://localhost:8000';
+const USER = 'me@etesync.com';
+const PASSWORD = '';
+const derived = EteSync.deriveKey(USER, PASSWORD);
+
+export interface EteSyncContextType {
+    serviceApiUrl: string;
+    credentials: EteSync.Credentials;
+    encryptionKey: string;
+}
+
+export class EteSyncContext extends React.Component {
+  static state: EteSyncContextType;
+
+  componentDidMount() {
+    let authenticator = new EteSync.Authenticator(SERVICE_API);
+
+    authenticator.getAuthToken(USER, PASSWORD).then((authToken) => {
+      const credentials = new EteSync.Credentials(USER, authToken);
+
+      const context = {
+        serviceApiUrl: SERVICE_API,
+        credentials,
+        encryptionKey: derived,
+      };
+
+      this.setState(context);
+    });
+  }
+
+  render() {
+    if (this.state === null) {
+      return (<div>loading</div>);
+    }
+
+    return (
+      <Switch>
+        <Route
+          path={routeResolver.getRoute('home')}
+          exact={true}
+          render={() => <JournalList etesync={this.state as EteSyncContextType} />}
+        />
+        <Route
+          path={routeResolver.getRoute('journals._id')}
+          exact={true}
+          render={({match}) => <JournalView match={match} etesync={this.state as EteSyncContextType} />}
+        />
+      </Switch>
+    );
+  }
+}

src/JournalList.tsx

@@ -1,16 +1,16 @@
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 
+import { EteSyncContextType } from './EteSyncContext';
 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);
-
 import { routeResolver } from './App';
 
 export class JournalList extends React.Component {
+  props: {
+    etesync: EteSyncContextType
+  };
+
   state: {
     journals: Array<EteSync.Journal>,
   };
@@ -23,12 +23,10 @@ export class JournalList extends React.Component {
   }
 
   componentDidMount() {
-    let authenticator = new EteSync.Authenticator(SERVICE_API);
+    const credentials = this.props.etesync.credentials;
+    const apiBase = this.props.etesync.serviceApiUrl;
 
-    authenticator.getAuthToken(USER, PASSWORD).then((authToken) => {
+    let journalManager = new EteSync.JournalManager(credentials, apiBase);
-      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.
@@ -36,10 +34,10 @@ export class JournalList extends React.Component {
       ));
       this.setState({ journals });
     });
-    });
   }
 
   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);

src/JournalView.tsx

@@ -1,12 +1,8 @@
 import * as React from 'react';
 
+import { EteSyncContextType } from './EteSyncContext';
 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,
@@ -16,8 +12,9 @@ export class JournalView extends React.Component {
     entries: Array<EteSync.Entry>,
   };
   props: {
+    etesync: EteSyncContextType
     match: any,
-    prevUid: string | null,
+    prevUid?: string | null,
   };
 
   constructor(props: any) {
@@ -28,22 +25,20 @@ export class JournalView extends React.Component {
   }
 
   componentDidMount() {
+    const credentials = this.props.etesync.credentials;
+    const apiBase = this.props.etesync.serviceApiUrl;
     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);
+    let entryManager = new EteSync.EntryManager(credentials, apiBase, journal);
-      entryManager.list(this.props.prevUid).then((entries) => {
+    entryManager.list(this.props.prevUid || null).then((entries) => {
       this.setState({ entries });
     });
-    });
   }
 
   render() {
+    const derived = this.props.etesync.encryptionKey;
     const journal = this.props.match.params.journalUid;
-    let prevUid = this.props.prevUid;
+    let prevUid = this.props.prevUid || null;
     const journals = this.state.entries.map((entry) => {
       // FIXME: actually get the correct version!
       let cryptoManager = new EteSync.CryptoManager(derived, journal, 1);