From c65eefebd3f363af8453ccd4a5aea5ad1395f6ed Mon Sep 17 00:00:00 2001
From: Rufai Ahmed <abbeyrufai234@gmail.com>
Date: Tue, 23 Jun 2026 11:01:38 +0100
Subject: [PATCH] feat(web): use Sonner for toasts on discover/organizers pages

---
 apps/web/app/discover/page.tsx   | 12 ++----------
 apps/web/app/layout.tsx          |  6 +++++-
 apps/web/app/organizers/page.tsx | 14 ++------------
 3 files changed, 9 insertions(+), 23 deletions(-)

diff --git a/apps/web/app/discover/page.tsx b/apps/web/app/discover/page.tsx
index 3eff5c15..8c2786df 100644
--- a/apps/web/app/discover/page.tsx
+++ b/apps/web/app/discover/page.tsx
@@ -7,17 +7,14 @@ import { PopularEventsSection } from "@/components/events/popular-events-section
 import { OrganizerComponent } from "@/components/events/organizer-component";
 import { Footer } from "@/components/layout/footer";
 import { fetchOrganizers, type DiscoverOrganizer } from "@/utils/api";
+import { toast } from "sonner";
 
 export default function DiscoverPage() {
-  const [toastMessage, setToastMessage] = useState<string | null>(null);
   const [activeCategory, setActiveCategory] = useState<string>("All");
   const [selectedOrganizer, setSelectedOrganizer] = useState<string | null>(null);
   const [allOrganizers, setAllOrganizers] = useState<DiscoverOrganizer[]>([]);
 
-  const showErrorToast = (message: string) => {
-    setToastMessage(message);
-    window.setTimeout(() => setToastMessage(null), 3500);
-  };
+  const showErrorToast = (message: string) => toast.error(message);
 
   // Load all organizers for filtering
   useEffect(() => {
@@ -36,11 +33,6 @@ export default function DiscoverPage() {
   return (
     <main className="flex flex-col min-h-screen bg-base">
       <Navbar />
-      {toastMessage && (
-        <div className="fixed top-4 right-4 z-[60] rounded-lg bg-black px-4 py-3 text-sm text-white shadow-lg">
-          {toastMessage}
-        </div>
-      )}
       <div className="p-10 pl-45 hidden lg:block bg-base">
         <div className="flex justify-start items-center gap-4 p-5 pb-10">
           <h1 className="font-semibold md:text-4xl pl-3">Explore events</h1>
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 790c8928..0b001536 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -1,3 +1,7 @@
+// Toast notifications are powered by Sonner. The <Toaster /> below mounts the
+// single global toast portal for the whole app. Trigger toasts from any client
+// component with `import { toast } from "sonner"` then `toast.success(...)` /
+// `toast.error(...)`. Do not add additional <Toaster /> instances.
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import { Toaster } from "sonner";
@@ -47,7 +51,7 @@ export default function RootLayout({
         <Suspense fallback={null}>
           <LoadingBar />
         </Suspense>
-        <Toaster position="top-right" richColors />
+        <Toaster position="bottom-right" richColors />
         {children}
         <CookieBanner />
       </body>
diff --git a/apps/web/app/organizers/page.tsx b/apps/web/app/organizers/page.tsx
index 12e1e31e..85c49f2c 100644
--- a/apps/web/app/organizers/page.tsx
+++ b/apps/web/app/organizers/page.tsx
@@ -3,24 +3,14 @@
 import { Navbar } from "@/components/layout/navbar";
 import { Footer } from "@/components/layout/footer";
 import { OrganizerComponent } from "@/components/events/organizer-component";
-import { useState } from "react";
+import { toast } from "sonner";
 
 export default function OrganizersPage() {
-  const [toastMessage, setToastMessage] = useState<string | null>(null);
-
-  const showErrorToast = (message: string) => {
-    setToastMessage(message);
-    window.setTimeout(() => setToastMessage(null), 3500);
-  };
+  const showErrorToast = (message: string) => toast.error(message);
 
   return (
     <main className="flex flex-col min-h-screen bg-base">
       <Navbar />
-      {toastMessage && (
-        <div className="fixed top-4 right-4 z-[60] rounded-lg bg-black px-4 py-3 text-sm text-white shadow-lg">
-          {toastMessage}
-        </div>
-      )}
       <div className="p-10 pl-45 hidden lg:block bg-base">
         <div className="flex justify-start items-center gap-4 p-5 pb-10">
           <h1 className="font-semibold md:text-4xl pl-3">Explore organizers</h1>