Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | 3x 24x 24x 24x 24x 11x 24x 11x 11x 4x 24x 19x 14x 5x 5x 1x 5x 1x 5x 24x | import { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';
import NavLink from '../components/NavLink/NavLink';
import PageNavigation from '../components/PageNavigation/PageNavigation';
import RegistrationsList from '../components/RegistrationsList/RegistrationsList';
import Toast from '../components/Toast/Toast';
import { DOCS_URL } from '../constants/navigation';
import { useToast } from '../hooks/useToast';
import { getRegistrations } from '../module/module';
import './ListPage.css';
const HIGHLIGHT_DURATION = 4000;
function ListPage() {
const location = useLocation();
const { toastMessage, toastType, showToast } = useToast();
const [registrations, setRegistrations] = useState([]);
const [highlightedIndex, setHighlightedIndex] = useState(
() => (typeof location.state?.highlightIndex === 'number' ? location.state.highlightIndex : null)
);
useEffect(() => {
try {
setRegistrations(getRegistrations());
} catch (error) {
showToast(error.message || 'Une erreur est survenue', 'error');
}
}, [showToast]);
useEffect(() => {
if (highlightedIndex === null || registrations.length === 0) {
return undefined;
}
const highlightedElement = document.querySelector(
`[data-highlight-index="${highlightedIndex}"]`
);
if (typeof highlightedElement?.scrollIntoView === 'function') {
highlightedElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
const timeoutId = setTimeout(() => {
setHighlightedIndex(null);
}, HIGHLIGHT_DURATION);
return () => clearTimeout(timeoutId);
}, [highlightedIndex, registrations]);
return (
<>
<div className="list-page" data-testid="list-page">
<RegistrationsList
registrations={registrations}
title="Liste des inscrits"
headingLevel="h1"
highlightedIndex={highlightedIndex}
testId="list-registrations-section"
/>
<PageNavigation variant="card" ariaLabel="Navigation liste">
<NavLink to="/" testId="go-to-home">
Accueil
</NavLink>
<NavLink to="/register" variant="primary" testId="go-to-registration">
Nouvelle inscription
</NavLink>
<NavLink to="/legacy" testId="go-to-legacy">
Mode legacy
</NavLink>
<NavLink href={DOCS_URL} external testId="go-to-docs">
Documentation
</NavLink>
</PageNavigation>
</div>
<Toast message={toastMessage} type={toastType} />
</>
);
}
export default ListPage;
|