Split off the pim view and implement viewing contacts.

src/App.tsx

@@ -41,8 +41,12 @@ export function getPalette(part: string): string {
 export const routeResolver = new RouteResolver({
   home: '',
   pim: {
-    contacts: 'contacts/:contactUid',
+    contacts: {
-    events: 'events/:contactUid',
+      _id: ':contactUid',
+    },
+    events: {
+      _id: ':eventUid',
+    },
   },
   journals: {
     _id: {

src/Pim.tsx

@@ -1,10 +1,12 @@
 import * as React from 'react';
-import { Tabs, Tab } from 'material-ui/Tabs';
+import { Route, Switch } from 'react-router';
 
 import * as EteSync from './api/EteSync';
 
-import AddressBook from './AddressBook';
+import Contact from './Contact';
-import Calendar from './Calendar';
+import PimMain from './PimMain';
+
+import { routeResolver } from './App';
 
 import { JournalsData, EntriesType, CredentialsData } from './store';
 
@@ -20,16 +22,6 @@ class Pim extends React.Component {
 
   constructor(props: any) {
     super(props);
-    this.eventClicked = this.eventClicked.bind(this);
-    this.contactClicked = this.contactClicked.bind(this);
-  }
-
-  eventClicked(contact: any) {
-    // FIXME
-  }
-
-  contactClicked(contact: any) {
-    // FIXME
   }
 
   render() {
@@ -73,14 +65,26 @@ class Pim extends React.Component {
     let calendarItems = syncEntriesToCalendarItemMap(syncEntriesCalendar);
 
     return (
-      <Tabs>
+      <Switch>
-        <Tab label="Address Book">
+        <Route
-          <AddressBook entries={Array.from(addressBookItems.values())} onItemClick={this.contactClicked} />
+          path={routeResolver.getRoute('pim')}
-        </Tab>
+          exact={true}
-        <Tab label="Calendar">
+          render={({history}) => (
-          <Calendar entries={Array.from(calendarItems.values())} onItemClick={this.eventClicked} />
+            <PimMain
-        </Tab>
+              contacts={Array.from(addressBookItems.values())}
-      </Tabs>
+              events={Array.from(calendarItems.values())}
+              history={history}
+            />
+          )}
+        />
+        <Route
+          path={routeResolver.getRoute('pim.contacts._id')}
+          exact={true}
+          render={({match}) => (
+            <Contact contact={addressBookItems.get(match.params.contactUid)} />
+          )}
+        />
+      </Switch>
     );
   }
 }

src/PimMain.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { Tabs, Tab } from 'material-ui/Tabs';
+
+import * as ICAL from 'ical.js';
+
+import AddressBook from './AddressBook';
+import Calendar from './Calendar';
+
+import { routeResolver } from './App';
+
+class Pim extends React.Component {
+  props: {
+    contacts: Array<ICAL.Component>,
+    events: Array<ICAL.Component>,
+    history?: any,
+  };
+
+  constructor(props: any) {
+    super(props);
+    this.eventClicked = this.eventClicked.bind(this);
+    this.contactClicked = this.contactClicked.bind(this);
+  }
+
+  eventClicked(contact: any) {
+    // FIXME
+  }
+
+  contactClicked(contact: ICAL.Component) {
+    const uid = contact.getFirstPropertyValue('uid');
+
+    this.props.history.push(
+      routeResolver.getRoute('pim.contacts._id', { contactUid: uid }));
+  }
+
+  render() {
+
+    return (
+      <Tabs>
+        <Tab label="Address Book">
+          <AddressBook entries={this.props.contacts} onItemClick={this.contactClicked} />
+        </Tab>
+        <Tab label="Calendar">
+          <Calendar entries={this.props.events} onItemClick={this.eventClicked} />
+        </Tab>
+      </Tabs>
+    );
+  }
+}
+
+export default Pim;