fix: unused binding calls.

Author: Joel Worrall

.eslintrc.js

@@ -1,23 +1,30 @@
 module.exports = {
-  env: {
-    browser: true,
-    es6: true,
+  "env": {
+      "browser": true,
+      "es6": true
   },
-  extends: ['prettier', 'prettier/react'],
-  globals: {
-    Atomics: 'readonly',
-    SharedArrayBuffer: 'readonly',
+  "extends": [
+      'plugin:@newrelic/eslint-plugin-newrelic/react',
+      'plugin:@newrelic/eslint-plugin-newrelic/jest',
+      'plugin:@newrelic/eslint-plugin-newrelic/prettier'
+  ],
+  "globals": {
+      "Atomics": "readonly",
+      "SharedArrayBuffer": "readonly"
   },
-  parser: 'babel-eslint',
-  parserOptions: {
-    ecmaFeatures: {
-      jsx: true,
-    },
-    ecmaVersion: 2018,
-    sourceType: 'module',
+  "parser": "babel-eslint",
+  "parserOptions": {
+      "ecmaFeatures": {
+          "jsx": true
+      },
+      "ecmaVersion": 2018,
+      "sourceType": "module"
   },
-  plugins: ['react', 'prettier'],
-  rules: {
-    'prettier/prettier': 'error',
-  },
-};
+  "plugins": [
+      "react",
+      "prettier"
+  ],
+  "rules": {
+      "prettier/prettier": "error"
+  }
+};

components/account-picker.js

@@ -7,23 +7,24 @@ import {
   DropdownItem,
   UserStorageMutation,
   UserStorageQuery,
-  TextField,
+  TextField
 } from 'nr1';
 
 const USER_ACCOUNT_COLLECTION = 'user_account_collection_v1';
 const USER_SELECTED_ACCOUNT_ID = 'user_account_id';
 
-export default class AccountPicker extends React.Component {
+export default class AccountPicker extends React.PureComponent {
   static propTypes = {
-    hostname: PropTypes.string,
+    accountChangedCallback: PropTypes.func,
+    disabled: PropTypes.bool
   };
 
   constructor(props) {
     super(props);
     this.state = {
       selectedAccount: { name: '' },
       accounts: [],
-      filter: '',
+      filter: ''
     };
     this.onAccountChange = this.onAccountChange.bind(this);
   }
@@ -55,7 +56,7 @@ export default class AccountPicker extends React.Component {
   async getLastChoseAccountId() {
     const userStorageQuery = {
       collection: USER_ACCOUNT_COLLECTION,
-      documentId: USER_SELECTED_ACCOUNT_ID,
+      documentId: USER_SELECTED_ACCOUNT_ID
     };
     // TODO: Add error handling
     const queryResults = await UserStorageQuery.query(userStorageQuery);
@@ -67,7 +68,7 @@ export default class AccountPicker extends React.Component {
       actionType: UserStorageMutation.ACTION_TYPE.WRITE_DOCUMENT,
       collection: USER_ACCOUNT_COLLECTION,
       document: { account: accountId },
-      documentId: USER_SELECTED_ACCOUNT_ID,
+      documentId: USER_SELECTED_ACCOUNT_ID
     };
     UserStorageMutation.mutate(userMutation);
   }

components/configure/custom-hostnames.js

@@ -1,34 +1,40 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-const uuid = require('uuid/v4');
-
 import {
   NerdGraphQuery,
   Button,
   HeadingText,
   Icon,
   TextField,
   Stack,
-  StackItem,
+  StackItem
 } from 'nr1';
 
 import { saveHostNamesToNerdStorage } from '../../utilities/nerdlet-storage';
 import TagsModal from './modal-tag';
 
-export default class CustomHostNames extends React.Component {
+const uuid = require('uuid/v4');
+
+export default class CustomHostNames extends React.PureComponent {
+  static propTypes = {
+    entityGuid: PropTypes.string,
+    accountId: PropTypes.number,
+    addHostNameCallback: PropTypes.func,
+    deleteHostNameCallback: PropTypes.func,
+    hostNames: PropTypes.array
+  };
+
   constructor(props) {
     super(props);
     this.state = {
-      hidden: true,
       tagHidden: true,
-      mounted: false,
       selectedProvider: 'statusPageIo',
       tags: [],
       keyObject: {
         key: props.entityGuid ? props.entityGuid : props.accountId,
-        type: props.entityGuid ? 'entity' : 'account',
+        type: props.entityGuid ? 'entity' : 'account'
       },
-      selectedEditHost: undefined,
+      selectedEditHost: undefined
     };
     this.addHostName = this.addHostName.bind(this);
     this.onTextInputChange = this.onTextInputChange.bind(this);
@@ -54,7 +60,7 @@ export default class CustomHostNames extends React.Component {
       id: uuid(),
       hostName: addHostNameText,
       provider: selectedProvider,
-      tags: tags,
+      tags: tags
     };
     this.setState({ tags: [] });
     addHostNameCallback(hostNameObject);
@@ -64,7 +70,7 @@ export default class CustomHostNames extends React.Component {
   generateListHostNames() {
     const { deleteHostNameCallback, hostNames } = this.props;
 
-    if (!hostNames) return <div></div>;
+    if (!hostNames) return <div />;
     return hostNames.map(hostNameObject => (
       <li key={hostNameObject.id} className="modal-list-item">
         <div className="modal-list-item-name"> {hostNameObject.hostName} </div>
@@ -73,15 +79,19 @@ export default class CustomHostNames extends React.Component {
             type={Button.TYPE.DESTRUCTIVE}
             sizeType={Button.SIZE_TYPE.SMALL}
             iconType={Button.ICON_TYPE.INTERFACE__SIGN__TIMES}
-            onClick={deleteHostNameCallback.bind(this, hostNameObject.hostName)}
+            onClick={() => {
+              deleteHostNameCallback(hostNameObject.hostName);
+            }}
           >
             Delete
           </Button>
           <Button
             type={Button.TYPE.NORMAL}
             sizeType={Button.SIZE_TYPE.SMALL}
             iconType={Button.ICON_TYPE.INTERFACE__OPERATIONS__EDIT}
-            onClick={this.editTags.bind(this, hostNameObject)}
+            onClick={() => {
+              this.editTags(hostNameObject);
+            }}
           >
             Edit
           </Button>
@@ -100,24 +110,23 @@ export default class CustomHostNames extends React.Component {
     try {
       // const accountsResults = await AccountsQuery.query();
       const accountsResults = await NerdGraphQuery.query({
-        query: '{ actor { accounts { id name } }}',
+        query: '{ actor { accounts { id name } }}'
       });
       if (
         accountsResults.data &&
         accountsResults.data.actor &&
         accountsResults.data.actor.accounts
       ) {
-        accountsResults.data.actor.accounts.forEach(
-          async account =>
-            await saveHostNamesToNerdStorage(
-              { key: account.id, type: 'account' },
-              hostNames
-            )
+        accountsResults.data.actor.accounts.forEach(async account =>
+          saveHostNamesToNerdStorage(
+            { key: account.id, type: 'account' },
+            hostNames
+          )
         );
         this._displaySaveMessage();
       }
     } catch (err) {
-      console.log(err);
+      console.log(err); // eslint-disable-line no-console
     }
   }
 
@@ -140,7 +149,7 @@ export default class CustomHostNames extends React.Component {
       tagHidden,
       selectedEditHost,
       showSaved,
-      selectedProvider,
+      selectedProvider
     } = this.state;
     const hostnames = this.generateListHostNames();
     return (

components/configure/modal-tag.js

@@ -1,13 +1,19 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Button, HeadingText, Modal, TextField, Stack, StackItem } from 'nr1';
 
-export default class TagsModal extends React.Component {
+export default class TagsModal extends React.PureComponent {
+  static propTypes = {
+    hostName: PropTypes.string,
+    hidden: PropTypes.bool,
+    onClose: PropTypes.func
+  };
+
   constructor(props) {
     super(props);
     this.state = {
       addTagName: '',
-      tagHidden: props.tagHidden,
-      tags: props.hostName ? props.hostName.tags : [],
+      tags: props.hostName ? props.hostName.tags : []
     };
     this.addTag = this.addTag.bind(this);
     this.deleteTag = this.deleteTag.bind(this);
@@ -28,20 +34,25 @@ export default class TagsModal extends React.Component {
       this.props.hostName.tags.findIndex(tag => tag === tagName),
       1
     );
-    tags.splice(tags.findIndex(tag => tag === tagName), 1);
+    tags.splice(
+      tags.findIndex(tag => tag === tagName),
+      1
+    );
     this.setState({ tags: tags });
   }
 
   generateListHostNames() {
-    if (!this.props.hostName || !this.props.hostName.tags) return <div></div>;
+    if (!this.props.hostName || !this.props.hostName.tags) return <div />;
     return this.props.hostName.tags.map(tag => (
       <li key={tag} className="modal-list-item">
         <div className="modal-list-item-name"> {tag} </div>
         <Button
           className="btn-white modal-list-item-delete"
           iconType={Button.ICON_TYPE.INTERFACE__SIGN__TIMES}
-          onClick={this.deleteTag.bind(this, tag)}
-        ></Button>
+          onClick={() => {
+            this.deleteTag(tag);
+          }}
+        />
       </li>
     ));
   }
@@ -77,7 +88,9 @@ export default class TagsModal extends React.Component {
             <StackItem>
               <Button
                 type={Button.TYPE.NORMAL}
-                onClick={onClose.bind(this, tags)}
+                onClick={() => {
+                  onClose(tags);
+                }}
               >
                 Close
               </Button>

components/current-incidents.js

@@ -5,20 +5,21 @@ import dayjs from 'dayjs';
 
 import { navigation, Icon, Button } from 'nr1';
 import FormatService from '../utilities/format-service';
-import { hostname } from 'os';
+// import { hostname } from 'os';
 
-export default class CurrentIncidents extends React.Component {
+export default class CurrentIncidents extends React.PureComponent {
   static propTypes = {
     hostname: PropTypes.string.isRequired,
     provider: PropTypes.string.isRequired,
     refreshRate: PropTypes.number,
+    handleTileClick: PropTypes.func
   };
 
   constructor(props) {
     super(props);
     this.state = {
       currentIncidents: undefined,
-      isPolling: false,
+      isPolling: false
     };
     this.FormatService = new FormatService(this.props.provider);
     this.statusPageNetwork = new Network(
@@ -29,24 +30,27 @@ export default class CurrentIncidents extends React.Component {
     this.seeMore = this.seeMore.bind(this);
   }
 
+  componentDidMount() {
+    this.statusPageNetwork.pollCurrentIncidents(
+      this.setIncidentData.bind(this),
+      () => {
+        const { isPolling } = this.state;
+        this.setState({ isPolling: !isPolling });
+      }
+    );
+  }
+
   seeMore() {
     const nerdletWithState = {
       id: 'incident-details',
       urlState: {
         hostname: this.props.hostname,
-        provider: this.props.provider,
-      },
+        provider: this.props.provider
+      }
     };
     navigation.openStackedNerdlet(nerdletWithState);
   }
 
-  componentDidMount() {
-    this.statusPageNetwork.pollCurrentIncidents(
-      this.setIncidentData.bind(this),
-      () => this.setState({ isPolling: !this.state.isPolling })
-    );
-  }
-
   setTimelineSymbol(incidentImpact) {
     switch (incidentImpact) {
       case 'none':
@@ -93,7 +97,7 @@ export default class CurrentIncidents extends React.Component {
   setIncidentData(data) {
     this.setState({
       currentIncidents: this.FormatService.uniformIncidentData(data),
-      isPolling: false,
+      isPolling: false
     });
   }
 
@@ -138,7 +142,7 @@ export default class CurrentIncidents extends React.Component {
               {dayjs(incident.created_at).format('h:mm a')}
             </span>
           </div>
-          <div className="timeline-item-dot"></div>
+          <div className="timeline-item-dot" />
           <div className="timeline-item-body">
             <div className="timeline-item-body-header">
               <div