diff --git a/source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/ActivitésSelection.js b/source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/ActivitésSelection.js index ec464031f..09f8e0af0 100644 --- a/source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/ActivitésSelection.js +++ b/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 ( @@ -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 (
  • - selectItem( - selected - ? without([titre], itemsSelected) - : [...itemsSelected, titre] - ) - }> + onClick={() => dispatch({ type: 'SELECT_ACTIVITY', titre })}>
    {titre}
    {emoji(icônes)}

    {exemples}

    @@ -74,7 +70,7 @@ export default withSitePaths(function ActivitésSelection({ sitePaths }) { Continuer diff --git a/source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/StoreContext.js b/source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/StoreContext.js new file mode 100644 index 000000000..73d826f51 --- /dev/null +++ b/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 ( + + {children} + + ) +} + +export { StoreContext, StoreProvider } diff --git a/source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/index.js b/source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/index.js index ab51e58c0..0fb4b58dd 100644 --- a/source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/index.js +++ b/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 ( - <> - - - - - - + + <> + + + + + + + ) }) diff --git a/source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/reducers.js b/source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/reducers.js new file mode 100644 index 000000000..44ceeca21 --- /dev/null +++ b/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 }