Les URL de /règle et de /simu sont encodées

l'espace devient -

source/components/HomeEmbauche.js

@@ -30,7 +30,7 @@ export default class HomeEmbauche extends Component {
 								</div>
 								<div>
 									<span>Nouveau</span>
-									<a href="/simu/cdd/intro" target="_blank">Simuler le surcoût CDD (beta) <i className="fa fa-hand-o-right" aria-hidden="true"></i></a>
+									<a href="/simu/surcoût-CDD/intro">Simuler le surcoût CDD (beta) <i className="fa fa-hand-o-right" aria-hidden="true"></i></a>
 								</div>
 							</div>
 						</div>

source/components/HomeSyso.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react'
 import './HomeSyso.css'
-import {searchRules} from '../engine/rules.js'
+import {searchRules, encodeRuleName} from '../engine/rules.js'
 import {Link} from 'react-router-dom'
 import '../components/Rule.css'
 import R from 'ramda'
@@ -48,7 +48,7 @@ export default class Home extends Component {
                         {type}
                       </span>
                       <span className="rule-name">
-                        <Link to={`/regle/${name}`}>{name}</Link>
+                        <Link to={`/regle/${encodeRuleName(name)}`}>{name}</Link>
                       </span>
                     </li>
                   ))}
@@ -60,7 +60,7 @@ export default class Home extends Component {
             <ul>
               <li key="cdd">
                 <span className="simulateur">Surcoût du CDD</span>
-                <Link to="/simu/cdd/intro"><button>Essayer</button></Link>
+                <Link to="/simu/surcoût-CDD/intro"><button>Essayer</button></Link>
               </li>
               <li key="embauche">
                 <span className="simulateur">Prix global de l'embauche</span>

source/components/Results.js

@@ -6,6 +6,7 @@ import R from 'ramda'
 import './Results.css'
 import {capitalise0} from '../utils'
 import {computeRuleValue} from '../engine/traverse'
+import {encodeRuleName} from '../engine/rules'
 
 let fmt = new Intl.NumberFormat('fr-FR').format
 let humanFigure = decimalDigits => value => fmt(value.toFixed(decimalDigits))
@@ -49,7 +50,7 @@ export default class Results extends Component {
 								pointedOut = pointedOutObjectives.find(objective => objective == dottedName)
 
 								;<li key={name} className={classNames({unsatisfied, irrelevant, number, pointedOut})}>
-								<Link to={"/regle/" + name} className="understand">
+								<Link to={"/regle/" + encodeRuleName(name)} className="understand">
 									<div className="rule-box">
 										<div className="rule-type">
 											{type}

source/components/Rule.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import ReactDOM from 'react-dom'
-// import {findRuleByName} from '../engine/rules.js'
+import {decodeRuleName} from '../engine/rules.js'
 import './Rule.css'
 import JSONTree from 'react-json-tree'
 import R from 'ramda'
@@ -35,10 +35,11 @@ let testingSituationGate = v => // eslint-disable-line no-unused-vars
 export default class Rule extends Component {
 	render() {
 		let {
-			match: {params: {name}},
+			match: {params: {name: encodedName}},
 			situationGate,
 			form
-		} = this.props
+		} = this.props,
+		name = decodeRuleName(encodedName)
 
 		let rule = analyseSituation(name)(situationGate)
 		console.log('rule', rule)

source/components/Simulateur.js

@@ -11,7 +11,7 @@ import {Redirect, Link, withRouter} from 'react-router-dom'
 import {createMarkdownDiv} from '../engine/marked'
 import './Simulateur.css'
 import classNames from 'classnames'
-import {findRuleByName} from '../engine/rules'
+import {findRuleByName, decodeRuleName} from '../engine/rules'
 import {capitalise0} from '../utils'
 
 let situationSelector = formValueSelector('conversation')
@@ -36,20 +36,22 @@ export default class extends React.Component {
 		let {
 			match: {
 				params: {
-					name
+					name: encodedName
 				}
 			}
-		} = this.props
+		} = this.props,
+		name = decodeRuleName(encodedName)
 
+		this.encodedName = encodedName
 		this.name = name
 		this.rule = findRuleByName(name)
 
 		// C'est ici que la génération du formulaire, et donc la traversée des variables commence
-		if (this.rule)
+		if (this.rule.formule)
 			this.props.startConversation(name)
 	}
 	render(){
-		if (!this.rule) return <Redirect to="/404"/>
+		if (!this.rule.formule) return <Redirect to="/404"/>
 
 		let
 			started = !this.props.match.params.intro,
@@ -87,7 +89,7 @@ export default class extends React.Component {
 					<div>
 						<div className="action centered">
 							<p>{sim(['introduction', 'motivation']) || 'Simulez cette règle en quelques clics'}</p>
-							<button onClick={() => this.props.history.push(`/simu/${this.simulateurId}`)	}>
+							<button onClick={() => this.props.history.push(`/simu/${this.encodedName}`)	}>
 								C'est parti !
 							</button>
 						</div>

source/engine/rules.js

@@ -1,3 +1,4 @@
+
 // Séparation artificielle, temporaire, entre ces deux types de règles
 import rawRules from './load-rules'
 import R from 'ramda'
@@ -40,6 +41,9 @@ export let nameLeaf = R.pipe(
 	R.last
 )
 
+export let encodeRuleName = name => name.replace(/\s/g, '-')
+export let decodeRuleName = name => name.replace(/\-/g, ' ')
+
 /* Les variables peuvent être exprimées dans la formule d'une règle relativement à son propre espace de nom, pour une plus grande lisibilité. Cette fonction résoud cette ambiguité.
 */
 export let disambiguateRuleReference = ({ns, name}, partialName) => {