style(js): Enable plugin:react/recommended eslint rules (#1922)

.eslintrc.js

@@ -1,9 +1,11 @@
+'use strict'
+
 module.exports = {
   parser: 'babel-eslint',
 
   extends: [
     'standard',
-    // TODO(mc, 2018-02-10): plugin:react/recommended
+    'plugin:react/recommended',
     'plugin:flowtype/recommended'
   ],
 
@@ -13,9 +15,10 @@ module.exports = {
   ],
 
   rules: {
-    'react/jsx-uses-react': 'error',
-    'react/jsx-uses-vars': 'error',
-    'camelcase': [0, {'properties': 'never'}]
+    'camelcase': [0, {'properties': 'never'}],
+    // TODO(mc, 2018-07-24): disabled until fix for crash is released
+    // https://github.com/yannickcr/eslint-plugin-react/pull/1860
+    'react/prop-types': [0]
   },
 
   globals: {},
@@ -24,5 +27,11 @@ module.exports = {
     node: true,
     browser: true,
     jest: true
+  },
+
+  settings: {
+    react: {
+      version: '16.2'
+    }
   }
 }

app/src/components/ConfirmTipProbeModal/Contents.js

@@ -5,7 +5,7 @@ import * as React from 'react'
 import removeTrashSrc from './img/trash@3x.png'
 import styles from './Contents.css'
 
-export default function () {
+export default function Contents () {
   return (
     <div>
       <p className={styles.attention}>

app/src/components/RunLog/CommandList.js

@@ -9,7 +9,8 @@ import styles from './styles.css'
 
 export default class CommandList extends Component {
   componentDidUpdate () {
-    if (this.refs.ensureVisible) this.refs.ensureVisible.scrollIntoView(true)
+    // TODO(mc, 2018-07-24): use new refs
+    if (this.refs.ensureVisible) this.refs.ensureVisible.scrollIntoView(true) // eslint-disable-line react/no-string-refs
   }
 
   render () {

app/src/components/RunPanel/RunControls.js

@@ -16,7 +16,7 @@ type RunProps = {
   onResumeClick: () => mixed,
   onResetClick: () => mixed,
 }
-export default function (props: RunProps) {
+export default function RunControls (props: RunProps) {
   const {
     disabled,
     isReadyToRun,

app/src/pages/Robots/index.js

@@ -53,13 +53,12 @@ function Robots (props: Props) {
     <Switch>
       <Route
         path={`${path}/instruments`}
-        render={(props) => (
-          <InstrumentSettings {...props} robot={robot} />
-        )} />
+        render={props => (<InstrumentSettings {...props} robot={robot} />)}
+      />
+      <Route
+        path={path}
+        render={() => (<RobotSettings robot={robot} />)}
       />
-      <Route path={path} render={(props) => (
-        <RobotSettings robot={robot} />
-      )} />
     </Switch>
   )
 }

package.json

@@ -77,7 +77,7 @@
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-node": "^6.0.0",
     "eslint-plugin-promise": "^3.6.0",
-    "eslint-plugin-react": "^7.6.1",
+    "eslint-plugin-react": "^7.10.0",
     "eslint-plugin-standard": "^3.0.1",
     "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^1.1.5",

protocol-designer/src/components/IngredientPropertiesForm.js

@@ -38,7 +38,7 @@ type FieldProps = {|
 |}
 
 const makeInputField = (args: {setSubstate: SetSubstate, getSubstate: GetSubstate}) =>
-  (props: FieldProps) => { /* otherProps */
+  function InputFieldFactory (props: FieldProps) { /* otherProps */
     const {setSubstate, getSubstate} = args
     const {accessor, numeric, type, placeholder, className} = props
 
@@ -173,6 +173,7 @@ class IngredientPropertiesForm extends React.Component<Props, State> {
     }
   }
 
+  // TODO(mc, 2018-07-24): use a different lifecycle hook
   componentWillReceiveProps (nextProps: Props) {
     const nextEditingId = nextProps.commonSelectedIngred
     const prevEditingId = this.props.commonSelectedIngred

protocol-designer/src/components/labware/ClickableText.js

@@ -13,7 +13,7 @@ type Props = {
 
 const DEFAULT_HEIGHT = 15
 
-export default function (props: Props) {
+export default function ClickableText (props: Props) {
   const height = (props.height == null) ? DEFAULT_HEIGHT : props.height
   return (
     <g onClick={props.onClick}>

protocol-designer/src/components/modals/MoreOptionsModal.js

@@ -20,7 +20,7 @@ type Props = {
   hideModal: boolean
 }
 
-export default function (props: Props) {
+export default function MoreOptionsModal (props: Props) {
   const formConnector = formConnectorFactory(props.handleChange, props.formData)
 
   if (props.hideModal) {

protocol-designer/src/components/modals/NewFileModal/index.js

@@ -65,6 +65,7 @@ export default class NewFileModal extends React.Component<Props, State> {
     this.state = initialState
   }
 
+  // TODO(mc, 2018-07-24): use a different lifecycle hook
   componentWillReceiveProps (nextProps: Props) {
     // reset form state when modal is hidden
     if (!this.props.hideModal && nextProps.hideModal) this.setState(initialState)
@@ -163,12 +164,12 @@ const BetaRestrictions = () => (
     <h3>Beta Pipette Restrictions:</h3>
     <ol>
       <li>
-        You can't change your pipette selection later. If in doubt go for
+        You can&apos;t change your pipette selection later. If in doubt go for
         smaller pipettes. The Protocol Designer automatically breaks up transfer
         volumes that exceed pipette capacity into multiple transfers.
       </li>
       <li>
-        Pipettes can't share tip racks. There needs to be at least 1 tip rack per
+        Pipettes can&apos;t share tip racks. There needs to be at least 1 tip rack per
         pipette on the deck.
       </li>
     </ol>

protocol-designer/src/containers/LabwareNameEditForm.js

@@ -41,6 +41,7 @@ class LabwareNameEditForm extends React.Component<Props, State> {
     this.setState({name: e.target.value})
   }
 
+  // TODO(mc, 2018-07-24): use a different lifecycle hook
   componentWillReceiveProps (nextProps: Props) {
     this.setState({name: nextProps.labwareName})
   }

yarn.lock

@@ -3415,7 +3415,7 @@ doctrine@1.5.0:
     esutils "^2.0.2"
     isarray "^1.0.0"
 
-doctrine@^2.0.0, doctrine@^2.0.2:
+doctrine@^2.0.0, doctrine@^2.0.2, doctrine@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
   dependencies:
@@ -4022,14 +4022,14 @@ eslint-plugin-promise@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-3.6.0.tgz#54b7658c8f454813dc2a870aff8152ec4969ba75"
 
-eslint-plugin-react@^7.6.1:
-  version "7.6.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.6.1.tgz#5d0e908be599f0c02fbf4eef0c7ed6f29dff7633"
+eslint-plugin-react@^7.10.0:
+  version "7.10.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.10.0.tgz#af5c1fef31c4704db02098f9be18202993828b50"
   dependencies:
-    doctrine "^2.0.2"
-    has "^1.0.1"
+    doctrine "^2.1.0"
+    has "^1.0.3"
     jsx-ast-utils "^2.0.1"
-    prop-types "^15.6.0"
+    prop-types "^15.6.2"
 
 eslint-plugin-standard@^3.0.1:
   version "3.0.1"
@@ -5143,6 +5143,12 @@ has@^1.0.1:
   dependencies:
     function-bind "^1.0.2"
 
+has@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
+  dependencies:
+    function-bind "^1.1.1"
+
 hash-base@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-2.0.2.tgz#66ea1d856db4e8a5470cadf6fce23ae5244ef2e1"
@@ -8543,7 +8549,7 @@ prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.6.0:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
-prop-types@^15.6.1:
+prop-types@^15.6.1, prop-types@^15.6.2:
   version "15.6.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
   dependencies: