Add views for actual collection items.

I.e calendar events and address book content.

src/App.tsx

@@ -11,6 +11,12 @@ export const routeResolver = new RouteResolver({
     _base: 'journals',
     _id: {
       _base: ':journalUid',
+      items: {
+        _base: 'items',
+        _id: {
+          _base: ':entryUid',
+        },
+      },
       entries: {
         _base: 'entries',
         _id: {

src/JournalView.tsx

@@ -7,6 +7,8 @@ import * as EteSync from './api/EteSync';
 import { routeResolver } from './App';
 
 import { JournalViewEntries } from './JournalViewEntries';
+import { JournalViewAddressBook } from './JournalViewAddressBook';
+import { JournalViewCalendar } from './JournalViewCalendar';
 
 export class JournalView extends React.Component {
   static defaultProps = {
@@ -54,8 +56,10 @@ export class JournalView extends React.Component {
     const derived = this.props.etesync.encryptionKey;
     const journal = this.state.journal;
     let prevUid = this.props.prevUid || null;
+    const cryptoManager = new EteSync.CryptoManager(derived, journal.uid, journal.version);
+    const collectionInfo = journal.getInfo(cryptoManager);
+
     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;
 
@@ -76,6 +80,19 @@ export class JournalView extends React.Component {
             <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>;
+              }
+            }
+          }
+        />
       </div>
     );
   }

src/JournalViewAddressBook.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+
+import * as ICAL from 'ical.js';
+
+import * as EteSync from './api/EteSync';
+
+export class JournalViewAddressBook 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>);
+    }
+
+    let items: Map<string, any> = new Map();
+
+    for (const syncEntry of this.props.entries) {
+      let comp = new ICAL.Component(ICAL.parse(syncEntry.content));
+
+      const uid = comp.getFirstPropertyValue('uid');
+
+      if ((syncEntry.action === EteSync.SyncEntryAction.Add) ||
+        (syncEntry.action === EteSync.SyncEntryAction.Change)) {
+        items.set(uid, comp);
+      } else if (syncEntry.action === EteSync.SyncEntryAction.Delete) {
+        items.delete(uid);
+      }
+    }
+
+    // FIXME: should be ICAL.component
+    let entries: Array<any> = Array.from(items.values()).sort((_a: any, _b: any) => {
+      const a = _a.getFirstPropertyValue('fn');
+      const b = _b.getFirstPropertyValue('fn');
+
+      if (a < b) {
+        return -1;
+      } else if (a > b) {
+        return 1;
+      } else {
+        return 0;
+      }
+    });
+
+    let itemList = entries.map((entry, idx) => {
+      const name = entry.getFirstPropertyValue('fn');
+      return (
+        <li key={idx}>{name}</li>
+      );
+    });
+
+    return (
+      <div>
+        <ul>
+          {itemList}
+        </ul>
+      </div>
+    );
+  }
+}

src/JournalViewCalendar.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+
+import * as ICAL from 'ical.js';
+
+import * as EteSync from './api/EteSync';
+
+export class JournalViewCalendar 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>);
+    }
+
+    let items: Map<string, any> = new Map();
+
+    for (const syncEntry of this.props.entries) {
+      let comp = new ICAL.Component(ICAL.parse(syncEntry.content)).getFirstSubcomponent('vevent');
+
+      const uid = comp.getFirstPropertyValue('uid');
+
+      if ((syncEntry.action === EteSync.SyncEntryAction.Add) ||
+        (syncEntry.action === EteSync.SyncEntryAction.Change)) {
+        items.set(uid, comp);
+      } else if (syncEntry.action === EteSync.SyncEntryAction.Delete) {
+        items.delete(uid);
+      }
+    }
+
+    // FIXME: should be ICAL.component
+    let entries: Array<any> = Array.from(items.values()).map((value: string) => (
+      new ICAL.Event(value)
+    )).sort((a: any, b: any) => {
+      if (a.summary < b.summary) {
+        return -1;
+      } else if (a.summary > b.summary) {
+        return 1;
+      } else {
+        return 0;
+      }
+    });
+
+    let itemList = entries.map((entry, idx) => {
+      return (
+        <li key={idx}>{entry.summary}</li>
+      );
+    });
+
+    return (
+      <div>
+        <ul>
+          {itemList}
+        </ul>
+      </div>
+    );
+  }
+}

src/api/EteSync.tsx

@@ -163,14 +163,14 @@ export class Journal extends BaseJournal<JournalJson> {
   }
 }
 
-enum SyncEntryType {
+export enum SyncEntryAction {
   Add = 'ADD',
   Delete = 'DEL',
   Change = 'CHANGE',
 }
 
 export class SyncEntry {
-  action: SyncEntryType;
+  action: SyncEntryAction;
   content: string;
 
   constructor(json?: any) {