From 83eb597e5adba7e258f4edc656380d36ca4bfd18 Mon Sep 17 00:00:00 2001
From: Luke Berndt <lukekb@gmail.com>
Date: Sat, 19 Jun 2021 09:34:00 -0400
Subject: [PATCH] add google analytics

---
 frontend/package.json        |  1 +
 frontend/src/index.js        | 14 ++++++++++---
 frontend/src/withTracker.js  | 39 ++++++++++++++++++++++++++++++++++++
 frontend/yarn.lock           |  5 +++++
 node_modules/.yarn-integrity | 12 -----------
 5 files changed, 56 insertions(+), 15 deletions(-)
 create mode 100644 frontend/src/withTracker.js
 delete mode 100644 node_modules/.yarn-integrity

diff --git a/frontend/package.json b/frontend/package.json
index d6fab2b..5d66f80 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,6 +18,7 @@
     "react-audio-player": "0.14.0",
     "react-datepicker": "3.3.0",
     "react-dom": "^17.0.1",
+    "react-ga": "^3.3.0",
     "react-redux": "^7.1.3",
     "react-router-dom": "5.2.0",
     "react-scripts": "4.0.1",
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 9d2dd58..f128bbd 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -4,8 +4,14 @@ import { Provider } from 'react-redux'
 import { Route, Switch } from 'react-router' // react-router v4/v5
 import { ConnectedRouter } from 'connected-react-router'
 import configureStore, { history } from './redux-router/configureStore'
+import ReactGA from 'react-ga';
+
+
 import 'semantic-ui-css/semantic.min.css'
 
+// withTracker
+import withTracker from './withTracker';
+
 // Main
 import MainContainer from "./Main/MainContainer"
 
@@ -15,6 +21,8 @@ import ListSystemsContainer from "./System/ListSystemsContainer"
 // Call
 import CallPlayerContainer from "./Call/CallPlayerContainer"
 
+ReactGA.initialize(process.env.GOOGLE_ANALYTICS);
+
 const store = configureStore(/* provide initial state if any */)
 
 ReactDOM.render(
@@ -22,9 +30,9 @@ ReactDOM.render(
     <ConnectedRouter history={history}> { /* place ConnectedRouter under Provider */ }
       <> { /* your usual react-router v4/v5 routing */ }
         <Switch>
-          <Route exact path="/" component={MainContainer} />
-          <Route exact path="/systems" component={ListSystemsContainer} />
-          <Route exact path="/system/:shortName" component={CallPlayerContainer} />
+          <Route exact path="/" component={withTracker(MainContainer)} />
+          <Route exact path="/systems" component={withTracker(ListSystemsContainer)} />
+          <Route exact path="/system/:shortName" component={withTracker(CallPlayerContainer)} />
           <Route render={() => (<div>Miss</div>)} />
         </Switch>
       </>
diff --git a/frontend/src/withTracker.js b/frontend/src/withTracker.js
new file mode 100644
index 0000000..ffef390
--- /dev/null
+++ b/frontend/src/withTracker.js
@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+import ReactGA from 'react-ga';
+
+export default function withTracker(WrappedComponent, options = {}) {
+  const trackPage = (page) => {
+    ReactGA.set({
+      page,
+      ...options
+    });
+    ReactGA.pageview(page);
+  };
+
+  const HOC = class extends Component {
+    componentDidMount() {
+      const {
+        location: { pathname: page }
+      } = this.props;
+      trackPage(page);
+    }
+
+    // eslint-disable-next-line camelcase
+    UNSAFE_componentWillReceiveProps(nextProps) {
+      const {
+        location: { pathname: currentPage }
+      } = this.props;
+      const nextPage = nextProps.location.pathname;
+
+      if (currentPage !== nextPage) {
+        trackPage(nextPage);
+      }
+    }
+
+    render() {
+      return <WrappedComponent {...this.props} />;
+    }
+  };
+
+  return HOC;
+}
\ No newline at end of file
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index dfc92a1..5c21dfe 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -8179,6 +8179,11 @@ react-fast-compare@^3.0.1:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
 
+react-ga@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-3.3.0.tgz#c91f407198adcb3b49e2bc5c12b3fe460039b3ca"
+  integrity sha512-o8RScHj6Lb8cwy3GMrVH6NJvL+y0zpJvKtc0+wmH7Bt23rszJmnqEQxRbyrqUzk9DTJIHoP42bfO5rswC9SWBQ==
+
 react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.6.3, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
diff --git a/node_modules/.yarn-integrity b/node_modules/.yarn-integrity
deleted file mode 100644
index cd11304..0000000
--- a/node_modules/.yarn-integrity
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "nodeVersion": "v10.15.3",
-  "modulesFolders": [
-    "node_modules"
-  ],
-  "flags": [],
-  "linkedModules": [],
-  "topLevelPatterns": [],
-  "lockfileEntries": {},
-  "files": [],
-  "artifacts": {}
-}
\ No newline at end of file