Fixes remaining lint errors. (#1083)

massgov · Jun 10, 2020 · b3bb43f · b3bb43f
1 parent 5323874
commit b3bb43f
Show file tree

Hide file tree

Showing 18 changed files with 138 additions and 123 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}