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.
-      
-      // eslint-disable-next-line no-restricted-syntax
-      for (const toast of window.toasts){
-        if ((!!options.id) && (toast.props.id === options.id)) {
-          return;
-        }
-      }
-      
-      // Make new Toast
-      window.toasts.unshift(
-        new Whisper.SessionToastView({
-          el: window.$('#session-toast-container'),
-        })
-      );
+      // 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)
 
-      window.toasts[0].update({
+      const params = {
         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);
+      // 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 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[toastID] = new Whisper.SessionToastView({
+            el: window.$('#session-toast-container'),
+        });
 
+        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];
+        }
+      },
+
     });
   })();