diff --git a/app/(connected)/(with-sidebar)/(with-chat)/mes-jeunes/PortefeuillePage.tsx b/app/(connected)/(with-sidebar)/(with-chat)/mes-jeunes/PortefeuillePage.tsx index f89ea1eb8..0c6b1eaa1 100644 --- a/app/(connected)/(with-sidebar)/(with-chat)/mes-jeunes/PortefeuillePage.tsx +++ b/app/(connected)/(with-sidebar)/(with-chat)/mes-jeunes/PortefeuillePage.tsx @@ -216,7 +216,7 @@ function PortefeuillePage({ {jeunesFiltres && ( )} diff --git a/components/jeune/TableauBeneficiaires.tsx b/components/jeune/TableauBeneficiaires.tsx index 417fa16c7..07ad29513 100644 --- a/components/jeune/TableauBeneficiaires.tsx +++ b/components/jeune/TableauBeneficiaires.tsx @@ -23,52 +23,57 @@ const TableauBeneficiairesPasMilo = dynamic( ) type TableauBeneficiairesProps = { - beneficiairesFiltres: BeneficiaireAvecInfosComplementaires[] + beneficiaires: BeneficiaireAvecInfosComplementaires[] total: number } function TableauBeneficiaires( - { beneficiairesFiltres, total }: TableauBeneficiairesProps, + { beneficiaires, total }: TableauBeneficiairesProps, ref: ForwardedRef ) { const [conseiller] = useConseiller() - const nombrePages = Math.ceil(beneficiairesFiltres.length / 10) + const nombrePages = Math.ceil(beneficiaires.length / 10) const [page, setPage] = useState(1) const DEBUT_PERIODE = DateTime.now().startOf('week') const FIN_PERIODE = DateTime.now().endOf('week') - const [triDerniereActiviter, setTriDerniereActiviter] = useState(true) - const [filtreBeneficiaires, setFiltreBeneficiaires] = - useState(beneficiairesFiltres) + const [ + triDerniereActiviteChronologique, + setTriDerniereActiviteChronologique, + ] = useState(false) + const [beneficiairesTries, setBeneficiairesTries] = useState( + trierParDerniereActivite(beneficiaires, triDerniereActiviteChronologique) + ) - const trierParDerniereActivite = () => { - const nouvelleTri = !triDerniereActiviter - const triBeneficiaires = [...beneficiairesFiltres].sort((a, b) => { - if (!a.isActivated && !b.isActivated) return 0 - if (!a.isActivated) return 1 - if (!b.isActivated) return -1 + function trierParDerniereActivite( + beneficiairesATrier: BeneficiaireAvecInfosComplementaires[], + ordreChronologique: boolean + ): BeneficiaireAvecInfosComplementaires[] { + return beneficiairesATrier.toSorted((a, b) => { + if (!a.isActivated || !b.isActivated) + return Number(b.isActivated) - Number(a.isActivated) const dateA = DateTime.fromISO(a.lastActivity!) const dateB = DateTime.fromISO(b.lastActivity!) - return nouvelleTri - ? dateB.diff(dateA).milliseconds - : dateA.diff(dateB).milliseconds + const diff = dateA.toMillis() - dateB.toMillis() + return ordreChronologique ? diff : -diff }) - - setFiltreBeneficiaires(triBeneficiaires) - setPage(1) - setTriDerniereActiviter(nouvelleTri) } useEffect(() => { - setFiltreBeneficiaires(beneficiairesFiltres) setPage(1) - }, [beneficiairesFiltres]) + }, [beneficiaires]) + + useEffect(() => { + setBeneficiairesTries( + trierParDerniereActivite(beneficiaires, triDerniereActiviteChronologique) + ) + }, [beneficiaires, triDerniereActiviteChronologique]) return ( <> - {filtreBeneficiaires.length === 0 && ( + {beneficiaires.length === 0 && ( )} - {filtreBeneficiaires.length > 0 && ( + {beneficiaires.length > 0 && ( <>

Semaine du {toShortDate(DEBUT_PERIODE)} au{' '} @@ -85,31 +90,39 @@ function TableauBeneficiaires(

{estMilo(conseiller) && ( @@ -117,7 +130,7 @@ function TableauBeneficiaires( {!estMilo(conseiller) && ( diff --git a/components/jeune/TableauBeneficiairesMilo.tsx b/components/jeune/TableauBeneficiairesMilo.tsx index f73139dbc..56530dc7d 100644 --- a/components/jeune/TableauBeneficiairesMilo.tsx +++ b/components/jeune/TableauBeneficiairesMilo.tsx @@ -17,13 +17,13 @@ import { useConseiller } from 'utils/conseiller/conseillerContext' import { toLongMonthDate, toRelativeDateTime } from 'utils/date' interface TableauBeneficiairesMiloProps { - beneficiairesFiltres: BeneficiaireAvecInfosComplementaires[] + beneficiaires: BeneficiaireAvecInfosComplementaires[] page: number total: number } export default function TableauBeneficiairesMilo({ - beneficiairesFiltres, + beneficiaires, page, total, }: TableauBeneficiairesMiloProps) { @@ -38,21 +38,9 @@ export default function TableauBeneficiairesMilo({ const rdvColumn = 'RDV et ateliers' const derniereActiviteColumn = 'Dernière activité' - function getRowLabel(beneficiaire: BeneficiaireAvecInfosComplementaires) { - const labelFiche = `Accéder à la fiche de ${beneficiaire.prenom} ${beneficiaire.nom}` - const labelActivite = beneficiaire.isActivated - ? `dernière activité ${toRelativeDateTime(beneficiaire.lastActivity!)}` - : 'non activé' - const labelMessages = `${beneficiaire.messagesNonLus} messages non lus` - - return `${labelFiche}, ${labelActivite}, ${labelMessages}` - } - useEffect(() => { - setBeneficiairesAffiches( - beneficiairesFiltres.slice(10 * (page - 1), 10 * page) - ) - }, [beneficiairesFiltres, page]) + setBeneficiairesAffiches(beneficiaires.slice(10 * (page - 1), 10 * page)) + }, [beneficiaires, page]) useMatomo('Mes jeunes', total > 0) diff --git a/components/jeune/TableauBeneficiairesPasMilo.tsx b/components/jeune/TableauBeneficiairesPasMilo.tsx index c16ee8e36..4e908847e 100644 --- a/components/jeune/TableauBeneficiairesPasMilo.tsx +++ b/components/jeune/TableauBeneficiairesPasMilo.tsx @@ -13,13 +13,13 @@ import useMatomo from 'utils/analytics/useMatomo' import { toRelativeDateTime } from 'utils/date' interface TableauBeneficiairesPasMiloProps { - beneficiairesFiltres: BeneficiaireAvecInfosComplementaires[] + beneficiaires: BeneficiaireAvecInfosComplementaires[] page: number total: number } export default function TableauBeneficiairesPasMilo({ - beneficiairesFiltres, + beneficiaires, page, total, }: TableauBeneficiairesPasMiloProps) { @@ -30,21 +30,9 @@ export default function TableauBeneficiairesPasMilo({ const messagesColumn = 'Messages non lus par le béneficiaire' const derniereActiviteColumn = 'Dernière activité' - function getRowLabel(beneficiaire: BeneficiaireAvecInfosComplementaires) { - const labelFiche = `Accéder à la fiche de ${beneficiaire.prenom} ${beneficiaire.nom}` - const labelActivite = beneficiaire.isActivated - ? `dernière activité ${toRelativeDateTime(beneficiaire.lastActivity!)}` - : 'non activé' - const labelMessages = `${beneficiaire.messagesNonLus} messages non lus par le béneficiaire` - - return `${labelFiche}, ${labelActivite}, ${labelMessages}` - } - useEffect(() => { - setBeneficiairesAffiches( - beneficiairesFiltres.slice(10 * (page - 1), 10 * page) - ) - }, [beneficiairesFiltres, page]) + setBeneficiairesAffiches(beneficiaires.slice(10 * (page - 1), 10 * page)) + }, [beneficiaires, page]) useMatomo('Mes jeunes', total > 0) diff --git a/tests/pages/PortefeuillePage.test.tsx b/tests/pages/PortefeuillePage.test.tsx index dae2e8450..a495c7d77 100644 --- a/tests/pages/PortefeuillePage.test.tsx +++ b/tests/pages/PortefeuillePage.test.tsx @@ -1,4 +1,4 @@ -import { act, fireEvent, screen, within } from '@testing-library/react' +import { act, screen, within } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { AxeResults } from 'axe-core' import { axe } from 'jest-axe' @@ -255,8 +255,7 @@ describe('PortefeuillePage client side', () => { screen.getByText(`Semaine du ${DEBUT_PERIODE} au ${FIN_PERIODE}`) ).toBeInTheDocument() }) - it('parmet de trier bénéficiaire par dernière activité ', () => { - //given + it('parmet de trier bénéficiaire par dernière activité ', async () => { //when const button = screen.getByRole('button', { name: /Trier par dernière activité/i, @@ -265,13 +264,14 @@ describe('PortefeuillePage client side', () => { //then expect(button).toHaveAttribute( 'title', - 'Trier par dernière activité ordre anticronologique' + 'Trier par dernière activité ordre chronologique' ) - fireEvent.click(button) + + await userEvent.click(button) expect(button).toHaveAttribute( 'title', - 'Trier par dernière activité ordre cronologique' + 'Trier par dernière activité ordre antichronologique' ) })