From e92a9c9961799ffe8ea8e03d3e52b083de202bad Mon Sep 17 00:00:00 2001
From: Tom Hacohen <tom@stosb.com>
Date: Sun, 3 Dec 2017 13:27:32 +0000
Subject: [PATCH] Improve presentation of journal log.

---
 package.json        |  1 +
 src/JournalView.tsx | 18 ++++++++++++++++--
 src/api/EteSync.tsx |  2 +-
 src/ical.js.d.ts    |  5 +++++
 yarn.lock           |  4 ++++
 5 files changed, 27 insertions(+), 3 deletions(-)
 create mode 100644 src/ical.js.d.ts

diff --git a/package.json b/package.json
index 70b7435..302c79d 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "ical.js": "^1.2.2",
     "isomorphic-fetch": "^2.1.1",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
diff --git a/src/JournalView.tsx b/src/JournalView.tsx
index d4d9507..e666721 100644
--- a/src/JournalView.tsx
+++ b/src/JournalView.tsx
@@ -1,6 +1,8 @@
 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';
 
@@ -56,8 +58,20 @@ export class JournalView extends React.Component {
       let cryptoManager = new EteSync.CryptoManager(derived, journal.uid, journal.version);
       let syncEntry = entry.getSyncEntry(cryptoManager, prevUid);
       prevUid = entry.uid;
-      return (<li key={entry.uid}>{syncEntry.type}: {syncEntry.content}</li>);
-    });
+      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 (
       <div>
diff --git a/src/api/EteSync.tsx b/src/api/EteSync.tsx
index a97dbaf..c745b50 100644
--- a/src/api/EteSync.tsx
+++ b/src/api/EteSync.tsx
@@ -170,7 +170,7 @@ enum SyncEntryType {
 }
 
 export class SyncEntry {
-  type: SyncEntryType;
+  action: SyncEntryType;
   content: string;
 
   constructor(json?: any) {
diff --git a/src/ical.js.d.ts b/src/ical.js.d.ts
new file mode 100644
index 0000000..ccd4a6c
--- /dev/null
+++ b/src/ical.js.d.ts
@@ -0,0 +1,5 @@
+declare var ICAL: any;
+
+declare module 'ical.js' {
+  export = ICAL;
+}
diff --git a/yarn.lock b/yarn.lock
index 8180ed2..624c934 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2378,6 +2378,10 @@ https-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
 
+ical.js@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/ical.js/-/ical.js-1.2.2.tgz#59b517362a8f61dce0342fe67deb7c20dd119f6e"
+
 iconv-lite@0.4.19, iconv-lite@^0.4.17, iconv-lite@~0.4.13:
   version "0.4.19"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"