Rewrite transfer of global messages from components to be a lot simpler

Author: jissereitsma

view/base/templates/component/messages.phtml

@@ -14,6 +14,7 @@ use Loki\CssUtils\Util\CssClass;
     x-data="LokiMessagesComponent" x-cloak x-show="hasMessages">
     <template x-for="message in messages">
         <div
+            :data-message-type="message.type"
             :data-message-text="message.text"
             @dblclick="removeMessage"
             @keyup.escape.window="removeMessage"
@@ -25,6 +26,7 @@ use Loki\CssUtils\Util\CssClass;
                 x-html="message.text"
             ></div>
             <button
+                :data-message-type="message.type"
                 :data-message-text="message.text"
                 @click.prevent="removeMessage"
                 class="<?= /* @noEscape */ $css('close w-3', 'button') ?>">

view/base/templates/script/component/message-component.phtml

@@ -8,7 +8,7 @@ use Magento\Framework\View\Element\Template;
 
 $timeout = (int)$block->getTimeout(); // @todo Right source for this?
 if (!$timeout > 0) {
-    $timeout = 10000;
+    $timeout = 100000;
 }
 ?>
 <script>
@@ -25,8 +25,9 @@ if (!$timeout > 0) {
                 return this.messages.length > 0;
             },
             removeMessage() {
-                const messageText = this.$el.getAttribute('data-message-text');
-                Alpine.store('LokiMessageStore').removeMessage(messageText);
+                const type = this.$el.getAttribute('data-message-type');
+                const text = this.$el.getAttribute('data-message-text');
+                Alpine.store('LokiMessageStore').removeMessage(type, text);
             },
         }));
     });

view/base/templates/script/directive/autoremove-directive.phtml

@@ -11,9 +11,10 @@ use Magento\Framework\View\Element\Template;
         Alpine.directive('autoremove', (el, { value, expression }, { evaluate }) => {
             if (expression) {
                 const timeout = evaluate(expression);
+                const messageType = el.getAttribute('data-message-type');
                 const messageText = el.getAttribute('data-message-text');
                 setTimeout(() => {
-                    Alpine.store('LokiMessageStore').removeMessage(messageText);
+                    Alpine.store('LokiMessageStore').removeMessage(messageType, messageText);
                 }, timeout);
             }
         });

view/base/templates/script/store/message-store.phtml

@@ -40,8 +40,10 @@ use Magento\Framework\View\Element\Template;
             addMessage(type, text) {
                 this.messages.push({type, text});
             },
-            removeMessage(text) {
-                this.messages = Object.values(this.messages).filter(message => message.text !== text);
+            removeMessage(type, text) {
+                this.messages = this.messages.filter(message => {
+                    return !(message.type === type && message.text === text);
+                });
             },
             saveMessage(type, text) {
                 const messages = this.getMessagesFromStore();