From 49f7360df1e51865adc47852fc5407f132ea4c9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tristan=20Dani=C3=ABl=20Maat?= <tm@tlater.net>
Date: Mon, 1 Aug 2022 16:35:28 +0100
Subject: [PATCH] Add back in flash messages

---
 src/lib/html/base.html          |  9 +++++++--
 src/lib/html/message-flash.html | 11 +++--------
 src/lib/js/index.ts             | 30 ++++++++++++++++++++++++++++++
 src/music/index.tsx             |  1 +
 src/music_sample.html           |  5 ++++-
 5 files changed, 45 insertions(+), 11 deletions(-)
 create mode 100644 src/lib/js/index.ts

diff --git a/src/lib/html/base.html b/src/lib/html/base.html
index 7481e93..be001d7 100644
--- a/src/lib/html/base.html
+++ b/src/lib/html/base.html
@@ -18,10 +18,15 @@
   <block name="navigation">
     <include src="lib/html/navigation.html"></include>
   </block>
-  <!--     <include src="lib/html/message-flash.html"></include> -->
+
+  <include src="lib/html/message-flash.html"></include>
+
   <block name="content"></block>
 
-  <block name="footer"></block>
+  <block name="footer">
+    <script type="module" src="lib/js/index.ts"></script>
+  </block>
+
 </body>
 
 </html>
diff --git a/src/lib/html/message-flash.html b/src/lib/html/message-flash.html
index 63d5819..956a710 100644
--- a/src/lib/html/message-flash.html
+++ b/src/lib/html/message-flash.html
@@ -1,11 +1,6 @@
 {{#if flash}}
-<div
-  class="alert alert-{{flash.type}} alert-dismissible fade show"
-  role="alert"
->
-  {{ flash.message }}
-  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
-    <span aria-hidden="true">&times;</span>
-  </button>
+<div class="notification is-{{flash.type}}">
+  <button class="delete" aria-label="Close"></button>
+  <span role="alert"> {{ flash.message }} </span>
 </div>
 {{/if}}
diff --git a/src/lib/js/index.ts b/src/lib/js/index.ts
new file mode 100644
index 0000000..5b6eed7
--- /dev/null
+++ b/src/lib/js/index.ts
@@ -0,0 +1,30 @@
+document.addEventListener("DOMContentLoaded", () => {
+    let flashButtons = document.querySelectorAll(".notification .delete");
+
+    flashButtons.forEach((button) => {
+        let flash = button.parentNode;
+
+        if (flash == null) {
+            console.error(
+                "Unreachable because our `querySelector` includes a parent; something went very wrong"
+            );
+            return;
+        }
+
+        flash.addEventListener("click", () => {
+            if (flash == null) {
+                console.error("Completely unreachable.");
+                return;
+            }
+
+            if (flash.parentNode == null) {
+                console.error(
+                    "Notification not placed in DOM; something went very wrong"
+                );
+                return;
+            }
+
+            flash.parentNode.removeChild(flash);
+        });
+    });
+});
diff --git a/src/music/index.tsx b/src/music/index.tsx
index a3ad17f..7e25b00 100644
--- a/src/music/index.tsx
+++ b/src/music/index.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { createRoot } from "react-dom/client";
 import { Provider } from "react-redux";
 
diff --git a/src/music_sample.html b/src/music_sample.html
index d5a2841..ee83771 100644
--- a/src/music_sample.html
+++ b/src/music_sample.html
@@ -5,6 +5,9 @@
 
   <block name="content">
     <div id="playerUI" class="is-flex-grow-1 is-flex"></div>
-    <script type="module" src="./music/index.tsx"></script>
+  </block>
+
+  <block name="footer" type="append">
+    <script type="module" src="music/index.tsx"></script>
   </block>
 </extends>