From b3bb43ff82208a3dc159940af0477dc7e8a468f0 Mon Sep 17 00:00:00 2001
From: Steven Murray <smurrayatwork@gmail.com>
Date: Wed, 10 Jun 2020 12:59:27 -0400
Subject: [PATCH] Fixes remaining lint errors. (#1083)

---
 react/.eslintrc.json                          |   4 +-
 .../atoms/buttons/ButtonCopy/index.js         |   1 +
 .../components/atoms/links/FootNote/index.js  |   1 +
 .../atoms/links/FootNoteLink/index.js         |   1 +
 .../components/forms/CompoundSlider/index.js  |   2 +-
 .../components/forms/FeedbackForm/index.js    |  36 ++--
 .../forms/MultiSelectDropDown/index.js        |   3 +-
 .../molecules/AccordionItem/index.js          |   1 +
 .../molecules/LinkDropdown/index.js           |   7 +-
 .../molecules/ListingTable/index.js           |   6 +-
 .../src/components/molecules/MainNav/index.js |   7 +-
 react/src/components/molecules/Tabs/index.js  |   1 +
 .../organisms/EmergencyAlerts/index.js        | 178 +++++++++---------
 .../src/components/organisms/Footer/index.js  |   2 +-
 .../src/components/organisms/Header/index.js  |   2 +
 .../components/organisms/TabContainer/tab.js  |   2 +-
 .../organisms/TeaserListing/index.js          |   1 +
 .../components/organisms/UtilityNav/index.js  |   6 +-
 18 files changed, 138 insertions(+), 123 deletions(-)

diff --git a/react/.eslintrc.json b/react/.eslintrc.json
index 2ea7a3cb6e..24534b4eed 100644
--- a/react/.eslintrc.json
+++ b/react/.eslintrc.json
@@ -33,7 +33,9 @@
         "no-use-before-define": ["off"],
         "jsx-a11y/anchor-is-valid": ["warn"],
         "react/jsx-props-no-spreading": ["off"],
-        "react/destructuring-assignment": ["off"]
+        "react/destructuring-assignment": ["off"],
+        "react/static-property-placement": ["off"],
+        "react/state-in-constructor": ["off"]
     },
     "settings": {
         "import/resolver": {
diff --git a/react/src/components/atoms/buttons/ButtonCopy/index.js b/react/src/components/atoms/buttons/ButtonCopy/index.js
index d19e74eead..10ea1f5e2d 100644
--- a/react/src/components/atoms/buttons/ButtonCopy/index.js
+++ b/react/src/components/atoms/buttons/ButtonCopy/index.js
@@ -23,6 +23,7 @@ const ButtonCopy = ({ content }) => {
   if ((navigator && navigator.clipboard) || (window.location.search.indexOf('backstop') > -1)) {
     return(
       <button
+        type="button"
         className="ma__button-copy"
         onClick={copyAction}
         title={copyButtonTitle}
diff --git a/react/src/components/atoms/links/FootNote/index.js b/react/src/components/atoms/links/FootNote/index.js
index d6ba45e21e..0a995c3018 100644
--- a/react/src/components/atoms/links/FootNote/index.js
+++ b/react/src/components/atoms/links/FootNote/index.js
@@ -17,6 +17,7 @@ class FootNote extends React.Component {
     return(
       <div className="ma__footnote-item">
         <button
+          type="button"
           id={`footnotemsg${index}`}
           onClick={() => this.handleScroll()}
         >
diff --git a/react/src/components/atoms/links/FootNoteLink/index.js b/react/src/components/atoms/links/FootNoteLink/index.js
index 124bad5410..3348fdb52c 100644
--- a/react/src/components/atoms/links/FootNoteLink/index.js
+++ b/react/src/components/atoms/links/FootNoteLink/index.js
@@ -16,6 +16,7 @@ class FootNoteLink extends React.Component {
     const { index } = this.props;
     return(
       <button
+        type="button"
         className={`ma__footnote-link footnoteref${index}`}
         aria-describedby={`footnotemsg${index}`}
         aria-label={`see footnote ${index}`}
diff --git a/react/src/components/forms/CompoundSlider/index.js b/react/src/components/forms/CompoundSlider/index.js
index 9125501e68..aeb3059781 100644
--- a/react/src/components/forms/CompoundSlider/index.js
+++ b/react/src/components/forms/CompoundSlider/index.js
@@ -39,7 +39,7 @@ const Handle = (props) => {
     };
   }
   return(
-    <button className="ma__slider-handle" {...divProps}>
+    <button type="button" className="ma__slider-handle" {...divProps}>
       { displayValueFormat && (
         <div className="ma__slider-handle-value">
           { displayValueFormat === 'percentage' ? numbro(value).format({ output: 'percent', mantissa: 0 }) : roundedValue }
diff --git a/react/src/components/forms/FeedbackForm/index.js b/react/src/components/forms/FeedbackForm/index.js
index d61239b1ae..47acdf6764 100644
--- a/react/src/components/forms/FeedbackForm/index.js
+++ b/react/src/components/forms/FeedbackForm/index.js
@@ -1,3 +1,5 @@
+/* eslint jsx-a11y/label-has-associated-control: 0 */
+
 /**
  * FeedbackForm module.
  * @module @massds/mayflower-react/FeedbackForm
@@ -69,17 +71,31 @@ export default class FeedbackForm extends React.Component {
     formSubmitted: false
   };
 
+  yesRadio = React.createRef();
+
+  yesTextArea = React.createRef();
+
+  noRadio = React.createRef();
+
+  noTextArea = React.createRef();
+
+  submitButton = React.createRef();
+
   componentDidMount() {
     if (window) {
       // We don't have the FormStack class available, but we can fake like we do:
       window[`form${this.props.formId}`] = {
         onSubmitError: (err) => {
           if (err) {
-            const hasError = [...this.state.hasError];
-            hasError.push(this.props.radioId);
-            hasError.push(this.props.noFeedbackId);
-            const errorMessage = <Paragraph className="error">{err.error}</Paragraph>;
-            this.setState({ hasError, errorMessage });
+            this.setState((state, props) => {
+              const hasError = [...state.hasError];
+              hasError.push(props.radioId);
+              hasError.push(props.noFeedbackId);
+              const errorMessage = <Paragraph className="error">{err.error}</Paragraph>;
+              return{
+                hasError, errorMessage
+              };
+            });
           }
         },
         onPostSubmit: () => {
@@ -89,16 +105,6 @@ export default class FeedbackForm extends React.Component {
     }
   }
 
-  yesRadio = React.createRef();
-
-  yesTextArea = React.createRef();
-
-  noRadio = React.createRef();
-
-  noTextArea = React.createRef();
-
-  submitButton = React.createRef();
-
   defaultDisclaimer = () => (
     <div id="feedback-note" className="ma__disclaimer">
       We use your feedback to help us improve this site but we are not able to respond directly.
diff --git a/react/src/components/forms/MultiSelectDropDown/index.js b/react/src/components/forms/MultiSelectDropDown/index.js
index 6f5ac942b4..5d22800750 100644
--- a/react/src/components/forms/MultiSelectDropDown/index.js
+++ b/react/src/components/forms/MultiSelectDropDown/index.js
@@ -27,6 +27,8 @@ export const getObjByValue = (arr, value, key) => {
 };
 
 class MultiSelectDropDown extends React.Component {
+  _timeoutID;
+
   constructor(props) {
     super(props);
     this.state = {
@@ -61,7 +63,6 @@ class MultiSelectDropDown extends React.Component {
     }, 0);
   }
 
-  _timeoutID;
 
   handleTagClick = (target, e) => {
     e.stopPropagation();
diff --git a/react/src/components/molecules/AccordionItem/index.js b/react/src/components/molecules/AccordionItem/index.js
index 76330c7de2..1eb71fdfa4 100644
--- a/react/src/components/molecules/AccordionItem/index.js
+++ b/react/src/components/molecules/AccordionItem/index.js
@@ -54,6 +54,7 @@ class AccordionItem extends React.Component {
       <div className={accordionClasses}>
         <header className="ma__accordion-header">
           <button
+            type="button"
             className={buttonClasses}
             aria-label={info}
             onClick={this.handleClick}
diff --git a/react/src/components/molecules/LinkDropdown/index.js b/react/src/components/molecules/LinkDropdown/index.js
index 641bb366aa..af20994db2 100644
--- a/react/src/components/molecules/LinkDropdown/index.js
+++ b/react/src/components/molecules/LinkDropdown/index.js
@@ -41,9 +41,6 @@ class LinkDropdown extends React.Component {
     this.dropDownButtonRef = node;
   }
 
-  closeDropdown() {
-    this.setState({ buttonExpand: false });
-  }
 
   handleSelect = (event) => {
     const { target } = event;
@@ -78,6 +75,10 @@ class LinkDropdown extends React.Component {
     }
   }
 
+  closeDropdown() {
+    this.setState({ buttonExpand: false });
+  }
+
   render() {
     const { dropdownItems, dropdownButton } = this.props;
     const dropdownButtonProps = {
diff --git a/react/src/components/molecules/ListingTable/index.js b/react/src/components/molecules/ListingTable/index.js
index 6aa89b2113..1b3f45e0b5 100644
--- a/react/src/components/molecules/ListingTable/index.js
+++ b/react/src/components/molecules/ListingTable/index.js
@@ -24,9 +24,9 @@ class ListingTableItem extends React.Component {
   }
 
   handleClick = () => {
-    this.setState({
-      open: !this.state.open
-    });
+    this.setState((state) => ({
+      open: !state.open
+    }));
   };
 
   render() {
diff --git a/react/src/components/molecules/MainNav/index.js b/react/src/components/molecules/MainNav/index.js
index 0198727190..df8c9bba74 100644
--- a/react/src/components/molecules/MainNav/index.js
+++ b/react/src/components/molecules/MainNav/index.js
@@ -135,7 +135,7 @@ class MainNav extends React.Component {
                 'aria-label': (isExpanded) ? `Hide submenu for ${item.text}` : `Show submenu for ${item.text}`,
                 key: buttonId
               };
-              itemBody.push(<button {...buttonProps}>{item.text}</button>);
+              itemBody.push(<button type="button" {...buttonProps}>{item.text}</button>);
               const navItemClasses = classNames({
                 'ma__main-nav__subitems': true,
                 'is-open-react': isExpanded,
@@ -147,6 +147,7 @@ class MainNav extends React.Component {
                   <ul role="menu" aria-label={`Submenu of ${buttonId}`} className="ma__main-nav__container">
                     <li role="menuitem" className="ma__main-nav__subitem">
                       <button
+                        type="button"
                         onClick={(e) => this.onNavigate({ e, href: item.href })}
                         className="ma__main-nav__link"
                         tabIndex={!isExpanded ? -1 : null}
@@ -158,6 +159,7 @@ class MainNav extends React.Component {
                       /* eslint-disable-next-line react/no-array-index-key */
                       <li className="ma__main-nav__subitem" key={`liProps.${index}.${subItemIndex}`}>
                         <button
+                          type="button"
                           onClick={(e) => this.onNavigate({ e, href: subItem.href })}
                           className="ma__main-nav__link"
                         >
@@ -169,6 +171,7 @@ class MainNav extends React.Component {
                       item.href && (
                         <li role="menuitem" className="ma__main-nav__subitem ma__main-nav__subitem--main">
                           <button
+                            type="button"
                             onClick={(e) => this.onNavigate({ e, href: item.href })}
                             className="ma__main-nav__link"
                           >
@@ -189,7 +192,7 @@ class MainNav extends React.Component {
                 role: 'menuitem',
                 'aria-label': (isExpanded) ? `Hide submenu for ${item.text}` : `Show submenu for ${item.text}`
               };
-              itemBody.push(<button {...buttonProps}>{item.text}</button>);
+              itemBody.push(<button type="button" {...buttonProps}>{item.text}</button>);
             }
             return(
               /* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */
diff --git a/react/src/components/molecules/Tabs/index.js b/react/src/components/molecules/Tabs/index.js
index c7ea06aeb5..3a33fcba55 100644
--- a/react/src/components/molecules/Tabs/index.js
+++ b/react/src/components/molecules/Tabs/index.js
@@ -32,6 +32,7 @@ const Tabs = ({ handleClick, tabs, selectedTab }) => {
               if (isClickFunction) {
                 return(
                   <button
+                    type="button"
                     key={`tab_${value}`}
                     className={`ma__tabs-item ${isSelected}`}
                     name={value}
diff --git a/react/src/components/organisms/EmergencyAlerts/index.js b/react/src/components/organisms/EmergencyAlerts/index.js
index 0bfcc1bda0..1944f4e262 100644
--- a/react/src/components/organisms/EmergencyAlerts/index.js
+++ b/react/src/components/organisms/EmergencyAlerts/index.js
@@ -14,109 +14,103 @@ import ButtonAlert from 'MayflowerReactButtons/ButtonAlert';
 import EmergencyAlert from 'MayflowerReactMolecules/EmergencyAlert';
 import EmergencyHeader from 'MayflowerReactMolecules/EmergencyHeader';
 
-class EmergencyAlerts extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      open: false,
-      close: false
-    };
-  }
-
-  handleClick = (e) => {
+const EmergencyAlerts = ({
+  id, emergencyHeader, buttonAlert, alerts, theme, buttonClose, onButtonAlertClick, onButtonCloseClick
+}) => {
+  const [state, setState] = React.useState({
+    open: false,
+    close: false
+  });
+  const handleClick = (e) => {
     const { currentTarget } = e;
-    this.setState({
-      open: !this.state.open
+    setState({
+      open: !state.open
     });
-    if (is.fn(this.props.onButtonAlertClick)) {
-      this.props.onButtonAlertClick({ open: !this.state.open, currentTarget });
+    if (is.fn(onButtonAlertClick)) {
+      onButtonAlertClick({ open: state.open, currentTarget });
     }
-  }
+  };
 
-  handleClose = (e) => {
+  const handleClose = (e) => {
     const { currentTarget } = e;
-    this.setState({
-      close: !this.state.close
+    setState({
+      close: !state.close
     });
-    if (is.fn(this.props.onButtonCloseClick)) {
-      this.props.onButtonCloseClick({ close: !this.state.close, currentTarget });
+    if (is.fn(onButtonCloseClick)) {
+      onButtonCloseClick({ close: state.close, currentTarget });
     }
-  }
+  };
 
-  render() {
-    const {
-      id, emergencyHeader, buttonAlert, alerts, theme, buttonClose
-    } = this.props;
-    const sectionClasses = classNames({
-      'ma__emergency-alerts': true,
-      [`ma__emergency-alerts--${theme}`]: theme
-    });
-    const alertsWrapperClasses = classNames({
-      'ma__emergency-alerts__content': true,
-      'js-accordion-content': true,
-      [`ma__emergency-alerts__content--${theme}`]: theme
-    });
-    const headerClasses = classNames({
-      'ma__emergency-alerts__header': true,
-      [`ma__emergency-alerts__header--${theme}`]: theme
-    });
-    const interfaceClasses = classNames({
-      'ma__emergency-alerts__interface': true,
-      'js-accordion-link': true,
-      [`ma__emergency-alerts__interface--${theme}`]: theme,
-      open: this.state.open,
-      closed: !this.state.open
-    });
-    const hideButtonClasses = classNames({
-      'ma__emergency-alerts__hide': true,
-      'js-emergency-alerts-link': true,
-      [`ma__emergency-alerts__hide--${theme}`]: theme
-    });
-    return(
-      <Collapse in={!this.state.close} dimension="height">
-        <section className={sectionClasses} data-id={id}>
-          <div className={headerClasses}>
-            <div className="ma__emergency-alerts__container">
-              {emergencyHeader && <EmergencyHeader {...emergencyHeader} theme={theme} />}
-              { alerts ? (
-                <div className="ma__emergency-alerts__header-interface js-accordion-link">
-                  {buttonAlert && <ButtonAlert {...buttonAlert} onClick={this.handleClick} isOpen={this.state.open} />}
-                </div>
-              ) : (buttonClose && (
-                <button
-                  className={hideButtonClasses}
-                  title="hide alert"
-                  aria-label="hide alert"
-                  onClick={this.handleClose}
-                >
-                  +
-                </button>
-              )
-              )}
-            </div>
+  const sectionClasses = classNames({
+    'ma__emergency-alerts': true,
+    [`ma__emergency-alerts--${theme}`]: theme
+  });
+  const alertsWrapperClasses = classNames({
+    'ma__emergency-alerts__content': true,
+    'js-accordion-content': true,
+    [`ma__emergency-alerts__content--${theme}`]: theme
+  });
+  const headerClasses = classNames({
+    'ma__emergency-alerts__header': true,
+    [`ma__emergency-alerts__header--${theme}`]: theme
+  });
+  const interfaceClasses = classNames({
+    'ma__emergency-alerts__interface': true,
+    'js-accordion-link': true,
+    [`ma__emergency-alerts__interface--${theme}`]: theme,
+    open: state.open,
+    closed: !state.open
+  });
+  const hideButtonClasses = classNames({
+    'ma__emergency-alerts__hide': true,
+    'js-emergency-alerts-link': true,
+    [`ma__emergency-alerts__hide--${theme}`]: theme
+  });
+  return(
+    <Collapse in={!state.close} dimension="height">
+      <section className={sectionClasses} data-id={id}>
+        <div className={headerClasses}>
+          <div className="ma__emergency-alerts__container">
+            {emergencyHeader && <EmergencyHeader {...emergencyHeader} theme={theme} />}
+            { alerts ? (
+              <div className="ma__emergency-alerts__header-interface js-accordion-link">
+                {buttonAlert && <ButtonAlert {...buttonAlert} onClick={handleClick} isOpen={state.open} />}
+              </div>
+            ) : (buttonClose && (
+              <button
+                type="button"
+                className={hideButtonClasses}
+                title="hide alert"
+                aria-label="hide alert"
+                onClick={handleClose}
+              >
+                +
+              </button>
+            )
+            )}
           </div>
-          { alerts && (
-            <>
-              <Collapse in={this.state.open} dimension="height">
-                <div className={alertsWrapperClasses}>
-                  <div className="ma__emergency-alerts__container">
-                    {
-                      /* eslint-disable-next-line react/no-array-index-key */
-                      alerts.map((alert, i) => <EmergencyAlert {...alert} theme={theme} key={`alert-nested--${i}`} />)
-                    }
-                  </div>
+        </div>
+        { alerts && (
+          <>
+            <Collapse in={state.open} dimension="height">
+              <div className={alertsWrapperClasses}>
+                <div className="ma__emergency-alerts__container">
+                  {
+                    /* eslint-disable-next-line react/no-array-index-key */
+                    alerts.map((alert, i) => <EmergencyAlert {...alert} theme={theme} key={`alert-nested--${i}`} />)
+                  }
                 </div>
-              </Collapse>
-              <div className={interfaceClasses}>
-                {buttonAlert && <ButtonAlert {...buttonAlert} onClick={this.handleClick} isOpen={this.state.open} />}
               </div>
-            </>
-          )}
-        </section>
-      </Collapse>
-    );
-  }
-}
+            </Collapse>
+            <div className={interfaceClasses}>
+              {buttonAlert && <ButtonAlert {...buttonAlert} onClick={handleClick} isOpen={state.open} />}
+            </div>
+          </>
+        )}
+      </section>
+    </Collapse>
+  );
+};
 
 EmergencyAlerts.propTypes = {
   /** The data-id of the organism */
diff --git a/react/src/components/organisms/Footer/index.js b/react/src/components/organisms/Footer/index.js
index 560e0fbf22..823748aabf 100644
--- a/react/src/components/organisms/Footer/index.js
+++ b/react/src/components/organisms/Footer/index.js
@@ -46,7 +46,7 @@ const Footer = ({
     </div>
     { backToTopButton
     && (
-    <button className="ma__footer__back2top js-back2top is-hidden">
+    <button type="button" className="ma__footer__back2top js-back2top is-hidden">
       <Icon name="arrow" />
       <span aria-hidden="true">Top</span>
       <span className="visually-hidden">Go to the top of the page</span>
diff --git a/react/src/components/organisms/Header/index.js b/react/src/components/organisms/Header/index.js
index 01e226cb36..77bff82494 100644
--- a/react/src/components/organisms/Header/index.js
+++ b/react/src/components/organisms/Header/index.js
@@ -213,6 +213,7 @@ class Header extends React.Component {
               {
                 (navSelected !== -1) && (
                   <button
+                    type="button"
                     onClick={() => {
                       this.updateSubNav({
                         navSelected: -1
@@ -227,6 +228,7 @@ class Header extends React.Component {
                 )
               }
               <button
+                type="button"
                 className="ma__header__menu-button js-header-menu-button"
                 onClick={() => this.menuButtonClicked(false)}
               >
diff --git a/react/src/components/organisms/TabContainer/tab.js b/react/src/components/organisms/TabContainer/tab.js
index 0cffc23483..e7d83e25ab 100644
--- a/react/src/components/organisms/TabContainer/tab.js
+++ b/react/src/components/organisms/TabContainer/tab.js
@@ -87,7 +87,7 @@ class Tab extends React.Component {
     return(
       <>
         <li role="presentation" className={tabClasses}>
-          <button {...buttonProps}>{this.props.title}</button>
+          <button type="button" {...buttonProps}>{this.props.title}</button>
         </li>
         {global.window && (
           <TabBody active={activeTab === tabIdent} tabContainerBodyId={this.context.tabContainerBodyId}>
diff --git a/react/src/components/organisms/TeaserListing/index.js b/react/src/components/organisms/TeaserListing/index.js
index a8f999c50c..b14a0b035e 100644
--- a/react/src/components/organisms/TeaserListing/index.js
+++ b/react/src/components/organisms/TeaserListing/index.js
@@ -106,6 +106,7 @@ class TeaserListing extends React.Component {
                  </div>
                </Collapse>
                <button
+                 type="button"
                  className="ma__content-link ma__content-link--chevron ma__content-link__acordion-toggle js-accordion-link"
                  aria-label={(this.state.open) ? teaser.lessLabel : teaser.moreLabel}
                  onClick={this.handleClick}
diff --git a/react/src/components/organisms/UtilityNav/index.js b/react/src/components/organisms/UtilityNav/index.js
index 5c50a7b46e..c4a59a099c 100644
--- a/react/src/components/organisms/UtilityNav/index.js
+++ b/react/src/components/organisms/UtilityNav/index.js
@@ -32,10 +32,10 @@ class UtilityNav extends React.Component {
 
   onClick(divId, e) {
     e.preventDefault();
-    this.setState({
-      navSelected: (this.state.navSelected === -1) ? divId : -1,
+    this.setState((state) => ({
+      navSelected: (state.navSelected === -1) ? divId : -1,
       isOpen: true
-    });
+    }));
   }
 
   render() {