Upgrade to React 17.

.eslintrc

@@ -1,7 +1,7 @@
 {
   "plugins": ["react", "filenames"],
   "extends": "airbnb",
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
 
   "rules": {
     "strict": 0,
@@ -57,7 +57,11 @@
     "import/named": 0,
     "react/destructuring-assignment": 0,
     "no-else-return": 0,
-    "react/jsx-one-expression-per-line": 0
+    "react/jsx-one-expression-per-line": 0,
+    "react/jsx-props-no-spreading": 0,
+    "import/no-cycle": 0,
+    "react/static-property-placement": 0,
+    "react/state-in-constructor": 0
   },
   "globals": {
     "require": true

.snyk

@@ -1,5 +1,5 @@
 # Snyk (https://snyk.io) policy file, patches or ignores known vulnerabilities.
-version: v1.14.0
+version: v1.14.1
 # ignores vulnerabilities until expiry date; change duration by modifying expiry date
 ignore:
   'npm:unicode:20161219':
@@ -18,6 +18,28 @@ ignore:
     - istanbul-reports > handlebars:
         reason: None given
         expires: '2019-11-15T18:30:47.398Z'
+  SNYK-JS-YARGSPARSER-560381:
+    - yargs > yargs-parser:
+        reason: None given
+        expires: '2020-11-26T21:04:41.725Z'
+  SNYK-JS-MARKED-584281:
+    - blessed-contrib > marked:
+        reason: None given
+        expires: '2020-11-26T21:04:41.725Z'
+  SNYK-JS-NODEFETCH-674311:
+    - recompose > fbjs > isomorphic-fetch > node-fetch:
+        reason: None given
+        expires: '2020-11-26T21:04:41.726Z'
+    - '@material-ui/core > recompose > fbjs > isomorphic-fetch > node-fetch':
+        reason: None given
+        expires: '2020-11-26T21:04:41.726Z'
+    - '@material-ui/icons > recompose > fbjs > isomorphic-fetch > node-fetch':
+        reason: None given
+        expires: '2020-11-26T21:04:41.726Z'
+  SNYK-JS-REACTOAUTHFLOW-559019:
+    - react-oauth-flow:
+        reason: None given
+        expires: '2020-11-26T21:04:41.726Z'
 # patches apply the minimum changes required to fix a vulnerability
 patch:
   'npm:minimatch:20160620':

application.js

@@ -1,7 +1,6 @@
 #!/usr/bin/env node
 
 /* eslint no-console:0 */
-/* globals console */
 
 const cluster = require('cluster');
 

client/components/common/display-error/index.jsx

@@ -26,7 +26,8 @@ DisplayError.propTypes = {
     base: PropTypes.object.isRequired
   }).isRequired,
   error: PropTypes.shape({
-    message: PropTypes.string.isRequired
+    message: PropTypes.string.isRequired,
+    timeout: PropTypes.number
   }),
   onClose: PropTypes.func
 };

client/components/common/notched-drawer/index.jsx

@@ -15,7 +15,9 @@ class NotchedDrawer extends PureComponent {
   static propTypes = {
     computedStyles: PropTypes.shape({
       base: PropTypes.object.isRequired,
-      notch: PropTypes.object.isRequired
+      notch: PropTypes.object.isRequired,
+      notchButton: PropTypes.object.isRequired,
+      children: PropTypes.object.isRequired
     }).isRequired,
     onClick: PropTypes.func.isRequired,
     onClose: PropTypes.func.isRequired,

client/components/floor-plan/controller.jsx

@@ -1,4 +1,4 @@
-/* globals setInterval, clearInterval */
+/* eslint react/no-deprecated:0 */
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import queryString from 'query-string';
@@ -22,7 +22,10 @@ class FloorPlanController extends PureComponent {
       accessToken: PropTypes.string.isRequired,
       expiresOn: PropTypes.string.isRequired
     }),
-    location: PropTypes.shape({ pathname: PropTypes.string.isRequired }).isRequired,
+    location: PropTypes.shape({
+      pathname: PropTypes.string.isRequired,
+      search: PropTypes.string.isRequired
+    }).isRequired,
     meetingRooms: PropTypes.array,
     stalls: PropTypes.array,
     markers: PropTypes.array,
@@ -40,7 +43,11 @@ class FloorPlanController extends PureComponent {
     actions: PropTypes.shape({
       emitPingClear: PropTypes.func.isRequired,
       push: PropTypes.func.isRequired,
-      replace: PropTypes.func.isRequired
+      replace: PropTypes.func.isRequired,
+      connectSocket: PropTypes.func.isRequired,
+      emitTimeTravelUpdate: PropTypes.func.isRequired,
+      emitTimeTravelControlsToggle: PropTypes.func.isRequired,
+      emitTimeSliderValueUpdate: PropTypes.func.isRequired
     }).isRequired
   };
 

client/components/floor-plan/layout/index.jsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 import PropTypes from 'prop-types';
 import { Route } from 'react-router-dom';
@@ -24,7 +24,7 @@ const FloorPlanLayout = (props) => {
   );
 
   return (
-    <Fragment>
+    <>
       <Paper id={FLOOR_PLAN_ROOT_ID}>
         <SwipeableViews
           className={computedStyles.swipableOverride}
@@ -42,7 +42,7 @@ const FloorPlanLayout = (props) => {
       </Paper>
       <Route exact path='/:location/:room' render={() => <RoomModalTrigger {...props} />} />
       <DisplayError {...props} />
-    </Fragment>
+    </>
   );
 };
 

client/components/floor-plan/layout/location/meeting-room/index.jsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import withStyles from 'withstyles';
 
@@ -59,11 +59,11 @@ const MeetingRoom = (props) => {
     ));
 
   const renderToolTip = () => (
-    <Fragment>
+    <>
       <div>{name}</div>
       {description ? <div>{description}</div> : null}
       <div>{formatTempText(meetingRoom)}</div>
-    </Fragment>
+    </>
   );
 
   return (
@@ -83,7 +83,8 @@ MeetingRoom.propTypes = {
   displayAdditionalInfo: PropTypes.bool.isRequired,
   getLocationParams: PropTypes.func.isRequired,
   actions: PropTypes.shape({
-    emitModalContentUpdate: PropTypes.func.isRequired
+    emitModalContentUpdate: PropTypes.func.isRequired,
+    push: PropTypes.func.isRequired
   }).isRequired,
   computedStyles: PropTypes.shape({
     base: PropTypes.object.isRequired,

client/components/floor-plan/layout/map-legend/index.jsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import withStyles from 'withstyles';
 
@@ -69,14 +69,14 @@ const MapLegend = ({
             </ListItem>
             <ListItem>{renderIcon(STATUS_COLOR_THEMES[statusesTheme].VACANT)} Vacant</ListItem>
             {enableMotion || enableStalls ? (
-              <Fragment>
+              <>
                 <ListItem key='squatted'>
                   {renderIcon(STATUS_COLOR_THEMES[statusesTheme].SQUATTED)} Squatted
                 </ListItem>
                 <ListItem key='abandonded'>
                   {renderIcon(STATUS_COLOR_THEMES[statusesTheme].ABANDONED)} Abandoned
                 </ListItem>
-              </Fragment>
+              </>
             ) : null}
             <ListItem>{renderIcon(STATUS_COLOR_THEMES[statusesTheme].BOOKED)} Booked</ListItem>
             <ListItem>

client/components/floor-plan/layout/room-modal/future-reservations/index.jsx

@@ -1,5 +1,5 @@
 /* globals document */
-import React, { PureComponent, Fragment } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import withStyles from 'withstyles';
 import moment from 'moment';
@@ -24,6 +24,7 @@ class FutureReservations extends PureComponent {
   static propTypes = {
     computedStyles: PropTypes.shape({
       base: PropTypes.object.isRequired,
+      right: PropTypes.object.isRequired,
       status: PropTypes.func.isRequired,
       scrollIcon: PropTypes.object.isRequired
     }).isRequired,
@@ -233,7 +234,7 @@ class FutureReservations extends PureComponent {
     const { computedStyles, isOnline } = this.props;
 
     return (
-      <Fragment>
+      <>
         <Icon className={computedStyles.scrollIcon} onClick={() => this.scroll('up')}>
           keyboard_arrow_up
         </Icon>
@@ -254,7 +255,7 @@ class FutureReservations extends PureComponent {
         <Icon className={computedStyles.scrollIcon} onClick={() => this.scroll('down')}>
           keyboard_arrow_down
         </Icon>
-      </Fragment>
+      </>
     );
   }
 }

client/components/floor-plan/layout/room-modal/index.jsx

@@ -1,4 +1,4 @@
-import React, { Fragment, PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import withStyles from 'withstyles';
 import moment from 'moment';
@@ -81,7 +81,7 @@ class RoomModal extends PureComponent {
     };
 
     return meetingRoom ? (
-      <Fragment>
+      <>
         <div className={computedStyles.base}>
           <div className={computedStyles.status(meetingRoom.alert)}>
             <div>
@@ -106,7 +106,7 @@ class RoomModal extends PureComponent {
             <Icon>subdirectory_arrow_left</Icon> Return to {formatForDisplay(meetingRoom.location)}
           </button>
         </div>
-      </Fragment>
+      </>
     ) : null;
   }
 }

client/components/floor-plan/layout/room-modal/trigger.jsx

@@ -31,7 +31,7 @@ class RoomModalTrigger extends Component {
     return !isEqual(this.getMeetingRoom(), this.getMeetingRoom(nextProps));
   }
 
-  componentWillUpdate(nextProps) {
+  componentWillUpdate(nextProps) { // eslint-disable-line
     this.triggerRoomModal(nextProps);
   }
 

client/components/navigation/accessibility-modal/index.jsx

@@ -95,7 +95,8 @@ const AccessibilityModal = ({ computedStyles, actions }) => {
 
 AccessibilityModal.propTypes = {
   actions: PropTypes.shape({
-    emitModalContentUpdate: PropTypes.func.isRequired
+    emitModalContentUpdate: PropTypes.func.isRequired,
+    emitStatusesThemeUpdate: PropTypes.func.isRequired
   }).isRequired,
   computedStyles: PropTypes.shape({
     base: PropTypes.string.isRequired,

client/components/navigation/controller.jsx

@@ -20,6 +20,8 @@ class NavigationController extends PureComponent {
     timeTravelTime: PropTypes.string,
     timeSliderValue: PropTypes.number,
     actions: PropTypes.shape({
+      push: PropTypes.func.isRequired,
+      emitModalContentUpdate: PropTypes.func.isRequired,
       emitOauthResponseUpdate: PropTypes.func.isRequired,
       emitDeviceWidthUpdate: PropTypes.func.isRequired,
       emitTimeTravelUpdate: PropTypes.func.isRequired,
@@ -30,12 +32,15 @@ class NavigationController extends PureComponent {
       emitTempScaleToggle: PropTypes.func.isRequired
     }).isRequired,
     locations: PropTypes.array,
-    location: PropTypes.shape({ pathname: PropTypes.string.isRequired }).isRequired,
+    location: PropTypes.shape({
+      search: PropTypes.string.isRequired,
+      pathname: PropTypes.string.isRequired
+    }).isRequired,
     children: PropTypes.node.isRequired,
     modalContent: PropTypes.node
   };
 
-  componentWillMount() {
+  componentWillMount() { // eslint-disable-line
     const { actions, oauthResponse } = this.props;
     window.addEventListener('resize', actions.emitDeviceWidthUpdate);
 
@@ -46,7 +51,7 @@ class NavigationController extends PureComponent {
     }
   }
 
-  componentWillReceiveProps({ documentTitle }) {
+  componentWillReceiveProps({ documentTitle }) { // eslint-disable-line
     document.title = documentTitle;
   }
 

client/components/navigation/drawer-content/index.jsx

@@ -1,6 +1,6 @@
 /* globals localStorage, window */
 /* eslint react/no-danger:0 */
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import withStyles from 'withstyles';
 
@@ -34,7 +34,7 @@ const DrawerContent = (props) => {
   };
 
   const renderRemperatureOptions = () => (
-    <Fragment>
+    <>
       {/* TODO https://github.com/Nase00/gtfo/issues/160
       <DrawerContentItem
         onClick={actions.emitDisplayTempToggle.bind(null, displayTemp)}
@@ -48,7 +48,7 @@ const DrawerContent = (props) => {
         enabled={displayTemp}
         className={computedStyles.tempIconAdjust}
         primary={`Use ${inverseUnitOfTempText[unitOfTemp]}`}/>
-    </Fragment>
+    </>
   );
 
   const renderLogOutButton = () => (
@@ -132,8 +132,10 @@ DrawerContent.propTypes = {
   siteNavOpen: PropTypes.bool.isRequired,
   actions: PropTypes.shape({
     emitToggleSiteNav: PropTypes.func.isRequired,
+    emitAdditionalInfoToggle: PropTypes.func.isRequired,
     emitDisplayLegendToggle: PropTypes.func.isRequired,
-    emitTempScaleToggle: PropTypes.func.isRequired
+    emitTempScaleToggle: PropTypes.func.isRequired,
+    emitModalContentUpdate: PropTypes.func.isRequired
   }).isRequired,
   displayLegend: PropTypes.bool.isRequired,
   displayTemp: PropTypes.bool.isRequired,

client/components/navigation/header/index.jsx

@@ -98,6 +98,7 @@ Header.propTypes = {
     base: PropTypes.object.isRequired,
     title: PropTypes.object.isRequired,
     menuButton: PropTypes.object.isRequired,
+    fullscreenDismiss: PropTypes.object.isRequired,
     tab: PropTypes.object.isRequired
   }).isRequired,
   siteNavOpen: PropTypes.bool.isRequired,
@@ -108,7 +109,9 @@ Header.propTypes = {
   location: PropTypes.shape({
     query: PropTypes.shape({
       fullscreen: PropTypes.string
-    })
+    }),
+    pathname: PropTypes.string.isRequired,
+    search: PropTypes.string.isRequired
   }).isRequired,
   onTimeTravelDismissClick: PropTypes.func.isRequired,
   onFullscreenCloseClick: PropTypes.func.isRequired,

client/components/navigation/header/location-dropdown/index.jsx

@@ -33,7 +33,8 @@ const LocationDropdown = (props) => {
 
 LocationDropdown.propTypes = {
   computedStyles: PropTypes.shape({
-    menuItem: PropTypes.object.isRequired
+    menuItem: PropTypes.object.isRequired,
+    select: PropTypes.object.isRequired
   }).isRequired,
   actions: PropTypes.shape({
     push: PropTypes.func.isRequired

client/components/navigation/time-travel/time-slider/index.jsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import withStyles from 'withstyles';
@@ -22,7 +22,7 @@ const TimeSlider = ({ computedStyles, actions, timeSliderValue, timezone }) => {
   };
 
   return isDaytime ? (
-    <Fragment>
+    <>
       <Slider
         step={1}
         min={0}
@@ -33,7 +33,7 @@ const TimeSlider = ({ computedStyles, actions, timeSliderValue, timezone }) => {
       <div className={computedStyles.timeHintText}>
         Use the slider to view availabilities between now and {MAX_TIME}
       </div>
-    </Fragment>
+    </>
   ) : (
     <div className={computedStyles.timeHintText}>
       This feature is not available after {MAX_TIME}. Please try again tomorrow.