Make special types for events and calendars.

This will simplify extracting values and already removes some
redundancy.

src/AddressBook.tsx

@@ -1,18 +1,18 @@
 import * as React from 'react';
 import { List, ListItem } from 'material-ui/List';
 
-import * as ICAL from 'ical.js';
+import { ContactType } from './pim-types';
 
 class AddressBook extends React.Component {
   props: {
-    entries: Array<ICAL.Component>,
+    entries: Array<ContactType>,
-    onItemClick: (contact: ICAL.Component) => void,
+    onItemClick: (contact: ContactType) => void,
   };
 
   render() {
     let entries = this.props.entries.sort((_a, _b) => {
-      const a = _a.getFirstPropertyValue('fn');
+      const a = _a.fn;
-      const b = _b.getFirstPropertyValue('fn');
+      const b = _b.fn;
 
       if (a < b) {
         return -1;
@@ -24,8 +24,9 @@ class AddressBook extends React.Component {
     });
 
     let itemList = entries.map((entry) => {
-      const uid = entry.getFirstPropertyValue('uid');
+      const uid = entry.uid;
-      const name = entry.getFirstPropertyValue('fn');
+      const name = entry.fn;
+
       return (
         <ListItem key={uid} primaryText={name} onClick={() => (this.props.onItemClick(entry))} />
       );

src/Calendar.tsx

@@ -3,33 +3,18 @@ import BigCalendar from 'react-big-calendar';
 import 'react-big-calendar/lib/css/react-big-calendar.css';
 import * as moment from 'moment';
 
-import * as ICAL from 'ical.js';
+import { EventType } from './pim-types';
 
 BigCalendar.momentLocalizer(moment);
 
-class EventWrapper extends ICAL.Event {
-
-  get title() {
-    return this.summary;
-  }
-
-  get start() {
-      return this.startDate.toJSDate();
-  }
-
-  get end() {
-      return this.endDate.toJSDate();
-  }
-}
-
 class Calendar extends React.Component {
   state: {
     currentDate?: Date;
   };
 
   props: {
-    entries: Array<ICAL.Component>,
+    entries: Array<EventType>,
-    onItemClick: (contact: ICAL.Event) => void,
+    onItemClick: (contact: EventType) => void,
   };
 
   constructor(props: any) {
@@ -38,9 +23,7 @@ class Calendar extends React.Component {
   }
 
   render() {
-    let entries = this.props.entries.map((value) => (
+    let entries = this.props.entries.sort((a, b) => {
-      new EventWrapper(value)
-    )).sort((a, b) => {
       if (a.summary < b.summary) {
         return -1;
       } else if (a.summary > b.summary) {

src/Contact.tsx

@@ -6,11 +6,11 @@ import CommunicationChatBubble from 'material-ui/svg-icons/communication/chat-bu
 import CommunicationEmail from 'material-ui/svg-icons/communication/email';
 import { indigo500 } from 'material-ui/styles/colors';
 
-import * as ICAL from 'ical.js';
+import { ContactType } from './pim-types';
 
 class Contact extends React.Component {
   props: {
-    contact?: ICAL.Component,
+    contact?: ContactType,
   };
 
   render() {
@@ -19,10 +19,10 @@ class Contact extends React.Component {
     }
 
     const contact = this.props.contact;
-    const uid = contact.getFirstPropertyValue('uid');
+    const uid = contact.comp.getFirstPropertyValue('uid');
-    const name = contact.getFirstPropertyValue('fn');
+    const name = contact.comp.getFirstPropertyValue('fn');
 
-    const phoneNumbers = contact.getAllProperties('tel').map((prop, idx) => {
+    const phoneNumbers = contact.comp.getAllProperties('tel').map((prop, idx) => {
       const json = prop.toJSON();
       const values = prop.getValues().map((val) => (
         <ListItem
@@ -37,7 +37,7 @@ class Contact extends React.Component {
       return values;
     });
 
-    const emails = contact.getAllProperties('email').map((prop, idx) => {
+    const emails = contact.comp.getAllProperties('email').map((prop, idx) => {
       const json = prop.toJSON();
       const values = prop.getValues().map((val) => (
         <ListItem
@@ -52,7 +52,7 @@ class Contact extends React.Component {
     });
 
     const skips = ['tel', 'email', 'prodid', 'uid', 'fn', 'n', 'version', 'photo'];
-    const theRest = contact.getAllProperties().filter((prop) => (
+    const theRest = contact.comp.getAllProperties().filter((prop) => (
       skips.indexOf(prop.name) === -1
       )).map((prop, idx) => {
       const values = prop.getValues().map((_val) => {

src/Event.tsx

@@ -3,6 +3,8 @@ import * as moment from 'moment';
 
 import * as ICAL from 'ical.js';
 
+import { EventType } from './pim-types';
+
 function formatDateRange(start: ICAL.Time, end: ICAL.Time) {
   const mStart = moment(start.toJSDate());
   const mEnd = moment(end.toJSDate());
@@ -33,7 +35,7 @@ function formatDateRange(start: ICAL.Time, end: ICAL.Time) {
 
 class Event extends React.Component {
   props: {
-    event?: ICAL.Event,
+    event?: EventType,
   };
 
   render() {

src/JournalAddressBook.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react';
 import { Route, Switch, withRouter } from 'react-router';
 
-import * as ICAL from 'ical.js';
-
 import * as EteSync from './api/EteSync';
 
 import { routeResolver } from './App';
@@ -10,10 +8,12 @@ import { routeResolver } from './App';
 import AddressBook from './AddressBook';
 import Contact from './Contact';
 
+import { ContactType } from './pim-types';
+
 class JournalAddressBook extends React.Component {
   props: {
     journal: EteSync.Journal,
-    entries: Map<string, ICAL.Component>,
+    entries: Map<string, ContactType>,
     history?: any,
   };
 
@@ -22,8 +22,8 @@ class JournalAddressBook extends React.Component {
     this.contactClicked = this.contactClicked.bind(this);
   }
 
-  contactClicked(contact: ICAL.Component) {
+  contactClicked(contact: ContactType) {
-    const uid = contact.getFirstPropertyValue('uid');
+    const uid = contact.uid;
 
     this.props.history.push(
       routeResolver.getRoute('journals._id.items._id', { journalUid: this.props.journal.uid, itemUid: uid }));

src/JournalCalendar.tsx

@@ -6,14 +6,14 @@ import { routeResolver } from './App';
 import Calendar from './Calendar';
 import Event from './Event';
 
-import * as ICAL from 'ical.js';
+import { EventType } from './pim-types';
 
 import * as EteSync from './api/EteSync';
 
 class JournalCalendar extends React.Component {
   props: {
     journal: EteSync.Journal,
-    entries: Map<string, ICAL.Component>,
+    entries: Map<string, EventType>,
     history?: any,
   };
 
@@ -22,7 +22,7 @@ class JournalCalendar extends React.Component {
     this.eventClicked = this.eventClicked.bind(this);
   }
 
-  eventClicked(event: ICAL.Event) {
+  eventClicked(event: EventType) {
     const uid = event.uid;
 
     this.props.history.push(
@@ -48,7 +48,7 @@ class JournalCalendar extends React.Component {
           render={({match}) => {
 
             return (
-              <Event event={new ICAL.Event(items.get(match.params.itemUid))} />
+              <Event event={items.get(match.params.itemUid)} />
             );
           }}
         />

src/JournalEntries.tsx

@@ -8,6 +8,8 @@ import IconEdit from 'material-ui/svg-icons/editor/mode-edit';
 
 import * as ICAL from 'ical.js';
 
+import { EventType, ContactType } from './pim-types';
+
 import * as EteSync from './api/EteSync';
 
 class JournalEntries extends React.Component {
@@ -49,13 +51,13 @@ class JournalEntries extends React.Component {
       let name;
       let uid;
       if (comp.name === 'vcalendar') {
-        const vevent = new ICAL.Event(comp.getFirstSubcomponent('vevent'));
+        const vevent = new EventType(comp.getFirstSubcomponent('vevent'));
         name = vevent.summary;
         uid = vevent.uid;
       } else if (comp.name === 'vcard') {
-        const vcard = comp;
+        const vcard = new ContactType(comp);
-        name = vcard.getFirstPropertyValue('fn');
+        name = vcard.fn;
-        uid = vcard.getFirstPropertyValue('uid');
+        uid = vcard.uid;
       } else {
         name = 'Error processing entry';
         uid = '';

src/Pim.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react';
 import { Route, Switch } from 'react-router';
 
-import * as ICAL from 'ical.js';
-
 import * as EteSync from './api/EteSync';
 
 import Contact from './Contact';
@@ -91,7 +89,7 @@ class Pim extends React.Component {
           path={routeResolver.getRoute('pim.events._id')}
           exact={true}
           render={({match}) => (
-            <Event event={new ICAL.Event(calendarItems.get(match.params.eventUid))} />
+            <Event event={calendarItems.get(match.params.eventUid)} />
           )}
         />
       </Switch>

src/PimMain.tsx

@@ -6,12 +6,14 @@ import * as ICAL from 'ical.js';
 import AddressBook from './AddressBook';
 import Calendar from './Calendar';
 
+import { EventType, ContactType } from './pim-types';
+
 import { routeResolver } from './App';
 
 class Pim extends React.Component {
   props: {
-    contacts: Array<ICAL.Component>,
+    contacts: Array<ContactType>,
-    events: Array<ICAL.Component>,
+    events: Array<EventType>,
     history?: any,
   };
 
@@ -28,8 +30,8 @@ class Pim extends React.Component {
       routeResolver.getRoute('pim.events._id', { eventUid: uid }));
   }
 
-  contactClicked(contact: ICAL.Component) {
+  contactClicked(contact: ContactType) {
-    const uid = contact.getFirstPropertyValue('uid');
+    const uid = contact.uid;
 
     this.props.history.push(
       routeResolver.getRoute('pim.contacts._id', { contactUid: uid }));

src/journal-processors.tsx

@@ -1,14 +1,16 @@
 import * as ICAL from 'ical.js';
 
+import { EventType, ContactType } from './pim-types';
+
 import * as EteSync from './api/EteSync';
 
 export function syncEntriesToItemMap(entries: EteSync.SyncEntry[]) {
-  let items: Map<string, ICAL.Component> = new Map();
+  let items: Map<string, ContactType> = new Map();
 
   for (const syncEntry of entries) {
-    let comp = new ICAL.Component(ICAL.parse(syncEntry.content));
+    let comp = new ContactType(new ICAL.Component(ICAL.parse(syncEntry.content)));
 
-    const uid = comp.getFirstPropertyValue('uid');
+    const uid = comp.uid;
 
     if ((syncEntry.action === EteSync.SyncEntryAction.Add) ||
       (syncEntry.action === EteSync.SyncEntryAction.Change)) {
@@ -22,16 +24,16 @@ export function syncEntriesToItemMap(entries: EteSync.SyncEntry[]) {
 }
 
 export function syncEntriesToCalendarItemMap(entries: EteSync.SyncEntry[]) {
-  let items: Map<string, ICAL.Component> = new Map();
+  let items: Map<string, EventType> = new Map();
 
   for (const syncEntry of entries) {
-    let comp = new ICAL.Component(ICAL.parse(syncEntry.content)).getFirstSubcomponent('vevent');
+    let comp = new EventType(new ICAL.Component(ICAL.parse(syncEntry.content)).getFirstSubcomponent('vevent'));
 
     if (comp === null) {
       continue;
     }
 
-    const uid = comp.getFirstPropertyValue('uid');
+    const uid = comp.uid;
 
     if ((syncEntry.action === EteSync.SyncEntryAction.Add) ||
       (syncEntry.action === EteSync.SyncEntryAction.Change)) {

src/pim-types.tsx

@@ -0,0 +1,31 @@
+import * as ICAL from 'ical.js';
+
+export class EventType extends ICAL.Event {
+  get title() {
+    return this.summary;
+  }
+
+  get start() {
+      return this.startDate.toJSDate();
+  }
+
+  get end() {
+      return this.endDate.toJSDate();
+  }
+}
+
+export class ContactType {
+  comp: ICAL.Component;
+
+  constructor(comp: ICAL.Component) {
+    this.comp = comp;
+  }
+
+  get uid() {
+    return this.comp.getFirstPropertyValue('uid');
+  }
+
+  get fn() {
+    return this.comp.getFirstPropertyValue('fn');
+  }
+}