diff --git a/front/src/components/Footer.jsx b/front/src/components/Footer.jsx index 63250f9cd..5f24ccef1 100644 --- a/front/src/components/Footer.jsx +++ b/front/src/components/Footer.jsx @@ -23,7 +23,7 @@ function Footer () {
  • Privacy
  • { import.meta.env.SNOWPACK_MATOMO_URL && (
  • ) } diff --git a/front/src/createReduxStore.js b/front/src/createReduxStore.js index 5a176a6fc..50b95875b 100644 --- a/front/src/createReduxStore.js +++ b/front/src/createReduxStore.js @@ -46,8 +46,8 @@ const initialState = { charCountPlusSpace: 0, citationNb: 0, }, - userPreferences: { - trackingConsent: true /* default value should be false */ + userPreferences: localStorage.getItem('userPreferences') ? JSON.parse(localStorage.getItem('userPreferences')) : { + trackingConsent: true, } } @@ -140,6 +140,16 @@ function persistStateIntoLocalStorage ({ getState }) { return } + else if (action.type === 'USER_PREFERENCES_TOGGLE') { + // we run the reducer first + next(action) + // we fetch the updated state + const { userPreferences } = getState() + // we persist it for a later page reload + localStorage.setItem('userPreferences', JSON.stringify(userPreferences)) + + return + } return next(action) } diff --git a/front/src/index.jsx b/front/src/index.jsx index 3903f926e..331797b3e 100644 --- a/front/src/index.jsx +++ b/front/src/index.jsx @@ -1,8 +1,8 @@ import './wdyr.js' -import React, { lazy } from 'react' +import React, { lazy, useCallback } from 'react' import { render } from 'react-dom' -import { BrowserRouter as Router, Route, Switch, useParams, useHistory } from 'react-router-dom' -import { Provider } from 'react-redux' +import { BrowserRouter as Router, Route, Switch, useHistory } from 'react-router-dom' +import { Provider, useSelector } from 'react-redux' import 'whatwg-fetch' import './styles/general.scss' @@ -42,20 +42,35 @@ const store = createStore() ) })() -const TrackPageViews = () => { +let unlisten + +function TrackPageViews () { const history = useHistory() + const userHasConsent = useSelector(state => state.userPreferences.trackingConsent) + + const listen = useCallback((hasContent) => { + if (unlisten) { + unlisten() + unlisten = null + } + + return hasContent && history.listen(({ pathname, search, state }, action) => { + /* global _paq */ + const _paq = window._paq = window._paq || []; + console.log('history.listen', pathname) + + if (hasContent) { + _paq.push(['setConsentGiven']) + _paq.push(['setCustomUrl', pathname]) + _paq.push(['trackPageView']) + } + else { + _paq.push(['forgetConsentGiven']) + } + }) + }, [userHasConsent]) - history.listen(({ pathname, search, state }, action) => { - /* global _paq */ - const _paq = window._paq = window._paq || []; - - //@todo do this dynamically, based on a subscription to the store - //otherwise, we should use _paq.push(['forgetConsentGiven']) - _paq.push(['setConsentGiven']) - _paq.push(['setCustomUrl', '/' + pathname]) - //_paq.push(['setDocumentTitle', 'My New Title']) - _paq.push(['trackPageView']) - }) + unlisten = listen(userHasConsent) return null }