From 1dd1ea2abb92bf9e09cd16af0c12ee0ab2d07cfc Mon Sep 17 00:00:00 2001
From: charles <charlesdrani@gmail.com>
Date: Mon, 6 Nov 2023 13:32:19 -0700
Subject: [PATCH] fix: remove auto-redirect on artist playlist creation (#174)

---
 src/components/alert.js        |  2 +-
 src/components/artist-disco.js | 14 +++++++-------
 src/models/alert.js            | 26 ++++++++++++++++++++------
 src/styles.css                 |  8 ++++----
 4 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/src/components/alert.js b/src/components/alert.js
index 787217f3..566484e8 100644
--- 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
index d73e3736..dfedc4b2 100644
--- 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
index 8636caea..ed9da1dd 100644
--- 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
index 965ac198..d9fd7240 100644
--- 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 {