Improve toast notification

Fix cutoff in WebKit and show loading status
au2001-homelab · Dec 27, 2023 · 736916b · 736916b
1 parent c4a707f
commit 736916b
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 33 deletions.
diff --git a/src/app/modal.module.css b/src/app/modal.module.css
@@ -1,18 +1,29 @@
 .modal {
+  width: 100%;
+  height: 100%;
+  background: none;
+  border: none;
+}
+
+.modal::backdrop {
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(10px);
+}
+
+.container {
+  position: fixed;
   width: 90%;
   height: 90%;
   margin-left: 5%;
   margin-right: 5%;
   top: 5%;
+  border-style: solid;
   border-width: 1px;
   border-color: black;
   padding: 20px;
   border-radius: 20px;
-}
-
-.modal::backdrop {
-  background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(10px);
+  background-color: white;
+  overflow: auto;
 }
 
 .header {

diff --git a/src/app/modal.tsx b/src/app/modal.tsx
@@ -7,6 +7,7 @@ import {
   ReactNode,
   MouseEvent,
 } from "react";
+import { ToastContainer } from "react-toastify";
 import styles from "./modal.module.css";
 
 interface Props {
@@ -55,17 +56,31 @@ export default function Modal({ title, children, isOpen, handleClose }: Props) {
       onClose={handleClose}
       onClick={handleClickOutside}
     >
-      <div className={styles.header}>
-        <div style={{ width: "100%" }}>
-          <h1>{title}</h1>
-        </div>
-        <div style={{ width: "25px" }}>
-          <button type="button" onClick={close} title="close">
-            ╳
-          </button>
+      <div className={styles.container}>
+        <div className={styles.header}>
+          <div style={{ width: "100%" }}>
+            <h1>{title}</h1>
+          </div>
+          <div style={{ width: "25px" }}>
+            <button type="button" onClick={close} title="close">
+              ╳
+            </button>
+          </div>
         </div>
+        {children}
       </div>
-      {children}
+      <ToastContainer
+        position="bottom-center"
+        autoClose={2000}
+        hideProgressBar={false}
+        newestOnTop
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+        theme="dark"
+      />
     </dialog>
   );
 }
diff --git a/src/app/search.tsx b/src/app/search.tsx
@@ -3,7 +3,7 @@
 import { useEffect, useState, FormEvent } from "react";
 import { useRouter } from "next/navigation";
 import * as Spotify from "spotify-api.js";
-import { ToastContainer, toast } from "react-toastify";
+import { toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import { pushTrack, searchTracks } from "./actions";
 import { TrackHeader, TrackItem } from "./track_list";
@@ -38,13 +38,33 @@ export default function Search() {
   }, [query]);
 
   async function onTrackClick(track: Spotify.Track) {
+    const toastId = toast.info(`Adding "${track.name}"...`, {
+      autoClose: false,
+      closeButton: false,
+      draggable: false,
+    });
     const success = await pushTrack(track.uri);
-    if (success) {
-      toast.success("Song added");
-      router.refresh();
-    } else {
-      toast.error("Failed to add song");
-    }
+
+    setTimeout(() => {
+      if (success) {
+        toast.update(toastId, {
+          render: `"${track.name}" added`,
+          type: toast.TYPE.SUCCESS,
+          autoClose: 2000,
+          closeButton: true,
+          draggable: false,
+        });
+        router.refresh();
+      } else {
+        toast.update(toastId, {
+          render: `Failed to add "${track.name}"`,
+          type: toast.TYPE.ERROR,
+          autoClose: 2000,
+          closeButton: true,
+          draggable: false,
+        });
+      }
+    }, 500);
   }
 
   function onSubmit(event: FormEvent) {
@@ -79,18 +99,6 @@ export default function Search() {
           </table>
         </>
       )}
-      <ToastContainer
-        position="bottom-center"
-        autoClose={2000}
-        hideProgressBar={false}
-        newestOnTop
-        closeOnClick
-        rtl={false}
-        pauseOnFocusLoss
-        draggable
-        pauseOnHover
-        theme="dark"
-      />
     </form>
   );
 }