Merge pull request #136 from KPMP/develop

Prep for release

package.json

@@ -3,7 +3,7 @@
   "version": "1.2.0",
   "private": true,
   "devDependencies": {
-    "node-sass-chokidar": "1.5.0",
+    "node-sass-chokidar": "2.0.0",
     "npm-run-all": "4.1.5",
     "react-scripts": "4.0.3"
   },
@@ -12,9 +12,9 @@
     "@fortawesome/free-solid-svg-icons": "5.5.0",
     "@fortawesome/react-fontawesome": "0.1.3",
     "antd": "4.15.1",
-    "axios": "0.21.1",
+    "axios": "1.3.6",
     "bootstrap": "4.3.1",
-    "es6-shim": "0.35.4",
+    "es6-shim": "0.35.8",
     "history": "4.9.0",
     "html-react-parser": "0.13.0",
     "lodash": "4.17.21",
@@ -25,8 +25,8 @@
     "react-countdown": "2.3.2",
     "react-device-detect": "1.6.1",
     "react-dom": "17.0.1",
-    "react-ga": "3.3.0",
-    "react-player": "2.9.0",
+    "react-ga4": "2.1.0",
+    "react-player": "2.12.0",
     "react-redux": "7.2.2",
     "react-router-dom": "5.2.0",
     "reactstrap": "8.8.1",

src/App.js

@@ -11,7 +11,7 @@ import loadedState from './initialState';
 import rootReducer from './reducers';
 import { Router, Switch, Route } from 'react-router-dom';
 import SlidePrintManager from './components/Slides/Menu/SlidePrintManager';
-import ReactGA from 'react-ga';
+import { default as ReactGA4 } from 'react-ga4';
 import { createBrowserHistory }  from 'history';
 import ErrorBoundaryContainer from './components/Error/ErrorBoundaryContainer';
 import ErrorPage from './components/Error/ErrorPage';
@@ -27,12 +27,11 @@ const store = applyMiddleware(thunk)(createStore)(rootReducer, initialState, win
 const saveState = () => {
     window.sessionStorage.setItem('redux-store', JSON.stringify(store.getState()));
 };
-const GA_TRACKING_ID = 'UA-124331187-3';
+const GA_TRACKING_ID = 'G-1GQRYQ6B9C';
 
-ReactGA.initialize(GA_TRACKING_ID);
+ReactGA4.initialize(GA_TRACKING_ID,  { testMode: process.env.NODE_ENV === 'test' });
 function logPageView(location, action) {
-    ReactGA.set({ page: location.pathname + location.search });
-    ReactGA.pageview(location.pathname + location.search);
+    ReactGA4.send({ hitType: 'pageview', page: location.pathname + location.search });
 }
 const history = createBrowserHistory();
 history.listen((location, action) => {

src/components/Error/ErrorPage.js

@@ -4,13 +4,16 @@ import { Col, Row, Button } from 'reactstrap';
 class ErrorPage extends Component {
     render() {
         return (
-            <article className="container-fluid" id="error-container">
-                <Row id="error-content">
+            <article className="container-fluid">
+                <Row id="oops-content">
                     <Col xs={0} md={2}>&nbsp;</Col>
+                    <Col xs={12} md={4} className={"text-center"}>
+                        <img src="img/oops.png" alt="Oops, something went wrong" id="oops-image"/>
+                    </Col>
                     <Col xs={12} md={6}>
-                        <p className="error-big">Oops...</p>
-                        <p className="error-small">Looks like something went wrong.<br/>We&#39;re working on it.</p>
-                        <p className="error-button-container">
+                        <p className="oops-big">Oops...</p>
+                        <p className="oops-small">Looks like something went wrong.<br/>We&#39;re working on it.</p>
+                        <p className="oops-button-container">
                             <Button className="btn btn-primary"
                                     onClick={() => window.location.href = "/"}>
                                     Back to Home

src/components/Help/Help.js

@@ -7,7 +7,7 @@ import WhatSeen from './WhatSeen';
 import CanIShare from './CanIShare';
 import MakeRecommendation from './MakeRecommendation';
 import PasswordIssues from './PasswordIssues';
-import ReactGA from 'react-ga';
+import { default as ReactGA4 } from 'react-ga4';
 
 class Help extends Component {
 
@@ -18,13 +18,14 @@ class Help extends Component {
 
     componentDidMount() {
         document.body.classList.remove('slide-viewer-body');
-        let action = 'View Help';
+        let label = 'Help';
         if (this.props.slides === undefined || this.props.slides.length === 0) {
-            action = 'Sent to Help (no slides)'
+            label = 'No Slides'
         }
-        ReactGA.event({
+        ReactGA4.event({
 			category: 'Participant Portal',
-			action: action,
+			action:'Navigation',
+            label: label
 		});
     }
 
@@ -90,6 +91,11 @@ class Help extends Component {
                                 <li><a href='mailto:[email protected]?subject=Question from Participant Portal'>Columbia University</a></li>
                                 <li><a href='mailto:[email protected]?subject=Question from Participant Portal'>Johns Hopkins University</a></li>
                                 <li><a href='mailto:[email protected]?subject=Question from Participant Portal'>Joslin/Beth Isreal Deaconess</a></li>
+                                <li><a href='mailto:[email protected]?subject=Question from Participant Portal'>Mount Sinai</a></li>
+                                <li><a href='mailto:[email protected]?subject=Question from Participant Portal'>University of Arizona</a></li>
+                                <li><a href='mailto:[email protected]?subject=Question from Participant Portal'>University of Illinois Chicago</a></li>
+                                <li><a href='mailto:[email protected]?subject=Question from Participant Portal'>University of Minnesota</a></li>
+                                <li><a href='mailto:[email protected]?subject=Question from Participant Portal'>University of North Carolina</a></li>
                                 <li><a href='mailto:[email protected]?subject=Question from Participant Portal'>University of Pittsburgh</a></li>
                                 <li><a href='mailto:[email protected]?subject=Question from Participant Portal'>UT Southwestern</a></li>
                                 <li><a href='mailto:[email protected]?subject=Question from Participant Portal'>Yale University</a></li>

src/components/Help/WhatIsStaining.js

@@ -29,7 +29,7 @@ class WhatIsStaining extends Component {
                                 </p>
                             </Col>
                             <Col lg='8' xs='12'>
-                                <img src='img/help/pathologist-slide.png' />
+                                <img alt='hand holding slide' src='img/help/pathologist-slide.png' />
                             </Col>
                         </Row>
 

src/components/Help/WhatSeen.js

@@ -21,7 +21,7 @@ class WhatSeen extends Component {
                                 </p>
                             </Col>
                             <Col lg='8' xs='12'>
-                                <img src='img/help/figure_kidney.png' />
+                                <img alt="breakdown of kidney structure" src='img/help/figure_kidney.png' />
                             </Col>
                         </Row>
                         <Row>
@@ -36,7 +36,7 @@ class WhatSeen extends Component {
                                 </p>
                             </Col>
                             <Col lg='8' xs='12'>
-                                <img src='img/help/figure_nephron.png' />
+                                <img alt='breakdown of nephron structure' src='img/help/figure_nephron.png' />
                             </Col>
                         </Row>
                         <Row>
@@ -47,7 +47,7 @@ class WhatSeen extends Component {
                                 </p>
                             </Col>
                             <Col lg='8' xs='12'>
-                                <img src='img/help/figure_wsi.png' />
+                                <img alt='anatomy of slide image' src='img/help/figure_wsi.png' />
                             </Col>
                         </Row>
                     </div>

src/components/Nav/NavBar.js

@@ -1,5 +1,5 @@
 // import React, { Component } from 'react';
-import { NavbarBrand, Collapse, Navbar, NavbarToggler, Nav, NavItem, Container, NavLink, NavbarText } from 'reactstrap';
+import { NavbarBrand, Collapse, Navbar, NavbarToggler, Nav, NavItem, Container, NavLink } from 'reactstrap';
 import React, { useState } from 'react';
 
 const NavBar = (props) => {

src/components/Slides/Menu/Header.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCaretLeft, faChevronRight, faChevronLeft, faPrint, faDownload } from '@fortawesome/free-solid-svg-icons';
 import { Col, Row } from 'reactstrap';
-import ReactGA from 'react-ga';
+import { default as ReactGA4 } from 'react-ga4';
 import SlidePrintManager from './SlidePrintManager';
 import { getNextSlide, getPreviousSlide, downloadSlide } from '../slideHelpers.js';
 import { isMobile } from 'react-device-detect';
@@ -19,35 +19,39 @@ class Header extends Component {
         let nextSlide = getNextSlide(this.props.selectedPatient.slides, this.props.selectedPatient.selectedSlide);
         this.props.setSelectedSlide(nextSlide);
         this.props.toggleMenu(true);
-		ReactGA.event({
+		ReactGA4.event({
 			category: 'Participant Portal',
-			action: 'Select Slide',
+			action: 'Navigation',
+			label: 'Select Slide'
 		});
     }
 
     handlePreviousSlide() {
         let previousSlide = getPreviousSlide(this.props.selectedPatient.slides, this.props.selectedPatient.selectedSlide);
         this.props.setSelectedSlide(previousSlide);
         this.props.toggleMenu(true);
-		ReactGA.event({
+		ReactGA4.event({
 			category: 'Participant Portal',
-			action: 'Select slide',
+			action: 'Navigation',
+			label: 'Select Slide'
 		});
     }
 
     handleDownload() {
-        ReactGA.event({
+		let downloadFileName = this.props.selectedPatient.selectedSlide.slideName + ".jpg";
+        ReactGA4.event({
             category: 'Participant Portal',
-            action: 'Download Slide'
+            action: 'Download',
+			label: downloadFileName
         });
-    	let downloadFileName = this.props.selectedPatient.selectedSlide.slideName + ".jpg";
-    	downloadSlide(downloadFileName);
+		downloadSlide(downloadFileName);
     }
 
     onPrint() {
-        ReactGA.event({
+        ReactGA4.event({
             category: 'Participant Portal',
-            action: 'Print Slide'
+            action: 'Print',
+			label: this.props.selectedPatient.selectedSlide.slideName
         });
         SlidePrintManager.getInstance().beforePrint();
         setTimeout(window.print, 10);

src/components/Slides/Menu/SlideList.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { Col, Row } from 'reactstrap';
 import Header from './Header';
-import ReactGA from 'react-ga';
+import { default as ReactGA4 } from 'react-ga4';
 
 class SlideList extends Component {
 
@@ -13,9 +13,10 @@ class SlideList extends Component {
     handleSelectSlide(slide) {
         this.props.setSelectedSlide(slide);
         this.props.toggleMenu(true);
-		ReactGA.event({
+		ReactGA4.event({
 			category: 'Participant Portal',
-			action: 'Select Slide',
+			action: 'Navigation',
+			label: 'Select Slide'
 		});
     }
 

src/index.scss

@@ -119,11 +119,14 @@ canvas {
 		text-decoration: underline;
 	}
 }
-
+.btn-primary {
+	background-color: rgb(2, 117, 216);
+}
 #summary-page {
 	max-width: 1150px;
 	position: relative;
 	margin: auto;
+	padding-bottom: 20px;
 
 	.btn-primary {
 		background-color: #BB0606;
@@ -164,7 +167,7 @@ canvas {
 	#summary-content-wrapper {
 		margin-top: 100px;
 		z-index: 0;
-
+		padding-bottom: 1.25rem;
 		.row {
 			margin-left: 20px;
 		}
@@ -340,7 +343,23 @@ canvas {
 		}
 	}
 }
+#oops-content {
 
+	margin-top: 150px;
+
+	.oops-big {
+		font-size: 72px;
+	}
+
+	.oops-small {
+		font-size: 32px;
+	}
+
+	#oops-image {
+		width: 385px;
+		height: 330px;
+	}
+}
 @media only print {
 	body {
 		font-size: 16px;