feat: upgrade SelecteurPeriode

SocialGouv · Nov 12, 2024 · 95a0686 · 95a0686
1 parent f04a91c
commit 95a0686
Show file tree

Hide file tree

Showing 7 changed files with 208 additions and 89 deletions.
diff --git a/components/rdv/OngletAgendaConseiller.tsx b/components/rdv/OngletAgendaConseiller.tsx
@@ -1,5 +1,5 @@
 import { DateTime } from 'luxon'
-import React, { useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 
 import EmptyState from 'components/EmptyState'
 import TableauEvenementsConseiller from 'components/rdv/TableauEvenementsConseiller'
@@ -35,20 +35,26 @@ export default function OngletAgendaConseiller({
   periodeIndex,
   changerPeriode,
 }: OngletAgendaConseillerProps) {
+  const tableRef = useRef<HTMLTableElement>(null)
+
   const [evenements, setEvenements] = useState<EvenementListItem[]>()
+  const [shouldFocus, setShouldFocus] = useState<boolean>(false)
+
   const [periode, setPeriode] = useState<{ debut: DateTime; fin: DateTime }>()
   const [labelPeriode, setLabelPeriode] = useState<string>()
   const [failed, setFailed] = useState<boolean>(false)
 
   async function chargerNouvellePeriode(
-    nouvellePeriodeIndex: number,
-    dateDebut: DateTime,
-    dateFin: DateTime,
-    label: string
+    nouvellePeriode: { index: number; dateDebut: DateTime; dateFin: DateTime },
+    opts: { label: string; shouldFocus: boolean }
   ) {
-    await initEvenementsPeriode(dateDebut, dateFin)
-    setLabelPeriode(label)
-    changerPeriode(nouvellePeriodeIndex)
+    await initEvenementsPeriode(
+      nouvellePeriode.dateDebut,
+      nouvellePeriode.dateFin
+    )
+    setLabelPeriode(opts.label)
+    changerPeriode(nouvellePeriode.index)
+    setShouldFocus(opts.shouldFocus)
   }
 
   async function initEvenementsPeriode(dateDebut: DateTime, dateFin: DateTime) {
@@ -89,6 +95,10 @@ export default function OngletAgendaConseiller({
       )
   }
 
+  useEffect(() => {
+    if (shouldFocus) tableRef.current?.focus()
+  }, [evenements])
+
   return (
     <>
       <SelecteurPeriode
@@ -107,6 +117,7 @@ export default function OngletAgendaConseiller({
 
       {!evenements && failed && (
         <EmptyState
+          shouldFocus={shouldFocus}
           illustrationName={IllustrationName.Maintenance}
           titre='L’affichage de votre agenda a échoué.'
           sousTitre='Si le problème persiste, contactez notre support.'
@@ -119,6 +130,7 @@ export default function OngletAgendaConseiller({
 
       {evenements?.length === 0 && (
         <EmptyState
+          shouldFocus={shouldFocus}
           illustrationName={IllustrationName.Checklist}
           titre='Vous n’avez aucun événement dans votre agenda sur cette période.'
           lien={{
@@ -131,6 +143,7 @@ export default function OngletAgendaConseiller({
 
       {evenements && evenements.length > 0 && (
         <TableauEvenementsConseiller
+          ref={tableRef}
           evenements={evenements}
           periodeLabel={labelPeriode!}
         />

diff --git a/components/rdv/OngletAgendaEtablissement.tsx b/components/rdv/OngletAgendaEtablissement.tsx
@@ -50,6 +50,7 @@ export default function OngletAgendaEtablissement({
   const [recherche, setRecherche] = useState<string>('')
   const [evenementsAffiches, setEvenementsAffiches] =
     useState<AnimationCollective[]>()
+  const [shouldFocus, setShouldFocus] = useState<boolean>(false)
 
   const [periode, setPeriode] = useState<{ debut: DateTime; fin: DateTime }>()
   const [labelPeriode, setLabelPeriode] = useState<string>()
@@ -61,14 +62,16 @@ export default function OngletAgendaEtablissement({
   }
 
   async function modifierPeriode(
-    nouvellePeriodeIndex: number,
-    dateDebut: DateTime,
-    dateFin: DateTime,
-    label: string
+    nouvellePeriode: { index: number; dateDebut: DateTime; dateFin: DateTime },
+    opts: { label: string; shouldFocus: boolean }
   ) {
-    await chargerEvenementsPeriode(dateDebut, dateFin)
-    setLabelPeriode(label)
-    changerPeriode(nouvellePeriodeIndex)
+    await chargerEvenementsPeriode(
+      nouvellePeriode.dateDebut,
+      nouvellePeriode.dateFin
+    )
+    setLabelPeriode(opts.label)
+    changerPeriode(nouvellePeriode.index)
+    setShouldFocus(opts.shouldFocus)
   }
 
   async function chargerEvenementsPeriode(
@@ -127,11 +130,15 @@ export default function OngletAgendaEtablissement({
     tableRef.current?.focus()
   }, [recherche])
 
+  useEffect(() => {
+    if (shouldFocus) tableRef.current?.focus()
+  }, [evenementsAffiches])
+
   return (
     <>
       <RechercheAgendaForm onSearch={setRecherche} />
 
-      <nav className='flex justify-between items-end'>
+      <nav className='flex justify-between items-center'>
         <SelecteurPeriode
           onNouvellePeriode={modifierPeriode}
           periodeCourante={periodeIndex}
@@ -159,6 +166,7 @@ export default function OngletAgendaEtablissement({
 
       {!evenementsAffiches && periodeFailed && (
         <EmptyState
+          shouldFocus={shouldFocus}
           illustrationName={IllustrationName.Maintenance}
           titre={`
             L’affichage de l’agenda de votre ${
@@ -177,7 +185,7 @@ export default function OngletAgendaEtablissement({
       {evenementsAffiches?.length === 0 && (
         <div className='flex flex-col justify-center items-center'>
           <EmptyState
-            shouldFocus={filtres.length > 0}
+            shouldFocus={shouldFocus || filtres.length > 0}
             illustrationName={IllustrationName.Checklist}
             titre={
               filtres.length === 0

diff --git a/components/rdv/TableauEvenementsConseiller.tsx b/components/rdv/TableauEvenementsConseiller.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ForwardedRef, forwardRef } from 'react'
 
 import { AgendaRow } from 'components/rdv/AgendaRow'
 import Table from 'components/ui/Table/Table'
@@ -9,12 +9,15 @@ type TableauEvenementsConseillerProps = {
   periodeLabel: string
 }
 
-export default function TableauEvenementsConseiller({
-  evenements,
-  periodeLabel,
-}: TableauEvenementsConseillerProps) {
+function TableauEvenementsConseiller(
+  { evenements, periodeLabel }: TableauEvenementsConseillerProps,
+  ref: ForwardedRef<HTMLTableElement>
+) {
   return (
-    <Table caption={{ text: 'Liste de mes événements ' + periodeLabel }}>
+    <Table
+      caption={{ text: 'Liste de mes événements ' + periodeLabel }}
+      ref={ref}
+    >
       <thead className='sr-only'>
         <tr>
           <th scope='col'>Horaires et durée</th>
@@ -33,3 +36,5 @@ export default function TableauEvenementsConseiller({
     </Table>
   )
 }
+
+export default forwardRef(TableauEvenementsConseiller)