From ef3e8f38d64e9e779f1cef166b295e0c51d3742a Mon Sep 17 00:00:00 2001 From: chark1es Date: Sat, 1 Mar 2025 04:37:33 -0800 Subject: [PATCH] Fix toast hydration --- src/components/dashboard/EventsSection.astro | 774 ++++++++-------- .../dashboard/EventsSection/EventCheckIn.tsx | 103 +-- .../dashboard/Officer_EventRequestForm.astro | 10 +- .../Officer_EventRequestManagement.astro | 6 +- .../reimbursement/ReimbursementForm.tsx | 4 +- .../reimbursement/ReimbursementList.tsx | 2 - .../dashboard/reimbursement/ToastProvider.tsx | 19 - .../dashboard/universal/ToastProvider.tsx | 31 + src/pages/dashboard.astro | 837 +++++++++--------- 9 files changed, 855 insertions(+), 931 deletions(-) delete mode 100644 src/components/dashboard/reimbursement/ToastProvider.tsx create mode 100644 src/components/dashboard/universal/ToastProvider.tsx diff --git a/src/components/dashboard/EventsSection.astro b/src/components/dashboard/EventsSection.astro index 5b4a94e..41dd3d7 100644 --- a/src/components/dashboard/EventsSection.astro +++ b/src/components/dashboard/EventsSection.astro @@ -2,362 +2,297 @@ import FilePreview from "./universal/FilePreview"; import EventCheckIn from "./EventsSection/EventCheckIn"; import EventLoad from "./EventsSection/EventLoad"; +import { Icon } from "astro-icon/components"; +import { Get } from "../../scripts/pocketbase/Get"; +import { toast } from "react-hot-toast"; ---
-
-

Events

-

- View and manage your IEEE UCSD events -

-
- -
- -
- +
+

Events

+

+ View and manage your IEEE UCSD events +

- -
-
-
- Coming Soon +
+ +
+
-
-

- Event Registration -

-
- -
- - + + +
+
+
+ Coming Soon +
+
+

+ Event Registration +

+
+ +
+ + +
+
+
-
-
-
- +
-
-
-
-

- Event Files -

- -
- -
+
+
+
+

+ Event Files +

+ +
+ +
-
- +
+ +
-
-
- -
+
+ +
-
-
-
- -

-

-
+
+
+
+ +

+

+
+
+
+ +
+ +
+
-
- -
- -
-
-
-
- -
+
+ +
diff --git a/src/components/dashboard/EventsSection/EventCheckIn.tsx b/src/components/dashboard/EventsSection/EventCheckIn.tsx index 1287283..a3518a0 100644 --- a/src/components/dashboard/EventsSection/EventCheckIn.tsx +++ b/src/components/dashboard/EventsSection/EventCheckIn.tsx @@ -6,6 +6,7 @@ import { SendLog } from "../../../scripts/pocketbase/SendLog"; import { DataSyncService } from "../../../scripts/database/DataSyncService"; import { Collections } from "../../../schemas/pocketbase/schema"; import { Icon } from "@iconify/react"; +import toast from "react-hot-toast"; import type { Event, AttendeeEntry } from "../../../schemas/pocketbase"; // Extended Event interface with additional properties needed for this component @@ -17,77 +18,6 @@ interface ExtendedEvent extends Event { // When fetching events, UTC dates are converted to local time. // When saving events, local dates are converted back to UTC. -// Toast management system -const createToast = ( - message: string, - type: "success" | "error" | "warning" = "success" -) => { - let toastContainer = document.querySelector(".toast-container"); - if (!toastContainer) { - toastContainer = document.createElement("div"); - toastContainer.className = "toast-container fixed bottom-4 right-4 z-50"; - document.body.appendChild(toastContainer); - } - - const existingToasts = document.querySelectorAll(".toast-container .toast"); - if (existingToasts.length >= 2) { - const oldestToast = existingToasts[0]; - oldestToast.classList.add("toast-exit"); - setTimeout(() => oldestToast.remove(), 150); - } - - // Update positions of existing toasts - existingToasts.forEach((t) => { - const toast = t as HTMLElement; - const currentIndex = parseInt(toast.getAttribute("data-index") || "0"); - toast.setAttribute("data-index", (currentIndex + 1).toString()); - }); - - const toast = document.createElement("div"); - toast.className = "toast translate-x-full"; - toast.setAttribute("data-index", "0"); - - // Update alert styling based on type - const alertClass = - type === "success" - ? "alert-success bg-success text-success-content" - : type === "error" - ? "alert-error bg-error text-error-content" - : "alert-warning bg-warning text-warning-content"; - - const iconName = type === "success" - ? "heroicons:check-circle" - : type === "error" - ? "heroicons:x-circle" - : "heroicons:exclamation-triangle"; - - toast.innerHTML = ` -
-
- - ${message} -
-
- `; - - toastContainer.appendChild(toast); - - // Force a reflow to ensure the animation triggers - toast.offsetHeight; - - // Add the transition class and remove transform - toast.classList.add("transition-all", "duration-300", "ease-out"); - requestAnimationFrame(() => { - toast.classList.remove("translate-x-full"); - }); - - // Setup exit animation - setTimeout(() => { - toast.classList.add("toast-exit"); - setTimeout(() => toast.remove(), 150); - }, 3000); -}; - const EventCheckIn = () => { const [currentCheckInEvent, setCurrentCheckInEvent] = useState(null); const [isLoading, setIsLoading] = useState(false); @@ -101,7 +31,7 @@ const EventCheckIn = () => { const currentUser = auth.getCurrentUser(); if (!currentUser) { - createToast("You must be logged in to check in to events", "error"); + toast.error("You must be logged in to check in to events"); return; } @@ -151,7 +81,7 @@ const EventCheckIn = () => { await completeCheckIn(event, null); } } catch (error: any) { - createToast(error?.message || "Failed to check in to event", "error"); + toast.error(error?.message || "Failed to check in to event"); } } @@ -171,7 +101,7 @@ const EventCheckIn = () => { const userId = auth.getUserId(); if (!userId) { - createToast("You must be logged in to check in to an event", "error"); + toast.error("You must be logged in to check in to an event"); return; } @@ -184,7 +114,14 @@ const EventCheckIn = () => { ); if (isAlreadyCheckedIn) { - createToast("You are already checked in to this event", "warning"); + toast("You are already checked in to this event", { + icon: '⚠️', + style: { + borderRadius: '10px', + background: '#FFC107', + color: '#000', + }, + }); return; } @@ -243,12 +180,11 @@ const EventCheckIn = () => { } // Show success message with points if awarded - createToast( + toast.success( `Successfully checked in to ${event.event_name}${event.points_to_reward > 0 ? ` (+${event.points_to_reward} points!)` : "" - }`, - "success" + }` ); // Log the check-in @@ -265,7 +201,7 @@ const EventCheckIn = () => { setFoodInput(""); } } catch (error: any) { - createToast(error?.message || "Failed to check in to event", "error"); + toast.error(error?.message || "Failed to check in to event"); } } @@ -296,7 +232,14 @@ const EventCheckIn = () => { input.value = ""; }); } else { - createToast("Please enter an event code", "warning"); + toast("Please enter an event code", { + icon: '⚠️', + style: { + borderRadius: '10px', + background: '#FFC107', + color: '#000', + }, + }); } }}>
diff --git a/src/components/dashboard/Officer_EventRequestForm.astro b/src/components/dashboard/Officer_EventRequestForm.astro index 7f0fdff..a532ac6 100644 --- a/src/components/dashboard/Officer_EventRequestForm.astro +++ b/src/components/dashboard/Officer_EventRequestForm.astro @@ -4,7 +4,10 @@ import { Get } from "../../scripts/pocketbase/Get"; import EventRequestForm from "./Officer_EventRequestForm/EventRequestForm"; import UserEventRequests from "./Officer_EventRequestForm/UserEventRequests"; import { Collections } from "../../schemas/pocketbase/schema"; -import { Toaster } from "react-hot-toast"; +import { Icon } from "astro-icon/components"; +import { Create } from "../../scripts/pocketbase/Create"; +import { Update } from "../../scripts/pocketbase/Update"; +import { toast } from "react-hot-toast"; // Import the EventRequest type from UserEventRequests to ensure consistency import type { EventRequest as UserEventRequest } from "./Officer_EventRequestForm/UserEventRequests"; @@ -118,8 +121,9 @@ if (auth.isAuthenticated()) {
- - + + + +