Bouton qui injecte ou cache la situation dans les règles

package.json

@@ -20,13 +20,13 @@
     "nearley": "^2.7.14",
     "npm": "^4.4.1",
     "ramda": "^0.23.0",
-    "react": "^15.0.1",
-    "react-dom": "^15.0.1",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2",
     "react-json-tree": "^0.10.0",
-    "react-redux": "^5.0.2",
+    "react-redux": "^5.0.3",
     "react-router": "^3.0.2",
     "reduce-reducers": "^0.1.2",
-    "redux": "^3.5.2",
+    "redux": "^3.6.0",
     "redux-form": "^6.4.3",
     "redux-saga": "^0.14.3",
     "reselect": "^2.5.2",

source/components/Results.js

@@ -15,7 +15,6 @@ let humanFigure = decimalDigits => value => fmt(value.toFixed(decimalDigits))
 export default class Results extends Component {
 	render() {
 		let {analysedSituation, pointedOutObjectives} = this.props
-
 		// On travaille sur un objectif qui est une somme de plusieurs variables, et c'est ces variables que nous affichons comme résultats
 
 		let explanation = R.path(['formule', 'explanation', 'explanation'])(analysedSituation)

source/components/Rule.css

@@ -61,9 +61,29 @@
 	color: #333350
 }
 #rule-rules {
-	display: flex;
+	display: inline-flex;
 	justify-content: start;
 	min-height: 5em;
+	width: 80%;
+}
+
+#rule-rules .situationValue {
+	display: none;
+	padding-left: 1em;
+	font-weight: 600;
+	color: #333350;
+}
+
+#rule-rules.showValues .situationValue {
+	display: inline;
+}
+
+#showValues {
+	background: rgb(74, 137, 220);
+	color: white;
+	border: none;
+	font-size: 120%;
+	padding: .5em;
 }
 
 #rule-rules section {
@@ -121,12 +141,6 @@
 	padding-left: .3em;
 }
 
-#rule-rules .situationValue {
-	padding-left: 1em;
-	font-weight: 600;
-	color: #333350;
-}
-
 .maximum .description {
 	font-style: italic;
 	font-weight: 600;
@@ -134,10 +148,6 @@
 	margin-left: 1em;
 }
 
-.situationValue {
-	opacity: .6
-}
-
 .condition {
 	margin-bottom: .6em;
 }

source/components/Rule.js

@@ -8,22 +8,39 @@ import PageTypeIcon from './PageTypeIcon'
 import {connect} from 'react-redux'
 import {formValueSelector} from 'redux-form'
 import mockSituation from '../engine/mockSituation.yaml'
+import {START_CONVERSATION} from '../actions'
+import classNames from 'classnames'
 
 // situationGate function useful for testing :
 let testingSituationGate = v => // eslint-disable-line no-unused-vars
 	R.path(v.split('.'))(mockSituation)
 
-@connect(state => ({
-	// situationGate: name => formValueSelector('conversation')(state, name),
-	analysedSituation: state.analysedSituation
-}))
+@connect(
+	state => ({
+		// situationGate: name => formValueSelector('conversation')(state, name),
+		analysedSituation: state.analysedSituation,
+		form: state.form
+	}),
+	dispatch => ({
+		startConversation: () => dispatch({type: START_CONVERSATION}),
+	})
+)
 export default class Rule extends Component {
+	state = {
+		showValues: false
+	}
+	componentDidMount() {
+		// C'est ici que la génération du formulaire, et donc la traversée des variables commence
+		this.props.startConversation()
+	}
 	render() {
 		let {
 			params: {name},
-			analysedSituation
+			analysedSituation,
+			form
 		} = this.props,
 			objectives = R.path(['formule', 'explanation', 'explanation'])(analysedSituation)
+
 		if (!objectives) return null
 
 		let rule = objectives.find(R.pathEq(['explanation', 'name'], name)).explanation
@@ -33,6 +50,10 @@ export default class Rule extends Component {
 			return null
 		}
 
+		let
+			situationExists = !R.isEmpty(form),
+			showValues = situationExists && this.state.showValues
+
 		return (
 			<div id="rule">
 				<PageTypeIcon type="comprendre"/>
@@ -57,7 +78,7 @@ export default class Rule extends Component {
 					</div>
 				</section>
 				<p>Pourquoi cette règle me concerne ? Comment est-elle calculée ? C'est pas très lisible pour l'instant, mais ça le deviendra</p>
-				<section id="rule-rules">
+				<section id="rule-rules" className={classNames({showValues})}>
 					{ do {
 						let [,cond] =
 							R.toPairs(rule).find(([,v]) => v.rulePropType == 'cond') || []
@@ -71,8 +92,14 @@ export default class Rule extends Component {
 						<h2>Calcul</h2>
 						{rule['formule'].jsx}
 					</section>
+					{situationExists &&
+						<button id="showValues" onClick={() => this.setState({showValues: !this.state.showValues})}>
+							<i className="fa fa-rocket" aria-hidden="true"></i> &nbsp;{!showValues ? 'Injecter votre situation' : 'Cacher votre situation'}
+						</button>
+					}
 				</section>
 
+
 				{/* <pre>
 						<JSONView data={rule} />
 				</pre> */}

source/containers/Home.js

@@ -3,6 +3,7 @@ import './Home.css'
 import {searchRules} from '../engine/rules.js'
 import {Link} from 'react-router'
 import '../components/Rule.css'
+import R from 'ramda'
 
 export default class Home extends Component {
 	state = {
@@ -41,7 +42,7 @@ export default class Home extends Component {
             <section id="search-results">
               <ul>
                 {this.state.userSearch != null &&
-                  searchRules(this.state.userSearch).map(({type, name}) => (
+                  searchRules(this.state.userSearch).map(({type, name}) => R.contains(type, ['Indemnité', 'Cotisation']) && (
                     <li key={name}>
                       <span className="rule-type">
                         {type}