linting fixes

This commit is contained in:
Paul Carroll 2025-08-08 17:03:20 -04:00
parent 9b6c806c00
commit 21bdaa1516
3 changed files with 21 additions and 13 deletions

View file

@ -42,7 +42,7 @@ export const RefreshGuardModal: React.FC<RefreshGuardModalProps> = ({
aria-describedby="refresh-guard-description" aria-describedby="refresh-guard-description"
maxWidth="sm" maxWidth="sm"
fullWidth fullWidth
disableEscapeKeyDown // Prevent closing with Escape key disableEscapeKeyDown
> >
<DialogTitle id="refresh-guard-title"> <DialogTitle id="refresh-guard-title">
<Box display="flex" alignItems="center" gap={1}> <Box display="flex" alignItems="center" gap={1}>
@ -69,7 +69,7 @@ export const RefreshGuardModal: React.FC<RefreshGuardModalProps> = ({
onClick={onClose} onClick={onClose}
variant="contained" variant="contained"
color="primary" color="primary"
autoFocus // Focus the safe option by default autoFocus
> >
{cancelButtonText} {cancelButtonText}
</Button> </Button>

View file

@ -26,7 +26,7 @@ interface UseNavigationGuardReturn {
export const useNavigationGuard = ({ export const useNavigationGuard = ({
shouldGuard, shouldGuard,
message = 'You have unsaved changes that will be lost.', message = 'You have unsaved changes that will be lost.',
onBeforeNavigate onBeforeNavigate,
}: UseNavigationGuardOptions): UseNavigationGuardReturn => { }: UseNavigationGuardOptions): UseNavigationGuardReturn => {
const [showModal, setShowModal] = useState(false); const [showModal, setShowModal] = useState(false);
const [pendingLocation, setPendingLocation] = useState<string | null>(null); const [pendingLocation, setPendingLocation] = useState<string | null>(null);
@ -40,7 +40,10 @@ export const useNavigationGuard = ({
location = useLocation(); location = useLocation();
} catch (error) { } catch (error) {
// React Router hooks not available - navigation guard will be disabled // React Router hooks not available - navigation guard will be disabled
console.warn('React Router not available, navigation guard disabled:', error); console.warn(
'React Router not available, navigation guard disabled:',
error
);
} }
const handleConfirmNavigation = useCallback(() => { const handleConfirmNavigation = useCallback(() => {
@ -58,7 +61,7 @@ export const useNavigationGuard = ({
useEffect(() => { useEffect(() => {
if (!shouldGuard || !location || !navigate) { if (!shouldGuard || !location || !navigate) {
return; // Skip navigation guard if Router is not available return;
} }
const handleLinkClick = (event: Event) => { const handleLinkClick = (event: Event) => {
@ -70,8 +73,13 @@ export const useNavigationGuard = ({
} }
const href = link.getAttribute('href'); const href = link.getAttribute('href');
if (!href || href.startsWith('#') || href.startsWith('http') || href.startsWith('mailto:')) { if (
return; // Allow external links, anchors, and mailto links !href ||
href.startsWith('#') ||
href.startsWith('http') ||
href.startsWith('mailto:')
) {
return;
} }
// Check if this is a React Router navigation // Check if this is a React Router navigation
@ -129,6 +137,6 @@ export const useNavigationGuard = ({
pendingLocation, pendingLocation,
handleConfirmNavigation, handleConfirmNavigation,
handleCancelNavigation, handleCancelNavigation,
guardMessage: message guardMessage: message,
}; };
}; };

View file

@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
interface UseRefreshGuardOptions { interface UseRefreshGuardOptions {
shouldGuard: boolean; shouldGuard: boolean;
message?: string; message?: string;
onUnload?: () => void; // Called only when page is actually unloading (not on beforeunload) onUnload?: () => void;
} }
interface UseRefreshGuardReturn { interface UseRefreshGuardReturn {
@ -22,7 +22,7 @@ interface UseRefreshGuardReturn {
export const useRefreshGuard = ({ export const useRefreshGuard = ({
shouldGuard, shouldGuard,
message = 'You have unsaved changes that will be lost.', message = 'You have unsaved changes that will be lost.',
onUnload onUnload,
}: UseRefreshGuardOptions): UseRefreshGuardReturn => { }: UseRefreshGuardOptions): UseRefreshGuardReturn => {
const [showModal, setShowModal] = useState(false); const [showModal, setShowModal] = useState(false);
@ -34,7 +34,7 @@ export const useRefreshGuard = ({
// Show browser's native dialog first // Show browser's native dialog first
event.preventDefault(); event.preventDefault();
event.returnValue = ''; // Required for Chrome event.returnValue = '';
// Schedule custom modal to show after browser dialog is dismissed // Schedule custom modal to show after browser dialog is dismissed
// This only happens if user chooses "Stay" on the browser dialog // This only happens if user chooses "Stay" on the browser dialog
@ -44,7 +44,7 @@ export const useRefreshGuard = ({
} }
}, 100); }, 100);
return ''; // Required for other browsers return '';
}; };
const handleUnload = () => { const handleUnload = () => {
@ -76,6 +76,6 @@ export const useRefreshGuard = ({
return { return {
showModal, showModal,
setShowModal, setShowModal,
guardMessage: message guardMessage: message,
}; };
}; };