From 8b5c154b46063a401084a2e54095c90d5772a108 Mon Sep 17 00:00:00 2001
From: Justin Gordon <justin.gordon@gmail.com>
Date: Sun, 24 Jan 2016 11:22:39 -0800
Subject: [PATCH] Address code review

---
 node_package/src/clientStartup.js                    |  6 +++---
 spec/dummy/client/app/components/HelloWorld.jsx      | 11 +++++++----
 spec/dummy/client/app/components/HelloWorldES5.jsx   | 10 +++++++---
 spec/dummy/client/app/components/HelloWorldRedux.jsx | 12 ++++++++----
 4 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/node_package/src/clientStartup.js b/node_package/src/clientStartup.js
index dd5cedc07..97525d120 100644
--- a/node_package/src/clientStartup.js
+++ b/node_package/src/clientStartup.js
@@ -12,7 +12,7 @@ function debugTurbolinks(...msg) {
   }
 
   if (window.DEBUG_TURBOLINKS) {
-    console.log('TURBO', ...msg);
+    console.log('TURBO:', ...msg);
   }
 }
 
@@ -101,7 +101,7 @@ export default function clientStartup(context) {
 
   context.__REACT_ON_RAILS_EVENT_HANDLERS_RAN_ONCE__ = true;
 
-  debugTurbolinks('Adding DOMContentLoaded event to install event listeners');
+  debugTurbolinks('Adding DOMContentLoaded event to install event listeners.');
 
   document.addEventListener('DOMContentLoaded', () => {
     // Install listeners when running on the client (browser).
@@ -109,7 +109,7 @@ export default function clientStartup(context) {
     // Webpack bundles first.
 
     if (!turbolinksInstalled()) {
-      debugTurbolinks('WITHOUT TURBOLINKS: DOMContentLoaded handler installed');
+      debugTurbolinks('WITHOUT TURBOLINKS: DOMContentLoaded handler installed.');
       document.addEventListener('DOMContentLoaded', reactOnRailsPageLoaded);
     } else {
       debugTurbolinks('WITH TURBOLINKS: document page:before-unload and page:change handlers' +
diff --git a/spec/dummy/client/app/components/HelloWorld.jsx b/spec/dummy/client/app/components/HelloWorld.jsx
index 1f3503caa..55b302fed 100644
--- a/spec/dummy/client/app/components/HelloWorld.jsx
+++ b/spec/dummy/client/app/components/HelloWorld.jsx
@@ -1,5 +1,4 @@
 import React, { PropTypes } from 'react';
-import ReactDOM from 'react-dom';
 
 // Super simple example of the simplest possible React component
 class HelloWorld extends React.Component {
@@ -18,11 +17,15 @@ class HelloWorld extends React.Component {
     this.state = props.helloWorldData;
   }
 
-  _handleChange() {
-    const name = ReactDOM.findDOMNode(this.refs.name).value;
+  handleChange() {
+    const name =  this.nameDomRef.name;
     this.setState({ name });
   }
 
+  setNameDomRef(nameDomNode) {
+    this.nameDomRef = nameDomNode;
+  }
+
   render() {
     console.log('HelloWorld demonstrating a call to console.log in '
       + 'spec/dummy/client/app/components/HelloWorld.jsx:18');
@@ -36,7 +39,7 @@ class HelloWorld extends React.Component {
         </h3>
         <p>
           Say hello to:
-          <input type="text" ref="name" defaultValue={name} onChange={::this._handleChange} />
+          <input type="text" ref={this.setNameDomRef} defaultValue={name} onChange={::this.handleChange} />
         </p>
       </div>
     );
diff --git a/spec/dummy/client/app/components/HelloWorldES5.jsx b/spec/dummy/client/app/components/HelloWorldES5.jsx
index c00e7419c..9d2466846 100644
--- a/spec/dummy/client/app/components/HelloWorldES5.jsx
+++ b/spec/dummy/client/app/components/HelloWorldES5.jsx
@@ -13,11 +13,15 @@ const HelloWorldES5 = React.createClass({
     return this.props.helloWorldData;
   },
 
-  _handleChange() {
-    const name = ReactDOM.findDOMNode(this.refs.name).value;
+  handleChange() {
+    const name =  this.nameDomRef.name;
     this.setState({ name });
   },
 
+  setNameDomRef(nameDomNode) {
+    this.nameDomRef = nameDomNode;
+  },
+
   render() {
     const { name } = this.state;
 
@@ -28,7 +32,7 @@ const HelloWorldES5 = React.createClass({
         </h3>
         <p>
           Say hello to:
-          <input type="text" ref="name" defaultValue={name} onChange={this._handleChange} />
+          <input type="text" ref={this.setNameDomRef} defaultValue={name} onChange={::this.handleChange} />
         </p>
       </div>
     );
diff --git a/spec/dummy/client/app/components/HelloWorldRedux.jsx b/spec/dummy/client/app/components/HelloWorldRedux.jsx
index 1a5c2255c..53c241a85 100644
--- a/spec/dummy/client/app/components/HelloWorldRedux.jsx
+++ b/spec/dummy/client/app/components/HelloWorldRedux.jsx
@@ -14,9 +14,13 @@ export default class HelloWorldRedux extends React.Component {
     super(props, context);
   }
 
-  _handleChange() {
-    const name = ReactDOM.findDOMNode(this.refs.name).value;
-    this.props.actions.updateName(name);
+  handleChange() {
+    const name =  this.nameDomRef.name;
+    this.setState({ name });
+  }
+
+  setNameDomRef(nameDomNode) {
+    this.nameDomRef = nameDomNode;
   }
 
   render() {
@@ -30,7 +34,7 @@ export default class HelloWorldRedux extends React.Component {
         </h3>
         <p>
           With Redux, say hello to:
-          <input type="text" ref="name" defaultValue={name} onChange={::this._handleChange} />
+          <input type="text" ref={this.setNameDomRef} defaultValue={name} onChange={::this.handleChange} />
         </p>
       </div>
     );