Merge pull request #13 from Graham42/react-16

Upgrade to React 16
philippotto · Oct 29, 2017 · 7368e67 · 7368e67
2 parents 5de3656 + c99eb7f
commit 7368e67
Show file tree

Hide file tree

Showing 33 changed files with 416 additions and 328 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-  - 4.4.0
+  - lts/*
   - stable
 install:
   - npm install

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/services/pitch_statistic_service.js b/app/scripts/services/pitch_statistic_service.js
@@ -28,7 +28,9 @@ class PitchStatisticService {
     this.stats = localStorage.getItem(localStoragePitchStatsKey);
 
     if (this.stats) {
-      this.stats = JSON.parse(this.stats).map(this.transformDate).map(StatEvolver.evolveToLatestSchema);
+      this.stats = JSON.parse(this.stats)
+        .map(this.transformDate)
+        .map(StatEvolver.evolveToLatestSchema);
     } else {
       this.stats = [];
     }
@@ -45,7 +47,9 @@ class PitchStatisticService {
   }
 
   getSuccessCount() {
-    return _(this.stats).filter(el => el.success).value().length;
+    return _(this.stats)
+      .filter(el => el.success)
+      .value().length;
   }
 
   rateEvent(event) {
@@ -67,7 +71,10 @@ class PitchStatisticService {
   }
 
   getLastTimes(n = 10) {
-    return this.stats.filter(el => el.success).map(el => el.time).slice(-n);
+    return this.stats
+      .filter(el => el.success)
+      .map(el => el.time)
+      .slice(-n);
   }
 
   computeAverage(array) {
@@ -83,11 +90,18 @@ class PitchStatisticService {
   }
 
   getTotalAmountOfChords() {
-    return _(this.stats).filter(el => el.success).map(el => el.keys).size();
+    return _(this.stats)
+      .filter(el => el.success)
+      .map(el => el.keys)
+      .size();
   }
 
   getTotalAmountOfKeys() {
-    return _(this.stats).filter(el => el.success).map(el => el.keys).flatten().size();
+    return _(this.stats)
+      .filter(el => el.success)
+      .map(el => el.keys)
+      .flatten()
+      .size();
   }
 
   getSuccessRate() {

diff --git a/app/scripts/services/rhythm_statistic_service.js b/app/scripts/services/rhythm_statistic_service.js
@@ -64,15 +64,20 @@ class RhythmStatisticService {
   }
 
   getSuccessCount() {
-    return _(this.stats).filter(el => el.success).value().length;
+    return _(this.stats)
+      .filter(el => el.success)
+      .value().length;
   }
 
   getLastScores(n) {
     return this.stats.slice(-n).map(this.rateEvent);
   }
 
   getLastTimes(n = 10) {
-    return this.stats.filter(el => el.success).map(el => el.time).slice(-n);
+    return this.stats
+      .filter(el => el.success)
+      .map(el => el.time)
+      .slice(-n);
   }
 
   computeAverage(array) {
@@ -88,7 +93,10 @@ class RhythmStatisticService {
   }
 
   getTotalAmountOfBeats() {
-    return _(this.stats).map(el => el.durations).flatten().size();
+    return _(this.stats)
+      .map(el => el.durations)
+      .flatten()
+      .size();
   }
 
   getTotalRhythmTime() {

diff --git a/app/scripts/views/animated_number.js b/app/scripts/views/animated_number.js
@@ -1,20 +1,18 @@
 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;
     const number = this.props.number;
     return (
       <Motion defaultStyle={{ x: 1 }} style={{ x: spring(number) }}>
-        {value =>
-          <span>
-            {formatter ? formatter(value.x) : Math.round(value.x)}
-          </span>}
+        {value => <span>{formatter ? formatter(value.x) : Math.round(value.x)}</span>}
       </Motion>
     );
   }

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.array.isRequired,
+    result: PropTypes.object
   };
 
   convertTicksToBeatNames(tickTime, tickLength) {
@@ -26,11 +27,11 @@ export default class BeatVisualization extends Component {
     const ticks = necessaryBeatNames.slice(tickIndex, tickIndex + tickStepCount);
     return (
       <div className="row center-xs">
-        {ticks.map((beatName, index) =>
+        {ticks.map((beatName, index) => (
           <div className="col-xs" key={index}>
             {beatName}
           </div>
-        )}
+        ))}
       </div>
     );
   }
@@ -52,11 +53,11 @@ export default class BeatVisualization extends Component {
         currentX = x + width;
 
         return [
-          marginLeft > 0
-            ? <div className="beat restBeat" style={{ width: `${marginLeft}%` }} key={"spacer-${index}"}>
-                {beatNamesRest}
-              </div>
-            : null,
+          marginLeft > 0 ? (
+            <div className="beat restBeat" style={{ width: `${marginLeft}%` }} key={"spacer-${index}"}>
+              {beatNamesRest}
+            </div>
+          ) : null,
           <div className={`beat ${color}-beat`} style={{ width: `${width}%` }} key={index}>
             {beatNames}
           </div>
@@ -98,12 +99,8 @@ export default class BeatVisualization extends Component {
     // uniqueId avoids that different beat bars are animated into each other
     return (
       <div key={_.uniqueId()} className={className}>
-        <div className="expectedBeatBar">
-          {expectedBeats}
-        </div>
-        <div className="actualBeatBar">
-          {actualBeats}
-        </div>
+        <div className="expectedBeatBar">{expectedBeats}</div>
+        <div className="actualBeatBar">{actualBeats}</div>
       </div>
     );
   }

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) {
@@ -110,9 +111,7 @@ export default class ClaviatureView extends Component {
     ].map(args => this.renderKey.apply(this, args));
     return (
       <div className={classNames({ "scale noSelect": true, noPointerEvents: this.props.disabled })}>
-        <ol>
-          {keys}
-        </ol>
+        <ol>{keys}</ol>
       </div>
     );
   }

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 {
+export default class CollapsableContainer 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() {
@@ -38,22 +39,16 @@ export default class GameButton extends Component {
   }
 
   render() {
-    const subtext = this.props.shortcutLetter
-      ? <div>
-          <span style={{ fontSize: 12 }}>
-            Or press '{this.props.shortcutLetter}'
-          </span>
-        </div>
-      : null;
+    const subtext = this.props.shortcutLetter ? (
+      <div>
+        <span style={{ fontSize: 12 }}>Or press &lsquo;{this.props.shortcutLetter}&rsquo;</span>
+      </div>
+    ) : null;
 
     return (
       <Button onClick={this.props.onClick} bsStyle={this.props.primary ? "success" : "default"} className="gameButton">
-        <span className="gameButton-label">
-          {this.props.label}
-        </span>
-        <span className="subtext">
-          {subtext}
-        </span>
+        <span className="gameButton-label">{this.props.label}</span>
+        <span className="subtext">{subtext}</span>
       </Button>
     );
   }

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() {
@@ -64,9 +65,7 @@ export default class LevelView extends Component {
     return (
       <div>
         {content}
-        <div>
-          Current level: {levelIndex + 2}
-        </div>
+        <div>Current level: {levelIndex + 2}</div>
       </div>
     );
   }

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,8 @@ 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
   };
 
   constructor(props, context) {
@@ -65,9 +65,7 @@ export default class MetronomeView extends Component {
           opacityOut: (this.state.currentMetronomeBeat + 1) % 4 === 0
         })}
       >
-        <h2>
-          {this.state.currentMetronomeBeat + 1}
-        </h2>
+        <h2>{this.state.currentMetronomeBeat + 1}</h2>
       </CollapsableContainer>
     );
   }