Webmaster/ieeeucsd-org
3
1
Fork 0
Code Issues 11 Pull requests Projects Releases Packages Wiki Activity Actions

toast

Browse source
This commit is contained in:
chark1es 2025-02-24 13:25:49 -08:00
parent 2501fe4ed8
commit f69401c555
3 changed files with 11 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/components/dashboard/Officer_EventRequestForm.astro
View file

@ -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 from "./universal/Toast";
import { Icon } from "@iconify/react";
import { toast, Toaster } from "react-hot-toast";
// 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);
// Show success toast
toast.custom(() => showSuccessToast('Event request submitted successfully!'));
toast.success('Event request submitted successfully!');
// Reset form
form.reset();
} catch (error) {
console.error("Error submitting form:", error);
// Show error toast
toast.custom(() => showErrorToast('Failed to submit event request. Please try again.'));
toast.error('Failed to submit event request. Please try again.');
}
});
@ -465,13 +459,10 @@ if (auth.isAuthenticated()) {
}
await update.updateFields("event_request", data.id || "", data);
// Show success toast
toast.custom(() => showSuccessToast('Draft saved successfully!'));
toast.success('Draft saved successfully!');
} catch (error) {
console.error("Error saving draft:", error);
// Show error toast
toast.custom(() => showErrorToast('Error saving draft. Please try again.'));
toast.error('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>

37
src/components/dashboard/Officer_EventRequestForm/ToastNotifications.tsx
View file

@ -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>
);

44
src/components/dashboard/universal/Toast.tsx
View file

@ -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;