From 782e84f99c213e4033ec8cd94e4767c7f0aa0ad1 Mon Sep 17 00:00:00 2001
From: Benjamin Arias <benjamin.j.arias@gmail.com>
Date: Mon, 12 Sep 2022 15:54:50 +0200
Subject: [PATCH] feat: Ajout partie redux permettant sauvegarder
 shouldFocusField

---
 site/source/actions/actions.ts                 |  7 +++++++
 .../components/conversation/Conversation.tsx   |  7 +++++--
 .../components/conversation/RuleInput.tsx      | 18 +++++++++++++++++-
 site/source/reducers/rootReducer.ts            |  8 ++++++++
 site/source/selectors/simulationSelectors.ts   |  3 +++
 5 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/site/source/actions/actions.ts b/site/source/actions/actions.ts
index f8bbe43e3..5021c5813 100644
--- a/site/source/actions/actions.ts
+++ b/site/source/actions/actions.ts
@@ -20,6 +20,7 @@ export type Action =
 			| typeof deleteFromSituation
 			| typeof updateUnit
 			| typeof batchUpdateSituation
+			| typeof updateShouldFocusField
 	  >
 	| CompanyCreationAction
 	| CompanyStatusAction
@@ -103,3 +104,9 @@ export const explainVariable = (variableName: DottedName | null = null) =>
 		type: 'EXPLAIN_VARIABLE',
 		variableName,
 	} as const)
+
+export const updateShouldFocusField = (shouldFocusField: boolean) =>
+	({
+		type: 'UPDATE_SHOULDFOCUSFIELD',
+		shouldFocusField,
+	} as const)
diff --git a/site/source/components/conversation/Conversation.tsx b/site/source/components/conversation/Conversation.tsx
index 55d9dbc42..6ca45d3e9 100644
--- a/site/source/components/conversation/Conversation.tsx
+++ b/site/source/components/conversation/Conversation.tsx
@@ -2,6 +2,7 @@ import {
 	deleteFromSituation,
 	goToQuestion,
 	stepAction,
+	updateShouldFocusField,
 	updateSituation,
 } from '@/actions/actions'
 import RuleInput from '@/components/conversation/RuleInput'
@@ -52,7 +53,10 @@ export default function Conversation({
 			dispatch(goToQuestion(currentQuestion))
 		}
 	}, [dispatch, currentQuestion])
-	const goToNextQuestion = () => dispatch(stepAction(currentQuestion))
+	const goToNextQuestion = () => {
+		dispatch(updateShouldFocusField(true))
+		dispatch(stepAction(currentQuestion))
+	}
 
 	const goToPrevious = () =>
 		dispatch(goToQuestion(previousAnswers.slice(-1)[0]))
@@ -104,7 +108,6 @@ export default function Conversation({
 								<RuleInput
 									dottedName={currentQuestion}
 									onChange={onChange}
-									autoFocus
 									key={currentQuestion}
 									onSubmit={goToNextQuestion}
 								/>
diff --git a/site/source/components/conversation/RuleInput.tsx b/site/source/components/conversation/RuleInput.tsx
index c42f61acb..2a7be68ee 100644
--- a/site/source/components/conversation/RuleInput.tsx
+++ b/site/source/components/conversation/RuleInput.tsx
@@ -1,6 +1,8 @@
+import { updateShouldFocusField } from '@/actions/actions'
 import NumberInput from '@/components/conversation/NumberInput'
 import SelectCommune from '@/components/conversation/select/SelectCommune'
 import { EngineContext } from '@/components/utils/EngineContext'
+import { shouldFocusFieldSelector } from '@/selectors/simulationSelectors'
 import { getMeta } from '@/utils'
 import { DottedName } from 'modele-social'
 import Engine, {
@@ -11,7 +13,8 @@ import Engine, {
 	reduceAST,
 	RuleNode,
 } from 'publicodes'
-import React, { useContext } from 'react'
+import React, { useContext, useEffect } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 import { Choice, MultipleAnswerInput, OuiNonInput } from './ChoicesInput'
 import DateInput from './DateInput'
 import ParagrapheInput from './ParagrapheInput'
@@ -80,6 +83,17 @@ export default function RuleInput<Names extends string = DottedName>({
 	const rule = engine.getRule(dottedName)
 	const evaluation = engine.evaluate({ valeur: dottedName, ...modifiers })
 	const value = evaluation.nodeValue
+	const dispatch = useDispatch()
+	const shouldFocusField = useSelector(shouldFocusFieldSelector)
+
+	useEffect(() => {
+		setTimeout(() => {
+			dispatch(updateShouldFocusField(false))
+		}, 0)
+
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [])
+
 	const commonProps: InputProps<Names> = {
 		dottedName,
 		value,
@@ -94,9 +108,11 @@ export default function RuleInput<Names extends string = DottedName>({
 		id: props.id ?? dottedName,
 		question: rule.rawNode.question,
 		suggestions: showSuggestions ? rule.suggestions : {},
+		autoFocus: shouldFocusField,
 		...props,
 	}
 	const meta = getMeta<{ affichage?: string }>(rule.rawNode, {})
+
 	if (getVariant(engine.getRule(dottedName))) {
 		const type =
 			inputType ??
diff --git a/site/source/reducers/rootReducer.ts b/site/source/reducers/rootReducer.ts
index 17be2d1ff..b5f20e8f6 100644
--- a/site/source/reducers/rootReducer.ts
+++ b/site/source/reducers/rootReducer.ts
@@ -73,6 +73,7 @@ export type Simulation = {
 	targetUnit: string
 	foldedSteps: Array<DottedName>
 	unfoldedStep?: DottedName | null
+	shouldFocusField: boolean
 }
 
 function simulation(
@@ -90,6 +91,7 @@ function simulation(
 			targetUnit: config['unité par défaut'] || '€/mois',
 			foldedSteps: [],
 			unfoldedStep: null,
+			shouldFocusField: false,
 		}
 	}
 
@@ -170,6 +172,12 @@ function simulation(
 				...state,
 				targetUnit: action.targetUnit,
 			}
+
+		case 'UPDATE_SHOULDFOCUSFIELD':
+			return {
+				...state,
+				shouldFocusField: action.shouldFocusField,
+			}
 	}
 
 	return state
diff --git a/site/source/selectors/simulationSelectors.ts b/site/source/selectors/simulationSelectors.ts
index 04c4c3d8b..ecaaa0e0c 100644
--- a/site/source/selectors/simulationSelectors.ts
+++ b/site/source/selectors/simulationSelectors.ts
@@ -47,3 +47,6 @@ export const currentQuestionSelector = (state: RootState) =>
 
 export const answeredQuestionsSelector = (state: RootState) =>
 	state.simulation?.foldedSteps ?? []
+
+export const shouldFocusFieldSelector = (state: RootState) =>
+	state.simulation?.shouldFocusField ?? false