SUM-260: added react-toastify to make copied alert

SU-SWS · Dec 19, 2024 · 3392913 · 3392913
1 parent 3fb0bca
commit 3392913
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 47 deletions.
diff --git a/package.json b/package.json
@@ -44,6 +44,7 @@
     "react-slick": "^0.30.2",
     "react-super-responsive-table": "^6.0.0",
     "react-tiny-oembed": "^1.1.0",
+    "react-toastify": "^11.0.2",
     "react-youtube": "^10.1.0",
     "react-zendesk": "^0.1.13",
     "sharp": "^0.33.5",

diff --git a/src/components/elements/favorites-list.tsx b/src/components/elements/favorites-list.tsx
@@ -7,6 +7,7 @@ import {XMarkIcon} from "@heroicons/react/20/solid"
 import {H2} from "./headers"
 import {clsx} from "clsx"
 import {twMerge} from "tailwind-merge"
+import {ToastContainer, toast} from "react-toastify"
 
 const ShareButtons = () => {
   const [, copy] = useCopyToClipboard()
@@ -15,8 +16,11 @@ const ShareButtons = () => {
   const urlParams = `/courses/favorites?favs=${favs.map(fav => `${fav.uuid}`).join(",")}`
   const copyUrl = isClient ? window.location.origin + urlParams : urlParams
 
+  const notify = () => toast("Copied!")
+
   const copyToClip = (text: string) => {
     copy(text).catch(_e => console.warn("An error occurred when copying to clipboard"))
+    notify()
   }
 
   const smsCopy =
@@ -33,53 +37,67 @@ const ShareButtons = () => {
     )
 
   return (
-    <div className="mt-12 flex flex-row justify-between gap-5 *:max-w-60 *:flex-1 *:shrink-0 @md:gap-20">
-      <button
-        className="text-center font-semibold text-archway-dark no-underline hocus:underline"
-        onClick={() => (location.href = smsCopy)}
-        data-course-shared="Favorites"
-        disabled={!favs.length}
-      >
-        <ChatBubbleLeftEllipsisIcon
-          width={30}
-          className={twMerge(
-            "mb-4 block w-full rounded-full bg-spirited-dark p-5 text-white",
-            clsx({"bg-black-40": !favs.length})
-          )}
-        />
-        Text
-      </button>
-      <button
-        className="text-center font-semibold text-archway-dark no-underline hocus:underline"
-        onClick={() => (location.href = emailCopy)}
-        data-course-shared="Favorites"
-        disabled={!favs.length}
-      >
-        <EnvelopeIcon
-          width={30}
-          className={twMerge(
-            "mb-4 block w-full rounded-full bg-spirited-dark p-5 text-white",
-            clsx({"bg-black-40": !favs.length})
-          )}
-        />
-        Email
-      </button>
-      <button
-        className="text-center font-semibold hocus:underline"
-        onClick={() => copyToClip(copyUrl)}
-        data-course-shared="Favorites"
-        disabled={!favs.length}
-      >
-        <ClipboardDocumentIcon
-          width={30}
-          className={twMerge(
-            "mb-4 block w-full rounded-full bg-spirited-dark p-5 text-white",
-            clsx({"bg-black-40": !favs.length})
-          )}
-        />
-        Copy
-      </button>
-    </div>
+    <>
+      <div className="mt-12 flex flex-row justify-between gap-5 *:max-w-60 *:flex-1 *:shrink-0 @md:gap-20">
+        <button
+          className="text-center font-semibold text-archway-dark no-underline hocus:underline"
+          onClick={() => (location.href = smsCopy)}
+          data-course-shared="Favorites"
+          disabled={!favs.length}
+        >
+          <ChatBubbleLeftEllipsisIcon
+            width={30}
+            className={twMerge(
+              "mb-4 block w-full rounded-full bg-spirited-dark p-5 text-white",
+              clsx({"bg-black-40": !favs.length})
+            )}
+          />
+          Text
+        </button>
+        <button
+          className="text-center font-semibold text-archway-dark no-underline hocus:underline"
+          onClick={() => (location.href = emailCopy)}
+          data-course-shared="Favorites"
+          disabled={!favs.length}
+        >
+          <EnvelopeIcon
+            width={30}
+            className={twMerge(
+              "mb-4 block w-full rounded-full bg-spirited-dark p-5 text-white",
+              clsx({"bg-black-40": !favs.length})
+            )}
+          />
+          Email
+        </button>
+        <button
+          className="text-center font-semibold hocus:underline"
+          onClick={() => copyToClip(copyUrl)}
+          data-course-shared="Favorites"
+          disabled={!favs.length}
+        >
+          <ClipboardDocumentIcon
+            width={30}
+            className={twMerge(
+              "mb-4 block w-full rounded-full bg-spirited-dark p-5 text-white",
+              clsx({"bg-black-40": !favs.length})
+            )}
+          />
+          Copy
+        </button>
+      </div>
+      <ToastContainer
+        position="bottom-left"
+        autoClose={5000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick={false}
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+        theme="dark"
+      />
+    </>
   )
 }
 

diff --git a/yarn.lock b/yarn.lock
@@ -14697,6 +14697,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-toastify@npm:^11.0.2":
+  version: 11.0.2
+  resolution: "react-toastify@npm:11.0.2"
+  dependencies:
+    clsx: "npm:^2.1.1"
+  peerDependencies:
+    react: ^18 || ^19
+    react-dom: ^18 || ^19
+  checksum: 10c0/e1ba01846782d47d0bf9cec7e2b4804f9af30e50a203786523f16db33691c1491f2382832e7ec4b69c583d3634ea0e3efb383da00ca9076bcf4bdd906a54a85f
+  languageName: node
+  linkType: hard
+
 "react-youtube@npm:^10.1.0":
   version: 10.1.0
   resolution: "react-youtube@npm:10.1.0"
@@ -16192,6 +16204,7 @@ __metadata:
     react-slick: "npm:^0.30.2"
     react-super-responsive-table: "npm:^6.0.0"
     react-tiny-oembed: "npm:^1.1.0"
+    react-toastify: "npm:^11.0.2"
     react-youtube: "npm:^10.1.0"
     react-zendesk: "npm:^0.1.13"
     sharp: "npm:^0.33.5"