From 16fe12ac3664f8599855ae53095ecfd915779914 Mon Sep 17 00:00:00 2001
From: mama <mael.thomas@data.gouv.fr>
Date: Wed, 7 Feb 2018 18:16:23 +0100
Subject: [PATCH] Nouveau composant saisie salaire (2)

---
 source/components/Simulateur.js               | 35 ++-----------------
 .../conversation/InversionInput.css           |  6 ++++
 .../components/conversation/InversionInput.js | 28 ++++++++++++++-
 source/engine/generateQuestions.js            | 18 +++-------
 4 files changed, 39 insertions(+), 48 deletions(-)
 create mode 100644 source/components/conversation/InversionInput.css

diff --git a/source/components/Simulateur.js b/source/components/Simulateur.js
index 1162b9f79..5a8d852ea 100644
--- a/source/components/Simulateur.js
+++ b/source/components/Simulateur.js
@@ -32,7 +32,6 @@ import Explanation from 'Components/Explanation'
 		targetNames: state.targetNames,
 		done: state.done,
 		nextSteps: state.nextSteps,
-		inputInversions: formValueSelector('conversation')(state, 'inversions'),
 		analysis: state.analysis,
 		parsedRules: state.parsedRules
 	}),
@@ -81,7 +80,6 @@ export default class extends Component {
 				foldedSteps,
 				currentQuestion,
 				themeColours,
-				inputInversions,
 				done,
 				parsedRules
 			} = this.props,
@@ -111,14 +109,12 @@ export default class extends Component {
 							currentQuestion &&
 							getInputComponent({ unfolded: true })(
 								flatRules,
-								this.targetNames,
-								inputInversions
+								this.targetNames
 							)(currentQuestion),
 						foldedSteps: map(
 							getInputComponent({ unfolded: false })(
 								flatRules,
-								this.targetNames,
-								inputInversions
+								this.targetNames
 							),
 							foldedSteps
 						),
@@ -136,31 +132,4 @@ export default class extends Component {
 			</div>
 		)
 	}
-
-	buildStep = ({ unfolded, flatRules }) => (
-		situationGate,
-		targetNames,
-		inputInversions
-	) => question => {
-		let step = makeQuestion(flatRules, targetNames)(question)
-
-		let fieldName =
-				(inputInversions &&
-					path(step.dottedName.split('.'), inputInversions)) ||
-				step.dottedName,
-			fieldTitle = findRuleByDottedName(flatRules, fieldName).title
-
-		return (
-			<step.component
-				key={step.dottedName}
-				{...omit('component', step)}
-				unfolded={unfolded}
-				step={omit('component', step)}
-				situationGate={situationGate}
-				fieldName={fieldName}
-				fieldTitle={fieldTitle}
-				inverted={step.dottedName !== fieldName}
-			/>
-		)
-	}
 }
diff --git a/source/components/conversation/InversionInput.css b/source/components/conversation/InversionInput.css
new file mode 100644
index 000000000..f1f06d32f
--- /dev/null
+++ b/source/components/conversation/InversionInput.css
@@ -0,0 +1,6 @@
+.step.inversionInput #inversions label {
+	display: flex;
+	flex-wrap: wrap;
+	margin-bottom: 0.6em;
+	margin-left: 1em;
+}
diff --git a/source/components/conversation/InversionInput.js b/source/components/conversation/InversionInput.js
index 1b2352a42..8c87a8256 100644
--- a/source/components/conversation/InversionInput.js
+++ b/source/components/conversation/InversionInput.js
@@ -3,7 +3,11 @@ import { FormDecorator } from './FormDecorator'
 import { answer, answered } from './userAnswerButtonStyle'
 import HoverDecorator from '../HoverDecorator'
 import Explicable from './Explicable'
-import { Field } from 'redux-form'
+import { Field, formValueSelector } from 'redux-form'
+import './InversionInput.css'
+import Input from './Input'
+import { connect } from 'react-redux'
+import { path } from 'ramda'
 
 @FormDecorator('inversionInput')
 export default class InversionInput extends Component {
@@ -36,7 +40,29 @@ export default class InversionInput extends Component {
 						{title || name}
 					</label>
 				))}
+				<InversionInputComponent />
 			</div>
 		)
 	}
 }
+
+@connect(state => ({
+	inputInversions: formValueSelector('conversation')(state, 'inversions')
+}))
+class InversionInputComponent extends Component {
+	render() {
+		let { inputInversions, dottedName } = this.props,
+			fieldName =
+				(inputInversions && path(dottedName.split('.'), inputInversions)) ||
+				dottedName
+		return (
+			<Input
+				{...{
+					fieldName
+				}}
+			/>
+		)
+	}
+}
+
+//TODO valueType: formValueTypes[rule.format],
diff --git a/source/engine/generateQuestions.js b/source/engine/generateQuestions.js
index 80996ff16..b1124b749 100644
--- a/source/engine/generateQuestions.js
+++ b/source/engine/generateQuestions.js
@@ -102,8 +102,7 @@ let buildPossibleInversion = (rule, rules, targetNames) => {
 // That's not great, but we won't invest more time until we have more diverse input components and a better type system.
 export let getInputComponent = ({ unfolded }) => (
 	rules,
-	targetNames,
-	inputInversions
+	targetNames
 ) => dottedName => {
 	let rule = findRuleByDottedName(rules, dottedName)
 
@@ -162,10 +161,7 @@ export let getInputComponent = ({ unfolded }) => (
 	// Now the numeric input case
 
 	// Check for inversions
-	let fieldName =
-			(inputInversions && path(dottedName.split('.'), inputInversions)) ||
-			commonProps.fieldName,
-		inversion = buildPossibleInversion(rule, rules, targetNames)
+	let inversion = buildPossibleInversion(rule, rules, targetNames)
 
 	/* In the case of an inversion, display a RadioInput component.
 	On click on one of the radios, display the corresponding input.
@@ -178,12 +174,7 @@ export let getInputComponent = ({ unfolded }) => (
 			<InversionInput
 				{...{
 					...commonProps,
-					valueType: formValueTypes[rule.format],
-					suggestions: rule.suggestions,
-					inversion,
-					inverted: dottedName !== fieldName,
-					fieldTitle: findRuleByDottedName(rules, fieldName).title,
-					fieldName
+					inversion
 				}}
 			/>
 		)
@@ -193,8 +184,7 @@ export let getInputComponent = ({ unfolded }) => (
 			{...{
 				...commonProps,
 				valueType: formValueTypes[rule.format],
-				suggestions: rule.suggestions,
-				fieldName
+				suggestions: rule.suggestions
 			}}
 		/>
 	)