119 lines
3.8 KiB
JavaScript
119 lines
3.8 KiB
JavaScript
import R from 'ramda'
|
|
import React, {Component} from 'react'
|
|
import Helmet from 'react-helmet'
|
|
import {formValueSelector, reset} from 'redux-form'
|
|
import {connect} from 'react-redux'
|
|
import {Redirect, Link, withRouter} from 'react-router-dom'
|
|
import classNames from 'classnames'
|
|
|
|
import {START_CONVERSATION} from '../actions'
|
|
import {createMarkdownDiv} from 'Engine/marked'
|
|
import {rules, findRuleByName, decodeRuleName} from 'Engine/rules'
|
|
import './conversation/conversation.css'
|
|
import './Simulateur.css'
|
|
import {capitalise0} from '../utils'
|
|
import Conversation from './conversation/Conversation'
|
|
|
|
import ReactPiwik from 'react-piwik';
|
|
|
|
let situationSelector = formValueSelector('conversation')
|
|
|
|
@withRouter
|
|
@connect(
|
|
state => ({
|
|
situation: variableName => situationSelector(state, variableName),
|
|
foldedSteps: state.foldedSteps,
|
|
unfoldedSteps: state.unfoldedSteps,
|
|
extraSteps: state.extraSteps,
|
|
themeColours: state.themeColours,
|
|
analysedSituation: state.analysedSituation,
|
|
situationGate: state.situationGate,
|
|
}),
|
|
dispatch => ({
|
|
startConversation: rootVariable => dispatch({type: START_CONVERSATION, rootVariable}),
|
|
resetForm: () => dispatch(reset('conversation'))
|
|
})
|
|
)
|
|
export default class extends React.Component {
|
|
componentWillMount() {
|
|
let {
|
|
match: {
|
|
params: {
|
|
name: encodedName
|
|
}
|
|
}
|
|
} = this.props,
|
|
name = decodeRuleName(encodedName),
|
|
existingConversation = this.props.foldedSteps.length > 0
|
|
|
|
this.encodedName = encodedName
|
|
this.name = name
|
|
this.rule = findRuleByName(rules, name)
|
|
|
|
// C'est ici que la génération du formulaire, et donc la traversée des variables commence
|
|
if (!existingConversation)
|
|
this.props.startConversation(name)
|
|
}
|
|
render(){
|
|
if (!this.rule.formule) return <Redirect to={"/regle/" + this.name}/>
|
|
|
|
let
|
|
started = !this.props.match.params.intro,
|
|
{foldedSteps, extraSteps, unfoldedSteps, situation, situationGate} = this.props,
|
|
sim = path =>
|
|
R.path(R.unless(R.is(Array), R.of)(path))(this.rule.simulateur || {}),
|
|
reinitalise = () => {
|
|
ReactPiwik.push(['trackEvent', 'restart', '']);
|
|
this.props.resetForm(this.name)
|
|
this.props.startConversation(this.name)
|
|
},
|
|
title = sim('titre') || capitalise0(this.rule['titre'] || this.rule['nom'])
|
|
|
|
return (
|
|
<div id="sim" className={classNames({started})}>
|
|
<Helmet>
|
|
<title>{title}</title>
|
|
{sim('sous-titre') &&
|
|
<meta name="description" content={sim('sous-titre')} />}
|
|
</Helmet>
|
|
<h1>{title}</h1>
|
|
{sim('sous-titre') &&
|
|
<div id="simSubtitle">{sim('sous-titre')}</div>
|
|
}
|
|
{sim(['introduction', 'notes']) &&
|
|
<div className="intro centered">
|
|
{sim(['introduction', 'notes']).map( ({icône, texte, titre}) =>
|
|
<div key={titre}>
|
|
<i title={titre} className={"fa "+icône} aria-hidden="true"></i>
|
|
<span>
|
|
{texte}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
}
|
|
{
|
|
// Tant que le bouton 'C'est parti' n'est pas cliqué, on affiche l'intro
|
|
!started ?
|
|
<div>
|
|
<div className="action centered">
|
|
{createMarkdownDiv(sim(['introduction', 'motivation'])) || <p>Simulez cette règle en quelques clics</p>}
|
|
<button onClick={() => this.props.history.push(`/simu/${this.encodedName}`) }>
|
|
C'est parti !
|
|
</button>
|
|
</div>
|
|
<div className="remarks centered">
|
|
<p>
|
|
N'hésitez pas à nous écrire <Link to="/contact">
|
|
<i className="fa fa-envelope-open-o" aria-hidden="true" style={{margin: '0 .3em'}}></i>
|
|
</Link> ! La loi française est très ciblée, et donc complexe. Nous pouvons la rendre plus transparente.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
: <Conversation initialValues={ R.pathOr({},['simulateur','par défaut'], sim) } {...{foldedSteps, unfoldedSteps, extraSteps, reinitalise, situation, situationGate}}/>}
|
|
|
|
</div>
|
|
)
|
|
}
|
|
}
|