Add a way to edit events.

src/App.tsx

@@ -42,11 +42,17 @@ export const routeResolver = new RouteResolver({
   home: '',
   pim: {
     contacts: {
-      _id: ':contactUid',
+      _id: {
+        _base: ':contactUid',
+        edit: 'edit',
+      },
       new: 'new',
     },
     events: {
-      _id: ':eventUid',
+      _id: {
+        _base: ':eventUid',
+        edit: 'edit',
+      },
       new: 'new',
     },
   },

src/Pim.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { Route, Switch } from 'react-router';
+import RaisedButton from 'material-ui/RaisedButton';
+import IconEdit from 'material-ui/svg-icons/editor/mode-edit';
 
 import * as EteSync from './api/EteSync';
 
@@ -127,10 +129,35 @@ class Pim extends React.Component {
           )}
         />
         <Route
-          path={routeResolver.getRoute('pim.events._id')}
+          path={routeResolver.getRoute('pim.events._id.edit')}
           exact={true}
           render={({match}) => (
+            <Container style={{maxWidth: 400}}>
+              <EventEdit
+                event={calendarItems[match.params.eventUid]}
+                collections={collectionsCalendar}
+                onSave={this.onEventSave}
+              />
+            </Container>
+          )}
+        />
+        <Route
+          path={routeResolver.getRoute('pim.events._id')}
+          exact={true}
+          render={({match, history}) => (
             <Container>
+              <div style={{textAlign: 'right'}}>
+                <RaisedButton
+                  label="Edit"
+                  secondary={true}
+                  icon={<IconEdit />}
+                  onClick={() =>
+                    history.push(routeResolver.getRoute(
+                      'pim.events._id.edit',
+                      {eventUid: match.params.eventUid}))
+                  }
+                />
+              </div>
               <Event event={calendarItems[match.params.eventUid]} />
             </Container>
           )}