Merge pull request #517 from SocialGouv/fix/969-vue-rdv-conseiller-cr…

…éer-un-rdv-la-veille-ko fix(969): Page rendez-vous > gestion des borne inclues
SocialGouv · Sep 13, 2022 · 0b34612 · 0b34612
2 parents 30c4dc4 + 43b4716
commit 0b34612
Show file tree

Hide file tree

Showing 5 changed files with 162 additions and 255 deletions.
diff --git a/fixtures/services.ts b/fixtures/services.ts
@@ -71,8 +71,7 @@ export function mockedRendezVousService(
   overrides: Partial<RendezVousService> = {}
 ): RendezVousService {
   const defaults: RendezVousService = {
-    getRendezVousConseillerServerSide: jest.fn(),
-    getRendezVousConseillerClientSide: jest.fn(),
+    getRendezVousConseiller: jest.fn(),
     getRendezVousJeune: jest.fn(),
     getDetailsRendezVous: jest.fn(),
     getTypesRendezVous: jest.fn(),

diff --git a/pages/mes-rendezvous.tsx b/pages/mes-rendezvous.tsx
@@ -16,12 +16,8 @@ import useMatomo from 'utils/analytics/useMatomo'
 import { withMandatorySessionOrRedirect } from 'utils/auth/withMandatorySessionOrRedirect'
 import { useConseiller } from 'utils/conseiller/conseillerContext'
 import { useDependance } from 'utils/injectionDependances'
-import withDependance from 'utils/injectionDependances/withDependance'
 
 interface MesRendezvousProps extends PageProps {
-  rendezVous: RdvListItem[]
-  dateDebut: string
-  dateFin: string
   creationSuccess?: boolean
   modificationSuccess?: boolean
   suppressionSuccess?: boolean
@@ -30,9 +26,6 @@ interface MesRendezvousProps extends PageProps {
 }
 
 function MesRendezvous({
-  rendezVous,
-  dateDebut,
-  dateFin,
   creationSuccess,
   modificationSuccess,
   suppressionSuccess,
@@ -43,9 +36,10 @@ function MesRendezvous({
 
   const [conseiller] = useConseiller()
 
+  const AUJOURDHUI = DateTime.now().startOf('day')
+
+  const [index7JoursAffiches, setIndex7JoursAffiches] = useState<number>(0)
   const [rdvs, setRdvs] = useState<RdvListItem[]>([])
-  const [debutPeriode, setDebutPeriode] = useState<string>(dateDebut)
-  const [finPeriode, setFinPeriode] = useState<string>(dateFin)
 
   let initialTracking = `Mes rendez-vous`
   if (creationSuccess) initialTracking += ' - Creation rdv succès'
@@ -54,57 +48,53 @@ function MesRendezvous({
   if (messageEnvoiGroupeSuccess) initialTracking += ' - Succès envoi message'
   const [trackingTitle, setTrackingTitle] = useState<string>(initialTracking)
 
-  useMatomo(trackingTitle)
-
-  async function allerRdvsPasses() {
-    const FIN_RDVS_PASSES = DateTime.fromFormat(
-      debutPeriode,
-      'dd/MM/yyyy'
-    ).minus({ day: 1 })
-    const DEBUT_RDVS_PASSES = FIN_RDVS_PASSES.minus({ day: 6 })
-
-    const rdvsPasses =
-      await rendezVousService.getRendezVousConseillerClientSide(
-        conseiller!.id,
-        DEBUT_RDVS_PASSES.toFormat('yyyy-MM-dd'),
-        FIN_RDVS_PASSES.toFormat('yyyy-MM-dd')
-      )
-
-    setRdvs(rdvsPasses.map(rdvToListItem))
-    setDebutPeriode(DEBUT_RDVS_PASSES.toFormat('dd/MM/yyyy'))
-    setFinPeriode(FIN_RDVS_PASSES.toFormat('dd/MM/yyyy'))
+  async function allerRdvs7JoursPrecedants() {
+    const index7JoursPrecedants = index7JoursAffiches - 1
+    await chargerRdvs7Jours(index7JoursPrecedants)
+    setIndex7JoursAffiches(index7JoursPrecedants)
     setTrackingTitle(`${trackingTitle} passés`)
   }
 
-  function allerRdvsSemaineCourante() {
-    const AUJOURDHUI = DateTime.now()
-    const FIN_SEMAINE_COURANTE = AUJOURDHUI.plus({ day: 6 })
-
-    setRdvs(rendezVous)
-    setDebutPeriode(AUJOURDHUI.toFormat('dd/MM/yyyy'))
-    setFinPeriode(FIN_SEMAINE_COURANTE.toFormat('dd/MM/yyyy'))
+  async function allerRdvs7JoursActuels() {
+    const index7JoursActuels = 0
+    await chargerRdvs7Jours(index7JoursActuels)
+    setIndex7JoursAffiches(index7JoursActuels)
+    setTrackingTitle(trackingTitle)
   }
 
-  async function allerRdvsSemaineFuture() {
-    const FORMAT_DATE_DEBUT = DateTime.fromFormat(finPeriode, 'dd/MM/yyyy')
-    const DEBUT_RDVS_FUTURS = FORMAT_DATE_DEBUT.plus({ day: 1 })
-    const FIN_RDVS_FUTURS = DEBUT_RDVS_FUTURS.plus({ day: 6 })
-
-    const rdvsFuturs =
-      await rendezVousService.getRendezVousConseillerClientSide(
-        conseiller!.id,
-        DEBUT_RDVS_FUTURS.toFormat('yyyy-MM-dd'),
-        FIN_RDVS_FUTURS.toFormat('yyyy-MM-dd')
-      )
-    setRdvs(rdvsFuturs.map(rdvToListItem))
-    setDebutPeriode(DEBUT_RDVS_FUTURS.toFormat('dd/MM/yyyy'))
-    setFinPeriode(FIN_RDVS_FUTURS.toFormat('dd/MM/yyyy'))
+  async function allerRdvs7JoursSuivants() {
+    const index7JoursSuivants = index7JoursAffiches + 1
+    await chargerRdvs7Jours(index7JoursSuivants)
+    setIndex7JoursAffiches(index7JoursSuivants)
     setTrackingTitle(`${trackingTitle} futurs`)
   }
 
+  async function chargerRdvs7Jours(index7Jours: number) {
+    const rdvs7Jours = await rendezVousService.getRendezVousConseiller(
+      conseiller!.id,
+      jourDeDebutDesRdvs(index7Jours),
+      jourDeFinDesRdvs(index7Jours)
+    )
+    if (rdvs7Jours) setRdvs(rdvs7Jours.map(rdvToListItem))
+  }
+
+  function jourDeDebutDesRdvs(index7Jours?: number): DateTime {
+    return AUJOURDHUI.plus({
+      day: 7 * (index7Jours ?? index7JoursAffiches),
+    })
+  }
+
+  function jourDeFinDesRdvs(index7Jours?: number): DateTime {
+    return jourDeDebutDesRdvs(index7Jours ?? index7JoursAffiches)
+      .plus({ day: 6 })
+      .endOf('day')
+  }
+
+  useMatomo(trackingTitle)
+
   useEffect(() => {
-    setRdvs(rendezVous)
-  }, [rendezVous])
+    if (conseiller) chargerRdvs7Jours(index7JoursAffiches)
+  }, [conseiller, index7JoursAffiches])
 
   return (
     <>
@@ -118,19 +108,20 @@ function MesRendezvous({
           <Button
             type='button'
             style={ButtonStyle.SECONDARY}
-            onClick={allerRdvsSemaineCourante}
+            onClick={allerRdvs7JoursActuels}
           >
             <span className='sr-only'>Aller à la</span> Semaine en cours
           </Button>
         </div>
 
         <div className='flex items-center mt-1'>
           <p className='text-m-bold text-primary mr-6'>
-            du {debutPeriode} au {finPeriode}
+            du {jourDeDebutDesRdvs().toFormat('dd/MM/yyyy')} au{' '}
+            {jourDeFinDesRdvs().toFormat('dd/MM/yyyy')}
           </p>
           <button
             aria-label='Aller à la semaine précédente'
-            onClick={allerRdvsPasses}
+            onClick={allerRdvs7JoursPrecedants}
           >
             <IconComponent
               name={IconName.ChevronLeft}
@@ -141,7 +132,7 @@ function MesRendezvous({
           </button>
           <button
             aria-label='Aller à la semaine suivante'
-            onClick={allerRdvsSemaineFuture}
+            onClick={allerRdvs7JoursSuivants}
           >
             <IconComponent
               name={IconName.ChevronRight}
@@ -155,7 +146,7 @@ function MesRendezvous({
 
       <TableauRdv
         idConseiller={conseiller?.id ?? ''}
-        rdvs={rdvs}
+        rdvs={rdvs ?? []}
         withIntercalaires={true}
       />
     </>
@@ -171,30 +162,13 @@ export const getServerSideProps: GetServerSideProps<
   }
 
   const {
-    session: { user, accessToken },
+    session: { user },
   } = sessionOrRedirect
   if (user.structure === StructureConseiller.POLE_EMPLOI) {
     return { notFound: true }
   }
 
-  const AUJOURDHUI = DateTime.now()
-  const FIN_SEMAINE_COURANTE = AUJOURDHUI.plus({ day: 6 })
-
-  const rendezVousService =
-    withDependance<RendezVousService>('rendezVousService')
-
-  const rendezVousSemaineCourante =
-    await rendezVousService.getRendezVousConseillerServerSide(
-      user.id,
-      accessToken,
-      AUJOURDHUI.toFormat('yyyy-MM-dd'),
-      FIN_SEMAINE_COURANTE.toFormat('yyyy-MM-dd')
-    )
-
   const props: MesRendezvousProps = {
-    rendezVous: rendezVousSemaineCourante.map(rdvToListItem),
-    dateDebut: AUJOURDHUI.toFormat('dd/MM/yyyy'),
-    dateFin: FIN_SEMAINE_COURANTE.toFormat('dd/MM/yyyy'),
     pageTitle: 'Tableau de bord - Mes rendez-vous',
     pageHeader: 'Mes rendez-vous',
   }

diff --git a/services/rendez-vous.service.ts b/services/rendez-vous.service.ts
@@ -10,19 +10,13 @@ import {
 } from 'interfaces/json/rdv'
 import { Rdv, TypeRendezVous } from 'interfaces/rdv'
 import { ApiError } from 'utils/httpClient'
+import { DateTime } from 'luxon'
 
 export interface RendezVousService {
-  getRendezVousConseillerServerSide(
+  getRendezVousConseiller(
     idConseiller: string,
-    accessToken: string,
-    dateDebut: string,
-    dateFin: string
-  ): Promise<Rdv[]>
-
-  getRendezVousConseillerClientSide(
-    idConseiller: string,
-    dateDebut?: string,
-    dateFin?: string
+    dateDebut: DateTime,
+    dateFin: DateTime
   ): Promise<Rdv[]>
 
   getRendezVousJeune(idJeune: string, accessToken: string): Promise<Rdv[]>
@@ -44,33 +38,21 @@ export interface RendezVousService {
 export class RendezVousApiService implements RendezVousService {
   constructor(private readonly apiClient: ApiClient) {}
 
-  async getRendezVousConseillerServerSide(
+  async getRendezVousConseiller(
     idConseiller: string,
-    accessToken: string,
-    dateDebut: string,
-    dateFin: string
+    dateDebut: DateTime,
+    dateFin: DateTime
   ): Promise<Rdv[]> {
+    const session = await getSession()
+    const dateDebutUrlEncoded = encodeURIComponent(dateDebut.toISO())
+    const dateFinUrlEncoded = encodeURIComponent(dateFin.toISO())
     const { content: rdvs } = await this.apiClient.get<RdvJson[]>(
-      `/v2/conseillers/${idConseiller}/rendezvous?dateDebut=${dateDebut}&dateFin=${dateFin}`,
-      accessToken
+      `/v2/conseillers/${idConseiller}/rendezvous?dateDebut=${dateDebutUrlEncoded}&dateFin=${dateFinUrlEncoded}`,
+      session!.accessToken
     )
     return rdvs.map(jsonToRdv)
   }
 
-  async getRendezVousConseillerClientSide(
-    idConseiller: string,
-    dateDebut: string,
-    dateFin: string
-  ): Promise<Rdv[]> {
-    const session = await getSession()
-    return this.getRendezVousConseillerServerSide(
-      idConseiller,
-      session!.accessToken,
-      dateDebut,
-      dateFin
-    )
-  }
-
   async getRendezVousJeune(
     idJeune: string,
     accessToken: string