# All files / src/pages ListPage.js

100% Statements 21/21
100% Branches 10/10
100% Functions 6/6
100% Lines 20/20

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;