mirror of
https://github.com/betagouv/mon-entreprise
synced 2025-02-09 05:15:02 +00:00
2efdbad74d
Si l'erreur était bien capturée par React, l'affichage n'était pas rétabli lorsqu'une nouvelle saisie était effectuée. Lorsque le moteur n'arrive pas à exécuter une simulation il ne sert à rien d'essayer d'afficher des explications et/ou contrôles. Convertit Components/Controls vers les React hooks et TypeScript
87 lines
2.5 KiB
TypeScript
87 lines
2.5 KiB
TypeScript
import { goToQuestion, hideControl } from 'Actions/actions'
|
||
import { makeJsx } from 'Engine/evaluation'
|
||
import React from 'react'
|
||
import emoji from 'react-easy-emoji'
|
||
import { useTranslation } from 'react-i18next'
|
||
import { useDispatch, useSelector } from 'react-redux'
|
||
import { RootState } from 'Reducers/rootReducer'
|
||
import { analysisWithDefaultsSelector } from 'Selectors/analyseSelectors'
|
||
import animate from 'Ui/animate'
|
||
import './Controls.css'
|
||
import { Markdown } from './utils/markdown'
|
||
import { ScrollToElement } from './utils/Scroll'
|
||
|
||
export default function Controls() {
|
||
const { t } = useTranslation()
|
||
const foldedSteps = useSelector(
|
||
(state: RootState) => state.simulation?.foldedSteps
|
||
)
|
||
const analysis = useSelector(analysisWithDefaultsSelector)
|
||
const controls = analysis?.controls
|
||
const inversionFail = analysis?.cache._meta.inversionFail
|
||
const hiddenControls = useSelector(
|
||
(state: RootState) => state.simulation?.hiddenControls
|
||
)
|
||
const dispatch = useDispatch()
|
||
|
||
if (!controls) {
|
||
return null
|
||
}
|
||
let messages = inversionFail
|
||
? [
|
||
{
|
||
message: t([
|
||
'simulateurs.inversionFail',
|
||
'Le montant saisi ne permet pas de calculer un résultat, nous vous invitons à essayer une autre valeur.'
|
||
]),
|
||
level: 'avertissement'
|
||
}
|
||
]
|
||
: controls
|
||
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={message}>
|
||
<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={() => dispatch(goToQuestion(solution.cible))}
|
||
>
|
||
{solution.texte}
|
||
</button>
|
||
</div>
|
||
)}
|
||
<button
|
||
className="hide"
|
||
aria-label="close"
|
||
onClick={() => dispatch(hideControl(test))}
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<ScrollToElement />
|
||
</animate.fromTop>
|
||
)
|
||
)}
|
||
</ul>
|
||
</div>
|
||
)
|
||
}
|