fix: remove auto-redirect on artist playlist creation (#174)

cdrani · Nov 6, 2023 · 1dd1ea2 · 1dd1ea2
1 parent 25d0d4a
commit 1dd1ea2
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 18 deletions.
diff --git a/src/components/alert.js b/src/components/alert.js
@@ -1,6 +1,6 @@
 export const createAlert = () => `
     <div id="chorus-alert">
-        <p id="chorus-alert-message" style="font-size:1.25rem;color:#fff;"></p>
+        <div id="chorus-alert-message" style="font-size:1.25rem;color:#fff;"></div>
         <button 
             id="chorus-alert-close-button"
             class="chorus-text-button"

diff --git a/src/components/artist-disco.js b/src/components/artist-disco.js
@@ -59,13 +59,13 @@ async function sendArtistDiscoMessage() {
     })
 
     if (state == 'completed') {
-        const alertMessage = `Playlist "${data.artist_name}" Created. Redirecting...`
-        alert.displayAlert({ type: 'success', message: alertMessage, duration: 2000 })
-        setTimeout(() => { location.pathname = `/playlist/${data.playlist.id}` }, 500)
-    } else {
-        const alertMessage = 'Something is wrong. Uh... Please Try Again.'
-        alert.displayAlert({ type: 'error', message: alertMessage })
-    }
+        const alertMessage = `Playlist "${artist_name}" Added.`
+        alert.displayAlert({ type: 'success', message: alertMessage, duration: 5000, link: data.playlist.url })
+        return
+    } 
+
+    const alertMessage = 'Something is wrong. Uh... Please Try Again.'
+    alert.displayAlert({ type: 'error', message: alertMessage })
 }
 
 function loadArtistDiscoUI() {

diff --git a/src/models/alert.js b/src/models/alert.js
@@ -2,17 +2,31 @@ import { createAlert } from '../components/alert.js'
 import { parseNodeString } from '../utils/parser.js'
 
 export default class Alert {
-    displayAlert({ type = 'success', duration = 3000, message } = {}) {
+    #craftMessageNode({ message, link, linkMessage }) {
+        const messageHTML =  `
+            <div style="display:flex;flex-direction:column;">
+                <p>${message ?? 'Snip copied to clipboard.'}</p>
+                ${link 
+                    ? `<p><a style="text-decoration-line:underline" href="${link}">
+                          ${linkMessage ?? 'Go To Playlist.'}
+                      </a></p>`
+                    : ''}
+            </div>
+        `
+        return parseNodeString(messageHTML)
+    }
+
+    displayAlert({ type = 'success', message, link, linkMessage, duration = 3000 } = {}) {
         this.#setupAlert()
         const alertMessage = this.#chorusAlert.querySelector('[id="chorus-alert-message"]')
-        this.#chorusAlert.style.backgroundColor = type == 'success' ? 'green' : 'red'
 
+        this.#chorusAlert.style.backgroundColor = type == 'success' ? 'forestgreen' : 'red'
+
+        const messageNode = this.#craftMessageNode({ message, link, linkMessage })
+        alertMessage.replaceChildren(messageNode)
 
-        alertMessage.textContent = message ?? 'Snip copied to clipboard.'
         this.#chorusAlert.style.display = 'flex' 
-        setTimeout(() => { 
-            this.#chorusAlert.style.display = 'none' 
-        }, duration)
+        setTimeout(() => this.#chorusAlert.style.display = 'none', duration)
     }
 
     #handleAlert(target) {

diff --git a/src/styles.css b/src/styles.css
@@ -1,4 +1,7 @@
 #chorus-alert {
+    position: absolute;
+    bottom: 10%;
+    right: 2.5%;
     display: none;
     justify-content: space-between;
     align-items: center;
@@ -8,10 +11,7 @@
     padding-right:.75rem;
     min-width: 320px;
     max-width: fit-content;
-    background: green;
-    position: absolute;
-    bottom: 10%;
-    right: 2.5%;
+    background: forestgreen;
 }
 
 #chorus {