diff --git a/webclient/src/components/RefreshGuardProvider/RefreshGuardProvider.tsx b/webclient/src/components/RefreshGuardProvider/RefreshGuardProvider.tsx index daf984446..4906bf413 100644 --- a/webclient/src/components/RefreshGuardProvider/RefreshGuardProvider.tsx +++ b/webclient/src/components/RefreshGuardProvider/RefreshGuardProvider.tsx @@ -1,6 +1,6 @@ -import React from 'react'; -import { useGameGuard } from 'hooks'; -import { RefreshGuardModal } from '../RefreshGuardModal/RefreshGuardModal'; +import React from "react"; +import { useGameGuard } from "hooks"; +import { RefreshGuardModal } from "../RefreshGuardModal/RefreshGuardModal"; interface RefreshGuardProviderProps { children: React.ReactNode; @@ -8,28 +8,26 @@ interface RefreshGuardProviderProps { /** * Provider component that wraps the entire app to provide refresh and navigation guarding. - * Should be placed high in the component tree, ideally in AppShell. */ -export const RefreshGuardProvider: React.FC = ({ children }) => { +export const RefreshGuardProvider: React.FC = ({ + children, +}) => { const { showNavigationModal, - setShowNavigationModal, handleConfirmNavigation, handleCancelNavigation, navigationMessage, showRefreshModal, - setShowRefreshModal, handleConfirmRefresh, handleCancelRefresh, refreshMessage, isInActiveGame, - shouldGuard } = useGameGuard(); return ( <> {children} - + {/* Custom modal for SPA navigation (React Router) */} = ({ chil confirmButtonText={isInActiveGame ? "Leave Game" : "Leave Anyway"} cancelButtonText="Stay" /> - + {/* Custom modal for browser refresh (after native dialog) */} = ({ chil /> ); -}; \ No newline at end of file +}; diff --git a/webclient/src/hooks/useNavigationGuard.ts b/webclient/src/hooks/useNavigationGuard.ts index 7675adcea..d2fc84cb1 100644 --- a/webclient/src/hooks/useNavigationGuard.ts +++ b/webclient/src/hooks/useNavigationGuard.ts @@ -61,9 +61,6 @@ export const useNavigationGuard = ({ return; // Skip navigation guard if Router is not available } - // Note: React Router v6 doesn't have built-in navigation blocking like v5 - // We'll implement a custom solution by intercepting link clicks and form submissions - const handleLinkClick = (event: Event) => { const target = event.target as HTMLElement; const link = target.closest('a');