toast

src/components/dashboard/Officer_EventRequestForm.astro

@@ -3,9 +3,8 @@ import { Authentication } from "../../scripts/pocketbase/Authentication";
 import { Update } from "../../scripts/pocketbase/Update";
 import { FileManager } from "../../scripts/pocketbase/FileManager";
 import { Get } from "../../scripts/pocketbase/Get";
-import { toast } from "react-hot-toast";
+import { toast, Toaster } from "react-hot-toast";
-import Toast from "./universal/Toast";
+
-import { Icon } from "@iconify/react";
 
 // Form sections
 import PRSection from "./Officer_EventRequestForm/PRSection";
@@ -58,7 +57,7 @@ if (auth.isAuthenticated()) {
 ---
 
 <div class="w-full max-w-4xl mx-auto p-6">
-  <Toast client:load />
+  <toast client:load />
   <h1
     class="text-3xl font-bold mb-8 bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent"
   >
@@ -291,7 +290,6 @@ if (auth.isAuthenticated()) {
   import { FileManager } from "../../scripts/pocketbase/FileManager";
   import { Get } from "../../scripts/pocketbase/Get";
   import { toast } from "react-hot-toast";
-  import { showLoadingToast, showSuccessToast, showErrorToast } from "./Officer_EventRequestForm/ToastNotifications";
 
   // Add TypeScript interfaces
   interface EventRequest {
@@ -346,7 +344,7 @@ if (auth.isAuthenticated()) {
       }
 
       // Show loading toast
-      const loadingToastId = toast.custom(showLoadingToast, { duration: 0 });
+      const loadingToastId = toast.loading('Submitting event request...');
 
       // Get graphics need value
       const needsGraphics = form.querySelector<HTMLInputElement>('input[name="needsGraphics"]:checked')?.value === "yes";
@@ -421,19 +419,15 @@ if (auth.isAuthenticated()) {
         }
       }
 
-      // Dismiss loading toast
+      // Dismiss loading toast and show success
       toast.dismiss(loadingToastId);
-
+      toast.success('Event request submitted successfully!');
-      // Show success toast
-      toast.custom(() => showSuccessToast('Event request submitted successfully!'));
 
       // Reset form
       form.reset();
     } catch (error) {
       console.error("Error submitting form:", error);
-      
+      toast.error('Failed to submit event request. Please try again.');
-      // Show error toast
-      toast.custom(() => showErrorToast('Failed to submit event request. Please try again.'));
     }
   });
 
@@ -465,13 +459,10 @@ if (auth.isAuthenticated()) {
         }
 
         await update.updateFields("event_request", data.id || "", data);
-
+        toast.success('Draft saved successfully!');
-        // Show success toast
-        toast.custom(() => showSuccessToast('Draft saved successfully!'));
       } catch (error) {
         console.error("Error saving draft:", error);
-        // Show error toast
+        toast.error('Error saving draft. Please try again.');
-        toast.custom(() => showErrorToast('Error saving draft. Please try again.'));
       }
     });
 
@@ -522,7 +513,7 @@ if (auth.isAuthenticated()) {
       })
       .catch((error: Error) => {
         console.error("Failed to load request:", error);
-        alert("Failed to load request. Please try again.");
+        toast.error("Failed to load request. Please try again.");
       });
   };
 
@@ -557,7 +548,7 @@ if (auth.isAuthenticated()) {
       })
       .catch((error: Error) => {
         console.error("Failed to load request:", error);
-        alert("Failed to load request details. Please try again.");
+        toast.error("Failed to load request details. Please try again.");
       });
   };
 </script>

src/components/dashboard/Officer_EventRequestForm/ToastNotifications.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { Icon } from '@iconify/react';
-
-export const showLoadingToast = () => (
-    <div className="alert alert-info">
-        <Icon icon="mdi:loading" className="h-6 w-6 animate-spin" />
-        <span>Submitting event request...</span>
-    </div>
-);
-
-export const showSuccessToast = (message: string) => (
-    <div className="alert alert-success">
-        <Icon icon="mdi:check-circle" className="h-6 w-6" />
-        <span>{message}</span>
-    </div>
-);
-
-export const showErrorToast = (message: string) => (
-    <div className="alert alert-error">
-        <Icon icon="mdi:error" className="h-6 w-6" />
-        <span>{message}</span>
-    </div>
-);
-
-export const showWarningToast = (message: string) => (
-    <div className="alert alert-warning">
-        <Icon icon="mdi:warning" className="h-6 w-6" />
-        <span>{message}</span>
-    </div>
-);
-
-export const showInfoToast = (message: string) => (
-    <div className="alert alert-info">
-        <Icon icon="mdi:information" className="h-6 w-6" />
-        <span>{message}</span>
-    </div>
-); 

src/components/dashboard/universal/Toast.tsx

@@ -1,44 +0,0 @@
-import React from 'react';
-import { Toaster } from 'react-hot-toast';
-
-// This is just a wrapper component to make react-hot-toast work with Astro
-const Toast: React.FC = () => {
-    return (
-        <Toaster
-            position="top-center"
-            toastOptions={{
-                duration: 3000,
-                className: 'backdrop-blur-sm',
-                style: {
-                    background: 'hsl(var(--b2, 0 0% 90%))',
-                    color: 'hsl(var(--bc, 0 0% 20%))',
-                    padding: '16px',
-                    boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
-                    borderRadius: '0.75rem',
-                },
-                success: {
-                    style: {
-                        background: 'hsl(var(--su, 120 100% 90%))',
-                        border: '1px solid hsl(var(--su, 120 100% 25%))',
-                    },
-                    iconTheme: {
-                        primary: 'hsl(var(--su, 120 100% 25%))',
-                        secondary: 'hsl(var(--b1, 0 0% 100%))',
-                    },
-                },
-                error: {
-                    style: {
-                        background: 'hsl(var(--er, 0 100% 90%))',
-                        border: '1px solid hsl(var(--er, 0 100% 25%))',
-                    },
-                    iconTheme: {
-                        primary: 'hsl(var(--er, 0 100% 25%))',
-                        secondary: 'hsl(var(--b1, 0 0% 100%))',
-                    },
-                },
-            }}
-        />
-    );
-};
-
-export default Toast;