Update eslint-react-plugin for react 15.x

Wanted to check for errors that may exist due to upgrading React. Fixed errors found: - PropTypes is now a separate module - string refs are now deprecated, see: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-string-refs.md - target="_blank" needs rel="noopener noreferrer" for security, see: https://mathiasbynens.github.io/rel-noopener/
philippotto · Oct 7, 2017 · eb1da18 · eb1da18
1 parent c91c0da
commit eb1da18
Show file tree

Hide file tree

Showing 22 changed files with 159 additions and 83 deletions.
diff --git a/app/scripts/App.js b/app/scripts/App.js
@@ -105,13 +105,28 @@ export default class App extends Component {
               </div>
               <div className="row">
                 <div className="col-md-12 col-xs-12">
-                  <a href="http://facebook.com/SheetMusicTutor" target="_blank" className="btn btn-primary">
+                  <a
+                    href="http://facebook.com/SheetMusicTutor"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="btn btn-primary"
+                  >
                     <i className="fa fa-facebook" />
                   </a>
-                  <a href="http://twitter.com/SheetMusicTutor" target="_blank" className="btn btn-primary">
+                  <a
+                    href="http://twitter.com/SheetMusicTutor"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="btn btn-primary"
+                  >
                     <i className="fa fa-twitter" />
                   </a>
-                  <a href="http://github.com/philippotto/piano-trainer" target="_blank" className="btn btn-primary">
+                  <a
+                    href="http://github.com/philippotto/piano-trainer"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="btn btn-primary"
+                  >
                     <i className="fa fa-github" />
                   </a>
                 </div>

diff --git a/app/scripts/views/animated_number.js b/app/scripts/views/animated_number.js
@@ -1,10 +1,11 @@
 import React, { Component } from "react";
+import PropTypes from "prop-types";
 import { Motion, spring } from "react-motion";
 
 export default class AnimatedNumber extends Component {
   static propTypes = {
-    formatter: React.PropTypes.func,
-    number: React.PropTypes.number
+    formatter: PropTypes.func,
+    number: PropTypes.number
   };
   render() {
     const formatter = this.props.formatter;

diff --git a/app/scripts/views/beat_visualization.js b/app/scripts/views/beat_visualization.js
@@ -1,16 +1,17 @@
 import React, { Component } from "react";
+import PropTypes from "prop-types";
 import classNames from "classnames";
 import _ from "lodash";
 
 import RhythmChecker from "../services/rhythm_checker.js";
 
 export default class BeatVisualization extends Component {
   static propTypes = {
-    settings: React.PropTypes.object.isRequired,
-    barDuration: React.PropTypes.number.isRequired,
-    currentRhythm: React.PropTypes.object.isRequired,
-    beatHistory: React.PropTypes.object.isRequired,
-    result: React.PropTypes.object.isRequired
+    settings: PropTypes.object.isRequired,
+    barDuration: PropTypes.number.isRequired,
+    currentRhythm: PropTypes.object.isRequired,
+    beatHistory: PropTypes.object.isRequired,
+    result: PropTypes.object.isRequired
   };
 
   convertTicksToBeatNames(tickTime, tickLength) {

diff --git a/app/scripts/views/claviature_view.js b/app/scripts/views/claviature_view.js
@@ -1,14 +1,15 @@
 import React, { Component } from "react";
+import PropTypes from "prop-types";
 import KeyConverter from "../services/key_converter.js";
 import classNames from "classnames";
 
 export default class ClaviatureView extends Component {
   static propTypes = {
-    desiredKeys: React.PropTypes.array,
-    keySignature: React.PropTypes.string,
-    successCallback: React.PropTypes.func,
-    failureCallback: React.PropTypes.func,
-    disabled: React.PropTypes.bool
+    desiredKeys: PropTypes.array,
+    keySignature: PropTypes.string,
+    successCallback: PropTypes.func,
+    failureCallback: PropTypes.func,
+    disabled: PropTypes.bool
   };
 
   constructor(props, context) {
@@ -20,7 +21,7 @@ export default class ClaviatureView extends Component {
   }
 
   static contextTypes = {
-    isInActiveView: React.PropTypes.bool
+    isInActiveView: PropTypes.bool
   };
 
   isNoteCorrect(noteName) {

diff --git a/app/scripts/views/collapsable_container.js b/app/scripts/views/collapsable_container.js
@@ -1,14 +1,15 @@
 import React, { Component } from "react";
+import PropTypes from "prop-types";
 import classNames from "classnames";
 import _ from "lodash";
 
 export default class BeatVisualization extends Component {
   static propTypes = {
-    children: React.PropTypes.node,
-    collapsed: React.PropTypes.bool.isRequired,
-    maxHeight: React.PropTypes.number,
-    freeze: React.PropTypes.bool,
-    className: React.PropTypes.string
+    children: PropTypes.node,
+    collapsed: PropTypes.bool.isRequired,
+    maxHeight: PropTypes.number,
+    freeze: PropTypes.bool,
+    className: PropTypes.string
   };
 
   componentWillReceiveProps(nextProps) {

diff --git a/app/scripts/views/game_button.js b/app/scripts/views/game_button.js
@@ -1,16 +1,17 @@
 import React, { Component } from "react";
+import PropTypes from "prop-types";
 import { Button } from "react-bootstrap";
 
 export default class GameButton extends Component {
   static propTypes = {
-    label: React.PropTypes.string.isRequired,
-    onClick: React.PropTypes.func.isRequired,
-    primary: React.PropTypes.bool,
-    shortcutLetter: React.PropTypes.string
+    label: PropTypes.string.isRequired,
+    onClick: PropTypes.func.isRequired,
+    primary: PropTypes.bool,
+    shortcutLetter: PropTypes.string
   };
 
   static contextTypes = {
-    isInActiveView: React.PropTypes.bool
+    isInActiveView: PropTypes.bool
   };
 
   componentDidMount() {
@@ -41,7 +42,7 @@ export default class GameButton extends Component {
     const subtext = this.props.shortcutLetter
       ? <div>
           <span style={{ fontSize: 12 }}>
-            Or press '{this.props.shortcutLetter}'
+            Or press &lsquo;{this.props.shortcutLetter}&rsquo;
           </span>
         </div>
       : null;

diff --git a/app/scripts/views/level_view.js b/app/scripts/views/level_view.js
@@ -1,11 +1,12 @@
 import _ from "lodash";
 import React, { Component } from "react";
+import PropTypes from "prop-types";
 import LevelService from "../services/level_service.js";
 import PieChart from "../views/pie_chart.js";
 
 export default class LevelView extends Component {
   static propTypes = {
-    statisticService: React.PropTypes.object.isRequired
+    statisticService: PropTypes.object.isRequired
   };
 
   render() {

diff --git a/app/scripts/views/metronome_view.js b/app/scripts/views/metronome_view.js
@@ -1,4 +1,5 @@
 import React, { Component } from "react";
+import PropTypes from "prop-types";
 import classNames from "classnames";
 import _ from "lodash";
 
@@ -7,9 +8,9 @@ import CollapsableContainer from "./collapsable_container.js";
 
 export default class MetronomeView extends Component {
   static propTypes = {
-    onMetronomeEnded: React.PropTypes.func,
-    settings: React.PropTypes.object.isRequired,
-    statisticService: React.PropTypes.object.isRequired
+    onMetronomeEnded: PropTypes.func,
+    settings: PropTypes.object.isRequired,
+    statisticService: PropTypes.object.isRequired
   };
 
   constructor(props, context) {

diff --git a/app/scripts/views/newsletter_form.js b/app/scripts/views/newsletter_form.js
@@ -5,7 +5,7 @@ export default class NewsLetterForm extends Component {
     // This avoids that global keyhandlers for keyboard navigation are triggered
     // when email input is used.
     const dontPropagate = evt => evt.stopPropagation();
-    const email = this.refs.email;
+    const email = this.email;
     email.addEventListener("keypress", dontPropagate);
     email.addEventListener("keyup", dontPropagate);
     email.addEventListener("keydown", dontPropagate);
@@ -32,7 +32,9 @@ export default class NewsLetterForm extends Component {
                     name="EMAIL"
                     id="mce-EMAIL"
                     placeholder="[email protected]"
-                    ref="email"
+                    ref={c => {
+                      this.email = c;
+                    }}
                     className="form-control"
                     groupClassName="group-class"
                     labelClassName="label-class"

diff --git a/app/scripts/views/pie_chart.js b/app/scripts/views/pie_chart.js
@@ -1,22 +1,30 @@
 import Chartist from "Chartist";
+import PropTypes from "prop-types";
 import React, { PureComponent } from "react";
 
 export default class LevelView extends PureComponent {
   static propTypes = {
-    pieParts: React.PropTypes.array.isRequired
+    pieParts: PropTypes.array.isRequired
   };
 
   constructor(props, context) {
     super(props, context);
   }
 
   render() {
-    return <div ref="chart" className="semi-transparent ct-chart ct-major-eleventh" />;
+    return (
+      <div
+        ref={c => {
+          this.chart = c;
+        }}
+        className="semi-transparent ct-chart ct-major-eleventh"
+      />
+    );
   }
 
   componentDidUpdate() {
     new Chartist.Pie(
-      this.refs.chart,
+      this.chart,
       {
         series: this.props.pieParts
       },

diff --git a/app/scripts/views/pitch_reading_view.js b/app/scripts/views/pitch_reading_view.js
@@ -1,4 +1,5 @@
 import React, { Component } from "react";
+import PropTypes from "prop-types";
 import classNames from "classnames";
 import _ from "lodash";
 
@@ -17,13 +18,13 @@ const successMp3Url = require("file!../../resources/success.mp3");
 
 export default class PitchReadingView extends Component {
   static propTypes = {
-    statisticService: React.PropTypes.object.isRequired,
-    settings: React.PropTypes.object.isRequired,
-    isActive: React.PropTypes.bool.isRequired
+    statisticService: PropTypes.object.isRequired,
+    settings: PropTypes.object.isRequired,
+    isActive: PropTypes.bool.isRequired
   };
 
   static childContextTypes = {
-    isInActiveView: React.PropTypes.bool
+    isInActiveView: PropTypes.bool
   };
 
   getChildContext() {
@@ -237,7 +238,16 @@ export default class PitchReadingView extends Component {
             <PitchSettingsView settings={this.props.settings} />
             <PitchStatisticView statisticService={this.props.statisticService} settings={this.props.settings} />
           </div>
-          <audio ref="successPlayer" hidden="true" src={successMp3Url} controls preload="auto" autobuffer />
+          <audio
+            ref={c => {
+              this.successPlayer = c;
+            }}
+            hidden="true"
+            src={successMp3Url}
+            controls
+            preload="auto"
+            autobuffer
+          />
         </div>
       </div>
     );
@@ -297,7 +307,7 @@ export default class PitchReadingView extends Component {
   }
 
   playSuccessSound() {
-    this.refs.successPlayer.play();
+    this.successPlayer.play();
   }
 
   onFailure() {

diff --git a/app/scripts/views/pitch_settings_view.js b/app/scripts/views/pitch_settings_view.js
@@ -1,4 +1,5 @@
 import React, { Component } from "react";
+import PropTypes from "prop-types";
 import RangeSettingComponent from "./range_setting_component";
 import SettingLine from "./setting_line";
 import KeyConverter from "../services/key_converter";
@@ -8,7 +9,7 @@ import AnalyticsService from "../services/analytics_service.js";
 
 export default class PitchSettingsView extends Component {
   static propTypes = {
-    settings: React.PropTypes.object
+    settings: PropTypes.object
   };
 
   constructor(props, context) {
@@ -42,7 +43,7 @@ export default class PitchSettingsView extends Component {
   }
 
   onMidiSelectChange() {
-    AppFreezer.trigger("input:changed", parseInt(this.refs.midiSelect.value, 10));
+    AppFreezer.trigger("input:changed", parseInt(this.midiSelect.value, 10));
   }
 
   render() {
@@ -56,7 +57,9 @@ export default class PitchSettingsView extends Component {
             name="select"
             onChange={this.onMidiSelectChange.bind(this)}
             defaultValue={midiSettings.currentInput}
-            ref="midiSelect"
+            ref={c => {
+              this.midiSelect = c;
+            }}
           >
             {midiInputs.map((el, index) => {
               return (

diff --git a/app/scripts/views/pitch_statistic_view.js b/app/scripts/views/pitch_statistic_view.js
@@ -1,5 +1,6 @@
 import Chartist from "Chartist";
 import React, { Component } from "react";
+import PropTypes from "prop-types";
 import { Tooltip, OverlayTrigger } from "react-bootstrap";
 import LevelView from "./level_view.js";
 import CollapsableContainer from "./collapsable_container.js";
@@ -9,8 +10,8 @@ import StarAnimation from "./star_animation.js";
 
 export default class PitchStatisticView extends Component {
   static propTypes = {
-    statisticService: React.PropTypes.object.isRequired,
-    settings: React.PropTypes.object.isRequired
+    statisticService: PropTypes.object.isRequired,
+    settings: PropTypes.object.isRequired
   };
 
   render() {
@@ -21,7 +22,12 @@ export default class PitchStatisticView extends Component {
 
     return (
       <div className="graph-stats content-box">
-        <div ref="chart" className="semi-transparent ct-chart ct-major-eleventh" />
+        <div
+          ref={c => {
+            this.chart = c;
+          }}
+          className="semi-transparent ct-chart ct-major-eleventh"
+        />
 
         <div className="row around-xs">
           <div className="col-xs">
@@ -90,8 +96,8 @@ export default class PitchStatisticView extends Component {
       }
     };
 
-    if (statistics.getSuccessCount() > 1) {
-      Chartist.Line(this.refs.chart, data, options);
+    if (this.chart && statistics.getSuccessCount() > 1) {
+      Chartist.Line(this.chart, data, options);
     }
   }
 }
diff --git a/app/scripts/views/privacy_policy_modal.js b/app/scripts/views/privacy_policy_modal.js
@@ -1,9 +1,10 @@
 import React, { Component } from "react";
+import PropTypes from "prop-types";
 import { Modal, Button } from "react-bootstrap";
 
 export default class PrivacyPolicyModal extends Component {
   static propTypes = {
-    onHide: React.PropTypes.func.isRequired
+    onHide: PropTypes.func.isRequired
   };
 
   render() {