Add basic support for viewing tasks.

src/Journal/index.tsx

@@ -51,7 +51,8 @@ class Journal extends React.PureComponent<PropsTypeInner> {
 
   render() {
     const { theme } = this.props;
-    const currentTab = this.state.tab;
+    let currentTab = this.state.tab;
+    let journalOnly = false;
     const journalUid = this.props.match.params.journalUid;
 
     const syncJournal = this.props.syncInfo.get(journalUid);
@@ -73,11 +74,18 @@ class Journal extends React.PureComponent<PropsTypeInner> {
       itemsView =
         <JournalAddressBook journal={journal} entries={syncEntriesToItemMap(collectionInfo, syncEntries)} />;
       itemsTitle = 'Contacts';
+    } else if (collectionInfo.type === 'TASKS')  {
+      itemsView = <div>Task preview is not yet supported</div>;
+      itemsTitle = 'Tasks';
+      journalOnly = true;
     } else {
-      itemsView = <div>Unsupported type</div>;
+      itemsView = <div>Preview is not supported for this journal type</div>;
       itemsTitle = 'Items';
+      journalOnly = true;
     }
 
+    currentTab = journalOnly ? 1 : currentTab;
+
     return (
       <React.Fragment>
         <SecondaryHeader text={collectionInfo.displayName} />
@@ -87,7 +95,7 @@ class Journal extends React.PureComponent<PropsTypeInner> {
           value={currentTab}
           onChange={(event, tab) => this.setState({ tab })}
         >
-          <Tab label={itemsTitle} />
+          <Tab label={itemsTitle} disabled={journalOnly} />
           <Tab label="Journal Entries" />
         </Tabs>
         { currentTab === 0 &&

src/SideMenu/SideMenuJournals.tsx

@@ -46,7 +46,8 @@ class SideMenuJournals extends React.PureComponent {
         return ret;
       },
       { CALENDAR: [],
-        ADDRESS_BOOK: []
+        ADDRESS_BOOK: [],
+        TASKS: []
       });
 
     return (
@@ -60,6 +61,11 @@ class SideMenuJournals extends React.PureComponent {
           primaryText="Calendars"
           nestedItems={journalMap.CALENDAR}
         />
+
+        <ListItem
+          primaryText="Tasks"
+          nestedItems={journalMap.TASKS}
+        />
       </React.Fragment>
     );
   }

src/components/JournalEntries.tsx

@@ -13,7 +13,7 @@ import IconEdit from '@material-ui/icons/Edit';
 
 import * as ICAL from 'ical.js';
 
-import { EventType, ContactType } from '../pim-types';
+import { TaskType, EventType, ContactType } from '../pim-types';
 
 import * as EteSync from '../api/EteSync';
 
@@ -57,9 +57,15 @@ class JournalEntries extends React.PureComponent {
       let name;
       let uid;
       if (comp.name === 'vcalendar') {
-        const vevent = EventType.fromVCalendar(comp);
-        name = vevent.summary;
-        uid = vevent.uid;
+        if (EventType.isEvent(comp)) {
+          const vevent = EventType.fromVCalendar(comp);
+          name = vevent.summary;
+          uid = vevent.uid;
+        } else {
+          const vtodo = TaskType.fromVCalendar(comp);
+          name = vtodo.summary;
+          uid = vtodo.uid;
+        }
       } else if (comp.name === 'vcard') {
         const vcard = new ContactType(comp);
         name = vcard.fn;

src/pim-types.ts

@@ -9,6 +9,10 @@ export interface PimType {
 export class EventType extends ICAL.Event implements PimType {
   color: string;
 
+  static isEvent(comp: ICAL.Component) {
+    return !!comp.getFirstSubcomponent('vevent');
+  }
+
   static fromVCalendar(comp: ICAL.Component) {
     return new EventType(comp.getFirstSubcomponent('vevent'));
   }
@@ -49,6 +53,29 @@ export class EventType extends ICAL.Event implements PimType {
   }
 }
 
+export class TaskType extends ICAL.Event implements PimType {
+  color: string;
+
+  static fromVCalendar(comp: ICAL.Component) {
+    return new EventType(comp.getFirstSubcomponent('vtodo'));
+  }
+
+  toIcal() {
+    let comp = new ICAL.Component(['vcalendar', [], []]);
+    comp.updatePropertyWithValue('prodid', '-//iCal.js EteSync Web');
+    comp.updatePropertyWithValue('version', '4.0');
+
+    comp.addSubcomponent(this.component);
+    return comp.toString();
+  }
+
+  clone() {
+    const ret = new TaskType(new ICAL.Component(this.component.toJSON()));
+    ret.color = this.color;
+    return ret;
+  }
+}
+
 export class ContactType implements PimType {
   comp: ICAL.Component;