Show notifications upon success or failure of save and delete objects (#718)

Author: natanrolnik

src/dashboard/Data/Browser/Browser.react.js

@@ -39,6 +39,7 @@ export default class Browser extends DashboardView {
     this.section = 'Core';
     this.subsection = 'Browser'
     this.action = new SidebarAction('Create a class', this.showCreateClass.bind(this));
+    this.noteTimeout = null;
 
     this.state = {
       showCreateClassDialog: false,
@@ -62,6 +63,8 @@ export default class Browser extends DashboardView {
       newObject: null,
 
       lastError: null,
+      lastNote: null,
+
       relationCount: 0,
     };
 
@@ -225,7 +228,8 @@ export default class Browser extends DashboardView {
       if (msg) {
         msg = msg[0].toUpperCase() + msg.substr(1);
       }
-      this.setState({ lastError: msg });
+
+      this.showNote(msg, true);
     });
   }
 
@@ -480,8 +484,13 @@ export default class Browser extends DashboardView {
     } else {
       obj.set(attr, value);
     }
-    obj.save(null, { useMasterKey: true }).then(() => {
-      const state = { data: this.state.data, lastError: null };
+    obj.save(null, { useMasterKey: true }).then((objectSaved) => {
+      const createdOrUpdated = isNewObject ? "created" : "updated";
+      let msg = objectSaved.className + " with id '" + objectSaved.id + "' " + createdOrUpdated;
+      this.showNote(msg, false);
+
+      const state = { data: this.state.data };
+
       if (isNewObject) {
         const relation = this.state.relation;
         if (relation) {
@@ -508,7 +517,8 @@ export default class Browser extends DashboardView {
               msg = msg[0].toUpperCase() + msg.substr(1);
             }
             obj.set(attr, prev);
-            this.setState({ data: this.state.data, lastError: msg });
+            this.setState({ data: this.state.data });
+            this.showNote(msg, true);
           });
         } else {
           state.newObject = null;
@@ -526,10 +536,10 @@ export default class Browser extends DashboardView {
       }
       if (!isNewObject) {
         obj.set(attr, prev);
-        this.setState({ data: this.state.data, lastError: msg });
-      } else {
-        this.setState({ lastError: msg });
+        this.setState({ data: this.state.data });
       }
+
+      this.showNote(msg, true);
     });
   }
 
@@ -561,6 +571,10 @@ export default class Browser extends DashboardView {
           toDelete.push(this.state.data[i]);
         }
       }
+
+      const toDeleteObjectIds = [];
+      toDelete.forEach((obj) => { toDeleteObjectIds.push(obj.id); });
+
       let relation = this.state.relation;
       if (relation && toDelete.length) {
         relation.remove(toDelete);
@@ -576,13 +590,43 @@ export default class Browser extends DashboardView {
         });
       } else if (toDelete.length) {
         Parse.Object.destroyAll(toDelete, { useMasterKey: true }).then(() => {
+          let deletedNote;
+
+          if (toDeleteObjectIds.length == 1) {
+            deletedNote = className + " with id '" + toDeleteObjectIds[0] + "' deleted";
+          } else {
+            deletedNote = toDeleteObjectIds.length + " " + className + " objects deleted";
+          }
+
+          this.showNote(deletedNote, false);
+
           if (this.props.params.className === className) {
             for (let i = 0; i < indexes.length; i++) {
               this.state.data.splice(indexes[i] - i, 1);
             }
             this.state.counts[className] -= indexes.length;
             this.forceUpdate();
           }
+        }, (error) => {
+          let errorDeletingNote = null;
+
+          if (error.code === Parse.Error.AGGREGATE_ERROR) {
+            if (error.errors.length == 1) {
+              errorDeletingNote = "Error deleting " + className + " with id '" + error.errors[0].object.id + "'";
+            } else if (error.errors.length < toDeleteObjectIds.length) {
+              errorDeletingNote = "Error deleting " + error.errors.length + " out of " + toDeleteObjectIds.length + " " + className + " objects";
+            } else {
+              errorDeletingNote = "Error deleting all " + error.errors.length + " " + className + " objects";
+            }
+          } else {
+            if (toDeleteObjectIds.length == 1) {
+              errorDeletingNote = "Error deleting " + className + " with id '" + toDeleteObjectIds[0] + "'";
+            } else {
+              errorDeletingNote = "Error deleting " + toDeleteObjectIds.length + " " + className + " objects";
+            }
+          }
+
+          this.showNote(errorDeletingNote, true);
         });
       }
     }
@@ -748,6 +792,24 @@ export default class Browser extends DashboardView {
     );
   }
 
+  showNote(message, isError) {
+    if (!message) {
+      return;
+    }
+
+    clearTimeout(this.noteTimeout);
+
+    if (isError) {
+      this.setState({ lastError: message, lastNote: null });
+    } else {
+      this.setState({ lastNote: message, lastError: null });
+    }
+
+    this.noteTimeout = setTimeout(() => {
+      this.setState({ lastError: null, lastNote: null });
+    }, 3500);
+  }
+
   renderContent() {
     let browser = null;
     let className = this.props.params.className;
@@ -886,6 +948,7 @@ export default class Browser extends DashboardView {
           onCancel={() => this.setState({
             showDropClassDialog: false,
             lastError: null,
+            lastNote: null,
           })}
           onConfirm={() => this.dropClass(className)} />
       );
@@ -915,10 +978,22 @@ export default class Browser extends DashboardView {
         />
       );
     }
+
+    let notification = null;
+
+    if (this.state.lastError) {
+      notification = (
+        <Notification note={this.state.lastError} isErrorNote={true}/>
+      );
+    } else if (this.state.lastNote) {
+      notification = (
+        <Notification note={this.state.lastNote} isErrorNote={false}/>
+      );
+    }
     return (
       <div>
         {browser}
-        <Notification note={this.state.lastError} />
+        {notification}
         {extras}
       </div>
     );

src/dashboard/Data/Browser/Browser.scss

@@ -138,21 +138,29 @@
   }
 }
 
-.notification {
+.notificationMessage, .notificationError {
   @include animation('fade-in 0.2s ease-out');
   position: absolute;
   bottom: 20px;
   right: 20px;
   opacity: 1;
   background: white;
   padding: 10px;
-  border: 2px solid $red;
-  color: $red;
   font-size: 14px;
   border-radius: 5px;
   width: 260px;
 }
 
+.notificationError {
+  border: 2px solid $red;
+  color: $red;
+}
+
+.notificationMessage {
+  border: 2px solid $blue;
+  color: $blue;
+}
+
 .notificationHide {
   @include animation('fade-out 0.2s ease-out');
 }

src/dashboard/Data/Browser/Notification.react.js

@@ -11,11 +11,12 @@ import React    from 'react';
 import styles   from 'dashboard/Data/Browser/Browser.scss';
 
 export default class Notification extends React.Component {
-  constructor() {
+  constructor(props) {
     super();
 
     this.state = {
-      lastNote: null,
+      lastNote: props.note,
+      isErrorNote: props.isErrorNote,
       hiding: false,
     };
 
@@ -30,9 +31,9 @@ export default class Notification extends React.Component {
     if (this.state.lastNote !== nextProps.note) {
       clearTimeout(this.timeout);
       if (this.state.hiding) {
-        this.setState({ lastNote: nextProps.note, hiding: false })
+        this.setState({ lastNote: nextProps.note, isErrorNote: nextProps.isErrorNote, hiding: false })
       } else {
-        this.setState({ lastNote: nextProps.note });
+        this.setState({ lastNote: nextProps.note, isErrorNote: nextProps.isErrorNote });
       }
     }
     if (!nextProps.note) {
@@ -50,8 +51,16 @@ export default class Notification extends React.Component {
     if (!this.state.lastNote) {
       return null;
     }
+
     let bottomRight = new Position(window.innerWidth, window.innerHeight);
-    let classes = [styles.notification];
+    let classes = [];
+
+    if (this.state.isErrorNote) {
+      classes.push(styles.notificationError);
+    } else {
+      classes.push(styles.notificationMessage);
+    }
+
     if (this.state.hiding) {
       classes.push(styles.notificationHide);
     }