Merge pull request #547 from justingreenberg/update-handler-bindings

refactor(containers): remove experimental bind syntax

Author: erikras

src/containers/About/About.js

@@ -3,13 +3,12 @@ import DocumentMeta from 'react-document-meta';
 import { MiniInfoBar } from 'components';
 
 export default class About extends Component {
+
   state = {
     showKitten: false
   }
 
-  handleToggleKitten() {
-    this.setState({showKitten: !this.state.showKitten});
-  }
+  handleToggleKitten = () => this.setState({showKitten: !this.state.showKitten});
 
   render() {
     const {showKitten} = this.state;
@@ -40,7 +39,7 @@ export default class About extends Component {
 
           <button className={'btn btn-' + (showKitten ? 'danger' : 'success')}
                   style={{marginLeft: 50}}
-                  onClick={::this.handleToggleKitten}>
+                  onClick={this.handleToggleKitten}>
             {showKitten ? 'No! Take it away!' : 'Yes! Please!'}</button>
         </p>
 

src/containers/App/App.js

@@ -48,7 +48,7 @@ export default class App extends Component {
     }
   }
 
-  handleLogout(event) {
+  handleLogout = (event) => {
     event.preventDefault();
     this.props.logout();
   }
@@ -89,7 +89,7 @@ export default class App extends Component {
               </LinkContainer>}
               {user &&
               <LinkContainer to="/logout">
-                <NavItem eventKey={6} className="logout-link" onClick={::this.handleLogout}>
+                <NavItem eventKey={6} className="logout-link" onClick={this.handleLogout}>
                   Logout
                 </NavItem>
               </LinkContainer>}

src/containers/Chat/Chat.js

@@ -4,8 +4,8 @@ import {connect} from 'react-redux';
 @connect(
   state => ({user: state.auth.user})
 )
-export default
-class Chat extends Component {
+export default class Chat extends Component {
+
   static propTypes = {
     user: PropTypes.object
   };
@@ -17,7 +17,7 @@ class Chat extends Component {
 
   componentDidMount() {
     if (socket && !this.onMsgListener) {
-      this.onMsgListener = socket.on('msg', this.onMessageReceived.bind(this));
+      this.onMsgListener = socket.on('msg', this.onMessageReceived);
 
       setTimeout(() => {
         socket.emit('history', {offset: 0, length: 100});
@@ -32,13 +32,13 @@ class Chat extends Component {
     }
   }
 
-  onMessageReceived(data) {
+  onMessageReceived = (data) => {
     const messages = this.state.messages;
     messages.push(data);
     this.setState({messages});
   }
 
-  handleSubmit(event) {
+  handleSubmit = (event) => {
     event.preventDefault();
 
     const msg = this.state.message;
@@ -66,14 +66,14 @@ class Chat extends Component {
             return <li key={`chat.msg.${msg.id}`}>{msg.from}: {msg.text}</li>;
           })}
           </ul>
-          <form className="login-form" onSubmit={this.handleSubmit.bind(this)}>
+          <form className="login-form" onSubmit={this.handleSubmit}>
             <input type="text" ref="message" placeholder="Enter your message"
              value={this.state.message}
              onChange={(event) => {
                this.setState({message: event.target.value});
              }
             }/>
-            <button className="btn" onClick={this.handleSubmit.bind(this)}>Send</button>
+            <button className="btn" onClick={this.handleSubmit}>Send</button>
           </form>
         </div>
         }

src/containers/Login/Login.js

@@ -13,7 +13,7 @@ export default class Login extends Component {
     logout: PropTypes.func
   }
 
-  handleSubmit(event) {
+  handleSubmit = (event) => {
     event.preventDefault();
     const input = this.refs.username;
     this.props.login(input.value);
@@ -29,9 +29,9 @@ export default class Login extends Component {
         <h1>Login</h1>
         {!user &&
         <div>
-          <form className="login-form" onSubmit={::this.handleSubmit}>
+          <form className="login-form" onSubmit={this.handleSubmit}>
             <input type="text" ref="username" placeholder="Enter a username"/>
-            <button className="btn btn-success" onClick={::this.handleSubmit}><i className="fa fa-sign-in"/>{' '}Log In
+            <button className="btn btn-success" onClick={this.handleSubmit}><i className="fa fa-sign-in"/>{' '}Log In
             </button>
           </form>
           <p>This will "log you in" as this user, storing the username in the session of the API server.</p>

src/containers/Survey/Survey.js

@@ -12,12 +12,12 @@ export default class Survey extends Component {
     initialize: PropTypes.func.isRequired
   }
 
-  handleSubmit(data) {
+  handleSubmit = (data) => {
     window.alert('Data submitted! ' + JSON.stringify(data));
     this.props.initialize('survey', {});
   }
 
-  handleInitialize() {
+  handleInitialize = () => {
     this.props.initialize('survey', {
       name: 'Little Bobby Tables',
       email: '[email protected]',
@@ -60,15 +60,15 @@ export default class Survey extends Component {
         </p>
 
         <div style={{textAlign: 'center', margin: 15}}>
-          <button className="btn btn-primary" onClick={::this.handleInitialize}>
+          <button className="btn btn-primary" onClick={this.handleInitialize}>
             <i className="fa fa-pencil"/> Initialize Form
           </button>
         </div>
 
         <p>The circles to the left of the inputs correspond to flags provided by <code>redux-form</code>:
           Touched, Visited, Active, and Dirty.</p>
 
-        <SurveyForm onSubmit={::this.handleSubmit}/>
+        <SurveyForm onSubmit={this.handleSubmit}/>
       </div>
     );
   }

src/containers/Widgets/Widgets.js

@@ -22,8 +22,7 @@ function fetchDataDeferred(getState, dispatch) {
     loading: state.widgets.loading
   }),
   {...widgetActions, initializeWithKey })
-export default
-class Widgets extends Component {
+export default class Widgets extends Component {
   static propTypes = {
     widgets: PropTypes.array,
     error: PropTypes.string,
@@ -34,14 +33,11 @@ class Widgets extends Component {
     editStart: PropTypes.func.isRequired
   }
 
-  handleEdit(widget) {
-    const {editStart} = this.props; // eslint-disable-line no-shadow
-    return () => {
-      editStart(String(widget.id));
-    };
-  }
-
   render() {
+    const handleEdit = (widget) => {
+      const {editStart} = this.props; // eslint-disable-line no-shadow
+      return () => editStart(String(widget.id));
+    };
     const {widgets, error, editing, loading, load} = this.props;
     let refreshClassName = 'fa fa-refresh';
     if (loading) {
@@ -52,8 +48,8 @@ class Widgets extends Component {
       <div className={styles.widgets + ' container'}>
         <h1>
           Widgets
-          <button className={styles.refreshBtn + ' btn btn-success'} onClick={load}><i
-            className={refreshClassName}/> {' '} Reload Widgets
+          <button className={styles.refreshBtn + ' btn btn-success'} onClick={load}>
+            <i className={refreshClassName}/> {' '} Reload Widgets
           </button>
         </h1>
         <DocumentMeta title="React Redux Example: Widgets"/>
@@ -93,7 +89,7 @@ class Widgets extends Component {
                 <td className={styles.sprocketsCol}>{widget.sprocketCount}</td>
                 <td className={styles.ownerCol}>{widget.owner}</td>
                 <td className={styles.buttonCol}>
-                  <button className="btn btn-primary" onClick={::this.handleEdit(widget)}>
+                  <button className="btn btn-primary" onClick={handleEdit(widget)}>
                     <i className="fa fa-pencil"/> Edit
                   </button>
                 </td>