-
-
Notifications
You must be signed in to change notification settings - Fork 68
/
PeriodSwitch.js
57 lines (55 loc) · 1.55 KB
/
PeriodSwitch.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import { findRuleByDottedName } from 'Engine/rules'
import React, { useCallback, useEffect } from 'react'
import { Trans } from 'react-i18next'
import { useDispatch, useSelector } from 'react-redux'
import {
flatRulesSelector,
situationSelector
} from 'Selectors/analyseSelectors'
import './PeriodSwitch.css'
export default function PeriodSwitch() {
const dispatch = useDispatch()
const rules = useSelector(flatRulesSelector)
const situation = useSelector(situationSelector)
const initialPeriod = useSelector(
state => state.simulation?.config?.situation?.période
)
const currentPeriod = situation.période
useEffect(() => {
!currentPeriod && updatePeriod(initialPeriod || 'année')
}, [currentPeriod, initialPeriod, updatePeriod])
const updatePeriod = useCallback(
toPeriod => {
const needConversion = Object.keys(situation).filter(dottedName => {
const rule = findRuleByDottedName(rules, dottedName)
return rule?.période === 'flexible'
})
dispatch({ type: 'UPDATE_PERIOD', toPeriod, needConversion })
},
[dispatch, rules, situation]
)
let periods = ['mois', 'année']
if (initialPeriod === 'année') {
periods.reverse()
}
return (
<span id="PeriodSwitch">
<span className="base ui__ small toggle">
{periods.map(period => (
<label key={period}>
<input
name="période"
type="radio"
value={period}
onChange={() => updatePeriod(period)}
checked={currentPeriod === period}
/>
<span>
<Trans>{period}</Trans>
</span>
</label>
))}
</span>
</span>
)
}