From 4e8264f6e60110c26aa1a1b3ada21c021cbaf27e Mon Sep 17 00:00:00 2001
From: GJS <homelab.api@gmail.com>
Date: Sun, 29 Dec 2024 16:12:20 +0100
Subject: [PATCH] Updated: Improve monitor deletion flow with toast
 notification

- Added functionality to retrieve and display a toast message from localStorage
  after the page reloads, triggered by a successful monitor deletion.
- Modified the `deleteSelected` method to immediately refresh the page after
  deleting selected monitors and store the response for the toast notification.
- Cleaned up localStorage after showing the toast to avoid repeating the message.

modified: src/components/MonitorList.vue
---
 src/components/MonitorList.vue | 33 ++++++++++++++++++++++-----------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/components/MonitorList.vue b/src/components/MonitorList.vue
index 55da9518a..6485230dd 100644
--- a/src/components/MonitorList.vue
+++ b/src/components/MonitorList.vue
@@ -211,6 +211,21 @@ export default {
     },
     mounted() {
         window.addEventListener("scroll", this.onScroll);
+
+        // Retrieve the toast message from localStorage
+        const toastMessage = localStorage.getItem("toastMessage");
+
+        if (toastMessage) {
+            /**
+             * If a toast message exists in localStorage:
+             * 1. Parse the message from string to object format.
+             * 2. Display the toast notification using the root component's toastRes method.
+             * 3. Remove the message from localStorage to prevent it from showing again.
+             */
+            this.$root.toastRes(JSON.parse(toastMessage)); // Show the toast message
+            localStorage.removeItem("toastMessage"); // Clean up the localStorage
+        }
+
     },
     beforeUnmount() {
         window.removeEventListener("scroll", this.onScroll);
@@ -333,23 +348,19 @@ export default {
             // Delete each selected monitor
             Object.keys(this.selectedMonitors).forEach(id => {
                 this.$root.deleteMonitor(id, (res) => {
-                    // Display a response message for the operation
-                    this.$root.toastRes(res);
-
-                    // Remove the monitor from the selection if deletion is successful
                     if (res.ok) {
+                        // Remove the monitor from the selectedMonitors list upon successful deletion
                         delete this.selectedMonitors[id];
+
+                        // Refresh the page immediately after deleting the selected monitors
+                        window.location.reload();
+
+                        // Store a flag in localStorage to trigger a toast notification once the page reloads
+                        localStorage.setItem("toastMessage", JSON.stringify(res));
                     }
                 });
             });
 
-            // Delay for UI updates before reloading the page
-            setTimeout(() => {
-                if (!Object.keys(this.selectedMonitors).length) {
-                    window.location.reload(); // Refresh the page to show updates
-                }
-            }, 5000);
-
             // Exit selection mode as deletion is in progress
             this.cancelSelectMode();
         },