From 1e98df9c53579738229d0953aca1b3a63c68c2cc Mon Sep 17 00:00:00 2001 From: chark1es Date: Mon, 10 Mar 2025 16:33:41 -0700 Subject: [PATCH] fix error toasts showing when not logged in --- .../dashboard/EventsSection/EventLoad.tsx | 5 ++++ .../EventRequestForm.tsx | 10 +++++-- .../SettingsSection/EmailRequestSettings.tsx | 10 +++++-- .../PasswordChangeSettings.tsx | 7 +++-- .../SettingsSection/ResumeSettings.tsx | 11 ++++++-- .../SettingsSection/UserProfileSettings.tsx | 16 +++++++++-- .../reimbursement/ReimbursementForm.tsx | 20 ++++++++++++- .../reimbursement/ReimbursementList.tsx | 5 ++++ .../dashboard/universal/ToastProvider.tsx | 13 +++++++++ src/pages/dashboard.astro | 21 ++++++++++++-- src/scripts/database/AuthSyncService.ts | 28 ++++++++++++------- 11 files changed, 122 insertions(+), 24 deletions(-) diff --git a/src/components/dashboard/EventsSection/EventLoad.tsx b/src/components/dashboard/EventsSection/EventLoad.tsx index 616e228..bb788c5 100644 --- a/src/components/dashboard/EventsSection/EventLoad.tsx +++ b/src/components/dashboard/EventsSection/EventLoad.tsx @@ -249,6 +249,11 @@ const EventLoad = () => { // Check if user is authenticated if (!auth.isAuthenticated()) { + // Silently return without error when on dashboard page + if (window.location.pathname.includes('/dashboard')) { + setLoading(false); + return; + } console.error("User not authenticated, cannot load events"); setLoading(false); return; diff --git a/src/components/dashboard/Officer_EventRequestForm/EventRequestForm.tsx b/src/components/dashboard/Officer_EventRequestForm/EventRequestForm.tsx index 99ef977..6f2029c 100644 --- a/src/components/dashboard/Officer_EventRequestForm/EventRequestForm.tsx +++ b/src/components/dashboard/Officer_EventRequestForm/EventRequestForm.tsx @@ -234,14 +234,20 @@ const EventRequestForm: React.FC = () => { const dataSync = DataSyncService.getInstance(); if (!auth.isAuthenticated()) { - toast.error('You must be logged in to submit an event request'); + // Don't show error toast on dashboard page for unauthenticated users + if (!window.location.pathname.includes('/dashboard')) { + toast.error('You must be logged in to submit an event request'); + } throw new Error('You must be logged in to submit an event request'); } // Create the event request record const userId = auth.getUserId(); if (!userId) { - toast.error('User ID not found'); + // Don't show error toast on dashboard page for unauthenticated users + if (auth.isAuthenticated() || !window.location.pathname.includes('/dashboard')) { + toast.error('User ID not found'); + } throw new Error('User ID not found'); } diff --git a/src/components/dashboard/SettingsSection/EmailRequestSettings.tsx b/src/components/dashboard/SettingsSection/EmailRequestSettings.tsx index 6d3593f..db26c5e 100644 --- a/src/components/dashboard/SettingsSection/EmailRequestSettings.tsx +++ b/src/components/dashboard/SettingsSection/EmailRequestSettings.tsx @@ -28,7 +28,10 @@ export default function EmailRequestSettings() { setLoading(true); const currentUser = auth.getCurrentUser(); if (!currentUser) { - toast.error('You must be logged in to access this page'); + // Don't show toast on dashboard page for unauthenticated users + if (!window.location.pathname.includes('/dashboard')) { + toast.error('You must be logged in to access this page'); + } return; } @@ -47,7 +50,10 @@ export default function EmailRequestSettings() { } } catch (error) { console.error('Error loading user data:', error); - toast.error('Failed to load user data. Please try again later.'); + // Don't show toast on dashboard page for unauthenticated users + if (auth.isAuthenticated() || !window.location.pathname.includes('/dashboard')) { + toast.error('Failed to load user data. Please try again later.'); + } } finally { setLoading(false); } diff --git a/src/components/dashboard/SettingsSection/PasswordChangeSettings.tsx b/src/components/dashboard/SettingsSection/PasswordChangeSettings.tsx index 9deb4f3..513b1c8 100644 --- a/src/components/dashboard/SettingsSection/PasswordChangeSettings.tsx +++ b/src/components/dashboard/SettingsSection/PasswordChangeSettings.tsx @@ -53,8 +53,11 @@ export default function PasswordChangeSettings({ try { const user = auth.getCurrentUser(); if (!user) { - console.error("User not authenticated"); - toast.error("You must be logged in to change your password"); + // Don't show error on dashboard page for unauthenticated users + if (!window.location.pathname.includes('/dashboard')) { + console.error("User not authenticated"); + toast.error("You must be logged in to change your password"); + } return; } diff --git a/src/components/dashboard/SettingsSection/ResumeSettings.tsx b/src/components/dashboard/SettingsSection/ResumeSettings.tsx index 6769619..031b130 100644 --- a/src/components/dashboard/SettingsSection/ResumeSettings.tsx +++ b/src/components/dashboard/SettingsSection/ResumeSettings.tsx @@ -27,7 +27,11 @@ export default function ResumeSettings() { setLoading(true); const currentUser = auth.getCurrentUser(); if (!currentUser) { - throw new Error('User not authenticated'); + // Don't show error toast on dashboard page for unauthenticated users + if (!window.location.pathname.includes('/dashboard')) { + throw new Error('User not authenticated'); + } + return; } const userData = await get.getOne('users', currentUser.id); @@ -42,7 +46,10 @@ export default function ResumeSettings() { } } catch (error) { console.error('Error fetching user data:', error); - toast.error('Failed to load user data'); + // Don't show error toast on dashboard page for unauthenticated users + if (auth.isAuthenticated() || !window.location.pathname.includes('/dashboard')) { + toast.error('Failed to load user data'); + } } finally { setLoading(false); } diff --git a/src/components/dashboard/SettingsSection/UserProfileSettings.tsx b/src/components/dashboard/SettingsSection/UserProfileSettings.tsx index 1994ab1..1ad1487 100644 --- a/src/components/dashboard/SettingsSection/UserProfileSettings.tsx +++ b/src/components/dashboard/SettingsSection/UserProfileSettings.tsx @@ -46,7 +46,11 @@ export default function UserProfileSettings({ try { const currentUser = auth.getCurrentUser(); if (!currentUser) { - throw new Error('User not authenticated'); + // Don't show error toast on dashboard page for unauthenticated users + if (!window.location.pathname.includes('/dashboard')) { + throw new Error('User not authenticated'); + } + return; } // Get the Logto user ID from PocketBase's external auth collection @@ -102,11 +106,17 @@ export default function UserProfileSettings({ } } catch (error) { console.error('Error fetching external auth record:', error); - toast.error('Could not determine your user ID. Please try again later or contact support.'); + // Don't show error toast on dashboard page for unauthenticated users + if (auth.isAuthenticated() || !window.location.pathname.includes('/dashboard')) { + toast.error('Could not determine your user ID. Please try again later or contact support.'); + } } } catch (error) { console.error('Error loading user data:', error); - toast.error('Failed to load user data. Please try again later.'); + // Don't show error toast on dashboard page for unauthenticated users + if (auth.isAuthenticated() || !window.location.pathname.includes('/dashboard')) { + toast.error('Failed to load user data. Please try again later.'); + } } finally { setLoading(false); } diff --git a/src/components/dashboard/reimbursement/ReimbursementForm.tsx b/src/components/dashboard/reimbursement/ReimbursementForm.tsx index a060d60..debbbfa 100644 --- a/src/components/dashboard/reimbursement/ReimbursementForm.tsx +++ b/src/components/dashboard/reimbursement/ReimbursementForm.tsx @@ -117,13 +117,22 @@ export default function ReimbursementForm() { const userId = pb.authStore.model?.id; if (!userId) { + // Silently return without error when on dashboard page + if (window.location.pathname.includes('/dashboard')) { + setIsLoading(false); + return; + } throw new Error('User not authenticated'); } const user = await pb.collection('users').getOne(userId); setHasZelleInfo(!!user.zelle_information); } catch (error) { - console.error('Error checking Zelle information:', error); + // Only log error if not on dashboard page or if it's not an authentication error + if (!window.location.pathname.includes('/dashboard') || + !(error instanceof Error && error.message === 'User not authenticated')) { + console.error('Error checking Zelle information:', error); + } } finally { setIsLoading(false); } @@ -175,6 +184,10 @@ export default function ReimbursementForm() { const userId = pb.authStore.model?.id; if (!userId) { + // Silently return without error when on dashboard page + if (window.location.pathname.includes('/dashboard')) { + return; + } toast.error('User not authenticated'); throw new Error('User not authenticated'); } @@ -244,6 +257,11 @@ export default function ReimbursementForm() { const userId = pb.authStore.model?.id; if (!userId) { + // Silently return without error when on dashboard page + if (window.location.pathname.includes('/dashboard')) { + setIsSubmitting(false); + return; + } throw new Error('User not authenticated'); } diff --git a/src/components/dashboard/reimbursement/ReimbursementList.tsx b/src/components/dashboard/reimbursement/ReimbursementList.tsx index 12b4618..91c1c43 100644 --- a/src/components/dashboard/reimbursement/ReimbursementList.tsx +++ b/src/components/dashboard/reimbursement/ReimbursementList.tsx @@ -145,6 +145,11 @@ export default function ReimbursementList() { const userId = pb.authStore.model?.id; if (!userId) { + // Silently return without error when on dashboard page + if (window.location.pathname.includes('/dashboard')) { + setLoading(false); + return; + } throw new Error('User not authenticated'); } diff --git a/src/components/dashboard/universal/ToastProvider.tsx b/src/components/dashboard/universal/ToastProvider.tsx index 7b5563c..730ffb2 100644 --- a/src/components/dashboard/universal/ToastProvider.tsx +++ b/src/components/dashboard/universal/ToastProvider.tsx @@ -1,7 +1,20 @@ import { Toaster } from 'react-hot-toast'; +import { useState, useEffect } from 'react'; // Centralized toast provider to ensure consistent rendering export default function ToastProvider() { + const [isMounted, setIsMounted] = useState(false); + + // Only render the Toaster component on the client side + useEffect(() => { + setIsMounted(true); + }, []); + + // Don't render anything during SSR + if (!isMounted) { + return null; + } + return ( {}; + } + // Initialize page state const pageLoadingState = document.getElementById("pageLoadingState"); const pageErrorState = document.getElementById("pageErrorState"); @@ -580,11 +585,20 @@ const components = Object.fromEntries( // Function to initialize the page const initializePage = async () => { try { - // Initialize auth sync for IndexedDB - await initAuthSync(); + // Define a temporary toast function that does nothing for unauthenticated users + const originalToast = window.toast; // Check if user is authenticated if (!auth.isAuthenticated()) { + // Temporarily override toast function to prevent notifications for unauthenticated users + window.toast = () => {}; + + // Initialize auth sync for IndexedDB (but toast notifications will be suppressed) + await initAuthSync(); + + // Restore original toast function + window.toast = originalToast; + // console.log("User not authenticated"); if (pageLoadingState) pageLoadingState.classList.add("hidden"); if (notAuthenticatedState) @@ -592,6 +606,9 @@ const components = Object.fromEntries( return; } + // Initialize auth sync for IndexedDB (for authenticated users) + await initAuthSync(); + if (pageLoadingState) pageLoadingState.classList.remove("hidden"); if (pageErrorState) pageErrorState.classList.add("hidden"); if (notAuthenticatedState) diff --git a/src/scripts/database/AuthSyncService.ts b/src/scripts/database/AuthSyncService.ts index 2375cd1..48641d1 100644 --- a/src/scripts/database/AuthSyncService.ts +++ b/src/scripts/database/AuthSyncService.ts @@ -4,6 +4,16 @@ import { DexieService } from "./DexieService"; import { Collections } from "../../schemas/pocketbase/schema"; import { SendLog } from "../pocketbase/SendLog"; +// Define the window interface to include the toast function +declare global { + interface Window { + toast?: ( + message: string, + options?: { type: "info" | "success" | "warning" | "error" }, + ) => void; + } +} + // Check if we're in a browser environment const isBrowser = typeof window !== "undefined" && typeof window.indexedDB !== "undefined"; @@ -279,6 +289,14 @@ export class AuthSyncService { // Only run in browser environment if (!isBrowser) return; + // Don't show notifications if user is not authenticated and on the dashboard page + if ( + !this.auth.isAuthenticated() && + window.location.pathname.includes("/dashboard") + ) { + return; + } + // Check if toast function exists (from react-hot-toast or similar) if (typeof window.toast === "function") { window.toast(message, { type }); @@ -315,13 +333,3 @@ export class AuthSyncService { return { ...this.syncErrors }; } } - -// Add toast type to window for TypeScript -declare global { - interface Window { - toast?: ( - message: string, - options?: { type: "info" | "success" | "warning" | "error" }, - ) => void; - } -}