auto lint fixes

This commit is contained in:
Paul Carroll 2025-08-08 17:01:18 -04:00
parent 9f85845973
commit 9b6c806c00
5 changed files with 42 additions and 40 deletions

View file

@ -50,22 +50,22 @@ export const RefreshGuardModal: React.FC<RefreshGuardModalProps> = ({
{title}
</Box>
</DialogTitle>
<DialogContent>
<Alert severity="warning" sx={{ mb: 2 }}>
<Typography variant="body1" id="refresh-guard-description">
{message}
</Typography>
</Alert>
<Typography variant="body2" color="textSecondary">
Your browser may also show a confirmation dialog. Both dialogs are asking the same thing -
Your browser may also show a confirmation dialog. Both dialogs are asking the same thing -
whether you want to leave the page and lose your current progress.
</Typography>
</DialogContent>
<DialogActions>
<Button
<Button
onClick={onClose}
variant="contained"
color="primary"
@ -73,7 +73,7 @@ export const RefreshGuardModal: React.FC<RefreshGuardModalProps> = ({
>
{cancelButtonText}
</Button>
<Button
<Button
onClick={onConfirm}
variant="outlined"
color="error"
@ -83,4 +83,4 @@ export const RefreshGuardModal: React.FC<RefreshGuardModalProps> = ({
</DialogActions>
</Dialog>
);
};
};

View file

@ -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;
@ -34,8 +34,8 @@ export const RefreshGuardProvider: React.FC<RefreshGuardProviderProps> = ({
onClose={handleCancelNavigation}
onConfirm={handleConfirmNavigation}
message={navigationMessage}
title={isInActiveGame ? "Active Game Warning" : "Connection Warning"}
confirmButtonText={isInActiveGame ? "Leave Game" : "Leave Anyway"}
title={isInActiveGame ? 'Active Game Warning' : 'Connection Warning'}
confirmButtonText={isInActiveGame ? 'Leave Game' : 'Leave Anyway'}
cancelButtonText="Stay"
/>
@ -45,7 +45,7 @@ export const RefreshGuardProvider: React.FC<RefreshGuardProviderProps> = ({
onClose={handleCancelRefresh}
onConfirm={handleConfirmRefresh}
message={refreshMessage}
title={isInActiveGame ? "Page Refresh Warning" : "Connection Warning"}
title={isInActiveGame ? 'Page Refresh Warning' : 'Connection Warning'}
confirmButtonText="Refresh Anyway"
cancelButtonText="Stay on Page"
/>

View file

@ -13,14 +13,14 @@ interface UseGameGuardReturn {
handleConfirmNavigation: () => void;
handleCancelNavigation: () => void;
navigationMessage: string;
// Refresh guard (browser refresh)
showRefreshModal: boolean;
setShowRefreshModal: (show: boolean) => void;
handleConfirmRefresh: () => void;
handleCancelRefresh: () => void;
refreshMessage: string;
// Guard state
isInActiveGame: boolean;
isConnected: boolean;
@ -30,7 +30,7 @@ interface UseGameGuardReturn {
/**
* Combined hook that guards against page refresh (browser dialog) and SPA navigation (custom modal)
* when user is in an active game or has an active connection.
*
*
* - Browser refresh/navigation: Shows native browser dialog only
* - SPA navigation: Shows custom modal with detailed warning
*/
@ -39,17 +39,17 @@ export const useGameGuard = (): UseGameGuardReturn => {
const connectionStatus = useSelector(ServerSelectors.getState);
const joinedGameIds = useSelector(RoomsSelectors.getJoinedGameIds);
const joinedRoomIds = useSelector(RoomsSelectors.getJoinedRoomIds);
// Determine if user is in an active state that should be guarded
const isConnected = connectionStatus === StatusEnum.LOGGED_IN;
const isInActiveGame = Object.values(joinedGameIds).some(roomGames =>
const isInActiveGame = Object.values(joinedGameIds).some(roomGames =>
Object.keys(roomGames).length > 0
);
const isInRoom = Object.keys(joinedRoomIds).length > 0;
// Guard conditions
const shouldGuard = isConnected && (isInActiveGame || isInRoom);
// Messages based on current state
const getMessage = (): string => {
if (isInActiveGame) {
@ -72,7 +72,7 @@ export const useGameGuard = (): UseGameGuardReturn => {
// Note: Specific game leave commands would be implemented here
// For now, we'll just disconnect the WebSocket
}
// Disconnect from server
webClient.disconnect();
} catch (error) {
@ -109,7 +109,7 @@ export const useGameGuard = (): UseGameGuardReturn => {
},
handleCancelNavigation: navigationGuard.handleCancelNavigation,
navigationMessage: navigationGuard.guardMessage,
// Refresh guard (browser refresh)
showRefreshModal: refreshGuard.showModal,
setShowRefreshModal: refreshGuard.setShowModal,
@ -121,10 +121,10 @@ export const useGameGuard = (): UseGameGuardReturn => {
refreshGuard.setShowModal(false);
},
refreshMessage: refreshGuard.guardMessage,
// State
isInActiveGame,
isConnected,
shouldGuard
};
};
};

View file

@ -19,7 +19,7 @@ interface UseNavigationGuardReturn {
/**
* Hook to guard against navigation within the SPA when user has unsaved changes.
* Works with React Router to block navigation and show confirmation dialog.
*
*
* @param options Configuration for the navigation guard
* @returns Modal state controls and navigation handlers
*/
@ -30,11 +30,11 @@ export const useNavigationGuard = ({
}: UseNavigationGuardOptions): UseNavigationGuardReturn => {
const [showModal, setShowModal] = useState(false);
const [pendingLocation, setPendingLocation] = useState<string | null>(null);
// Safely get React Router hooks - they might not be available
let navigate: ReturnType<typeof useNavigate> | null = null;
let location: ReturnType<typeof useLocation> | null = null;
try {
navigate = useNavigate();
location = useLocation();
@ -64,9 +64,11 @@ export const useNavigationGuard = ({
const handleLinkClick = (event: Event) => {
const target = event.target as HTMLElement;
const link = target.closest('a');
if (!link) return;
if (!link) {
return;
}
const href = link.getAttribute('href');
if (!href || href.startsWith('#') || href.startsWith('http') || href.startsWith('mailto:')) {
return; // Allow external links, anchors, and mailto links
@ -75,11 +77,11 @@ export const useNavigationGuard = ({
// Check if this is a React Router navigation
if (href !== location.pathname) {
event.preventDefault();
if (onBeforeNavigate) {
onBeforeNavigate(href);
}
setPendingLocation(href);
setShowModal(true);
}
@ -89,15 +91,15 @@ export const useNavigationGuard = ({
if (shouldGuard) {
// Browser back/forward button pressed
event.preventDefault();
const targetPath = window.location.pathname;
if (onBeforeNavigate) {
onBeforeNavigate(targetPath);
}
setPendingLocation(targetPath);
setShowModal(true);
// Restore current URL in history
window.history.pushState(null, '', location.pathname);
}
@ -129,4 +131,4 @@ export const useNavigationGuard = ({
handleCancelNavigation,
guardMessage: message
};
};
};

View file

@ -15,7 +15,7 @@ interface UseRefreshGuardReturn {
/**
* Hook to guard against accidental page refresh or navigation away from the site.
* Shows both browser's native beforeunload dialog and a custom modal for better UX.
*
*
* @param options Configuration for the refresh guard
* @returns Modal state controls and current guard message
*/
@ -35,7 +35,7 @@ export const useRefreshGuard = ({
// Show browser's native dialog first
event.preventDefault();
event.returnValue = ''; // Required for Chrome
// Schedule custom modal to show after browser dialog is dismissed
// This only happens if user chooses "Stay" on the browser dialog
setTimeout(() => {
@ -43,7 +43,7 @@ export const useRefreshGuard = ({
setShowModal(true);
}
}, 100);
return ''; // Required for other browsers
};
@ -78,4 +78,4 @@ export const useRefreshGuard = ({
setShowModal,
guardMessage: message
};
};
};