feat(us-3078): retour pr

SocialGouv · Dec 11, 2024 · e6c3351 · e6c3351
1 parent addd844
commit e6c3351
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 71 deletions.
diff --git 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 && (
             <TableauBeneficiaires
               ref={refTableau}
-              beneficiairesFiltres={jeunesFiltres}
+              beneficiaires={jeunesFiltres}
               total={conseillerJeunes.length}
             />
           )}

diff --git 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<HTMLTableElement>
 ) {
   const [conseiller] = useConseiller()
 
-  const nombrePages = Math.ceil(beneficiairesFiltres.length / 10)
+  const nombrePages = Math.ceil(beneficiaires.length / 10)
   const [page, setPage] = useState<number>(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 && (
         <EmptyState
           shouldFocus={true}
           illustrationName={IllustrationName.People}
@@ -77,47 +82,55 @@ function TableauBeneficiaires(
         />
       )}
 
-      {filtreBeneficiaires.length > 0 && (
+      {beneficiaires.length > 0 && (
         <>
           <h2 className='text-m-bold mb-2 text-center text-grey_800'>
             Semaine du {toShortDate(DEBUT_PERIODE)} au{' '}
             {toShortDate(FIN_PERIODE)}
           </h2>
 
           <button
-            onClick={trierParDerniereActivite}
+            onClick={() => {
+              setTriDerniereActiviteChronologique(
+                !triDerniereActiviteChronologique
+              )
+            }}
             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'
+              triDerniereActiviteChronologique
+                ? 'Trier par dernière activité ordre antichronologique'
+                : 'Trier par dernière activité ordre chronologique'
+            }
+            aria-label={
+              triDerniereActiviteChronologique
+                ? '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é
-            <SortIcon isDesc={triDerniereActiviter} />
+            <SortIcon isDesc={!triDerniereActiviteChronologique} />
           </button>
 
           <Table
             ref={ref}
             caption={{
               text: 'Liste des bénéficiaires',
-              count: total === filtreBeneficiaires.length ? total : undefined,
+              count: total === beneficiaires.length ? total : undefined,
               visible: true,
             }}
           >
             {estMilo(conseiller) && (
               <TableauBeneficiairesMilo
-                beneficiairesFiltres={filtreBeneficiaires}
+                beneficiaires={beneficiairesTries}
                 page={page}
                 total={total}
               />
             )}
 
             {!estMilo(conseiller) && (
               <TableauBeneficiairesPasMilo
-                beneficiairesFiltres={filtreBeneficiaires}
+                beneficiaires={beneficiairesTries}
                 page={page}
                 total={total}
               />

diff --git 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
@@ -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
@@ -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'
       )
     })