Add a contact page.

src/App.tsx

@@ -51,7 +51,7 @@ export const routeResolver = new RouteResolver({
       items: {
         _base: 'items',
         _id: {
-          _base: ':entryUid',
+          _base: ':itemUid',
         },
       },
       entries: {

src/JournalViewAddressBook.tsx

@@ -1,9 +1,15 @@
 import * as React from 'react';
+import { Route, Switch } from 'react-router';
+import { List, ListItem } from 'material-ui/List';
+import { Link } from 'react-router-dom';
 
 import * as ICAL from 'ical.js';
 
 import * as EteSync from './api/EteSync';
 
+import { routeResolver } from './App';
+import { JournalViewContact } from './JournalViewContact';
+
 export class JournalViewAddressBook extends React.Component {
   static defaultProps = {
     prevUid: null,
@@ -47,18 +53,43 @@ export class JournalViewAddressBook extends React.Component {
       }
     });
 
-    let itemList = entries.map((entry, idx) => {
+    let itemList = entries.map((entry) => {
+      const uid = entry.getFirstPropertyValue('uid');
       const name = entry.getFirstPropertyValue('fn');
       return (
-        <li key={idx}>{name}</li>
+        <Link
+          key={uid}
+          to={routeResolver.getRoute('journals._id.items._id', { journalUid: this.props.journal.uid, itemUid: uid })}
+        >
+          <ListItem primaryText={name} />
+        </Link>
       );
     });
 
     return (
       <div>
-        <ul>
-          {itemList}
-        </ul>
+        <Switch>
+          <Route
+            path={routeResolver.getRoute('journals._id.items')}
+            exact={true}
+            render={() => (
+                <List>
+                  {itemList}
+                </List>
+              )
+            }
+          />
+          <Route
+            path={routeResolver.getRoute('journals._id.items._id')}
+            exact={true}
+            render={({match}) => {
+
+              return (
+                <JournalViewContact contact={items.get(match.params.itemUid)} />
+              );
+            }}
+          />
+        </Switch>
       </div>
     );
   }

src/JournalViewContact.tsx

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { List, ListItem } from 'material-ui/List';
+import Divider from 'material-ui/Divider';
+import CommunicationCall from 'material-ui/svg-icons/communication/call';
+import CommunicationChatBubble from 'material-ui/svg-icons/communication/chat-bubble';
+import CommunicationEmail from 'material-ui/svg-icons/communication/email';
+import { indigo500 } from 'material-ui/styles/colors';
+
+import * as ICAL from 'ical.js';
+
+export class JournalViewContact extends React.Component {
+  props: {
+    contact?: ICAL.Component,
+  };
+
+  render() {
+    if (this.props.contact === undefined) {
+      return (<div>Loading</div>);
+    }
+
+    const contact = this.props.contact;
+    const uid = contact.getFirstPropertyValue('uid');
+    const name = contact.getFirstPropertyValue('fn');
+
+    const phoneNumbers = contact.getAllProperties('tel').map((prop, idx) => {
+      const json = prop.toJSON();
+      const values = prop.getValues().map((val) => (
+        <ListItem
+          key={idx}
+          leftIcon={<CommunicationCall />}
+          rightIcon={<CommunicationChatBubble />}
+          primaryText={val}
+          secondaryText={json[1].type}
+        />
+      ));
+      return values;
+    });
+
+    const emails = contact.getAllProperties('email').map((prop, idx) => {
+      const json = prop.toJSON();
+      const values = prop.getValues().map((val) => (
+        <ListItem
+          key={idx}
+          leftIcon={<CommunicationEmail color={indigo500} />}
+          primaryText={val}
+          secondaryText={json[1].type}
+        />
+      ));
+      return values;
+    });
+
+    const skips = ['tel', 'email', 'prodid', 'uid', 'fn', 'n', 'version', 'photo'];
+    const theRest = contact.getAllProperties().filter((prop) => (
+      skips.indexOf(prop.name) === -1
+      )).map((prop, idx) => {
+      const values = prop.getValues().map((_val) => {
+        const val = (_val instanceof String) ? _val : _val.toString();
+        return (
+          <ListItem
+            key={idx}
+            insetChildren={true}
+            primaryText={(window as any).me = val}
+            secondaryText={prop.name}
+          />
+        );
+      });
+      return values;
+    });
+    return (
+      <div>
+        <h3>{name} <small>{uid}</small></h3>
+        <List>
+          {phoneNumbers}
+        </List>
+        <Divider inset={true} />
+        <List>
+          {emails}
+        </List>
+        <Divider inset={true} />
+        <List>
+          {theRest}
+        </List>
+      </div>
+    );
+  }
+}

src/ical.js.d.ts

@@ -8,6 +8,8 @@ declare module 'ical.js' {
     getFirstSubcomponent(name?: string): Component | null;
 
     getFirstPropertyValue(name?: string): string;
+
+    getAllProperties(name?: string): Array<Property>;
   }
 
   class Event {
@@ -17,4 +19,12 @@ declare module 'ical.js' {
     constructor(component?: Component | null,
                 options?: {strictExceptions: boolean, exepctions: Array<Component|Event>});
   }
+
+  class Property {
+    name: string;
+    type: string;
+
+    getValues(): Array<any>;
+    toJSON(): any;
+  }
 }