✨ Structuration de TargetSelection

source/components/TargetSelection.js

@@ -73,7 +73,6 @@ export default class TargetSelection extends Component {
 				curry(findRuleByName)(flatRules)
 			),
 			{
-				textColourOnWhite,
 				missingVariablesByTarget,
 				conversationStarted,
 				activeInput,
@@ -85,43 +84,14 @@ export default class TargetSelection extends Component {
 				<ul id="targets">
 					{popularTargets.map(s => (
 						<li key={s.name}>
-							<span className="header">
-								{conversationStarted && (
-									<span
-										className="progressCircle"
-										style={{
-											visibility:
-												activeInput === s.dottedName ? 'hidden' : 'visible'
-										}}
-									>
-										{do {
-											let mv = missingVariablesByTarget[s.dottedName],
-												number = mv && mv.missingVariables.length,
-												ratio = number / 16
-											ratio === 0 ? (
-												<i className="fa fa-check" aria-hidden="true" />
-											) : (
-												<Circle
-													percent={100 - ratio * 100}
-													strokeWidth="15"
-													strokeColor="#5de662"
-													trailColor="#fff"
-													trailWidth="5"
-												/>
-											)
-										}}
-									</span>
-								)}
-
-								<span className="texts">
-									<span className="optionTitle">
-										<Link to={'/règle/' + s.dottedName}>
-											{s.title || s.name}
-										</Link>
-									</span>
-									{!conversationStarted && <p>{s['résumé']}</p>}
-								</span>
-							</span>
+							<Header
+								{...{
+									conversationStarted,
+									s,
+									missingVariablesByTarget,
+									activeInput
+								}}
+							/>
 							<TargetInputOrValue
 								{...{
 									s,
@@ -139,6 +109,49 @@ export default class TargetSelection extends Component {
 		)
 	}
 }
+
+let Header = ({
+	conversationStarted,
+	s,
+	missingVariablesByTarget,
+	activeInput
+}) => (
+	<span className="header">
+		{conversationStarted && (
+			<span
+				className="progressCircle"
+				style={{
+					visibility: activeInput === s.dottedName ? 'hidden' : 'visible'
+				}}
+			>
+				{do {
+					let mv = missingVariablesByTarget[s.dottedName],
+						number = mv && mv.missingVariables.length,
+						ratio = number / 16
+					ratio === 0 ? (
+						<i className="fa fa-check" aria-hidden="true" />
+					) : (
+						<Circle
+							percent={100 - ratio * 100}
+							strokeWidth="15"
+							strokeColor="#5de662"
+							trailColor="#fff"
+							trailWidth="5"
+						/>
+					)
+				}}
+			</span>
+		)}
+
+		<span className="texts">
+			<span className="optionTitle">
+				<Link to={'/règle/' + s.dottedName}>{s.title || s.name}</Link>
+			</span>
+			{!conversationStarted && <p>{s['résumé']}</p>}
+		</span>
+	</span>
+)
+
 let validate = buildValidationFunction(formValueTypes['euros'])
 let InputComponent = ({ input, meta: { dirty, error } }) => (
 	<span>