Fix group arrow key navigation

Author: coder13

src/containers/CompetitionGroup/CompetitionGroup.test.tsx

@@ -0,0 +1,92 @@
+import '@testing-library/jest-dom';
+import { fireEvent, render } from '@testing-library/react';
+import { Competition } from '@wca/helpers';
+import { AnchorLink } from '@/lib/linkRenderer';
+import { storybookCompetitionFixture } from '@/storybook/competitionFixtures';
+import { CompetitionGroupContainer } from './CompetitionGroup';
+
+const mockSetTitle = jest.fn();
+const mockWcif = storybookCompetitionFixture as unknown as Competition;
+
+jest.mock('@/i18n', () => ({
+  __esModule: true,
+  default: {
+    t: (key: string, options?: Record<string, unknown>) =>
+      key === 'common.activityCodeToName.group' ? `Group ${options?.groupNumber}` : key,
+  },
+}));
+
+jest.mock('@/components', () => ({
+  ActivityRow: () => <div />,
+}));
+
+jest.mock('@/components/AssignmentCodeCell', () => ({
+  AssignmentCodeCell: ({ count }: { count: number }) => <div>{count}</div>,
+}));
+
+jest.mock('@/components/Breadcrumbs/Breadcrumbs', () => ({
+  Breadcrumbs: () => <div />,
+}));
+
+jest.mock('@/components/Container', () => ({
+  Container: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+}));
+
+jest.mock('@/components/CutoffTimeLimitPanel', () => ({
+  CutoffTimeLimitPanel: () => <div />,
+}));
+
+jest.mock('@/providers/WCIFProvider', () => ({
+  useWCIF: () => ({
+    wcif: mockWcif,
+    setTitle: mockSetTitle,
+  }),
+}));
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+describe('CompetitionGroupContainer', () => {
+  beforeEach(() => {
+    mockSetTitle.mockClear();
+  });
+
+  it('navigates between groups with arrow keys', () => {
+    const onNavigate = jest.fn();
+
+    render(
+      <CompetitionGroupContainer
+        competitionId="SeattleSummerOpen2026"
+        roundId="333-r1"
+        groupNumber="1"
+        LinkComponent={AnchorLink}
+        onNavigate={onNavigate}
+      />,
+    );
+
+    fireEvent.keyDown(document, { key: 'ArrowRight' });
+
+    expect(onNavigate).toHaveBeenCalledWith('/competitions/SeattleSummerOpen2026/events/333-r1/2');
+  });
+
+  it('does not navigate past the first group with the left arrow key', () => {
+    const onNavigate = jest.fn();
+
+    render(
+      <CompetitionGroupContainer
+        competitionId="SeattleSummerOpen2026"
+        roundId="333-r1"
+        groupNumber="1"
+        LinkComponent={AnchorLink}
+        onNavigate={onNavigate}
+      />,
+    );
+
+    fireEvent.keyDown(document, { key: 'ArrowLeft' });
+
+    expect(onNavigate).not.toHaveBeenCalled();
+  });
+});

src/containers/CompetitionGroup/CompetitionGroup.tsx

@@ -1,6 +1,6 @@
 import { ActivityCode } from '@wca/helpers';
 import classNames from 'classnames';
-import { Fragment, useEffect, useMemo } from 'react';
+import { Fragment, useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ActivityRow } from '@/components';
 import { AssignmentCodeCell } from '@/components/AssignmentCodeCell';
@@ -26,13 +26,15 @@ export interface CompetitionGroupContainerProps {
   roundId: string;
   groupNumber: string;
   LinkComponent?: LinkRenderer;
+  onNavigate?: (url: string) => void;
 }
 
 export function CompetitionGroupContainer({
   competitionId,
   roundId,
   groupNumber,
   LinkComponent = AnchorLink,
+  onNavigate,
 }: CompetitionGroupContainerProps) {
   const { t } = useTranslation();
   const { wcif, setTitle } = useWCIF();
@@ -95,12 +97,44 @@ export function CompetitionGroupContainer({
 
   const prev = wcif && prevActivityCode(wcif, activityCode);
   const next = wcif && nextActivityCode(wcif, activityCode);
-  const prevUrl = `/competitions/${competitionId}/events/${prev?.split?.('-g')?.[0]}/${
-    prev?.split?.('-g')?.[1]
-  }`;
-  const nextUrl = `/competitions/${competitionId}/events/${next?.split?.('-g')?.[0]}/${
-    next?.split?.('-g')?.[1]
-  }`;
+  const prevUrl = prev
+    ? `/competitions/${competitionId}/events/${prev.split('-g')[0]}/${prev.split('-g')[1]}`
+    : undefined;
+  const nextUrl = next
+    ? `/competitions/${competitionId}/events/${next.split('-g')[0]}/${next.split('-g')[1]}`
+    : undefined;
+
+  const goToPrev = useCallback(() => {
+    if (prevUrl) {
+      onNavigate?.(prevUrl);
+    }
+  }, [onNavigate, prevUrl]);
+
+  const goToNext = useCallback(() => {
+    if (nextUrl) {
+      onNavigate?.(nextUrl);
+    }
+  }, [onNavigate, nextUrl]);
+
+  useEffect(() => {
+    const handleKeydown = (event: KeyboardEvent) => {
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault();
+        goToPrev();
+      }
+
+      if (event.key === 'ArrowRight') {
+        event.preventDefault();
+        goToNext();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeydown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeydown);
+    };
+  }, [goToPrev, goToNext]);
 
   return (
     <>

src/pages/Competition/ByGroup/Group.tsx

@@ -1,8 +1,9 @@
-import { Link, useParams } from 'react-router-dom';
+import { Link, useNavigate, useParams } from 'react-router-dom';
 import { CompetitionGroupContainer } from '@/containers/CompetitionGroup';
 
 export default function Group() {
   const { competitionId, roundId, groupNumber } = useParams();
+  const navigate = useNavigate();
 
   if (!competitionId || !roundId || !groupNumber) {
     return null;
@@ -14,6 +15,7 @@ export default function Group() {
       LinkComponent={Link}
       roundId={roundId}
       groupNumber={groupNumber}
+      onNavigate={navigate}
     />
   );
 }