From c629a75466037de6141f1735f257b87a95f37673 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Rialland?= <wiinxt@gmail.com>
Date: Wed, 7 Jun 2023 16:56:45 +0200
Subject: [PATCH] Fix async bug when click on next button

---
 .../_components/Navigation.tsx                | 54 +++++++++++++------
 .../choix-du-statut/détails-activité.tsx      |  8 ++-
 .../choix-du-statut/recherche-activité.tsx    |  9 ++--
 3 files changed, 49 insertions(+), 22 deletions(-)

diff --git a/site/source/pages/assistants/choix-du-statut/_components/Navigation.tsx b/site/source/pages/assistants/choix-du-statut/_components/Navigation.tsx
index 9b963da6d..08b40da21 100644
--- a/site/source/pages/assistants/choix-du-statut/_components/Navigation.tsx
+++ b/site/source/pages/assistants/choix-du-statut/_components/Navigation.tsx
@@ -4,9 +4,12 @@ import styled from 'styled-components'
 
 import { Button } from '@/design-system/buttons'
 import { Grid } from '@/design-system/layout'
-import { useSitePaths } from '@/sitePaths'
+import { RelativeSitePaths, useSitePaths } from '@/sitePaths'
 
-export const stepOrder = [
+type ChoixStatut = RelativeSitePaths['assistants']['choix-du-statut']
+type Step = keyof ChoixStatut
+
+export const stepOrder: readonly Step[] = [
 	'recherche-activité',
 	'détails-activité',
 	'département',
@@ -17,8 +20,6 @@ export const stepOrder = [
 	'résultat',
 ] as const
 
-type Step = (typeof stepOrder)[number]
-
 function useCurrentStep() {
 	const { relativeSitePaths, absoluteSitePaths } = useSitePaths()
 	const localizedStep = useMatch(
@@ -28,17 +29,18 @@ function useCurrentStep() {
 		return null
 	}
 
-	const currentStep = Object.entries(
+	const entries = Object.entries(
 		relativeSitePaths.assistants['choix-du-statut']
-	).find(
-		([, value]) => value === localizedStep
-	)?.[0] as keyof (typeof relativeSitePaths.assistants)['choix-du-statut']
+	) as [Step, ChoixStatut[Step]][]
 
-	if (!stepOrder.includes(currentStep as Step)) {
+	const [currentStep] =
+		entries.find(([, value]) => value === localizedStep) ?? []
+
+	if (!currentStep || !stepOrder.includes(currentStep)) {
 		return null
 	}
 
-	return currentStep as Step
+	return currentStep
 }
 
 export default function Navigation({
@@ -48,7 +50,7 @@ export default function Navigation({
 }: {
 	currentStepIsComplete: boolean
 	nextStepLabel?: false | string
-	onNextStep?: () => void
+	onNextStep?: (next: { nextStep: string; nextAbsolutePath: string }) => void
 }) {
 	const { t } = useTranslation()
 	const { absoluteSitePaths } = useSitePaths()
@@ -57,8 +59,10 @@ export default function Navigation({
 	if (!currentStep) {
 		return null
 	}
-	const nextStep = stepOrder[stepOrder.indexOf(currentStep) + 1]
-	const previousStep = stepOrder[stepOrder.indexOf(currentStep) - 1]
+
+	type PartialStep = Step | undefined
+	const nextStep = stepOrder[stepOrder.indexOf(currentStep) + 1] as PartialStep
+	const prevStep = stepOrder[stepOrder.indexOf(currentStep) - 1] as PartialStep
 
 	return (
 		<StyledNavigation>
@@ -69,7 +73,7 @@ export default function Navigation({
 						color={'secondary'}
 						to={
 							absoluteSitePaths.assistants['choix-du-statut'][
-								previousStep || 'index'
+								prevStep || 'index'
 							]
 						}
 					>
@@ -79,8 +83,24 @@ export default function Navigation({
 				{nextStep && (
 					<Grid item>
 						<Button
-							onPress={onNextStep}
-							to={absoluteSitePaths.assistants['choix-du-statut'][nextStep]}
+							onPress={() =>
+								onNextStep?.({
+									nextStep,
+									nextAbsolutePath:
+										absoluteSitePaths.assistants['choix-du-statut'][nextStep],
+								})
+							}
+							// Probleme de desynchronisation entre le onpress et le to, le onpress n'est pas toujours appelé avant le to
+							// to={absoluteSitePaths.assistants['choix-du-statut'][nextStep]}
+
+							// est ce qu'on devrait pas utiliser les parametres de l'url comme ca ?
+							// to={{
+							// 	pathname:
+							// 		absoluteSitePaths.assistants['choix-du-statut'][nextStep],
+							// 	search: createSearchParams({
+							// 		codeAPE: '6201Z',
+							// 	}).toString(),
+							// }}
 							isDisabled={!currentStepIsComplete}
 							aria-label={t("Suivant, passer à l'étape suivante")}
 						>
@@ -100,6 +120,6 @@ const StyledNavigation = styled.div`
 	margin: 0 -1rem;
 	bottom: 0;
 	background: ${({ theme }) => theme.colors.extended.grey[100]};
-	z-index: 1;
+	z-index: 2;
 	/* box-shadow: ${({ theme }) => theme.elevations[6]}; */
 `
diff --git a/site/source/pages/assistants/choix-du-statut/détails-activité.tsx b/site/source/pages/assistants/choix-du-statut/détails-activité.tsx
index 99cead45d..60d54f850 100644
--- a/site/source/pages/assistants/choix-du-statut/détails-activité.tsx
+++ b/site/source/pages/assistants/choix-du-statut/détails-activité.tsx
@@ -22,7 +22,7 @@ import {
 import Layout from './_components/Layout'
 import Navigation from './_components/Navigation'
 
-export default function Activité() {
+export default function DétailsActivité() {
 	const { t } = useTranslation()
 	const codeApe = useEngine().evaluate(
 		'entreprise . activités . principale . code APE'
@@ -107,7 +107,11 @@ function GuichetSelection({
 	return (
 		<>
 			<Body>Sectionnez la description d'activité qui correspond le mieux.</Body>
-			<RadioCardGroup value={codeGuichet} onChange={onGuichetSelected}>
+			<RadioCardGroup
+				value={codeGuichet}
+				onChange={onGuichetSelected}
+				aria-label={'liste des activités'}
+			>
 				{entries.map((guichetEntry) => {
 					return (
 						<RadioCardSkeleton
diff --git a/site/source/pages/assistants/choix-du-statut/recherche-activité.tsx b/site/source/pages/assistants/choix-du-statut/recherche-activité.tsx
index 7c2698717..ff36e0d24 100644
--- a/site/source/pages/assistants/choix-du-statut/recherche-activité.tsx
+++ b/site/source/pages/assistants/choix-du-statut/recherche-activité.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { useDispatch } from 'react-redux'
+import { useNavigate } from 'react-router-dom'
 
 import { Message } from '@/design-system'
 import { HelpButtonWithPopover } from '@/design-system/buttons'
@@ -13,8 +14,9 @@ import SearchCodeAPE from '../recherche-code-ape/SearchCodeAPE'
 import Layout from './_components/Layout'
 import Navigation from './_components/Navigation'
 
-export default function Activité() {
+export default function RechercheActivité() {
 	const [codeApe, setCodeApe] = useState('')
+	const naviguate = useNavigate()
 	const { t } = useTranslation()
 	const dispatch = useDispatch()
 
@@ -55,14 +57,15 @@ export default function Activité() {
 				<SearchCodeAPE hideGuichetUnique onCodeAPESelected={setCodeApe} />
 				<Navigation
 					currentStepIsComplete={!!codeApe}
-					onNextStep={() =>
+					onNextStep={({ nextAbsolutePath }) => {
 						dispatch(
 							updateSituation(
 								'entreprise . activités . principale . code APE',
 								`'${codeApe}'`
 							)
 						)
-					}
+						naviguate(nextAbsolutePath)
+					}}
 				/>
 			</Layout>
 		</>