Toast Refactor

package.json

@@ -17,7 +17,7 @@
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-popover": "^1.1.13",
     "@radix-ui/react-select": "^2.2.4",
-    "@radix-ui/react-toast": "^1.2.14",
+    "@radix-ui/react-toast": "^1.2.15",
     "clsx": "^2.1.1",
     "date-fns-tz": "^3.2.0",
     "eslint-plugin-import": "^2.32.0",

src/app/(event)/[event-code]/page-client.tsx

@@ -5,7 +5,7 @@ import { useState } from "react";
 import { Pencil1Icon, Pencil2Icon } from "@radix-ui/react-icons";
 import Link from "next/link";
 
-import CopyToast from "@/components/copy-toast";
+import CopyToastButton from "@/components/copy-toast-button";
 import HeaderSpacer from "@/components/header-spacer";
 import { ResultsAvailabilityMap } from "@/core/availability/types";
 import { EventRange } from "@/core/event/types";
@@ -60,7 +60,7 @@ export default function ClientPage({
               <span className="hidden md:block">Edit Event</span>
             </Link>
           )}
-          <CopyToast code={eventCode} />
+          <CopyToastButton code={eventCode} />
           <Link
             className="border-blue bg-blue dark:border-red dark:bg-red dark:hover:bg-red/25 hover:text-violet flex flex-row items-center gap-2 rounded-full border-2 p-2 text-sm text-white hover:bg-blue-100"
             href={`/${eventCode}/painting`}

src/app/(event)/[event-code]/painting/page-client.tsx

@@ -4,7 +4,7 @@ import { useState } from "react";
 
 import { useRouter } from "next/navigation";
 
-import CopyToast from "@/components/copy-toast";
+import CopyToastButton from "@/components/copy-toast-button";
 import HeaderSpacer from "@/components/header-spacer";
 import { useAvailability } from "@/core/availability/use-availability";
 import { convertAvailabilityToGrid } from "@/core/availability/utils";
@@ -40,15 +40,6 @@ export default function ClientPage({
   const { addToast } = useToast();
   const [errors, setErrors] = useState<Record<string, string>>({});
 
-  const createErrorToast = (message: string) => {
-    addToast({
-      type: "error",
-      id: Date.now() + Math.random(),
-      title: "ERROR",
-      message: message,
-    });
-  };
-
   const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (errors.displayName) setErrors((prev) => ({ ...prev, displayName: "" }));
     else if (e.target.value === "") {
@@ -68,7 +59,9 @@ export default function ClientPage({
       const validationErrors = await validateAvailabilityData(state, eventCode);
       if (Object.keys(validationErrors).length > 0) {
         setErrors(validationErrors);
-        Object.values(validationErrors).forEach(createErrorToast);
+        Object.values(validationErrors).forEach((error) =>
+          addToast("error", error),
+        );
         return;
       }
 
@@ -91,10 +84,10 @@ export default function ClientPage({
       });
 
       if (response.ok) router.push(`/${eventCode}`);
-      else createErrorToast(formatApiError(await response.json()));
+      else addToast("error", formatApiError(await response.json()));
     } catch (error) {
       console.error("Error submitting availability:", error);
-      createErrorToast("An unexpected error occurred. Please try again.");
+      addToast("error", "An unexpected error occurred. Please try again.");
     }
   };
 
@@ -109,7 +102,7 @@ export default function ClientPage({
         </div>
 
         <div className="flex items-center gap-2">
-          <CopyToast code={eventCode} />
+          <CopyToastButton code={eventCode} />
           {initialData && (
             <button
               onClick={() => {

src/components/copy-toast.tsx → src/components/copy-toast-button.tsx

@@ -1,32 +1,25 @@
 "use client";
 
+import { MouseEvent } from "react";
+
 import { CopyIcon } from "@radix-ui/react-icons";
 
 import { useToast } from "@/features/toast/context";
 
-export default function CopyToast({ code }: { code: string }) {
+export default function CopyToastButton({ code }: { code: string }) {
   const { addToast } = useToast();
   const currentURL =
     typeof window !== "undefined" ? `${window.location.origin}/${code}` : "";
 
-  const copyToClipboard = async () => {
+  const copyToClipboard = async (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault(); // avoid triggering the parent link
+
     try {
       await navigator.clipboard.writeText(currentURL);
-      addToast({
-        type: "success",
-        id: Date.now() + Math.random(),
-        title: "COPIED EVENT LINK!",
-        message: currentURL,
-        icon: <CopyIcon className="col-start-1 row-span-2 h-5 w-5" />,
-      });
+      addToast("copy", "Link copied to clipboard!");
     } catch (err) {
       console.error("Failed to copy: ", err);
-      addToast({
-        type: "error",
-        id: Date.now() + Math.random(),
-        title: "COPY FAILED",
-        message: "Could not copy link to clipboard.",
-      });
+      addToast("error", "Could not copy link to clipboard.");
     }
   };
 

src/features/dashboard/components/copy-button.tsx

@@ -18,23 +18,13 @@ export default function DashboardCopyButton({
 
   const copyToClipboard = async (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault(); // avoid triggering the parent link
+
     try {
       await navigator.clipboard.writeText(eventUrl);
-      addToast({
-        type: "success",
-        id: Date.now() + Math.random(),
-        title: "COPIED EVENT LINK!",
-        message: eventUrl,
-        icon: <CopyIcon className="col-start-1 row-span-2 h-5 w-5" />,
-      });
+      addToast("copy", "Link copied to clipboard!");
     } catch (err) {
       console.error("Failed to copy: ", err);
-      addToast({
-        type: "error",
-        id: Date.now() + Math.random(),
-        title: "COPY FAILED",
-        message: "Could not copy link to clipboard.",
-      });
+      addToast("error", "Could not copy link to clipboard.");
     }
   };
 

src/features/event/editor/editor.tsx

@@ -48,15 +48,6 @@ export default function EventEditor({ type, initialData }: EventEditorProps) {
   const { addToast } = useToast();
   const [errors, setErrors] = useState<Record<string, string>>({});
 
-  const createErrorToast = (message: string) => {
-    addToast({
-      type: "error",
-      id: Date.now() + Math.random(),
-      title: "ERROR",
-      message: message,
-    });
-  };
-
   const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (errors.title) setErrors((prev) => ({ ...prev, title: "" }));
     else if (e.target.value === "") {
@@ -80,7 +71,9 @@ export default function EventEditor({ type, initialData }: EventEditorProps) {
       const validationErrors = await validateEventData(type, state);
       if (Object.keys(validationErrors).length > 0) {
         setErrors(validationErrors);
-        Object.values(validationErrors).forEach(createErrorToast);
+        Object.values(validationErrors).forEach((error) =>
+          addToast("error", error),
+        );
         return;
       }
 
@@ -92,7 +85,7 @@ export default function EventEditor({ type, initialData }: EventEditorProps) {
       );
     } catch (error) {
       console.error("Submission failed:", error);
-      createErrorToast("An unexpected error occurred. Please try again.");
+      addToast("error", "An unexpected error occurred. Please try again.");
     } finally {
       isSubmitting.current = false;
     }