WV-4029: Convert App component from class to functional

package.json

@@ -214,8 +214,7 @@
     "supercluster": "^8.0.1",
     "tough-cookie": "^6.0.1",
     "upng-js": "^2.1.0",
-    "url-template": "^3.1.1",
-    "what-input": "^5.2.12"
+    "url-template": "^3.1.1"
   },
   "overrides": {
     "semver": "^7.5.4",

web/js/app.js

@@ -1,15 +1,14 @@
-import React from 'react';
+import { useEffect } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-// eslint-disable-next-line no-unused-vars
-import whatInput from 'what-input';
 
 // Utils
 import util from './util/util';
+import usePrevious from './util/customHooks';
 import { STARTUP } from './util/constants';
 import MapInteractions from './containers/map-interactions/map-interactions';
 // Toolbar
 import Toolbar from './containers/toolbar';
 import Sidebar from './containers/sidebar/sidebar';
 // Modal
 import Modal from './containers/modal';
@@ -50,68 +49,39 @@
 
 const { events } = util;
 
-class App extends React.Component {
-  // https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-  static setVhCSSProperty() {
-    const vh = window.innerHeight * 0.01;
-    document.documentElement.style.setProperty('--vh', `${vh}px`);
-  }
-
-  constructor(props) {
-    super(props);
-    this.onload();
-    this.handleKeyPress = this.handleKeyPress.bind(this);
-  }
-
-  componentDidMount() {
-    document.addEventListener('keydown', this.handleKeyPress);
-    window.addEventListener('resize', App.setVhCSSProperty);
-    window.addEventListener('orientationchange', App.setVhCSSProperty);
-  }
-
-  componentDidUpdate(prevProps) {
-    // Check if the numberUnseen prop has changed
-    const {
-      kioskModeEnabled, notifications, numberOutagesUnseen, e2eModeEnabled, hideNotificationsPopup,
-    } = this.props;
-    if (numberOutagesUnseen !== prevProps.numberOutagesUnseen) {
-      if (numberOutagesUnseen > 0 && !kioskModeEnabled &&
-        !e2eModeEnabled && !hideNotificationsPopup) {
-        this.openNotification(notifications, numberOutagesUnseen);
-      }
-    }
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('keydown', this.handleKeyPress);
-    window.removeEventListener('resize', App.setVhCSSProperty);
-    window.removeEventListener('orientationchange', App.setVhCSSProperty);
-  }
-
-  handleKeyPress(event) {
-    const { keyPressAction } = this.props;
-    const ctrlOrCmdKey = event.ctrlKey || event.metaKey;
-    const isInput = event.srcElement.nodeName === 'INPUT';
-    keyPressAction(event.keyCode, event.shiftKey, ctrlOrCmdKey, isInput);
-  }
-
-  getScreenInfo = () => {
-    const { setScreenInfoAction } = this.props;
-    setScreenInfoAction();
-  };
+// https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+const setVhCSSProperty = () => {
+  const vh = window.innerHeight * 0.01;
+  document.documentElement.style.setProperty('--vh', `${vh}px`);
+};
 
-  openNotification = (obj, numberOutagesUnseen) => {
-    const { notificationClick } = this.props;
-    notificationClick(obj, numberOutagesUnseen);
-  };
+function App(props) {
+  const {
+    isAnimationWidgetActive,
+    isEmbedModeActive,
+    isMobile,
+    isTourActive,
+    kioskModeEnabled,
+    e2eModeEnabled,
+    numberOutagesUnseen,
+    locationKey,
+    modalId,
+    notifications,
+    parameters,
+    config,
+    hideNotificationsPopup,
+    keyPressAction,
+    setScreenInfoAction,
+    notificationClick,
+  } = props;
 
-  onload() {
-    const { props, getScreenInfo } = this;
-    const { config, parameters } = props;
-    const state = parameters;
-    config.parameters = state;
+  const prevNumberOutagesUnseen = usePrevious(numberOutagesUnseen);
 
+  // One-time startup (replaces constructor -> onload())
+  useEffect(() => {
     const main = () => {
+      config.parameters = parameters;
+
       // Load any additional scripts as needed
       if (config.scripts) {
         util.loadScripts(config.scripts);
@@ -130,62 +100,76 @@
         console.warn('Development version');
       }
       window.addEventListener('resize', () => {
-        getScreenInfo();
+        setScreenInfoAction();
       });
       window.addEventListener('orientationchange', () => {
-        getScreenInfo();
+        setScreenInfoAction();
       });
-      getScreenInfo();
+      setScreenInfoAction();
       events.trigger(STARTUP);
-      App.setVhCSSProperty();
+      setVhCSSProperty();
     };
     util.wrap(main)();
-  }
+  }, []);
+
+  // componentDidMount listeners + cleanup
+  useEffect(() => {
+    const handleKeyPress = (event) => {
+      const ctrlOrCmdKey = event.ctrlKey || event.metaKey;
+      const isInput = event.srcElement.nodeName === 'INPUT';
+      keyPressAction(event.keyCode, event.shiftKey, ctrlOrCmdKey, isInput);
+    };
+    document.addEventListener('keydown', handleKeyPress);
+    window.addEventListener('resize', setVhCSSProperty);
+    window.addEventListener('orientationchange', setVhCSSProperty);
+    return () => {
+      document.removeEventListener('keydown', handleKeyPress);
+      window.removeEventListener('resize', setVhCSSProperty);
+      window.removeEventListener('orientationchange', setVhCSSProperty);
+    };
+  }, [keyPressAction]);
 
-  render() {
-    const {
-      isAnimationWidgetActive,
-      isEmbedModeActive,
-      isMobile,
-      isTourActive,
-      numberOutagesUnseen,
-      locationKey,
-      modalId,
-      parameters,
-      hideNotificationsPopup,
-    } = this.props;
-    const appClass = `wv-content ${isEmbedModeActive ? 'embed-mode' : ''}`;
-    return (
-      <div className={appClass} id="wv-content" data-role="content">
-        {!isMobile && !isEmbedModeActive && <LocationSearch />}
-        <LoadingSpinner />
-        <Toolbar />
-        <MapInteractions />
-        <AlertDropdown isTourActive={isTourActive} />
-        <div>
-          {isTourActive && (numberOutagesUnseen === 0 ||
-            hideNotificationsPopup) && (!isMobile || isEmbedModeActive)
-            ? <Tour />
-            : null}
-        </div>
-        <Sidebar />
-        <div id="layer-modal" className="layer-modal" />
-        <div id="layer-settings-modal" />
-        <div id="eventsHolder" />
-        <div id="imagedownload" />
-        <Timeline />
-        <div>
-          {isAnimationWidgetActive ? <AnimationWidget key={locationKey || '2'} /> : null}
-        </div>
-        <MeasureButton />
-        <Embed />
-        <Modal key={modalId} />
-        <ErrorBoundary>
-          <Debug parameters={parameters} />
-        </ErrorBoundary>
+  // componentDidUpdate: open notification modal when numberOutagesUnseen changes
+  useEffect(() => {
+    if (numberOutagesUnseen !== prevNumberOutagesUnseen) {
+      if (numberOutagesUnseen > 0 && !kioskModeEnabled &&
+        !e2eModeEnabled && !hideNotificationsPopup) {
+        notificationClick(notifications, numberOutagesUnseen);
+      }
+    }
+  }, [numberOutagesUnseen]);
+
+  const appClass = `wv-content ${isEmbedModeActive ? 'embed-mode' : ''}`;
+  return (
+    <div className={appClass} id="wv-content" data-role="content">
+      {!isMobile && !isEmbedModeActive && <LocationSearch />}
+      <LoadingSpinner />
+      <Toolbar />
+      <MapInteractions />
+      <AlertDropdown isTourActive={isTourActive} />
+      <div>
+        {isTourActive && (numberOutagesUnseen === 0 ||
+          hideNotificationsPopup) && (!isMobile || isEmbedModeActive)
+          ? <Tour />
+          : null}
       </div>
-    );
-  }
+      <Sidebar />
+      <div id="layer-modal" className="layer-modal" />
+      <div id="layer-settings-modal" />
+      <div id="eventsHolder" />
+      <div id="imagedownload" />
+      <Timeline />
+      <div>
+        {isAnimationWidgetActive ? <AnimationWidget key={locationKey || '2'} /> : null}
+      </div>
+      <MeasureButton />
+      <Embed />
+      <Modal key={modalId} />
+      <ErrorBoundary>
+        <Debug parameters={parameters} />
+      </ErrorBoundary>
+    </div>
+  );
 }
 
 function mapStateToProps(state) {

web/scss/features/toolbar.scss

@@ -9,11 +9,11 @@
 }
 
 .wv-toolbar-button,
-[data-whatintent="mouse"] .wv-toolbar-button:focus {
+.wv-toolbar-button:focus:not(:focus-visible) {
   @include variables.wv-map-button;
 }
 
-[data-whatintent="keyboard"] .wv-toolbar-button:focus {
+.wv-toolbar-button:focus-visible {
   background-color: #eee;
   color: #1a1a1a;
 }
@@ -165,7 +165,7 @@
 
 @media (min-width: variables.$tablet-min-width) {
   .wv-toolbar-button,
-  [data-whatintent="mouse"] .wv-toolbar-button:focus {
+  .wv-toolbar-button:focus:not(:focus-visible) {
     font-size: 20px;
     height: 38px;
     margin: 0 0 0 5px;

web/scss/reset.scss

@@ -188,8 +188,8 @@ sup {
   top: -0.5em;
 }
 
-[data-whatintent="mouse"] *:focus,
-[data-whatintent="mouse"] button:focus {
+*:focus:not(:focus-visible),
+button:focus:not(:focus-visible) {
   outline: 0;
 }