mirror of
https://github.com/betagouv/mon-entreprise
synced 2025-02-09 04:05:01 +00:00
0663c97204
Suppression de notre composant withLanguage qui rajoutait une abstraction inutile. Note: de nombreux appels à withTranslation et withLanguage était inutile car le composant augmenté n'utilisait pas les paramètres fournis (language, t, i18n). L'utilisation des hooks nous permet de mieux gérer le code mort, car il s'agit de simples variables dont le non-usage est détecté par l'analyse statique.
99 lines
2.5 KiB
JavaScript
99 lines
2.5 KiB
JavaScript
import { goToQuestion, hideControl } from 'Actions/actions'
|
||
import { makeJsx } from 'Engine/evaluation'
|
||
import { compose } from 'ramda'
|
||
import React from 'react'
|
||
import emoji from 'react-easy-emoji'
|
||
import { useTranslation } from 'react-i18next'
|
||
import { connect } from 'react-redux'
|
||
import { analysisWithDefaultsSelector } from 'Selectors/analyseSelectors'
|
||
import animate from 'Ui/animate'
|
||
import './Controls.css'
|
||
import { Markdown } from './utils/markdown'
|
||
import withColours from './utils/withColours'
|
||
|
||
function Controls({
|
||
controls,
|
||
goToQuestion,
|
||
hideControl,
|
||
foldedSteps,
|
||
hiddenControls,
|
||
inversionFail
|
||
}) {
|
||
const { t } = useTranslation()
|
||
if (!controls) {
|
||
return null
|
||
}
|
||
let messages = [
|
||
...controls,
|
||
...(inversionFail
|
||
? [
|
||
{
|
||
message: t([
|
||
'simulateurs.inversionFail',
|
||
'Le montant saisi est trop faible ou aboutit à une situation impossible, essayez en un autre'
|
||
]),
|
||
level: 'avertissement'
|
||
}
|
||
]
|
||
: [])
|
||
]
|
||
if (!messages?.length) return null
|
||
|
||
return (
|
||
<div id="controlsBlock">
|
||
<ul style={{ margin: 0, padding: 0 }}>
|
||
{messages.map(({ level, test, message, solution, evaluated }) =>
|
||
hiddenControls.includes(test) ? null : (
|
||
<animate.fromTop key={test}>
|
||
<li key={test}>
|
||
<div className="control">
|
||
{emoji(level == 'avertissement' ? '⚠️' : 'ℹ️')}
|
||
<div className="controlText ui__ card">
|
||
{message ? (
|
||
<Markdown source={message} />
|
||
) : (
|
||
<span id="controlExplanation">{makeJsx(evaluated)}</span>
|
||
)}
|
||
|
||
{solution && !foldedSteps.includes(solution.cible) && (
|
||
<div>
|
||
<button
|
||
key={solution.cible}
|
||
className="ui__ link-button"
|
||
onClick={() => goToQuestion(solution.cible)}>
|
||
{solution.texte}
|
||
</button>
|
||
</div>
|
||
)}
|
||
<button
|
||
className="hide"
|
||
aria-label="close"
|
||
onClick={() => hideControl(test)}>
|
||
×
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</animate.fromTop>
|
||
)
|
||
)}
|
||
</ul>
|
||
</div>
|
||
)
|
||
}
|
||
export default compose(
|
||
connect(
|
||
(state, props) => ({
|
||
foldedSteps: state.conversationSteps.foldedSteps,
|
||
controls: analysisWithDefaultsSelector(state)?.controls,
|
||
inversionFail: analysisWithDefaultsSelector(state)?.cache?.inversionFail,
|
||
key: props.language,
|
||
hiddenControls: state.simulation.hiddenControls
|
||
}),
|
||
{
|
||
goToQuestion,
|
||
hideControl
|
||
}
|
||
),
|
||
withColours
|
||
)(Controls)
|