mon-entreprise/source/components/PeriodSwitch.js

import { findRuleByDottedName, nestedSituationToPathMap } from 'Engine/rules'
import { compose, filter, map, toPairs } from 'ramda'
import React, { useEffect } from 'react'
import { Trans } from 'react-i18next'
import { connect, useDispatch } from 'react-redux'
import { batchActions } from 'redux-batched-actions'
import { change, Field, reduxForm } from 'redux-form'
import {
	flatRulesSelector,
	situationSelector,
	situationsWithDefaultsSelector
} from 'Selectors/analyseSelectors'
import './PeriodSwitch.css'

export default compose(
	reduxForm({
		form: 'conversation',
		destroyOnUnmount: false
	}),
	connect(
		state => {
			let situation = situationsWithDefaultsSelector(state)
			if (Array.isArray(situation)) {
				situation = situation[0]
			}

			return {
				rules: flatRulesSelector(state),
				situation: nestedSituationToPathMap(situationSelector(state)),
				initialPériode: situation.période
			}
		},
		dispatch => ({
			batchPeriodChange: actions => dispatch(batchActions(actions))
		})
	)
)(function PeriodSwitch({
	situation,
	rules,
	batchPeriodChange,
	initialPériode
}) {
	const dispatch = useDispatch()
	useEffect(() => {
		!situation.période &&
			updateSituation(
				initialPériode || 'année',
				batchPeriodChange,
				situation,
				rules,
				updatePeriod
			)
		return
	})
	const updatePeriod = (toPeriod, needConvertion) =>
		dispatch({ type: 'UPDATE_PERIOD', toPeriod, needConvertion })
	return (
		<span id="PeriodSwitch">
			<span className="base ui__ small toggle">
				<label>
					<Field
						name="période"
						component="input"
						type="radio"
						value="année"
						onChange={() =>
							updateSituation(
								'année',
								batchPeriodChange,
								situation,
								rules,
								updatePeriod
							)
						}
					/>
					<span>
						<Trans>année</Trans>
					</span>
				</label>
				<label>
					<Field
						name="période"
						component="input"
						type="radio"
						value="mois"
						onChange={() =>
							updateSituation(
								'mois',
								batchPeriodChange,
								situation,
								rules,
								updatePeriod
							)
						}
					/>
					<span>
						<Trans>mois</Trans>
					</span>
				</label>
			</span>
		</span>
	)
})

let updateSituation = (
	toPeriod,
	batchPeriodChange,
	situation,
	rules,
	updatePeriod
) => {
	let needConvertion = filter(([dottedName, value]) => {
		let rule = findRuleByDottedName(rules, dottedName)
		return value != null && rule?.période === 'flexible'
	})(toPairs(situation))

	updatePeriod(toPeriod, needConvertion.map(([fieldName]) => fieldName))

	let actions = [
		...map(
			([dottedName, value]) =>
				change(
					'conversation',
					dottedName,
					Math.round(
						situation.période === 'mois' && toPeriod === 'année'
							? value * 12
							: situation.période === 'année' && toPeriod === 'mois'
							? value / 12
							: (function() {
									throw new Error('Oups, changement de période invalide')
							  })()
					) + ''
				),
			needConvertion
		),
		change('conversation', 'période', toPeriod)
	]

	batchPeriodChange(actions)
}