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'
)
})