SUM-260: fixup to the copy feature

app/layout.tsx

@@ -11,6 +11,7 @@ import Editori11y from "@components/tools/editorially"
 import localFont from "next/font/local"
 import Cookiebot from "@components/elements/cookiebot"
 import Zendesk from "@components/elements/zendesk"
+import {ToastMessage} from "@components/elements/toast-message"
 
 const appleIcons: Icon[] = [60, 72, 76, 114, 120, 144, 152, 180].map(size => ({
   url: `https://www-media.stanford.edu/assets/favicon/apple-touch-icon-${size}x${size}.png`,
@@ -68,6 +69,7 @@ const RootLayout = ({children, modal}: {children: React.ReactNode; modal: React.
           <main id="main-content" className="flex-grow">
             {children}
 
+            <ToastMessage />
             <BackToTop />
           </main>
           <PageFooter />

src/components/elements/favorites-list.tsx

@@ -7,7 +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"
+import {toast} from "react-toastify"
 
 const ShareButtons = () => {
   const [, copy] = useCopyToClipboard()
@@ -16,11 +16,9 @@ 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()
+    toast("Copied!")
   }
 
   const smsCopy =
@@ -85,19 +83,6 @@ const ShareButtons = () => {
           Copy
         </button>
       </div>
-      <ToastContainer
-        progressClassName="bg-spirited-light"
-        position="bottom-left"
-        autoClose={5000}
-        hideProgressBar={false}
-        newestOnTop={false}
-        closeOnClick={false}
-        rtl={false}
-        pauseOnFocusLoss
-        draggable
-        pauseOnHover
-        theme="dark"
-      />
     </>
   )
 }

src/components/elements/shareCourses.tsx

@@ -6,6 +6,7 @@ import React, {RefObject, useCallback, useRef} from "react"
 import {twMerge} from "tailwind-merge"
 import {useCopyToClipboard, useEventListener} from "usehooks-ts"
 import useOutsideClick from "@lib/hooks/useOutsideClick"
+import {toast} from "react-toastify"
 
 type Props = {
   courseName: string
@@ -22,6 +23,7 @@ const ShareCourses = ({courseName, courseUrl, courseNum}: Props) => {
 
   const copyToClip = (text: string) => {
     copy(text).catch(_e => console.warn("An error occurred when copying to clipboard"))
+    toast("Copied!")
   }
 
   // If the user presses escape on the keyboard, close the submenus.

src/components/elements/toast-message.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import {toast, ToastContainer} from "react-toastify"
+
+export function ToastMessage() {
+  return (
+    <>
+      <p>hi</p>
+      <ToastContainer
+        progressClassName="bg-spirited-light"
+        position="bottom-left"
+        autoClose={5000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick={false}
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+        theme="dark"
+      />
+    </>
+  )
+}