125 lines
3.7 KiB
JavaScript
125 lines
3.7 KiB
JavaScript
import R from 'ramda'
|
|
import React, {Component} from 'react'
|
|
import Helmet from 'react-helmet'
|
|
import {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 {makeQuestion} from 'Engine/generateQuestions'
|
|
|
|
import ReactPiwik from './Tracker'
|
|
|
|
@withRouter
|
|
@connect(
|
|
state => ({
|
|
currentQuestion: state.currentQuestion,
|
|
foldedSteps: state.foldedSteps,
|
|
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 Component {
|
|
state = {
|
|
started: false
|
|
}
|
|
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.state,
|
|
{foldedSteps, extraSteps, currentQuestion, situationGate, themeColours} = 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'])
|
|
|
|
let buildAnyStep = unfolded => accessor => question => {
|
|
let step = makeQuestion(rules)(question)
|
|
return <step.component
|
|
key={step.name}
|
|
{...step}
|
|
{...{unfolded}}
|
|
step={step}
|
|
answer={accessor(step.name)}
|
|
/>
|
|
}
|
|
|
|
let buildStep = buildAnyStep(false)
|
|
let buildUnfoldedStep = buildAnyStep(true)
|
|
|
|
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>
|
|
}
|
|
{!started && sim(['introduction', 'notes']) &&
|
|
<div className="intro">
|
|
{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>
|
|
)}
|
|
<button onClick={() => this.setState({started: true})}>J'ai compris</button>
|
|
</div>
|
|
}
|
|
{ (started || !sim(['introduction', 'notes'])) &&
|
|
<Conversation initialValues={ R.pathOr({},['simulateur','par défaut'], sim) }
|
|
{...{
|
|
reinitalise,
|
|
currentQuestion: currentQuestion && buildUnfoldedStep(situationGate)(currentQuestion),
|
|
foldedSteps: R.map(buildStep(situationGate), foldedSteps),
|
|
extraSteps: R.map(buildStep(situationGate), extraSteps),
|
|
textColourOnWhite: themeColours.textColourOnWhite}}/>
|
|
}
|
|
|
|
</div>
|
|
)
|
|
}
|
|
}
|