Utilisation d'un state local avec userReducer

source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/ActivitésSelection.js

@@ -2,14 +2,16 @@ import classnames from 'classnames'
 import { ScrollToTop } from 'Components/utils/Scroll'
 import withSitePaths from 'Components/utils/withSitePaths'
 import { without } from 'ramda'
-import React, { useState } from 'react'
+import React, { useState, useContext } from 'react'
 import emoji from 'react-easy-emoji'
 import { Link } from 'react-router-dom'
 import Animate from 'Ui/animate'
 import activités from './activités.yaml'
+import { StoreContext } from './StoreContext'
 
 export default withSitePaths(function ActivitésSelection({ sitePaths }) {
-	let [itemsSelected, selectItem] = useState([])
+	let { state, dispatch } = useContext(StoreContext)
+	let { selectedActivities } = state
 
 	return (
 		<Animate.fromBottom>
@@ -51,18 +53,12 @@ export default withSitePaths(function ActivitésSelection({ sitePaths }) {
 					li:hover, li.selected {background: var(--colour); color: white}
 				`}>
 				{activités.map(({ titre, exemples, icônes }) => {
-					let selected = itemsSelected.includes(titre)
+					let selected = selectedActivities.includes(titre)
 					return (
 						<li
 							className={classnames('ui__ card ', { selected })}
 							key={titre}
-							onClick={() =>
-								selectItem(
-									selected
-										? without([titre], itemsSelected)
-										: [...itemsSelected, titre]
-								)
-							}>
+							onClick={() => dispatch({ type: 'SELECT_ACTIVITY', titre })}>
 							<div className="title">{titre}</div>
 							{emoji(icônes)}
 							<p>{exemples}</p>
@@ -74,7 +70,7 @@ export default withSitePaths(function ActivitésSelection({ sitePaths }) {
 				<Link
 					to={sitePaths.économieCollaborative.activités.coConsommation}
 					className={classnames('ui__ plain button', {
-						disabled: !itemsSelected.length
+						disabled: !selectedActivities.length
 					})}>
 					Continuer
 				</Link>

source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/StoreContext.js

@@ -0,0 +1,17 @@
+import React, { createContext, useReducer, useEffect } from 'react'
+import { reducer, initialState } from './reducers'
+
+const StoreContext = createContext(initialState)
+
+const StoreProvider = ({ children }) => {
+	// Set up reducer with useReducer and our defined reducer, initialState from reducers.js
+	const [state, dispatch] = useReducer(reducer, initialState)
+
+	return (
+		<StoreContext.Provider value={{ state, dispatch }}>
+			{children}
+		</StoreContext.Provider>
+	)
+}
+
+export { StoreContext, StoreProvider }

source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/index.js

@@ -6,34 +6,38 @@ import CoConsommation from './CoConsommation'
 import Home from './Home'
 import LocationMeublée from './LocationMeublée'
 import VotreSituation from './VotreSituation'
+import { StoreProvider } from './StoreContext'
+
 export default withSitePaths(function ÉconomieCollaborative({ sitePaths }) {
 	return (
-		<>
-			<Route
-				exact
-				path={sitePaths.économieCollaborative.index}
-				component={Home}
-			/>
-			<Route
-				exact
-				path={sitePaths.économieCollaborative.activités.index}
-				component={ActivitésSelection}
-			/>
-			<Route
-				exact
-				path={sitePaths.économieCollaborative.activités.locationMeublée}
-				component={LocationMeublée}
-			/>
-			<Route
-				exact
-				path={sitePaths.économieCollaborative.activités.coConsommation}
-				component={CoConsommation}
-			/>
-			<Route
-				exact
-				path={sitePaths.économieCollaborative.votreSituation}
-				component={VotreSituation}
-			/>
-		</>
+		<StoreProvider>
+			<>
+				<Route
+					exact
+					path={sitePaths.économieCollaborative.index}
+					component={Home}
+				/>
+				<Route
+					exact
+					path={sitePaths.économieCollaborative.activités.index}
+					component={ActivitésSelection}
+				/>
+				<Route
+					exact
+					path={sitePaths.économieCollaborative.activités.locationMeublée}
+					component={LocationMeublée}
+				/>
+				<Route
+					exact
+					path={sitePaths.économieCollaborative.activités.coConsommation}
+					component={CoConsommation}
+				/>
+				<Route
+					exact
+					path={sitePaths.économieCollaborative.votreSituation}
+					component={VotreSituation}
+				/>
+			</>
+		</StoreProvider>
 	)
 })

source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/reducers.js

@@ -0,0 +1,22 @@
+import { without } from 'ramda'
+let initialState = {
+	selectedActivities: []
+}
+
+let reducer = (state = initialState, action) => {
+	switch (action.type) {
+		case 'SELECT_ACTIVITY':
+			let titre = action.titre,
+				selectedActivities = state.selectedActivities,
+				selected = selectedActivities.includes(titre)
+			return {
+				...state,
+				selectedActivities: selected
+					? without([titre], selectedActivities)
+					: [...selectedActivities, titre]
+			}
+		default:
+			throw new Error('Unexpected action')
+	}
+}
+export { initialState, reducer }