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 83 84 85 86 87 88 89 90 91 | 3x 3x 24x 24x 24x 24x 11x 24x 11x 11x 4x 24x 16x 12x 4x 1x 4x 24x 19x 14x 5x 5x 1x 5x 1x 5x 24x 8x | import { useEffect, useState } from 'react';
import { Link, useLocation } from 'react-router-dom';
import './ListPage.css';
import { getRegistrations } from '../module/module';
const TOAST_DURATION = 3000;
const HIGHLIGHT_DURATION = 4000;
function ListPage() {
const location = useLocation();
const [toastMessage, setToastMessage] = useState('');
const [registrations, setRegistrations] = useState([]);
const [highlightedIndex, setHighlightedIndex] = useState(
() => (typeof location.state?.highlightIndex === 'number' ? location.state.highlightIndex : null)
);
useEffect(() => {
try {
setRegistrations(getRegistrations());
} catch (error) {
setToastMessage(error.message || 'Une erreur est survenue');
}
}, []);
useEffect(() => {
if (!toastMessage) {
return undefined;
}
const timeoutId = setTimeout(() => {
setToastMessage('');
}, TOAST_DURATION);
return () => clearTimeout(timeoutId);
}, [toastMessage]);
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 (
<section className="registrations-section" data-testid="list-page">
<h1>Liste des inscrits</h1>
{registrations.length === 0 ? (
<p data-testid="no-registrations">Aucun inscrit pour le moment.</p>
) : (
<ul data-testid="registrations-list">
{registrations.map((registration, index) => (
<li
key={`${registration.email}-${index}`}
data-testid="registration-item"
data-highlight-index={index}
className={
index === highlightedIndex ? 'registration-item-highlight' : undefined
}
>
{registration.prenom} {registration.nom} - {registration.email} - {registration.dateOfBirth} - {registration.ville} ({registration.codePostal})
</li>
))}
</ul>
)}
<Link to="/register" data-testid="go-to-registration">
Nouvelle inscription
</Link>
{toastMessage && (
<div className="toast toast-error" role="alert" data-testid="error-toast">
{toastMessage}
</div>
)}
</section>
);
}
export default ListPage;
|