#317: Using hooks instead of components

client/src/google-analytics/__tests__/hooks.test.js

@@ -0,0 +1,4 @@
+
+describe('Google Analytics hooks test suite', () => {
+
+});

client/src/google-analytics/hooks.js

@@ -0,0 +1,40 @@
+import {useEffect} from 'react';
+import get from 'lodash/get';
+import isFunction from 'lodash/isFunction';
+import {googleAnalyticsTrackingId} from './selectors';
+
+const updateLocation = trackingId => {
+  if (isFunction(window.gtag)) {
+    window.gtag('config', trackingId, {
+      page_path: get(window, 'location.pathname')
+    });
+  }
+};
+
+export const useAnalytics = () => {
+  const trackingId = googleAnalyticsTrackingId();
+  if (trackingId) {
+    useEffect(() => {
+      const scriptLoader = document.createElement('script');
+      scriptLoader.async = true;
+      scriptLoader.src = `https://www.googletagmanager.com/gtag/js?id=${trackingId}`;
+      document.body.appendChild(scriptLoader);
+      window.gtag = function gtag() {
+        window.dataLayer = window.dataLayer || [];
+        window.dataLayer.push(arguments);
+      };
+      window.gtag('js', new Date());
+      updateLocation(trackingId);
+      return () => document.body.removeChild(scriptLoader);
+    }, []);
+  }
+};
+
+export const updateAnalytics = () => {
+  const trackingId = googleAnalyticsTrackingId();
+  if (trackingId) {
+    useEffect(() => {
+      updateLocation(trackingId);
+    });
+  }
+};

client/src/google-analytics/index.js

@@ -1,2 +1,4 @@
-
-export {default} from './google-analytics';
+export {
+  useAnalytics,
+  updateAnalytics
+} from './hooks';

client/src/index.jsx

@@ -8,7 +8,6 @@ import debounce from './services/debounce';
 import i18n from './services/i18n';
 import {loadState, saveState} from './services/state';
 import Routes from './routes/routes';
-import GoogleAnalytics from './google-analytics';
 import rootReducer from './reducers';
 
 const SAVE_STATE_DEBOUNCE_PERIOD_IN_MILLIS = 500;
@@ -36,7 +35,6 @@ async function init () {
           <Routes />
         </I18nextProvider>
       </Provider>
-      <GoogleAnalytics />
     </>,
     document.getElementById('root')
   );

client/src/routes/__tests__/__snapshots__/routes.test.jsx.snap

@@ -1,45 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Routes component test suite Snapshot render 1`] = `
-<Router
-  basename="/"
-  history={
-    Object {
-      "action": "POP",
-      "block": [Function],
-      "createHref": [Function],
-      "go": [Function],
-      "goBack": [Function],
-      "goForward": [Function],
-      "length": 1,
-      "listen": [Function],
-      "location": Object {
-        "hash": "",
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-      "push": [Function],
-      "replace": [Function],
-    }
-  }
->
-  <Switch>
-    <Route
-      exact={true}
-      path="/configuration-not-found"
-      render={[Function]}
-    />
-    <Connect(ApplicationReadyRoute)
-      exact={true}
-      path="/login"
-      render={[Function]}
-    />
-    <Connect(ApplicationReadyRoute)
-      component={[Function]}
-      exact={true}
-      path="/"
-    />
-  </Switch>
-</Router>
+<Switch>
+  <Route
+    exact={true}
+    path="/configuration-not-found"
+    render={[Function]}
+  />
+  <Connect(ApplicationReadyRoute)
+    exact={true}
+    path="/login"
+    render={[Function]}
+  />
+  <Connect(ApplicationReadyRoute)
+    component={[Function]}
+    exact={true}
+    path="/"
+  />
+</Switch>
 `;

client/src/routes/__tests__/routes.test.jsx

@@ -5,9 +5,11 @@ import Routes from '../routes';
 
 describe('Routes component test suite', () => {
   test('Snapshot render', () => {
-    // When
+    // Given
     const routes = shallow(<Routes />);
+    // When
+    const wrappedSwitch = routes.find('SwitchWrapper').dive();
     // Then
-    expect(routes).toMatchSnapshot();
+    expect(wrappedSwitch).toMatchSnapshot();
   });
 });

client/src/routes/routes.jsx

@@ -5,15 +5,23 @@ import ApplicationReadyRoute from './application-ready-route';
 import App from '../components/app';
 import ConfigurationNotFound from '../components/error-pages/configuration-not-found';
 import Login from '../components/login/login';
+import {useAnalytics, updateAnalytics} from '../google-analytics';
 import '../styles/main.scss';
 
-const Routes = () => (
-  <Router basename='/' history={history}>
+const SwitchWrapper = () => {
+  useAnalytics();
+  updateAnalytics();
+  return (
     <Switch>
       <Route exact path="/configuration-not-found" render={() => <ConfigurationNotFound />} />
       <ApplicationReadyRoute exact path="/login" render={() => <Login />} />
       <ApplicationReadyRoute exact path="/" component={App} />
     </Switch>
+  );
+};
+const Routes = () => (
+  <Router basename='/' history={history}>
+    <SwitchWrapper />
   </Router>
 );