mon-entreprise/source/components/PeriodSwitch.tsx

34 lines
957 B
TypeScript

import { updateUnit } from 'Actions/actions'
import { parseUnit, serializeUnit } from 'Engine/units'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { useDispatch, useSelector } from 'react-redux'
import { defaultUnitSelector } from 'Selectors/analyseSelectors'
import './PeriodSwitch.css'
export default function PeriodSwitch() {
const dispatch = useDispatch()
const language = useTranslation().i18n.language
const currentUnit = useSelector(defaultUnitSelector)
let units = ['€/mois', '€/an']
return (
<span id="PeriodSwitch">
<span className="base ui__ small toggle">
{units.map(unit => (
<label key={unit}>
<input
name="defaultUnit"
type="radio"
value={unit}
onChange={() => dispatch(updateUnit(unit))}
checked={currentUnit === unit}
/>
<span>{serializeUnit(parseUnit(unit), 1, language)}</span>
</label>
))}
</span>
</span>
)
}