From 84a0bf2a8e336a45c4dab0dff12e6506386f2be6 Mon Sep 17 00:00:00 2001
From: Tom Hacohen <tom@stosb.com>
Date: Mon, 25 Dec 2017 12:26:21 +0000
Subject: [PATCH] Add a cancel button when editing contacts and events.

Fixes #2.
---
 src/Pim/index.tsx              | 9 +++++++++
 src/components/ContactEdit.tsx | 8 ++++++++
 src/components/EventEdit.tsx   | 8 ++++++++
 3 files changed, 25 insertions(+)

diff --git a/src/Pim/index.tsx b/src/Pim/index.tsx
index e4a0c35..7dc6f7b 100644
--- a/src/Pim/index.tsx
+++ b/src/Pim/index.tsx
@@ -102,6 +102,7 @@ const CollectionRoutes = withRouter(
       componentView: any,
       items: {[key: string]: any},
       onItemSave: (item: Object, journalUid: string, originalContact?: Object) => void;
+      onItemCancel: () => void;
     };
 
     render() {
@@ -130,6 +131,7 @@ const CollectionRoutes = withRouter(
                   item={props.items[match.params.itemUid]}
                   collections={props.collections}
                   onSave={props.onItemSave}
+                  onCancel={props.onItemCancel}
                 />
               </Container>
             )}
@@ -197,6 +199,7 @@ class Pim extends React.PureComponent {
     super(props);
     this.onEventSave = this.onEventSave.bind(this);
     this.onContactSave = this.onContactSave.bind(this);
+    this.onCancel = this.onCancel.bind(this);
   }
 
   onEventSave(event: EventType, journalUid: string, originalEvent?: EventType) {
@@ -233,6 +236,10 @@ class Pim extends React.PureComponent {
     });
   }
 
+  onCancel() {
+    this.props.history.goBack();
+  }
+
   render() {
     const { collectionsAddressBook, collectionsCalendar, addressBookItems, calendarItems } = itemsSelector(this.props);
 
@@ -260,6 +267,7 @@ class Pim extends React.PureComponent {
               componentEdit={ContactEdit}
               componentView={Contact}
               onItemSave={this.onContactSave}
+              onItemCancel={this.onCancel}
             />
           )}
         />
@@ -274,6 +282,7 @@ class Pim extends React.PureComponent {
               componentEdit={EventEdit}
               componentView={Event}
               onItemSave={this.onEventSave}
+              onItemCancel={this.onCancel}
             />
           )}
         />
diff --git a/src/components/ContactEdit.tsx b/src/components/ContactEdit.tsx
index 4a1e213..0fe3441 100644
--- a/src/components/ContactEdit.tsx
+++ b/src/components/ContactEdit.tsx
@@ -122,6 +122,7 @@ class ContactEdit extends React.PureComponent {
     initialCollection?: string,
     item?: ContactType,
     onSave: (contact: ContactType, journalUid: string, originalContact?: ContactType) => void;
+    onCancel: () => void;
   };
 
   constructor(props: any) {
@@ -306,6 +307,7 @@ class ContactEdit extends React.PureComponent {
       },
       submit: {
         marginTop: 40,
+        marginBottom: 20,
         textAlign: 'right',
       },
     };
@@ -454,10 +456,16 @@ class ContactEdit extends React.PureComponent {
           />
 
           <div style={styles.submit}>
+            <RaisedButton
+              label="Cancel"
+              onClick={this.props.onCancel}
+            />
+
             <RaisedButton
               type="submit"
               label="Save"
               secondary={true}
+              style={{marginLeft: 15}}
             />
           </div>
 
diff --git a/src/components/EventEdit.tsx b/src/components/EventEdit.tsx
index 5d10a43..259ca80 100644
--- a/src/components/EventEdit.tsx
+++ b/src/components/EventEdit.tsx
@@ -33,6 +33,7 @@ class EventEdit extends React.PureComponent {
     initialCollection?: string,
     item?: EventType,
     onSave: (event: EventType, journalUid: string, originalEvent?: EventType) => void;
+    onCancel: () => void;
   };
 
   constructor(props: any) {
@@ -155,6 +156,7 @@ class EventEdit extends React.PureComponent {
       },
       submit: {
         marginTop: 40,
+        marginBottom: 20,
         textAlign: 'right',
       },
     };
@@ -229,10 +231,16 @@ class EventEdit extends React.PureComponent {
           />
 
           <div style={styles.submit}>
+            <RaisedButton
+              label="Cancel"
+              onClick={this.props.onCancel}
+            />
+
             <RaisedButton
               type="submit"
               label="Save"
               secondary={true}
+              style={{marginLeft: 15}}
             />
           </div>