Merge pull request #671 from betagouv/remove-redux-form

Suppression de redux-form

.eslintrc.yaml

@@ -1,7 +1,4 @@
 rules:
-  linebreak-style:
-    - 2
-    - unix
   quotes:
     - 1 # While https://github.com/eslint/eslint/issues/9662#issuecomment-353958854 we don't enforce this
     - single
@@ -14,10 +11,13 @@ rules:
   react/jsx-no-target-blank: 0
   react/no-unescaped-entities: 0
   react/display-name: 1
+  react-hooks/rules-of-hooks: error
+  react-hooks/exhaustive-deps: warn
 parser: babel-eslint
 
 plugins:
   - react
+  - react-hooks
   - flowtype
 env:
   browser: true

package.json

@@ -57,8 +57,6 @@
 		"react-virtualized-select": "^3.1.3",
 		"reduce-reducers": "^0.1.2",
 		"redux": "^3.7.2",
-		"redux-batched-actions": "^0.4.1",
-		"redux-form": "^8.2.0",
 		"redux-thunk": "^2.3.0",
 		"regenerator-runtime": "^0.13.3",
 		"reselect": "^4.0.0",
@@ -125,6 +123,7 @@
 		"eslint-config-prettier": "^4.0.0",
 		"eslint-plugin-flowtype": "^3.2.1",
 		"eslint-plugin-react": "^7.12.4",
+		"eslint-plugin-react-hooks": "^2.0.1",
 		"express": "^4.16.3",
 		"file-loader": "^1.1.11",
 		"flow-bin": "^0.92.0",

source/Provider.js

@@ -9,7 +9,6 @@ import { Provider as ReduxProvider } from 'react-redux'
 import { Router } from 'react-router-dom'
 import reducers from 'Reducers/rootReducer'
 import { applyMiddleware, compose, createStore } from 'redux'
-import { enableBatching } from 'redux-batched-actions'
 import thunk from 'redux-thunk'
 import { getIframeOption, inIframe } from './utils'
 
@@ -54,11 +53,7 @@ export default class Provider extends PureComponent {
 			if (this.props.initialStore)
 				this.props.initialStore.lang = this.props.language
 		}
-		this.store = createStore(
-			enableBatching(reducers),
-			this.props.initialStore,
-			storeEnhancer
-		)
+		this.store = createStore(reducers, this.props.initialStore, storeEnhancer)
 		this.props.onStoreCreated && this.props.onStoreCreated(this.store)
 
 		// Remove loader

source/actions/actions.js

@@ -7,8 +7,6 @@ import type {
 	SetSimulationConfigAction,
 	SetSituationBranchAction
 } from 'Types/ActionsTypes'
-// $FlowFixMe
-import { change, reset } from 'redux-form'
 import { deletePersistedSimulation } from '../storage/persistSimulation'
 import type { Thunk } from 'Types/ActionsTypes'
 
@@ -18,18 +16,19 @@ export const resetSimulation = () => (dispatch: any => void): void => {
 			type: 'RESET_SIMULATION'
 		}: ResetSimulationAction)
 	)
-	dispatch(reset('conversation'))
 }
+
 export const goToQuestion = (question: string): StepAction => ({
 	type: 'STEP_ACTION',
 	name: 'unfold',
 	step: question
 })
+
 export const validateStepWithValue = (
 	dottedName,
 	value: any
 ): Thunk<StepAction> => dispatch => {
-	dispatch(change('conversation', dottedName, value))
+	dispatch(updateSituation(dottedName, value))
 	dispatch({
 		type: 'STEP_ACTION',
 		name: 'fold',
@@ -62,6 +61,17 @@ export const deletePreviousSimulation = () => (
 	deletePersistedSimulation()
 }
 
+export const updateSituation = (fieldName, value) => ({
+	type: 'UPDATE_SITUATION',
+	fieldName,
+	value
+})
+
+export const updatePeriod = toPeriod => ({
+	type: 'UPDATE_PERIOD',
+	toPeriod
+})
+
 // $FlowFixMe
 export function setExample(name, situation, dottedName) {
 	return { type: 'SET_EXAMPLE', name, situation, dottedName }

source/components/AttachDictionary.js

@@ -8,6 +8,7 @@ import Overlay from './Overlay'
 // Il suffit à la section d'appeler une fonction fournie en lui donnant du JSX
 export let AttachDictionary = dictionary => Decorated =>
 	function withDictionary(props) {
+		// eslint-disable-next-line react-hooks/rules-of-hooks
 		const [{ explanation, term }, setState] = useState({
 			term: null,
 			explanation: null

source/components/CurrencyInput/CurrencyInput.js

@@ -1,5 +1,5 @@
 import classnames from 'classnames'
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useRef, useState } from 'react'
 import NumberFormat from 'react-number-format'
 import { debounce } from '../../utils'
 import './CurrencyInput.css'
@@ -22,23 +22,28 @@ let currencyFormat = language => ({
 })
 
 export default function CurrencyInput({
-	value: valueArg,
+	value: valueProp = '',
 	debounce: debounceTimeout,
+	currencySymbol = '€',
 	onChange,
 	language,
 	className,
 	...forwardedProps
 }) {
-	const [currentValue, setCurrentValue] = useState(valueArg)
-	const [initialValue] = useState(valueArg)
-	// When the component is rendered with a new "value" argument, we update our local state
-	useEffect(() => {
-		setCurrentValue(valueArg)
-	}, [valueArg])
-	const nextValue = useRef(null)
+	const [initialValue, setInitialValue] = useState(valueProp)
+	const [currentValue, setCurrentValue] = useState(valueProp)
 	const onChangeDebounced = useRef(
 		debounceTimeout ? debounce(debounceTimeout, onChange) : onChange
 	)
+	// We need some mutable reference because the <NumberFormat /> component doesn't provide
+	// the DOM `event` in its custom `onValueChange` handler
+	const nextValue = useRef(null)
+
+	// When the component is rendered with a new "value" prop, we reset our local state
+	if (valueProp !== initialValue) {
+		setCurrentValue(valueProp)
+		setInitialValue(valueProp)
+	}
 
 	const handleChange = event => {
 		// Only trigger the `onChange` event if the value has changed -- and not
@@ -61,33 +66,34 @@ export default function CurrencyInput({
 		thousandSeparator,
 		decimalSeparator
 	} = currencyFormat(language)
-
-	// We display negative numbers iff this was the provided value (but we allow the user to enter them)
+	// We display negative numbers iff this was the provided value (but we disallow the user to enter them)
 	const valueHasChanged = currentValue !== initialValue
 
 	// Autogrow the input
-	const valueLength = (currentValue || '').toString().length
+	const valueLength = currentValue.toString().length
+	const width = `${5 + (valueLength - 5) * 0.75}em`
 
 	return (
 		<div
 			className={classnames(className, 'currencyInput__container')}
-			{...(valueLength > 5
-				? { style: { width: `${5 + (valueLength - 5) * 0.75}em` } }
-				: {})}>
-			{isCurrencyPrefixed && '€'}
+			{...(valueLength > 5 ? { style: { width } } : {})}>
+			{!currentValue && isCurrencyPrefixed && currencySymbol}
 			<NumberFormat
 				{...forwardedProps}
 				thousandSeparator={thousandSeparator}
 				decimalSeparator={decimalSeparator}
 				allowNegative={!valueHasChanged}
 				className="currencyInput__input"
 				inputMode="numeric"
+				prefix={
+					isCurrencyPrefixed && currencySymbol ? `${currencySymbol} ` : ''
+				}
 				onValueChange={({ value }) => {
 					setCurrentValue(value)
-					nextValue.current = value.toString().replace(/^\-/, '')
+					nextValue.current = value.toString().replace(/^-/, '')
 				}}
 				onChange={handleChange}
-				value={(currentValue || '').toString().replace('.', decimalSeparator)}
+				value={currentValue.toString().replace('.', decimalSeparator)}
 			/>
 			{!isCurrencyPrefixed && <>&nbsp;€</>}
 		</div>

source/components/CurrencyInput/CurrencyInput.test.js

@@ -24,10 +24,18 @@ describe('CurrencyInput', () => {
 	})
 
 	it('should separate thousand groups', () => {
-		const input1 = getInput(<CurrencyInput value={1000} language="fr" />)
-		const input2 = getInput(<CurrencyInput value={1000} language="en" />)
-		const input3 = getInput(<CurrencyInput value={1000.5} language="en" />)
-		const input4 = getInput(<CurrencyInput value={1000000} language="en" />)
+		const input1 = getInput(
+			<CurrencyInput value={1000} language="fr" currencySymbol={''} />
+		)
+		const input2 = getInput(
+			<CurrencyInput value={1000} language="en" currencySymbol={''} />
+		)
+		const input3 = getInput(
+			<CurrencyInput value={1000.5} language="en" currencySymbol={''} />
+		)
+		const input4 = getInput(
+			<CurrencyInput value={1000000} language="en" currencySymbol={''} />
+		)
 		expect(input1.instance().value).to.equal('1 000')
 		expect(input2.instance().value).to.equal('1,000')
 		expect(input3.instance().value).to.equal('1,000.5')
@@ -90,7 +98,7 @@ describe('CurrencyInput', () => {
 		const clock = useFakeTimers()
 		let onChange = spy()
 		const input = getInput(
-			<CurrencyInput onChange={onChange} debounce={1000} />
+			<CurrencyInput onChange={onChange} debounce={1000} currencySymbol={''} />
 		)
 		input.simulate('change', { target: { value: '1', focus: () => {} } })
 		expect(onChange).not.to.have.been.called
@@ -106,12 +114,12 @@ describe('CurrencyInput', () => {
 	})
 
 	it('should initialize with value of the value prop', () => {
-		const input = getInput(<CurrencyInput value={1} />)
+		const input = getInput(<CurrencyInput value={1} language="fr" />)
 		expect(input.instance().value).to.equal('1')
 	})
 
 	it('should update its value if the value prop changes', () => {
-		const component = mount(<CurrencyInput value={1} />)
+		const component = mount(<CurrencyInput value={1} language="fr" />)
 		component.setProps({ value: 2 })
 		expect(component.find('input').instance().value).to.equal('2')
 	})

source/components/PercentageField.js

@@ -1,23 +1,22 @@
-import React, { useState } from 'react'
+import React, { useCallback, useState } from 'react'
 import './PercentageField.css'
 
-export default function PercentageField({ input, debounce }) {
-	const [localValue, setLocalValue] = useState(input?.value)
-
-	const debouncedOnChange = debounce
-		? debounce(debounce, input.onChange)
-		: input.onChange
-
-	const onChange = value => {
-		setLocalValue(value)
-		debouncedOnChange(value)
-	}
+export default function PercentageField({ onChange, value, debounce }) {
+	const [localValue, setLocalValue] = useState(value)
+	const debouncedOnChange = useCallback(
+		debounce ? debounce(debounce, onChange) : onChange,
+		[debounce, onChange]
+	)
 
 	return (
 		<div>
 			<input
 				className="range"
-				onChange={e => onChange(e.target.value)}
+				onChange={e => {
+					const value = e.target.value
+					setLocalValue(value)
+					debouncedOnChange(value)
+				}}
 				type="range"
 				value={localValue}
 				name="volume"