Trying to get this working again

-Lots of dependency updates
-Working locally with bump to socket.io v4

.github/workflows/ci.yml

@@ -9,12 +9,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - name: Checkout
-      uses: actions/checkout@v2
+      uses: actions/checkout@v4
 
     - name: Setup Node.js
-      uses: actions/setup-node@v1
+      uses: actions/setup-node@v4
       with:
-        node-version: '12.x'
+        node-version: '20.x'
 
     - name: Install
       run: npm ci

.github/workflows/deploy.yml

@@ -11,12 +11,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - name: Checkout
-      uses: actions/checkout@v2
+      uses: actions/checkout@v4
 
     - name: Setup Node.js
-      uses: actions/setup-node@v1
+      uses: actions/setup-node@v4
       with:
-        node-version: '12.x'
+        node-version: '20.x'
 
     - name: Install
       run: npm ci

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bm-hotgroups",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
@@ -10,13 +10,13 @@
     "@sentry/react": "^6.3.5",
     "@sentry/tracing": "^6.3.5",
     "lodash": "^4.17.21",
-    "moment": "^2.29.1",
+    "moment": "^2.30.1",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-ga": "^3.3.0",
-    "react-scripts": "4.0.3",
-    "socket.io-client": "^2.4.0"
+    "react-ga4": "^2.1.0",
+    "react-scripts": "5.0.1",
+    "socket.io-client": "^4.4.1"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -25,7 +25,7 @@
     "eject": "react-scripts eject"
   },
   "engines": {
-    "node": "12.x"
+    "node": "20.x"
   },
   "browserslist": {
     "production": [

src/App.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import moment from 'moment';
 import BMLH from './util/bmlastheard';
 import BMAgg from './util/bmagg';
@@ -146,8 +146,8 @@ class App extends React.Component {
 
     if (process.env.NODE_ENV === 'production') {
       // only use analytics in prod
-      ReactGA.initialize('UA-121772253-1');
-      ReactGA.pageview(window.location.pathname);
+      ReactGA.initialize('G-LSNRGQJRG7');
+      ReactGA.send({ hitType: "pageview", page: window.location.pathname, title: "Brandmeister Top Activity" });
 
       // only open automatically in prod
       this.bmlh.open();

src/components/Header.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faBroadcastTower, faInfoCircle, faNewspaper, faCoffee } from '@fortawesome/free-solid-svg-icons';
 import './Header.css';

src/components/TopCallsigns.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faUser } from '@fortawesome/free-solid-svg-icons';
 import _ from 'lodash';

src/components/TopGroups.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faUsers } from '@fortawesome/free-solid-svg-icons';
 import _ from 'lodash';

src/util/bmlastheard.js

@@ -6,7 +6,9 @@ import log from './logger';
 const BM_DEFAULT_URL = 'https://api.brandmeister.network';
 const BM_DEFAULT_OPTS = {
   path: '/lh',
-  reconnection: true
+  transports: ['websocket', 'polling'],
+  secure: true,
+  reconnection: true,
 };
 
 export default class BrandmeisterLastHeard {