Connects to #106. Google Analytics tag update. (#118)

* Removed analytics.js dependence and installed gtag.js dependency

* Updated Google Analytics implementation with gtag.js

* Updated Google Analytics implementation with gtag.js

* Updated Google Analytics implementation callback for tracking event

* Updated Google Analytics implementation callback for tracking event

Also fixed bug in which wrong release version number is passed to Google Analytics data download tracking event

* Fixed unit test due to dependency changes

* Removed no longer needed assets after standalone human meta-analysis site was launched

* Updated some outdated dependencies

* Upgraded react-scripts dependency to address issue in which ESLint errors cause problems while compiling and building the app

ESLint errors didn't cause any issues prior to react-scripts v3.x. So the React team released this patch in response to that.

Also upgraded the storybook dependencies to address the vulnerability issue in its peer dependency.

* Removed ESLint rule overrides that were added due to ESLint errors causing app build problem in react-scripts v4.x

* Set DISABLE_ESLINT_PLUGIN environment variable to disable eslinting for CRA production build

This workaround could be temporary and reverted in the future

* Revert previously attempt to set environment variable when running the build

.eslintrc.js

@@ -1,41 +1,16 @@
 module.exports = {
-    "extends": [
-        "airbnb",
-        "plugin:prettier/recommended"
-    ],
-    "plugins": [
-        "react-hooks",
-        "prettier"
-    ],
-    "rules": {
-        "jsx-a11y/label-has-for": 0,
-        "jsx-a11y/label-has-associated-control": 0,
-        "jsx-a11y/no-noninteractive-tabindex": 0,
-        "jsx-a11y/control-has-associated-label": 0,
-        "react-hooks/rules-of-hooks": "error",
-        "react-hooks/exhaustive-deps": "warn",
-        "import/no-extraneous-dependencies": [
-            "error",
-            {"devDependencies": true}
-        ],
-        "no-use-before-define": 0,
-        "no-param-reassign": 0,
-        "no-console": 0,
-        "func-names": 0,
-        "prefer-template": 0,
-        "consistent-return": 0,
-        "react/jsx-filename-extension": 0,
-        "react/jsx-props-no-spreading": 0,
-        "react/jsx-one-expression-per-line": 0,
-        "react/prop-types": 0,
-        "react/forbid-prop-types": 0,
-        "react/no-unescaped-entities": 0,
-        "react/destructuring-assignment": 0,
-        "react/no-this-in-sfc": 0,
-        "prettier/prettier": 0
-    },
-    "env": {
-        "browser": true,
-        "jest": true
-    }
+  extends: ['airbnb', 'plugin:prettier/recommended'],
+  plugins: ['react-hooks', 'prettier'],
+  rules: {
+    'jsx-a11y/label-has-for': 0,
+    'jsx-a11y/label-has-associated-control': 0,
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn',
+    'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
+    'react/jsx-props-no-spreading': 0,
+  },
+  env: {
+    browser: true,
+    jest: true,
+  },
 };

package.json

@@ -3,12 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "auth0-js": "9.14.3",
+    "auth0-js": "9.15.0",
     "axios": "^0.21.1",
     "bootstrap": "4.6.0",
     "chart.js": "^2.9.3",
     "d3": "^5.14.2",
     "dayjs": "1.8.25",
+    "ga-gtag": "^1.0.1",
     "history": "4.10.1",
     "jquery": "^3.5.1",
     "lodash": "^4.17.11",
@@ -18,12 +19,11 @@
     "react": "17.0.1",
     "react-chartjs-2": "^2.8.0",
     "react-dom": "17.0.1",
-    "react-ga": "^3.1.2",
     "react-google-recaptcha": "^2.1.0",
     "react-particles-js": "3.4.1",
     "react-redux": "^7.2.1",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "4.0.2",
+    "react-scripts": "4.0.3",
     "react-spring": "^8.0.20",
     "redux": "^4.0.1",
     "redux-thunk": "^2.3.0",
@@ -49,24 +49,24 @@
     "not op_mini all"
   ],
   "devDependencies": {
-    "@storybook/addon-actions": "6.1.18",
-    "@storybook/addon-links": "6.1.18",
-    "@storybook/addon-storyshots": "6.1.18",
-    "@storybook/addons": "6.1.18",
+    "@storybook/addon-actions": "6.1.21",
+    "@storybook/addon-links": "6.1.21",
+    "@storybook/addon-storyshots": "6.1.21",
+    "@storybook/addons": "6.1.21",
     "@storybook/preset-create-react-app": "^3.1.4",
-    "@storybook/react": "6.1.18",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
+    "@storybook/react": "6.1.21",
+    "@wojtekmaj/enzyme-adapter-react-17": "0.6.0",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
     "eslint-config-airbnb": "^18.2.0",
-    "eslint-config-prettier": "7.2.0",
+    "eslint-config-prettier": "8.1.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react-hooks": "^4.0.8",
     "jest-canvas-mock": "^2.2.0",
     "prettier": "2.2.1",
     "sass": "1.32.8",
     "storybook-react-router": "1.0.8",
     "stylelint": "^13.2.0",
-    "stylelint-config-recommended": "^3.0.0"
+    "stylelint-config-recommended": "4.0.0"
   }
 }

src/AnnouncementsPage/announcementsPage.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import dayjs from 'dayjs';
-import { TrackEvent } from '../GoogleAnalytics/googleAnalytics';
+import { trackEvent } from '../GoogleAnalytics/googleAnalytics';
 import AuthContentContainer from '../lib/ui/authContentContainer';
 
 const announcementData = require('./announcements');
@@ -77,7 +77,7 @@ function AnnouncementEntry({ entry }) {
                     className="inline-link-with-icon"
                     target="_blank"
                     rel="noopener noreferrer"
-                    onClick={TrackEvent.bind(
+                    onClick={trackEvent.bind(
                       this,
                       link.gaEventCategory,
                       link.gaEventAction,

src/App/__test__/App.test.jsx

@@ -5,8 +5,8 @@ import App from '../App';
 
 const testUser = require('../../testData/testUser');
 
-// Mocking ReactGA for Google Analytics
-jest.mock('react-ga');
+// Mocking Google Analytics
+jest.mock('ga-gtag');
 
 describe('<App />', () => {
   let component;