Add support for tasks.

src/App.tsx

@@ -37,7 +37,10 @@ const muiTheme = createMuiTheme({
       dark: lightBlue.A700,
       contrastText: 'white',
     },
-  }
+  },
+  typography: {
+    useNextVariants: true,
+  },
 });
 
 export const routeResolver = new RouteResolver({
@@ -59,6 +62,14 @@ export const routeResolver = new RouteResolver({
       },
       new: 'new',
     },
+    tasks: {
+      _id: {
+        _base: ':itemUid',
+        edit: 'edit',
+        log: 'log',
+      },
+      new: 'new',
+    },
   },
   journals: {
     _id: {

src/Journals/Journal.tsx

@@ -10,6 +10,7 @@ import SearchableAddressBook from '../components/SearchableAddressBook';
 import Contact from '../components/Contact';
 import Calendar from '../components/Calendar';
 import Event from '../components/Event';
+import TaskList from '../components/TaskList';
 
 import AppBarOverride from '../widgets/AppBarOverride';
 import Container from '../widgets/Container';
@@ -17,7 +18,7 @@ import Container from '../widgets/Container';
 import JournalEntries from '../components/JournalEntries';
 import journalView from './journalView';
 
-import { syncEntriesToItemMap, syncEntriesToCalendarItemMap } from '../journal-processors';
+import { syncEntriesToItemMap, syncEntriesToEventItemMap, syncEntriesToTaskItemMap } from '../journal-processors';
 
 import { SyncInfo, SyncInfoJournal } from '../SyncGate';
 
@@ -39,6 +40,7 @@ interface PropsTypeInner extends PropsType {
 const JournalAddressBook = journalView(SearchableAddressBook, Contact);
 const PersistCalendar = historyPersistor('Calendar')(Calendar);
 const JournalCalendar = journalView(PersistCalendar, Event);
+const JournalTaskList = journalView(TaskList, Event);
 
 class Journal extends React.Component<PropsTypeInner> {
   state: {
@@ -65,17 +67,23 @@ class Journal extends React.Component<PropsTypeInner> {
     let itemsTitle: string;
     let itemsView: JSX.Element;
     if (collectionInfo.type === 'CALENDAR') {
-      itemsView =
-        <JournalCalendar journal={journal} entries={syncEntriesToCalendarItemMap(collectionInfo, syncEntries)} />;
+      itemsView = (
+        <JournalCalendar
+          journal={journal}
+          entries={syncEntriesToEventItemMap(collectionInfo, syncEntries)}
+        />);
       itemsTitle = 'Events';
     } else if (collectionInfo.type === 'ADDRESS_BOOK') {
       itemsView =
         <JournalAddressBook journal={journal} entries={syncEntriesToItemMap(collectionInfo, syncEntries)} />;
       itemsTitle = 'Contacts';
     } else if (collectionInfo.type === 'TASKS')  {
-      itemsView = <div>Task preview is not yet supported</div>;
+      itemsView = (
+        <JournalTaskList
+          journal={journal}
+          entries={syncEntriesToTaskItemMap(collectionInfo, syncEntries)}
+        />);
       itemsTitle = 'Tasks';
-      journalOnly = true;
     } else {
       itemsView = <div>Preview is not supported for this journal type</div>;
       itemsTitle = 'Items';

src/Pim/PimMain.tsx

@@ -13,8 +13,9 @@ import Container from '../widgets/Container';
 
 import SearchableAddressBook from '../components/SearchableAddressBook';
 import Calendar from '../components/Calendar';
+import TaskList from '../components/TaskList';
 
-import { EventType, ContactType } from '../pim-types';
+import { EventType, ContactType, TaskType } from '../pim-types';
 
 import { routeResolver } from '../App';
 
@@ -22,12 +23,14 @@ import { historyPersistor } from '../persist-state-history';
 
 const addressBookTitle = 'Address Book';
 const calendarTitle = 'Calendar';
+const tasksTitle = 'Tasks';
 
 const PersistCalendar = historyPersistor('Calendar')(Calendar);
 
 interface PropsType {
   contacts: Array<ContactType>;
   events: Array<EventType>;
+  tasks: Array<TaskType>;
   location?: Location;
   history?: History;
   theme: Theme;
@@ -42,6 +45,7 @@ class PimMain extends React.PureComponent<PropsType> {
     super(props);
     this.state = {tab: 1};
     this.eventClicked = this.eventClicked.bind(this);
+    this.taskClicked = this.taskClicked.bind(this);
     this.contactClicked = this.contactClicked.bind(this);
     this.floatingButtonClicked = this.floatingButtonClicked.bind(this);
     this.newEvent = this.newEvent.bind(this);
@@ -54,6 +58,13 @@ class PimMain extends React.PureComponent<PropsType> {
       routeResolver.getRoute('pim.events._id', { itemUid: uid }));
   }
 
+  taskClicked(event: ICAL.Event) {
+    const uid = event.uid;
+
+    this.props.history!.push(
+      routeResolver.getRoute('pim.tasks._id', { itemUid: uid }));
+  }
+
   contactClicked(contact: ContactType) {
     const uid = contact.uid;
 
@@ -106,24 +117,33 @@ class PimMain extends React.PureComponent<PropsType> {
           <Tab
             label={calendarTitle}
           />
+          <Tab
+            label={tasksTitle}
+          />
         </Tabs>
-        { tab === 0 &&
+
         <Container>
+          { tab === 0 &&
             <SearchableAddressBook entries={this.props.contacts} onItemClick={this.contactClicked} />
-          </Container>
           }
           { tab === 1 &&
-          <Container>
             <PersistCalendar
               entries={this.props.events}
               onItemClick={this.eventClicked}
               onSlotClick={this.newEvent}
             />
-          </Container>
           }
+          { tab === 2 &&
+            <TaskList
+              entries={this.props.tasks}
+              onItemClick={this.taskClicked}
+            />
+          }
+        </Container>
 
         <Fab
           color="primary"
+          disabled={tab === 2}
           style={style.floatingButton}
           onClick={this.floatingButtonClicked}
         >

src/Pim/index.tsx

@@ -16,7 +16,7 @@ import { pure } from 'recompose';
 
 import { History } from 'history';
 
-import { PimType, ContactType, EventType } from '../pim-types';
+import { PimType, ContactType, EventType, TaskType } from '../pim-types';
 
 import Container from '../widgets/Container';
 
@@ -36,7 +36,7 @@ import { SyncInfo } from '../SyncGate';
 
 import { createJournalEntry } from '../etesync-helpers';
 
-import { syncEntriesToItemMap, syncEntriesToCalendarItemMap } from '../journal-processors';
+import { syncEntriesToItemMap, syncEntriesToEventItemMap, syncEntriesToTaskItemMap } from '../journal-processors';
 
 function objValues(obj: any) {
   return Object.keys(obj).map((x) => obj[x]);
@@ -47,8 +47,10 @@ const itemsSelector = createSelector(
   (syncInfo) => {
     let collectionsAddressBook: Array<EteSync.CollectionInfo> = [];
     let collectionsCalendar: Array<EteSync.CollectionInfo> = [];
+    let collectionsTaskList: Array<EteSync.CollectionInfo> = [];
     let addressBookItems: {[key: string]: ContactType} = {};
     let calendarItems: {[key: string]: EventType} = {};
+    let taskListItems: {[key: string]: TaskType} = {};
     syncInfo.forEach(
       (syncJournal) => {
         const syncEntries = syncJournal.entries;
@@ -59,13 +61,18 @@ const itemsSelector = createSelector(
           addressBookItems = syncEntriesToItemMap(collectionInfo, syncEntries, addressBookItems);
           collectionsAddressBook.push(collectionInfo);
         } else if (collectionInfo.type === 'CALENDAR') {
-          calendarItems = syncEntriesToCalendarItemMap(collectionInfo, syncEntries, calendarItems);
+          calendarItems = syncEntriesToEventItemMap(collectionInfo, syncEntries, calendarItems);
           collectionsCalendar.push(collectionInfo);
+        } else if (collectionInfo.type === 'TASKS') {
+          taskListItems = syncEntriesToTaskItemMap(collectionInfo, syncEntries, taskListItems);
+          collectionsTaskList.push(collectionInfo);
         }
       }
     );
 
-    return { collectionsAddressBook, collectionsCalendar, addressBookItems, calendarItems };
+    return {
+      collectionsAddressBook, collectionsCalendar, collectionsTaskList, addressBookItems, calendarItems, taskListItems
+    };
   },
 );
 
@@ -188,6 +195,7 @@ const CollectionRoutes = withStyles(styles)(withRouter(
                   <Button
                     color="secondary"
                     variant="contained"
+                    disabled={!props.componentEdit}
                     className={classes.button}
                     style={{marginLeft: 15}}
                     onClick={() =>
@@ -300,7 +308,7 @@ class Pim extends React.PureComponent {
   }
 
   render() {
-    const { collectionsAddressBook, collectionsCalendar, addressBookItems, calendarItems } = itemsSelector(this.props);
+    const { collectionsAddressBook, collectionsCalendar, collectionsTaskList, addressBookItems, calendarItems, taskListItems } = itemsSelector(this.props);
 
     return (
       <Switch>
@@ -311,6 +319,7 @@ class Pim extends React.PureComponent {
             <PimMain
               contacts={objValues(addressBookItems)}
               events={objValues(calendarItems)}
+              tasks={objValues(taskListItems)}
               history={history}
             />
           )}
@@ -347,6 +356,22 @@ class Pim extends React.PureComponent {
             />
           )}
         />
+        <Route
+          path={routeResolver.getRoute('pim.tasks')}
+          render={() => (
+            <CollectionRoutes
+              syncInfo={this.props.syncInfo}
+              routePrefix="pim.tasks"
+              collections={collectionsTaskList}
+              items={taskListItems}
+              componentEdit={undefined}
+              componentView={Event}
+              onItemSave={this.onItemSave}
+              onItemDelete={this.onItemDelete}
+              onItemCancel={this.onCancel}
+            />
+          )}
+        />
       </Switch>
     );
   }

src/components/TaskList.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+
+import { pure } from 'recompose';
+import { createSelector } from 'reselect';
+
+import { List, ListItem } from '../widgets/List';
+
+import { TaskType } from '../pim-types';
+
+const TaskListItem = pure((_props: any) => {
+  const {
+    entry,
+    onClick,
+  } = _props;
+  const title = entry.title;
+
+  return (
+    <ListItem
+      primaryText={title}
+      onClick={() => onClick(entry)}
+    />
+  );
+});
+
+const sortSelector = createSelector(
+  (entries: Array<TaskType>) => entries,
+  (entries) => {
+    return entries.sort((_a, _b) => {
+      const a = _a.title;
+      const b = _b.title;
+
+      if (a < b) {
+        return -1;
+      } else if (a > b) {
+        return 1;
+      } else {
+        return 0;
+      }
+    });
+  },
+);
+
+class TaskList extends React.PureComponent {
+  props: {
+    entries: Array<TaskType>,
+    onItemClick: (contact: TaskType) => void,
+  };
+
+  render() {
+    const entries = this.props.entries.filter((x) => !x.completed);
+    const sortedEntries = sortSelector(entries);
+
+    let itemList = sortedEntries.map((entry, idx, array) => {
+      const uid = entry.uid;
+
+      return (
+        <TaskListItem
+          key={uid}
+          entry={entry}
+          onClick={this.props.onItemClick}
+        />
+      );
+    });
+
+    return (
+      <List>
+        {itemList}
+      </List>
+    );
+  }
+}
+
+export default TaskList;

src/journal-processors.ts

@@ -2,7 +2,7 @@ import { List } from 'immutable';
 
 import * as ICAL from 'ical.js';
 
-import { EventType, ContactType } from './pim-types';
+import { EventType, ContactType, TaskType } from './pim-types';
 
 import * as EteSync from './api/EteSync';
 
@@ -50,14 +50,15 @@ function colorIntToHtml(color: number) {
     ((alpha > 0) ? toHex(alpha) : '');
 }
 
-export function syncEntriesToCalendarItemMap(
-  collection: EteSync.CollectionInfo, entries: List<EteSync.SyncEntry>, base: {[key: string]: EventType} = {}) {
+function syncEntriesToCalendarItemMap<T extends EventType>(
+  ItemType: any,
+  collection: EteSync.CollectionInfo, entries: List<EteSync.SyncEntry>, base: {[key: string]: T} = {}) {
   let items = base;
 
   const color = colorIntToHtml(collection.color);
 
   entries.forEach((syncEntry) => {
-    let comp = EventType.fromVCalendar(new ICAL.Component(ICAL.parse(syncEntry.content)));
+    let comp = ItemType.fromVCalendar(new ICAL.Component(ICAL.parse(syncEntry.content)));
 
     if (comp === null) {
       return;
@@ -80,3 +81,13 @@ export function syncEntriesToCalendarItemMap(
 
   return items;
 }
+
+export function syncEntriesToEventItemMap(
+  collection: EteSync.CollectionInfo, entries: List<EteSync.SyncEntry>, base: {[key: string]: EventType} = {}) {
+  return syncEntriesToCalendarItemMap<EventType>(EventType, collection, entries, base);
+}
+
+export function syncEntriesToTaskItemMap(
+  collection: EteSync.CollectionInfo, entries: List<EteSync.SyncEntry>, base: {[key: string]: TaskType} = {}) {
+  return syncEntriesToCalendarItemMap<TaskType>(TaskType, collection, entries, base);
+}

src/pim-types.ts

@@ -53,20 +53,16 @@ export class EventType extends ICAL.Event implements PimType {
   }
 }
 
-export class TaskType extends ICAL.Event implements PimType {
+export class TaskType extends EventType {
   color: string;
 
   static fromVCalendar(comp: ICAL.Component) {
-    return new EventType(comp.getFirstSubcomponent('vtodo'));
+    return new TaskType(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();
+  get completed() {
+    const status = this.component.getFirstPropertyValue('status');
+    return status === 'COMPLETED';
   }
 
   clone() {