From c201b04012ec47f478702f343a263e92db81a01d Mon Sep 17 00:00:00 2001
From: Mael <mael.thomas@data.gouv.fr>
Date: Wed, 21 Mar 2018 12:02:24 +0100
Subject: [PATCH] :sparkles: Nettoyage de TargetSelection

---
 source/components/TargetSelection.css         |   6 -
 source/components/TargetSelection.js          | 122 ++++++++----------
 .../components/conversation/FormDecorator.js  |   9 +-
 source/components/pages/Home.js               |   1 -
 source/containers/App.dev.js                  |   3 +
 5 files changed, 65 insertions(+), 76 deletions(-)

diff --git a/source/components/TargetSelection.css b/source/components/TargetSelection.css
index 8fd4797b4..60cfa049c 100644
--- a/source/components/TargetSelection.css
+++ b/source/components/TargetSelection.css
@@ -109,11 +109,5 @@ border: none;
 	font-size: 120%;
 	vertical-align: middle;
 }
-#targetSelection .valueTypeIcon {
-		display: none;
-	margin: 0 0.4em;
-	font-size: 80%;
-	opacity: 0.5;
-}
 
 /* Autre idée pour styler les checkboxes https://codepen.io/KenanYusuf/pen/PZKEKd */
diff --git a/source/components/TargetSelection.js b/source/components/TargetSelection.js
index 4bbd5078c..442a01e0d 100644
--- a/source/components/TargetSelection.js
+++ b/source/components/TargetSelection.js
@@ -1,28 +1,15 @@
 import React, { Component } from 'react'
 import { Trans, translate } from 'react-i18next'
-import { connect } from 'react-redux'
+import formValueTypes from 'Components/conversation/formValueTypes'
 import { rules, findRuleByName } from 'Engine/rules'
-import {
-	reject,
-	propEq,
-	curry,
-	pipe,
-	equals,
-	filter,
-	contains,
-	length,
-	without,
-	append,
-	ifElse
-} from 'ramda'
-import { Link } from 'react-router-dom'
+import { propEq, contains, without, curry, append, ifElse } from 'ramda'
 import './TargetSelection.css'
 import BlueButton from './BlueButton'
 import { Field, reduxForm, formValueSelector } from 'redux-form'
 import { connect } from 'react-redux'
 import { RuleValue } from './rule/RuleValueVignette'
 import classNames from 'classnames'
-
+import { buildValidationFunction } from './conversation/FormDecorator'
 export let salaries = ['salaire total', 'salaire de base', 'salaire net']
 export let popularTargetNames = [...salaries, 'aides employeur']
 
@@ -91,7 +78,6 @@ export default class TargetSelection extends Component {
 	renderOutputList() {
 		let popularTargets = popularTargetNames.map(curry(findRuleByName)(flatRules)),
 			{
-				targets,
 				conversationTargetNames,
 				textColourOnWhite,
 				setConversationTargets
@@ -157,55 +143,15 @@ export default class TargetSelection extends Component {
 									}
 									<span className="optionTitle">{s.title || s.name}</span>
 								</label>
-								<span className="targetInputOrValue">
-									{this.state.activeInput === s.dottedName ? (
-										<>
-											<Field
-												name={s.dottedName}
-												component="input"
-												type="text"
-												autoFocus
-											/>
-											{this.props.targets.length > 0 && (
-												<i
-													className="fa fa-pencil-o valueTypeIcon"
-													aria-hidden="true"
-												/>
-											)}
-										</>
-									) : (
-										<>
-											<span
-												className={classNames({
-													editable: s.question,
-													attractClick:
-														s.question && this.props.targets.length === 0
-												})}
-												onClick={() => {
-													s.question &&
-														this.setState({ activeInput: s.dottedName })
-												}}
-											>
-												{do {
-													let rule = this.props.targets.find(
-															propEq('dottedName', s.dottedName)
-														),
-														value = rule && rule.nodeValue
-													;<RuleValue value={value} />
-												}}
-												{this.props.targets.length > 0 && (
-													<i
-														className="fa fa-calculator valueTypeIcon"
-														aria-hidden="true"
-													/>
-												)}
-											</span>
-										</>
-									)}
-									{(this.firstEstimationComplete || s.question) && (
-										<span className="unit">€</span>
-									)}
-								</span>
+								<TargetOrInputValue
+									{...{
+										s,
+										targets: this.props.targets,
+										firstEstimationComplete: this.firstEstimationComplete,
+										activeInput: this.state.activeInput,
+										setActiveInput: name => this.setState({ activeInput: name })
+									}}
+								/>
 							</div>
 							<p>{s['résumé']}</p>
 						</div>
@@ -215,3 +161,47 @@ export default class TargetSelection extends Component {
 		)
 	}
 }
+
+let InputComponent = ({ input, meta: { dirty, error } }) => (
+	<span>
+		<input type="text" {...input} autoFocus />
+
+		{dirty && error && <span className="step-input-error">{error}</span>}
+	</span>
+)
+let TargetOrInputValue = ({
+	s,
+	targets,
+	firstEstimationComplete,
+	activeInput,
+	setActiveInput
+}) => (
+	<span className="targetInputOrValue">
+		{activeInput === s.dottedName ? (
+			<Field name={s.dottedName} component={InputComponent} type="text" />
+		) : (
+			<>
+				<span
+					className={classNames({
+						editable: s.question,
+						attractClick: s.question && targets.length === 0
+					})}
+					onClick={() => {
+						s.question && setActiveInput(s.dottedName)
+					}}
+				>
+					{do {
+						let rule = targets.find(propEq('dottedName', s.dottedName)),
+							value = rule && rule.nodeValue
+						;<RuleValue value={value} />
+					}}
+				</span>
+			</>
+		)}
+		{(firstEstimationComplete || s.question) && <span className="unit">€</span>}
+	</span>
+)
+
+/* 
+				validate={buildValidationFunction(formValueTypes['euros'])}
+						*/
diff --git a/source/components/conversation/FormDecorator.js b/source/components/conversation/FormDecorator.js
index 02181e51d..4b78d8047 100644
--- a/source/components/conversation/FormDecorator.js
+++ b/source/components/conversation/FormDecorator.js
@@ -70,9 +70,7 @@ export var FormDecorator = formType => RenderField =>
 			/* There won't be any answer zone here, widen the question zone */
 			let wideQuestion = formType == 'rhetorical-question' && !possibleChoice
 
-			let { pre = v => v, test, error } = valueType ? valueType.validator : {},
-				validate = test && (v => (v && test(pre(v)) ? undefined : error)),
-				inversionQ = path(['props', 'inversion', 'question'])(this)
+			let validate = buildValidationFunction(valueType)
 
 			let submit = cause =>
 					//TODO hack, enables redux-form/CHANGE to update the form state before the traverse functions are run
@@ -164,3 +162,8 @@ export var FormDecorator = formType => RenderField =>
 			)
 		}
 	}
+
+export let buildValidationFunction = valueType => {
+	let { pre = v => v, test, error } = valueType ? valueType.validator : {}
+	return test && (v => (v && test(pre(v)) ? undefined : error))
+}
diff --git a/source/components/pages/Home.js b/source/components/pages/Home.js
index 678f5063d..5ab8a7897 100644
--- a/source/components/pages/Home.js
+++ b/source/components/pages/Home.js
@@ -2,7 +2,6 @@ import React, { Component } from 'react'
 import { Trans, translate } from 'react-i18next'
 import './Pages.css'
 import './Home.css'
-import TargetSelection from '../TargetSelection'
 import withColours from '../withColours'
 import Simu from '../Simu'
 
diff --git a/source/containers/App.dev.js b/source/containers/App.dev.js
index 4b81952c4..207860432 100644
--- a/source/containers/App.dev.js
+++ b/source/containers/App.dev.js
@@ -7,6 +7,9 @@ export default ({ store }) => (
 	<Provider store={store}>
 		<div id="dev">
 			<Layout />
+			{/*
+			<DevTools />
+			*/}
 		</div>
 	</Provider>
 )