From 8cc2ad492002642f712c3e0449271b926295500c Mon Sep 17 00:00:00 2001
From: Marc Nuri <marc@marcnuri.com>
Date: Wed, 31 Jul 2019 20:32:57 +0200
Subject: [PATCH] #317: Using hooks instead of components

---
 .../google-analytics.test.jsx.snap            | 20 -------
 .../__tests__/google-analytics.test.jsx       | 30 ----------
 .../google-analytics/__tests__/hooks.test.js  |  4 ++
 .../src/google-analytics/google-analytics.jsx | 21 -------
 client/src/google-analytics/hooks.js          | 40 +++++++++++++
 client/src/google-analytics/index.js          |  6 +-
 client/src/index.jsx                          |  2 -
 .../__snapshots__/routes.test.jsx.snap        | 58 ++++++-------------
 client/src/routes/__tests__/routes.test.jsx   |  6 +-
 client/src/routes/routes.jsx                  | 12 +++-
 10 files changed, 79 insertions(+), 120 deletions(-)
 delete mode 100644 client/src/google-analytics/__tests__/__snapshots__/google-analytics.test.jsx.snap
 delete mode 100644 client/src/google-analytics/__tests__/google-analytics.test.jsx
 create mode 100644 client/src/google-analytics/__tests__/hooks.test.js
 delete mode 100644 client/src/google-analytics/google-analytics.jsx
 create mode 100644 client/src/google-analytics/hooks.js

diff --git a/client/src/google-analytics/__tests__/__snapshots__/google-analytics.test.jsx.snap b/client/src/google-analytics/__tests__/__snapshots__/google-analytics.test.jsx.snap
deleted file mode 100644
index 98f629d..0000000
--- a/client/src/google-analytics/__tests__/__snapshots__/google-analytics.test.jsx.snap
+++ /dev/null
@@ -1,20 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Google Analytics component test suite Snapshot render Tracking ID NOT set in global variable, should render empty 1`] = `""`;
-
-exports[`Google Analytics component test suite Snapshot render Tracking ID set in global variable, should render script 1`] = `
-<Fragment>
-  <script
-    async={true}
-    src="https://www.googletagmanager.com/gtag/js?id=UA-1337-33"
-  />
-  <script>
-    
-window.dataLayer = window.dataLayer || [];
-function gtag(){dataLayer.push(arguments);}
-gtag('js', new Date());
-gtag('config', 'UA-1337-33');
-      
-  </script>
-</Fragment>
-`;
diff --git a/client/src/google-analytics/__tests__/google-analytics.test.jsx b/client/src/google-analytics/__tests__/google-analytics.test.jsx
deleted file mode 100644
index 3603b09..0000000
--- a/client/src/google-analytics/__tests__/google-analytics.test.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-import {shallow} from 'enzyme/build';
-
-describe('Google Analytics component test suite', () => {
-  let googleAnalyticsTrackingId;
-  let GoogleAnalytics;
-  beforeEach(() => {
-    jest.mock('../selectors');
-    googleAnalyticsTrackingId = require('../selectors').googleAnalyticsTrackingId;
-    GoogleAnalytics = require('../').default;
-  });
-  describe('Snapshot render', () => {
-    test('Tracking ID set in global variable, should render script', () => {
-      // Given
-      googleAnalyticsTrackingId.mockImplementationOnce(() => 'UA-1337-33');
-      // When
-      const routes = shallow(<GoogleAnalytics />);
-      // Then
-      expect(routes).toMatchSnapshot();
-    });
-    test('Tracking ID NOT set in global variable, should render empty', () => {
-      // Given
-      googleAnalyticsTrackingId.mockImplementationOnce(() => null);
-      // When
-      const routes = shallow(<GoogleAnalytics />);
-      // Then
-      expect(routes).toMatchSnapshot();
-    });
-  });
-});
diff --git a/client/src/google-analytics/__tests__/hooks.test.js b/client/src/google-analytics/__tests__/hooks.test.js
new file mode 100644
index 0000000..e7c303c
--- /dev/null
+++ b/client/src/google-analytics/__tests__/hooks.test.js
@@ -0,0 +1,4 @@
+
+describe('Google Analytics hooks test suite', () => {
+
+});
diff --git a/client/src/google-analytics/google-analytics.jsx b/client/src/google-analytics/google-analytics.jsx
deleted file mode 100644
index d0894d9..0000000
--- a/client/src/google-analytics/google-analytics.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import {googleAnalyticsTrackingId} from './selectors';
-
-const GoogleAnalytics = () => {
-  const trackingId = googleAnalyticsTrackingId();
-  return trackingId && (
-    <>
-      <script async src={`https://www.googletagmanager.com/gtag/js?id=${trackingId}`} />
-      <script>
-        {`
-window.dataLayer = window.dataLayer || [];
-function gtag(){dataLayer.push(arguments);}
-gtag('js', new Date());
-gtag('config', '${trackingId}');
-      `}
-      </script>
-    </>
-  );
-};
-
-export default GoogleAnalytics;
diff --git a/client/src/google-analytics/hooks.js b/client/src/google-analytics/hooks.js
new file mode 100644
index 0000000..6d4d505
--- /dev/null
+++ b/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);
+    });
+  }
+};
diff --git a/client/src/google-analytics/index.js b/client/src/google-analytics/index.js
index d1f7444..8c4cadc 100644
--- a/client/src/google-analytics/index.js
+++ b/client/src/google-analytics/index.js
@@ -1,2 +1,4 @@
-
-export {default} from './google-analytics';
+export {
+  useAnalytics,
+  updateAnalytics
+} from './hooks';
diff --git a/client/src/index.jsx b/client/src/index.jsx
index fa1f7ec..e787865 100644
--- a/client/src/index.jsx
+++ b/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')
   );
diff --git a/client/src/routes/__tests__/__snapshots__/routes.test.jsx.snap b/client/src/routes/__tests__/__snapshots__/routes.test.jsx.snap
index 6ca9e43..dfd41ac 100644
--- a/client/src/routes/__tests__/__snapshots__/routes.test.jsx.snap
+++ b/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>
 `;
diff --git a/client/src/routes/__tests__/routes.test.jsx b/client/src/routes/__tests__/routes.test.jsx
index 67cbd5d..4fddb28 100644
--- a/client/src/routes/__tests__/routes.test.jsx
+++ b/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();
   });
 });
diff --git a/client/src/routes/routes.jsx b/client/src/routes/routes.jsx
index f029420..4c2d64e 100644
--- a/client/src/routes/routes.jsx
+++ b/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>
 );