Split away the journal list item view from the jorunal view.

src/JournalView.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { Route, Redirect } from 'react-router';
 
-import * as ICAL from 'ical.js';
-
 import { EteSyncContextType } from './EteSyncContext';
 import * as EteSync from './api/EteSync';
 
 import { routeResolver } from './App';
 
+import { JournalViewEntries } from './JournalViewEntries';
+
 export class JournalView extends React.Component {
   static defaultProps = {
     prevUid: null,
@@ -54,24 +54,13 @@ export class JournalView extends React.Component {
     const derived = this.props.etesync.encryptionKey;
     const journal = this.state.journal;
     let prevUid = this.props.prevUid || null;
-    const journals = this.state.entries.map((entry) => {
+    const syncEntries = this.state.entries.map((entry) => {
       let cryptoManager = new EteSync.CryptoManager(derived, journal.uid, journal.version);
       let syncEntry = entry.getSyncEntry(cryptoManager, prevUid);
       prevUid = entry.uid;
-      const comp = new ICAL.Component(ICAL.parse(syncEntry.content));
 
-      if (comp.name === 'vcalendar') {
-        const vevent = new ICAL.Event(comp.getFirstSubcomponent('vevent'));
-        return (<li key={entry.uid}>{syncEntry.action}: {vevent.summary} ({vevent.uid})</li>);
-      } else if (comp.name === 'vcard') {
-        const vcard = comp;
-        const name = vcard.getFirstPropertyValue('fn');
-        const uid = vcard.getFirstPropertyValue('uid');
-        return (<li key={entry.uid}>{syncEntry.action}: {name} ({uid})</li>);
-      } else {
-        return (<li key={entry.uid}>{syncEntry.action}: {syncEntry.content}</li>);
-      }
-    }).reverse();
+      return syncEntry;
+    });
 
     return (
       <div>
@@ -84,9 +73,7 @@ export class JournalView extends React.Component {
         <Route
           path={routeResolver.getRoute('journals._id.entries')}
           render={() =>
-            <ul>
-              {journals}
-            </ul>
+            <JournalViewEntries journal={journal} entries={syncEntries} />
           }
         />
       </div>

src/JournalViewEntries.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+
+import * as ICAL from 'ical.js';
+
+import * as EteSync from './api/EteSync';
+
+export class JournalViewEntries extends React.Component {
+  static defaultProps = {
+    prevUid: null,
+  };
+
+  props: {
+    journal: EteSync.Journal,
+    entries: Array<EteSync.SyncEntry>,
+  };
+
+  render() {
+    if (this.props.journal === undefined) {
+      return (<div>Loading</div>);
+    }
+
+    const entries = this.props.entries.map((syncEntry, idx) => {
+      const comp = new ICAL.Component(ICAL.parse(syncEntry.content));
+
+      if (comp.name === 'vcalendar') {
+        const vevent = new ICAL.Event(comp.getFirstSubcomponent('vevent'));
+        return (<li key={idx}>{syncEntry.action}: {vevent.summary} ({vevent.uid})</li>);
+      } else if (comp.name === 'vcard') {
+        const vcard = comp;
+        const name = vcard.getFirstPropertyValue('fn');
+        const uid = vcard.getFirstPropertyValue('uid');
+        return (<li key={idx}>{syncEntry.action}: {name} ({uid})</li>);
+      } else {
+        return (<li key={idx}>{syncEntry.action}: {syncEntry.content}</li>);
+      }
+    }).reverse();
+
+    return (
+      <div>
+        <ul>
+          {entries}
+        </ul>
+      </div>
+    );
+  }
+}