✨ enleve la logique du tracking des reducers pour la mettre dans un m…

…iddleware redux

source/entry.dev.js

@@ -1,40 +1,39 @@
+import { rules, rulesFr } from 'Engine/rules'
 import React from 'react'
 import { render } from 'react-dom'
-import { compose, createStore, applyMiddleware } from 'redux'
-import reducers from './reducers/reducers'
-import DevTools from './DevTools'
+import { AppContainer } from 'react-hot-loader'
 import { Provider } from 'react-redux'
+import { applyMiddleware, compose, createStore } from 'redux'
+import DevTools from './DevTools'
+import computeThemeColours from './components/themeColours'
 import Layout from './containers/Layout'
-import { AppContainer } from 'react-hot-loader'
+import lang from './i18n'
+import debounceFormChangeActions from './middlewares/debounceFormChangeActions'
+import trackDomainActions from './middlewares/trackDomainActions'
+import reducers from './reducers/reducers'
 import {
 	persistSimulation,
 	retrievePersistedSimulation
 } from './storage/persist'
-import debounceFormChangeActions from './debounceFormChangeActions'
-import computeThemeColours from './components/themeColours'
 import { getIframeOption, getUrl } from './utils'
 
-import { rules, rulesFr } from 'Engine/rules'
-import lang from './i18n'
-
 let initialState = {
 	iframe: getUrl().includes('iframe'),
 	themeColours: computeThemeColours(getIframeOption('couleur')),
 	previousSimulation: retrievePersistedSimulation()
 }
 
-let enhancer = compose(
-	applyMiddleware(debounceFormChangeActions()),
-	DevTools.instrument({ maxAge: 10 })
-)
-
 let tracker = {
 	push: console.log,
 	connectToHistory: history => history
 }
+let enhancer = compose(
+	applyMiddleware(debounceFormChangeActions(), trackDomainActions(tracker)),
+	DevTools.instrument({ maxAge: 10 })
+)
 
 let initialRules = lang == 'en' ? rules : rulesFr
-let store = createStore(reducers(tracker, initialRules), initialState, enhancer)
+let store = createStore(reducers(initialRules), initialState, enhancer)
 let anchor = document.querySelector('#js')
 
 persistSimulation(store)

source/entry.prod.js

@@ -1,17 +1,16 @@
+import ReactPiwik from 'Components/Tracker'
+import { rules, rulesFr } from 'Engine/rules'
 import React from 'react'
 import { render } from 'react-dom'
-import { compose, createStore, applyMiddleware } from 'redux'
-import reducers from './reducers/reducers'
-import debounceFormChangeActions from './debounceFormChangeActions'
-import computeThemeColours from './components/themeColours'
-import { getIframeOption, getUrl } from './utils'
 import { Provider } from 'react-redux'
+import { applyMiddleware, compose, createStore } from 'redux'
+import computeThemeColours from './components/themeColours'
 import Layout from './containers/Layout'
-
-import { rules, rulesFr } from 'Engine/rules'
 import lang from './i18n'
-
-import ReactPiwik from 'Components/Tracker'
+import debounceFormChangeActions from './middlewares/debounceFormChangeActions'
+import trackDomainActions from './middlewares/trackDomainActions'
+import reducers from './reducers/reducers'
+import { getIframeOption, getUrl } from './utils'
 
 const piwik = new ReactPiwik({
 	url: 'stats.data.gouv.fr',
@@ -32,10 +31,12 @@ let initialStore = {
 	themeColours: computeThemeColours(getIframeOption('couleur'))
 }
 
-let enhancer = compose(applyMiddleware(debounceFormChangeActions()))
+let enhancer = compose(
+	applyMiddleware(debounceFormChangeActions(), trackDomainActions(piwik))
+)
 
 let initialRules = lang == 'en' ? rules : rulesFr
-let store = createStore(reducers(piwik, initialRules), initialStore, enhancer)
+let store = createStore(reducers(initialRules), initialStore, enhancer)
 let anchor = document.querySelector('#js')
 
 render(

source/middlewares/trackDomainActions.js

@@ -0,0 +1,45 @@
+export default tracker => ({ getState }) => next => action => {
+	next(action)
+	const newState = getState()
+	if (action.type == 'STEP_ACTION' && action.name == 'fold') {
+		tracker.push([
+			'trackEvent',
+			'answer:' + action.source,
+			action.step,
+			newState.situationGate(action.step)
+		])
+
+		if (!newState.currentQuestion) {
+			tracker.push([
+				'trackEvent',
+				'done',
+				'after ' + length(newState.foldedSteps) + ' questions'
+			])
+		}
+	}
+	if (action.type === 'SET_ACTIVE_TARGET_INPUT') {
+		tracker.push(['trackEvent', 'select', newState.activeTargetInput])
+	}
+
+	if (action.type === 'START_CONVERSATION') {
+		tracker.push([
+			'trackEvent',
+			'refine',
+			newState.activeTargetInput,
+			newState.situationGate(newState.activeTargetInput)
+		])
+	}
+	if (action.type == 'STEP_ACTION' && action.name == 'unfold') {
+		tracker.push(['trackEvent', 'unfold', action.step])
+	}
+
+	if (action.type === 'RESET_SIMULATION') {
+		tracker.push(['trackEvent', 'restart', ''])
+	}
+	if (action.type === 'USER_INPUT_UPDATE') {
+		tracker.push(['trackEvent', 'input', action.meta.field, action.payload])
+	}
+	if (action.type === 'LOAD_PREVIOUS_SIMULATION') {
+		tracker.push(['trackEvent', 'loadPreviousSimulation'])
+	}
+}

source/reducers/reduceSteps.js

@@ -1,25 +1,18 @@
-import { path, head, concat, without, length, map } from 'ramda'
-
-import { rules, collectDefaults, rulesFr } from 'Engine/rules'
 import {
-	getNextSteps,
-	collectMissingVariablesByTarget
+	collectMissingVariablesByTarget,
+	getNextSteps
 } from 'Engine/generateQuestions'
+import { collectDefaults, rules, rulesFr } from 'Engine/rules'
 import { analyseMany, parseAll } from 'Engine/traverse'
+import { concat, head, map, path, without } from 'ramda'
 
-export default (tracker, flatRules, answerSource) => (state, action) => {
+export default (flatRules, answerSource) => (state, action) => {
 	state.flatRules = flatRules
 	// Optimization - don't parse on each analysis
 	if (!state.parsedRules) {
 		state.parsedRules = parseAll(flatRules)
 	}
 
-	// TODO put this in middleware
-	if (action.type === 'RESET_SIMULATION') {
-		tracker.push(['trackEvent', 'restart', ''])
-	}
-
-	// TODO
 	if (action.type == 'CHANGE_LANG') {
 		if (action.lang == 'fr') {
 			flatRules = rulesFr
@@ -53,11 +46,6 @@ export default (tracker, flatRules, answerSource) => (state, action) => {
 	)
 
 	if (action.type === 'USER_INPUT_UPDATE') {
-		tracker.push([
-			'trackEvent',
-			'input',
-			action.meta.field + ':' + action.payload
-		])
 		return {
 			...state,
 			analysis,
@@ -86,20 +74,6 @@ export default (tracker, flatRules, answerSource) => (state, action) => {
 				: state.foldedSteps
 	}
 
-	if (action.type === 'SET_ACTIVE_TARGET_INPUT') {
-		tracker.push(['trackEvent', 'select', state.activeTargetInput])
-	}
-
-	if (action.type === 'START_CONVERSATION') {
-		tracker.push([
-			'trackEvent',
-			'refine',
-			state.activeTargetInput +
-				':' +
-				answerSource(state)(state.activeTargetInput)
-		])
-	}
-
 	if (
 		[
 			'SET_ACTIVE_TARGET_INPUT',
@@ -155,19 +129,6 @@ export default (tracker, flatRules, answerSource) => (state, action) => {
 	}
 
 	if (action.type == 'STEP_ACTION' && action.name == 'fold') {
-		tracker.push([
-			'trackEvent',
-			'answer:' + action.source,
-			action.step + ': ' + situationWithDefaults(state)(action.step)
-		])
-
-		if (!newState.currentQuestion) {
-			tracker.push([
-				'trackEvent',
-				'done',
-				'after ' + length(newState.foldedSteps) + ' questions'
-			])
-		}
 		let foldedSteps = [...state.foldedSteps, state.currentQuestion]
 
 		return {
@@ -180,8 +141,6 @@ export default (tracker, flatRules, answerSource) => (state, action) => {
 		}
 	}
 	if (action.type == 'STEP_ACTION' && action.name == 'unfold') {
-		tracker.push(['trackEvent', 'unfold', action.step])
-
 		// We are possibly "refolding" a previously open question
 		let previous = state.currentQuestion,
 			// we fold it back into foldedSteps if it had been answered

source/reducers/reducers.js

@@ -1,13 +1,12 @@
-import { combineReducers } from 'redux'
-import reduceReducers from 'reduce-reducers'
-import { reducer as formReducer, formValueSelector } from 'redux-form'
-import reduceSteps from './reduceSteps'
+import { popularTargetNames } from 'Components/TargetSelection'
 import computeThemeColours from 'Components/themeColours'
-import storageReducer from '../storage/reducer'
-import { defaultTo, always } from 'ramda'
 import { formatInputs } from 'Engine/rules'
-
-import { popularTargetNames } from 'Components/TargetSelection'
+import { always, defaultTo } from 'ramda'
+import reduceReducers from 'reduce-reducers'
+import { combineReducers } from 'redux'
+import { formValueSelector, reducer as formReducer } from 'redux-form'
+import storageReducer from '../storage/reducer'
+import reduceSteps from './reduceSteps'
 
 function themeColours(state = computeThemeColours(), { type, colour }) {
 	if (type == 'CHANGE_THEME_COLOUR') return computeThemeColours(colour)
@@ -69,7 +68,7 @@ function analysis(state = null, { type }) {
 			return state
 	}
 }
-export default (tracker, initialRules) =>
+export default initialRules =>
 	reduceReducers(
 		storageReducer,
 		combineReducers({
@@ -103,9 +102,5 @@ export default (tracker, initialRules) =>
 			activeTargetInput
 		}),
 		// cross-cutting concerns because here `state` is the whole state tree
-		reduceSteps(
-			tracker,
-			initialRules,
-			formatInputs(initialRules, formValueSelector)
-		)
+		reduceSteps(initialRules, formatInputs(initialRules, formValueSelector))
 	)

test/reducers.test.js

@@ -1,20 +1,10 @@
-import R from 'ramda'
-
 import { expect } from 'chai'
-import { rules as realRules, enrichRule } from '../source/engine/rules'
-import {
-	collectMissingVariables,
-	getObjectives
-} from '../source/engine/generateQuestions'
-
-import reduceSteps from '../source/reducers/reduceSteps'
-import { popularTargetNames } from '../source/components/TargetSelection'
-
-import yaml from 'js-yaml'
 import dedent from 'dedent-js'
+import yaml from 'js-yaml'
+import { enrichRule } from '../source/engine/rules'
+import reduceSteps from '../source/reducers/reduceSteps'
 
-let stateSelector = state => name => null
-let tracker = { push: array => null }
+let stateSelector = () => () => null
 
 describe('fold', function() {
 	it('should start conversation with the first missing variable', function() {
@@ -27,7 +17,7 @@ describe('fold', function() {
 				{ nom: 'bb', question: '?', titre: 'b', espace: 'top' }
 			],
 			rules = rawRules.map(enrichRule),
-			reducer = reduceSteps(tracker, rules, stateSelector),
+			reducer = reduceSteps(rules, stateSelector),
 			action = { type: 'START_CONVERSATION' },
 			// situation = analyseTopDown(rules,"startHere")(stateSelector({})),
 			// objectives = getObjectives(stateSelector({}), situation.root, situation.parsedRules),
@@ -40,7 +30,7 @@ describe('fold', function() {
 
 	it('should deal with double unfold', function() {
 		let fakeState = {}
-		let stateSelector = state => name => fakeState[name]
+		let stateSelector = () => name => fakeState[name]
 
 		let rawRules = [
 				// TODO - this won't work without the indirection, figure out why
@@ -57,7 +47,7 @@ describe('fold', function() {
 				{ nom: 'cc', question: '?', titre: 'c', espace: 'top' }
 			],
 			rules = rawRules.map(enrichRule),
-			reducer = reduceSteps(tracker, rules, stateSelector)
+			reducer = reduceSteps(rules, stateSelector)
 
 		var step1 = reducer(
 			{ foldedSteps: [], targetNames: ['startHere'] },
@@ -97,7 +87,7 @@ describe('fold', function() {
 
 	it('should first ask for questions without defaults, then those with defaults', function() {
 		let fakeState = {}
-		let stateSelector = state => name => fakeState[name]
+		let stateSelector = () => name => fakeState[name]
 		let rawRules = dedent`
         - nom: net
           formule: brut - cotisation
@@ -118,7 +108,7 @@ describe('fold', function() {
           par défaut: non
       `,
 			rules = yaml.safeLoad(rawRules).map(enrichRule),
-			reducer = reduceSteps(tracker, rules, stateSelector)
+			reducer = reduceSteps(rules, stateSelector)
 
 		var step1 = reducer(
 			{ foldedSteps: [], targetNames: ['net'] },