Merge the duplicate contact/event view/edit/log routes.

src/Pim/index.tsx

@@ -4,6 +4,8 @@ import RaisedButton from 'material-ui/RaisedButton';
 import IconEdit from 'material-ui/svg-icons/editor/mode-edit';
 import IconChangeHistory from 'material-ui/svg-icons/action/change-history';
 
+import { withRouter } from 'react-router';
+
 import * as EteSync from '../api/EteSync';
 
 import { createSelector } from 'reselect';
@@ -90,107 +92,63 @@ const ItemChangeLog = pure((props: any) => {
   );
 });
 
-class Pim extends React.PureComponent {
+const CollectionRoutes = withRouter(
+  class CollectionRoutesInner extends React.PureComponent {
     props: {
-    etesync: CredentialsData;
+      syncInfo: SyncInfo,
-    syncInfo: SyncInfo;
+      routePrefix: string,
-    history: History;
+      collections: Array<EteSync.CollectionInfo>,
+      componentEdit: any,
+      componentView: any,
+      items: {[key: string]: any},
+      onItemSave: (item: Object, journalUid: string, originalContact?: Object) => void;
     };
 
-  constructor(props: any) {
-    super(props);
-    this.onEventSave = this.onEventSave.bind(this);
-    this.onContactSave = this.onContactSave.bind(this);
-  }
-
-  onEventSave(event: EventType, journalUid: string, originalEvent?: EventType) {
-    const syncJournal = this.props.syncInfo.get(journalUid);
-
-    if (syncJournal === undefined) {
-      return;
-    }
-
-    const journal = syncJournal.journal;
-
-    let action = (originalEvent === undefined) ? EteSync.SyncEntryAction.Add : EteSync.SyncEntryAction.Change;
-    let saveEvent = store.dispatch(
-      createJournalEntry(this.props.etesync, journal, syncJournal.journalEntries, action, event.toIcal()));
-    (saveEvent as any).then(() => {
-      this.props.history.goBack();
-    });
-  }
-
-  onContactSave(contact: ContactType, journalUid: string, originalContact?: ContactType) {
-    const syncJournal = this.props.syncInfo.get(journalUid);
-
-    if (syncJournal === undefined) {
-      return;
-    }
-
-    const journal = syncJournal.journal;
-
-    let action = (originalContact === undefined) ? EteSync.SyncEntryAction.Add : EteSync.SyncEntryAction.Change;
-    let saveContact = store.dispatch(
-      createJournalEntry(this.props.etesync, journal, syncJournal.journalEntries, action, contact.toIcal()));
-    (saveContact as any).then(() => {
-      this.props.history.goBack();
-    });
-  }
-
     render() {
-    const { collectionsAddressBook, collectionsCalendar, addressBookItems, calendarItems } = itemsSelector(this.props);
+      const props = this.props;
+      const ComponentEdit = props.componentEdit;
+      const ComponentView = props.componentView;
 
       return (
         <Switch>
           <Route
-          path={routeResolver.getRoute('pim')}
+            path={routeResolver.getRoute(props.routePrefix + '.new')}
-          exact={true}
-          render={({history}) => (
-            <PimMain
-              contacts={objValues(addressBookItems)}
-              events={objValues(calendarItems)}
-              history={history}
-            />
-          )}
-        />
-        <Route
-          path={routeResolver.getRoute('pim.contacts.new')}
             exact={true}
             render={({match}) => (
               <Container style={{maxWidth: 400}}>
-              <ContactEdit collections={collectionsAddressBook} onSave={this.onContactSave} />
+                <ComponentEdit collections={props.collections} onSave={props.onItemSave} />
               </Container>
             )}
           />
           <Route
-          path={routeResolver.getRoute('pim.contacts._id.edit')}
+            path={routeResolver.getRoute(props.routePrefix + '._id.edit')}
             exact={true}
             render={({match}) => (
               <Container style={{maxWidth: 400}}>
-              <ContactEdit
+                <ComponentEdit
-                initialCollection={(addressBookItems[match.params.itemUid] as any).journalUid}
+                  initialCollection={(props.items[match.params.itemUid] as any).journalUid}
-                item={addressBookItems[match.params.itemUid]}
+                  item={props.items[match.params.itemUid]}
-                collections={collectionsAddressBook}
+                  collections={props.collections}
-                onSave={this.onContactSave}
+                  onSave={props.onItemSave}
                 />
               </Container>
             )}
           />
           <Route
-          path={routeResolver.getRoute('pim.contacts._id.log')}
+            path={routeResolver.getRoute(props.routePrefix + '._id.log')}
             exact={true}
             render={({match}) => (
               <Container>
                 <ItemChangeLog
-                syncInfo={this.props.syncInfo}
+                  syncInfo={props.syncInfo}
-                items={addressBookItems}
+                  items={props.items}
                   uid={match.params.itemUid}
                 />
               </Container>
             )}
           />
           <Route
-          path={routeResolver.getRoute('pim.contacts._id')}
+            path={routeResolver.getRoute(props.routePrefix + '._id')}
             exact={true}
             render={({match, history}) => (
               <Container>
@@ -201,7 +159,7 @@ class Pim extends React.PureComponent {
                     icon={<IconChangeHistory />}
                     onClick={() =>
                       history.push(routeResolver.getRoute(
-                      'pim.contacts._id.log',
+                        props.routePrefix + '._id.log',
                         {itemUid: match.params.itemUid}))
                     }
                   />
@@ -213,82 +171,110 @@ class Pim extends React.PureComponent {
                     icon={<IconEdit />}
                     onClick={() =>
                       history.push(routeResolver.getRoute(
-                      'pim.contacts._id.edit',
+                        props.routePrefix + '._id.edit',
                         {itemUid: match.params.itemUid}))
                     }
                   />
                 </div>
-              <Contact item={addressBookItems[match.params.itemUid]} />
+                <ComponentView item={props.items[match.params.itemUid]} />
-            </Container>
-          )}
-        />
-        <Route
-          path={routeResolver.getRoute('pim.events.new')}
-          exact={true}
-          render={({match}) => (
-            <Container style={{maxWidth: 400}}>
-              <EventEdit collections={collectionsCalendar} onSave={this.onEventSave} />
               </Container>
             )}
           />
+        </Switch>
+      );
+    }
+  }
+);
+
+class Pim extends React.PureComponent {
+  props: {
+    etesync: CredentialsData;
+    syncInfo: SyncInfo;
+    history: History;
+  };
+
+  constructor(props: any) {
+    super(props);
+    this.onEventSave = this.onEventSave.bind(this);
+    this.onContactSave = this.onContactSave.bind(this);
+  }
+
+  onEventSave(event: EventType, journalUid: string, originalEvent?: EventType) {
+    const syncJournal = this.props.syncInfo.get(journalUid);
+
+    if (syncJournal === undefined) {
+      return;
+    }
+
+    const journal = syncJournal.journal;
+
+    let action = (originalEvent === undefined) ? EteSync.SyncEntryAction.Add : EteSync.SyncEntryAction.Change;
+    let saveEvent = store.dispatch(
+      createJournalEntry(this.props.etesync, journal, syncJournal.journalEntries, action, event.toIcal()));
+    (saveEvent as any).then(() => {
+      this.props.history.goBack();
+    });
+  }
+
+  onContactSave(contact: ContactType, journalUid: string, originalContact?: ContactType) {
+    const syncJournal = this.props.syncInfo.get(journalUid);
+
+    if (syncJournal === undefined) {
+      return;
+    }
+
+    const journal = syncJournal.journal;
+
+    let action = (originalContact === undefined) ? EteSync.SyncEntryAction.Add : EteSync.SyncEntryAction.Change;
+    let saveContact = store.dispatch(
+      createJournalEntry(this.props.etesync, journal, syncJournal.journalEntries, action, contact.toIcal()));
+    (saveContact as any).then(() => {
+      this.props.history.goBack();
+    });
+  }
+
+  render() {
+    const { collectionsAddressBook, collectionsCalendar, addressBookItems, calendarItems } = itemsSelector(this.props);
+
+    return (
+      <Switch>
         <Route
-          path={routeResolver.getRoute('pim.events._id.edit')}
+          path={routeResolver.getRoute('pim')}
           exact={true}
-          render={({match}) => (
+          render={({history}) => (
-            <Container style={{maxWidth: 400}}>
+            <PimMain
-              <EventEdit
+              contacts={objValues(addressBookItems)}
-                initialCollection={(calendarItems[match.params.itemUid] as any).journalUid}
+              events={objValues(calendarItems)}
-                item={calendarItems[match.params.itemUid]}
+              history={history}
-                collections={collectionsCalendar}
-                onSave={this.onEventSave}
             />
-            </Container>
           )}
         />
         <Route
-          path={routeResolver.getRoute('pim.events._id.log')}
+          path={routeResolver.getRoute('pim.contacts')}
-          exact={true}
+          render={() => (
-          render={({match}) => (
+            <CollectionRoutes
-            <Container>
-              <ItemChangeLog
               syncInfo={this.props.syncInfo}
-                items={calendarItems}
+              routePrefix="pim.contacts"
-                uid={match.params.itemUid}
+              collections={collectionsAddressBook}
+              items={addressBookItems}
+              componentEdit={ContactEdit}
+              componentView={Contact}
+              onItemSave={this.onContactSave}
             />
-            </Container>
           )}
         />
         <Route
-          path={routeResolver.getRoute('pim.events._id')}
+          path={routeResolver.getRoute('pim.events')}
-          exact={true}
+          render={() => (
-          render={({match, history}) => (
+            <CollectionRoutes
-            <Container>
+              syncInfo={this.props.syncInfo}
-              <div style={{textAlign: 'right', marginBottom: 15}}>
+              routePrefix="pim.events"
-                <RaisedButton
+              collections={collectionsCalendar}
-                  label="Change History"
+              items={calendarItems}
-                  style={{marginLeft: 15}}
+              componentEdit={EventEdit}
-                  icon={<IconChangeHistory />}
+              componentView={Event}
-                  onClick={() =>
+              onItemSave={this.onEventSave}
-                    history.push(routeResolver.getRoute(
-                      'pim.events._id.log',
-                      {itemUid: match.params.itemUid}))
-                  }
-                />
-
-                <RaisedButton
-                  label="Edit"
-                  secondary={true}
-                  style={{marginLeft: 15}}
-                  icon={<IconEdit />}
-                  onClick={() =>
-                    history.push(routeResolver.getRoute(
-                      'pim.events._id.edit',
-                      {itemUid: match.params.itemUid}))
-                  }
             />
-              </div>
-              <Event item={calendarItems[match.params.itemUid]} />
-            </Container>
           )}
         />
       </Switch>