Finalise uniquified toast stacking and deletion

js/background.js

@@ -802,43 +802,54 @@
       appView.openConversation(groupId, {});
     };
 
-    window.toasts = [];
+    window.toasts = {};
     window.pushToast = (options) => {
-      // Toast ID can be used to prevent identical toasts appearing at once.
-      // Eg, no two toasts with ID "messageDeletedAlert" can appear on the screen at once.
-      // If you want to be able to display mutliple, don't use toast IDs.
+      // Setting toasts with the same ID can be used to prevent identical
+      // toasts from appearing at once (stacking).
+      // If toast already exists, it will be reloaded (updated)
 
+      const params = {
+        title: options.title,
+        description: options.description ? options.description : '',
+        type: options.type ? options.type : '',
+        id: options.id ? options.id : '',
+      }
+
+      // Give all toasts an ID. User may define.
+      const toastID = options.id
+        ? options.id
+        : Math.random().toString(36).substring(3);
+    
+      let toastExists = false;
       // eslint-disable-next-line no-restricted-syntax
-      for (const toast of window.toasts){
-        if ((!!options.id) && (toast.props.id === options.id)) {
-          return;
+      for (const key in window.toasts) {
+        if ((!!options.id) && (key === options.id)) {
+          toastExists = true;
+          window.toasts[key].update(params);
+          break;
         }
       }
       
+      if (! toastExists){
         // Make new Toast
-      window.toasts.unshift(
-        new Whisper.SessionToastView({
+        window.toasts[toastID] = new Whisper.SessionToastView({
             el: window.$('#session-toast-container'),
-        })
-      );
-
-      window.toasts[0].update({
-        title: options.title,
-        description: options.description ? options.description : '',
-        type: options.type ? options.type : '',
-        id: options.id ? options.id : '',
         });
 
-      console.log(window.toasts[0].props.id);
+        window.toasts[toastID].render();
+        window.toasts[toastID].update(params);
+      }
       
       // Remove some toasts if too many exist
       const maxToasts = 6;
       const numToasts = window.toasts.length;
 
       if (numToasts > maxToasts){
-        window.toasts[4].fadeToast();
-        window.toasts = window.toasts.slice(0, maxToasts - 1);
+        const finalToastID = window.toasts.keys[window.toasts.length];
+        window.toasts[finalToastID].fadeToast();
       }
+
+      return toastID;
     }
 
     window.sendGroupInvitations = (serverInfo, pubkeys) => {

js/views/conversation_view.js

@@ -1377,6 +1377,7 @@
         window.pushToast({
           title: i18n('messageDeletionForbidden'),
           type: 'error',
+          id: 'messageDeletionForbidden',
         });
 
         return;

js/views/session_toast_view.js

@@ -32,22 +32,38 @@
         this.props.description = options.description ? options.description : '';
         this.props.type = options.type ? options.type : '';
         this.props.id = options.id ? options.id : '';
-        this.render();
 
-        setTimeout(this.fadeToast.bind(this), 4000);
+        this.toastView.update(this.props);
+        
+        this.showToast();
+        clearTimeout(this.timer);
+        this.timer = setTimeout(this.fadeToast.bind(this), 4000);
+
+      },
+
+      showToast() {
+        this.toastView.$el.show();
       },
 
       fadeToast() {
         this.toastView.$el.fadeOut(500, () => {
-          this.toastView.remove();
+          this.removeToast();
         });
       },
     
       closeToast() {
         this.toastView.$el.fadeOut(125, () => {
-          this.toastView.remove();
+          this.removeToast();
         });
       },
 
+      removeToast() {
+        this.toastView.remove();
+
+        if (this.props.id){
+          delete window.toasts[this.props.id];
+        }
+      },
+
     });
   })();