From e537d86b9adf35ba743b19271ef24d2b456bd39d Mon Sep 17 00:00:00 2001
From: "anhara.akter" <anhara.akter@octo.com>
Date: Wed, 11 Dec 2024 16:31:39 +0100
Subject: [PATCH] feat(us-3078): retour pr

---
 components/jeune/TableauBeneficiaires.tsx | 47 ++++++++++++++---------
 tests/pages/PortefeuillePage.test.tsx     | 11 +++---
 2 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/components/jeune/TableauBeneficiaires.tsx b/components/jeune/TableauBeneficiaires.tsx
index 417fa16c7..59b466205 100644
--- a/components/jeune/TableauBeneficiaires.tsx
+++ b/components/jeune/TableauBeneficiaires.tsx
@@ -39,36 +39,39 @@ function TableauBeneficiaires(
   const DEBUT_PERIODE = DateTime.now().startOf('week')
   const FIN_PERIODE = DateTime.now().endOf('week')
   const [triDerniereActiviter, setTriDerniereActiviter] = useState(true)
-  const [filtreBeneficiaires, setFiltreBeneficiaires] =
+  const [beneficiairesTrier, setBeneficiairesTrier] =
     useState(beneficiairesFiltres)
 
-  const trierParDerniereActivite = () => {
-    const nouvelleTri = !triDerniereActiviter
-    const triBeneficiaires = [...beneficiairesFiltres].sort((a, b) => {
+  const trierParDerniereActivite = (
+    beneficiaire: BeneficiaireAvecInfosComplementaires[],
+    ordre: boolean
+  ): BeneficiaireAvecInfosComplementaires[] => {
+    return [...beneficiairesTrier].sort((a, b) => {
       if (!a.isActivated && !b.isActivated) return 0
       if (!a.isActivated) return 1
       if (!b.isActivated) return -1
 
       const dateA = DateTime.fromISO(a.lastActivity!)
       const dateB = DateTime.fromISO(b.lastActivity!)
-      return nouvelleTri
+      return ordre
         ? dateB.diff(dateA).milliseconds
         : dateA.diff(dateB).milliseconds
     })
-
-    setFiltreBeneficiaires(triBeneficiaires)
-    setPage(1)
-    setTriDerniereActiviter(nouvelleTri)
   }
 
   useEffect(() => {
-    setFiltreBeneficiaires(beneficiairesFiltres)
     setPage(1)
   }, [beneficiairesFiltres])
 
+  useEffect(() => {
+    setBeneficiairesTrier(
+      trierParDerniereActivite(beneficiairesFiltres, triDerniereActiviter)
+    )
+  }, [beneficiairesFiltres, triDerniereActiviter])
+
   return (
     <>
-      {filtreBeneficiaires.length === 0 && (
+      {beneficiairesTrier.length === 0 && (
         <EmptyState
           shouldFocus={true}
           illustrationName={IllustrationName.People}
@@ -77,7 +80,7 @@ function TableauBeneficiaires(
         />
       )}
 
-      {filtreBeneficiaires.length > 0 && (
+      {beneficiairesTrier.length > 0 && (
         <>
           <h2 className='text-m-bold mb-2 text-center text-grey_800'>
             Semaine du {toShortDate(DEBUT_PERIODE)} au{' '}
@@ -85,14 +88,20 @@ function TableauBeneficiaires(
           </h2>
 
           <button
-            onClick={trierParDerniereActivite}
+            onClick={() => {
+              setTriDerniereActiviter(!triDerniereActiviter)
+            }}
             className='flex float-right mt-8 mb-8 text-m-regular text-right text-grey_800'
             title={
               triDerniereActiviter
-                ? 'Trier par dernière activité ordre anticronologique'
-                : 'Trier par dernière activité ordre cronologique'
+                ? 'Trier par dernière activité ordre antichronologique'
+                : 'Trier par dernière activité ordre chronologique'
+            }
+            aria-label={
+              triDerniereActiviter
+                ? 'Trier par dernière activité ordre antichronologique'
+                : 'Trier par dernière activité ordre chronologique'
             }
-            aria-label='Trier par dernière activité'
             type='button'
           >
             Trier par dernière activité
@@ -103,13 +112,13 @@ function TableauBeneficiaires(
             ref={ref}
             caption={{
               text: 'Liste des bénéficiaires',
-              count: total === filtreBeneficiaires.length ? total : undefined,
+              count: total === beneficiairesTrier.length ? total : undefined,
               visible: true,
             }}
           >
             {estMilo(conseiller) && (
               <TableauBeneficiairesMilo
-                beneficiairesFiltres={filtreBeneficiaires}
+                beneficiairesFiltres={beneficiairesTrier}
                 page={page}
                 total={total}
               />
@@ -117,7 +126,7 @@ function TableauBeneficiaires(
 
             {!estMilo(conseiller) && (
               <TableauBeneficiairesPasMilo
-                beneficiairesFiltres={filtreBeneficiaires}
+                beneficiairesFiltres={beneficiairesTrier}
                 page={page}
                 total={total}
               />
diff --git a/tests/pages/PortefeuillePage.test.tsx b/tests/pages/PortefeuillePage.test.tsx
index dae2e8450..9e1470210 100644
--- a/tests/pages/PortefeuillePage.test.tsx
+++ b/tests/pages/PortefeuillePage.test.tsx
@@ -255,23 +255,24 @@ 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,
       })
 
       //then
+
       expect(button).toHaveAttribute(
         'title',
-        'Trier par dernière activité ordre anticronologique'
+        'Trier par dernière activité ordre antichronologique'
       )
-      fireEvent.click(button)
+
+      await userEvent.click(button)
 
       expect(button).toHaveAttribute(
         'title',
-        'Trier par dernière activité ordre cronologique'
+        'Trier par dernière activité ordre chronologique'
       )
     })