Address code review

shakacode · Jan 24, 2016 · 8b5c154 · 8b5c154
1 parent 5276607
commit 8b5c154
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 14 deletions.
diff --git 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,15 +101,15 @@ 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).
     // We must do this check for turbolinks AFTER the document is loaded because we load the
     // 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
@@ -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
@@ -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
@@ -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>
     );