Honore la gestion du consentement de l'utilisateur·ice

front/src/components/Footer.jsx

@@ -23,7 +23,7 @@ function Footer () {
           <li><Link to="/privacy">Privacy</Link></li>
           { import.meta.env.SNOWPACK_MATOMO_URL && (<li>
             <label className={styles.consentLabel}>
-              <input type="checkbox" checked={userHasConsent} onChange={toggleConsent} disabled={true} />
+              <input type="checkbox" checked={userHasConsent} onChange={toggleConsent} />
               I accept to share my navigation stats
             </label>
           </li>) }

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)
     }

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
 }