From 8c510b7c3c21c392e5de7361a0c4806c9b12cc25 Mon Sep 17 00:00:00 2001
From: kylejwatson <mail@watsonk.me>
Date: Sun, 2 Aug 2020 12:28:10 +0100
Subject: [PATCH] Simplified closing and replacement functionality

---
 src/renderer/components/ft-toast/ft-toast.js  | 36 +++++++------------
 src/renderer/components/ft-toast/ft-toast.vue |  2 +-
 2 files changed, 13 insertions(+), 25 deletions(-)

diff --git a/src/renderer/components/ft-toast/ft-toast.js b/src/renderer/components/ft-toast/ft-toast.js
index 94f5044d..26262028 100644
--- a/src/renderer/components/ft-toast/ft-toast.js
+++ b/src/renderer/components/ft-toast/ft-toast.js
@@ -5,8 +5,7 @@ export default Vue.extend({
   name: 'FtToast',
   data: function () {
     return {
-      toasts: [
-      ],
+      toasts: [],
     }
   },
   mounted: function () {
@@ -16,39 +15,28 @@ export default Vue.extend({
     FtToastEvents.$off('toast.open', this.open)
   },
   methods: {
-    performAction: function (toast) {
-      toast.action()
-      this.close(toast)
+    performAction: function (index) {
+      this.toasts[index].action()
+      this.remove(index)
     },
     close: function (toast) {
-      clearTimeout(toast.timeout)
-      // Remove toasts when most recent toast has finished to avoid re-render
-      if (this.toasts.filter(toast => toast.isOpen).length === 1) {
-        // Wait for fade-out to finish
-        setTimeout(this.clear, 300)
-      }
+      // Wait for fade-out to finish
+      setTimeout(this.remove, 300, this.toasts.length)
+
       toast.isOpen = false
     },
     open: function (message, action, time) {
       const toast = { message: message, action: action || (() => { }), isOpen: false, timeout: null }
-      toast.timeout = setTimeout(this.close, time || 3000, toast)
+      toast.timeout = setTimeout(this.close, time || 6000, toast)
       setImmediate(() => { toast.isOpen = true })
       if (this.toasts.length > 4) {
-        for (let i = this.toasts.length - 1; i >= 0; i--) {
-          if (!this.toasts[i].isOpen) {
-            // Replace the first hidden toast starting from the bottom
-            return this.toasts.splice(i, 1, toast)
-          }
-        }
-        // Else replace the most recent
-        return this.toasts.splice(4, 1, toast)
+        this.remove(0)
       }
       this.toasts.push(toast)
     },
-    clear: function () {
-      if (this.toasts.every(toast => !toast.isOpen)) {
-        this.toasts = []
-      }
+    remove: function(index) {
+      const removed = this.toasts.splice(index, 1)
+      clearTimeout(removed.timeout)
     }
   },
 })
diff --git a/src/renderer/components/ft-toast/ft-toast.vue b/src/renderer/components/ft-toast/ft-toast.vue
index fd7cf3c6..efcd91a8 100644
--- a/src/renderer/components/ft-toast/ft-toast.vue
+++ b/src/renderer/components/ft-toast/ft-toast.vue
@@ -5,7 +5,7 @@
       :key="'toast-' + index"
       class="toast"
       :class="{ closed: !toast.isOpen, open: toast.isOpen }"
-      @click="performAction(toast)"
+      @click="performAction(index)"
     >
       <p class="message">
         {{ toast.message }}