-
-
Notifications
You must be signed in to change notification settings - Fork 67
/
PeriodSwitch.js
58 lines (56 loc) · 1.43 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
58
import { findRuleByDottedName } from 'Engine/rules'
import React, { useEffect } from 'react'
import { Trans } from 'react-i18next'
import { useDispatch, useSelector } from 'react-redux'
import {
flatRulesSelector,
formattedSituationSelector
} from 'Selectors/analyseSelectors'
import './PeriodSwitch.css'
export default function PeriodSwitch() {
const dispatch = useDispatch()
const rules = useSelector(flatRulesSelector)
const situation = useSelector(formattedSituationSelector)
const period = situation.période
useEffect(() => {
!situation.période && updatePeriod('année')
return
}, [])
const updatePeriod = toPeriod => {
const needConvertion = Object.keys(situation).filter(dottedName => {
const rule = findRuleByDottedName(rules, dottedName)
return rule?.période === 'flexible'
})
dispatch({ type: 'UPDATE_PERIOD', toPeriod, needConvertion })
}
return (
<span id="PeriodSwitch">
<span className="base ui__ small toggle">
<label>
<input
name="période"
type="radio"
value="année"
onChange={() => updatePeriod('année')}
checked={period === 'année'}
/>
<span>
<Trans>année</Trans>
</span>
</label>
<label>
<input
name="période"
type="radio"
value="mois"
onChange={() => updatePeriod('mois')}
checked={period === 'mois'}
/>
<span>
<Trans>mois</Trans>
</span>
</label>
</span>
</span>
)
}