Additional refactoring according to issues not caught by eslint

web/react/components/delete_post_modal.jsx

@@ -61,8 +61,7 @@ export default class DeletePostModal extends React.Component {
         );
     }
     componentDidMount() {
-        var self = this;
+        $(React.findDOMNode(this.refs.modal)).on('show.bs.modal', function freshOpen(e) {
-        $(this.refs.modal.getDOMNode()).on('show.bs.modal', function freshOpen(e) {
             var newState = {};
             if (BrowserStore.getItem('edit_state_transfer')) {
                 newState = BrowserStore.getItem('edit_state_transfer');
@@ -71,8 +70,8 @@ export default class DeletePostModal extends React.Component {
                 var button = e.relatedTarget;
                 newState = {title: $(button).attr('data-title'), channelId: $(button).attr('data-channelid'), postId: $(button).attr('data-postid'), comments: $(button).attr('data-comments')};
             }
-            self.setState(newState);
+            this.setState(newState);
-        });
+        }.bind(this));
         PostStore.addSelectedPostChangeListener(this.onListenerChange);
     }
     componentWillUnmount() {

web/react/components/navbar_dropdown.jsx

@@ -30,19 +30,18 @@ export default class NavbarDropdown extends React.Component {
         UserStore.addTeamsChangeListener(this.onListenerChange);
         TeamStore.addChangeListener(this.onListenerChange);
 
-        var self = this;
+        $(React.findDOMNode(this.refs.dropdown)).on('hide.bs.dropdown', function resetDropdown() {
-        $(this.refs.dropdown.getDOMNode()).on('hide.bs.dropdown', function resetDropdown() {
+            this.blockToggle = true;
-            self.blockToggle = true;
             setTimeout(function blockTimeout() {
-                self.blockToggle = false;
+                this.blockToggle = false;
-            }, 100);
+            }.bind(this), 100);
-        });
+        }.bind(this));
     }
     componentWillUnmount() {
         UserStore.removeTeamsChangeListener(this.onListenerChange);
         TeamStore.removeChangeListener(this.onListenerChange);
 
-        $(this.refs.dropdown.getDOMNode()).off('hide.bs.dropdown');
+        $(React.findDOMNode(this.refs.dropdown)).off('hide.bs.dropdown');
     }
     onListenerChange() {
         var newState = getStateFromStores();

web/react/components/password_reset_form.jsx

@@ -15,7 +15,7 @@ export default class PasswordResetForm extends React.Component {
         e.preventDefault();
         var state = {};
 
-        var password = this.refs.password.getDOMNode().value.trim();
+        var password = React.findDOMNode(this.refs.password).value.trim();
         if (!password || password.length < 5) {
             state.error = 'Please enter at least 5 characters.';
             this.setState(state);

web/react/components/password_reset_send_link.jsx

@@ -15,7 +15,7 @@ export default class PasswordResetSendLink extends React.Component {
         e.preventDefault();
         var state = {};
 
-        var email = this.refs.email.getDOMNode().value.trim();
+        var email = React.findDOMNode(this.refs.email).value.trim();
         if (!email) {
             state.error = 'Please enter a valid email address.';
             this.setState(state);
@@ -32,7 +32,7 @@ export default class PasswordResetSendLink extends React.Component {
         client.sendPasswordReset(data,
              function passwordResetSent() {
                  this.setState({error: null, updateText: <p>A password reset link has been sent to <b>{email}</b> for your <b>{this.props.teamDisplayName}</b> team on {window.location.hostname}.</p>, moreUpdateText: 'Please check your inbox.'});
-                 $(this.refs.reset_form.getDOMNode()).hide();
+                 $(React.findDOMNode(this.refs.reset_form)).hide();
              }.bind(this),
              function passwordResetFailedToSend(err) {
                  this.setState({error: err.message, update_text: null, moreUpdateText: null});

web/react/components/signup_user_complete.jsx

@@ -31,7 +31,7 @@ export default class SignupUserComplete extends React.Component {
     handleSubmit(e) {
         e.preventDefault();
 
-        this.state.user.username = this.refs.name.getDOMNode().value.trim();
+        this.state.user.username = React.findDOMNode(this.refs.name).value.trim();
         if (!this.state.user.username) {
             this.setState({nameError: 'This field is required', emailError: '', passwordError: '', serverError: ''});
             return;
@@ -51,13 +51,13 @@ export default class SignupUserComplete extends React.Component {
             return;
         }
 
-        this.state.user.email = this.refs.email.getDOMNode().value.trim();
+        this.state.user.email = React.findDOMNode(this.refs.email).value.trim();
         if (!this.state.user.email) {
             this.setState({nameError: '', emailError: 'This field is required', passwordError: ''});
             return;
         }
 
-        this.state.user.password = this.refs.password.getDOMNode().value.trim();
+        this.state.user.password = React.findDOMNode(this.refs.password).value.trim();
         if (!this.state.user.password || this.state.user.password .length < 5) {
             this.setState({nameError: '', emailError: '', passwordError: 'Please enter at least 5 characters', serverError: ''});
             return;

web/react/components/team_signup_username_page.jsx

@@ -21,7 +21,7 @@ export default class TeamSignupUsernamePage extends React.Component {
     submitNext(e) {
         e.preventDefault();
 
-        var name = this.refs.name.getDOMNode().value.trim();
+        var name = React.findDOMNode(this.refs.name).value.trim();
 
         var usernameError = Utils.isValidUsername(name);
         if (usernameError === 'Cannot use a reserved word as a username.') {

web/react/components/team_signup_welcome_page.jsx

@@ -34,7 +34,7 @@ export default class TeamSignupWelcomePage extends React.Component {
 
         var state = {useDiff: true, serverError: ''};
 
-        var email = this.refs.email.getDOMNode().value.trim().toLowerCase();
+        var email = React.findDOMNode(this.refs.email).value.trim().toLowerCase();
         if (!email || !Utils.isEmail(email)) {
             state.emailError = 'Please enter a valid email address';
             this.setState(state);

web/react/components/user_settings_notifications.jsx

@@ -163,15 +163,15 @@ export default class NotificationsTab extends React.Component {
     }
     handleNotifyRadio(notifyLevel) {
         this.setState({notifyLevel: notifyLevel});
-        this.refs.wrapper.getDOMNode().focus();
+        React.findDOMNode(this.refs.wrapper).focus();
     }
     handleEmailRadio(enableEmail) {
         this.setState({enableEmail: enableEmail});
-        this.refs.wrapper.getDOMNode().focus();
+        React.findDOMNode(this.refs.wrapper).focus();
     }
     handleSoundRadio(enableSound) {
         this.setState({enableSound: enableSound});
-        this.refs.wrapper.getDOMNode().focus();
+        React.findDOMNode(this.refs.wrapper).focus();
     }
     updateUsernameKey(val) {
         this.setState({usernameKey: val});
@@ -189,10 +189,10 @@ export default class NotificationsTab extends React.Component {
         this.setState({channelKey: val});
     }
     updateCustomMentionKeys() {
-        var checked = this.refs.customcheck.getDOMNode().checked;
+        var checked = React.findDOMNode(this.refs.customcheck).checked;
 
         if (checked) {
-            var text = this.refs.custommentions.getDOMNode().value;
+            var text = React.findDOMNode(this.refs.custommentions).value;
 
             // remove all spaces and split string into individual keys
             this.setState({customKeys: text.replace(/ /g, ''), customKeysChecked: true});
@@ -201,7 +201,7 @@ export default class NotificationsTab extends React.Component {
         }
     }
     onCustomChange() {
-        this.refs.customcheck.getDOMNode().checked = true;
+        React.findDOMNode(this.refs.customcheck).checked = true;
         this.updateCustomMentionKeys();
     }
     render() {
@@ -210,8 +210,6 @@ export default class NotificationsTab extends React.Component {
             serverError = this.state.serverError;
         }
 
-        var self = this;
-
         var user = this.props.user;
 
         var desktopSection;
@@ -234,7 +232,7 @@ export default class NotificationsTab extends React.Component {
                         <label>
                             <input type='radio'
                                 checked={notifyActive[0]}
-                                onChange={self.handleNotifyRadio.bind(this, 'all')}
+                                onChange={this.handleNotifyRadio.bind(this, 'all')}
                             >
                                 For all activity
                             </input>
@@ -246,7 +244,7 @@ export default class NotificationsTab extends React.Component {
                             <input
                                 type='radio'
                                 checked={notifyActive[1]}
-                                onChange={self.handleNotifyRadio.bind(this, 'mention')}
+                                onChange={this.handleNotifyRadio.bind(this, 'mention')}
                             >
                                 Only for mentions and private messages
                             </input>
@@ -258,7 +256,7 @@ export default class NotificationsTab extends React.Component {
                             <input
                                 type='radio'
                                 checked={notifyActive[2]}
-                                onChange={self.handleNotifyRadio.bind(this, 'none')}
+                                onChange={this.handleNotifyRadio.bind(this, 'none')}
                             >
                                 Never
                             </input>
@@ -268,9 +266,9 @@ export default class NotificationsTab extends React.Component {
             );
 
             handleUpdateDesktopSection = function updateDesktopSection(e) {
-                self.props.updateSection('');
+                this.props.updateSection('');
                 e.preventDefault();
-            };
+            }.bind(this);
 
             let extraInfo = (
                 <div className='setting-list__hint'>
@@ -299,8 +297,8 @@ export default class NotificationsTab extends React.Component {
             }
 
             handleUpdateDesktopSection = function updateDesktopSection() {
-                self.props.updateSection('desktop');
+                this.props.updateSection('desktop');
-            };
+            }.bind(this);
 
             desktopSection = (
                 <SettingItemMin
@@ -330,7 +328,7 @@ export default class NotificationsTab extends React.Component {
                             <input
                                 type='radio'
                                 checked={soundActive[0]}
-                                onChange={self.handleSoundRadio.bind(this, 'true')}
+                                onChange={this.handleSoundRadio.bind(this, 'true')}
                             >
                                 On
                             </input>
@@ -342,7 +340,7 @@ export default class NotificationsTab extends React.Component {
                             <input
                                 type='radio'
                                 checked={soundActive[1]}
-                                onChange={self.handleSoundRadio.bind(this, 'false')}
+                                onChange={this.handleSoundRadio.bind(this, 'false')}
                             >
                                 Off
                             </input>
@@ -353,9 +351,9 @@ export default class NotificationsTab extends React.Component {
             );
 
             handleUpdateSoundSection = function updateSoundSection(e) {
-                self.props.updateSection('');
+                this.props.updateSection('');
                 e.preventDefault();
-            };
+            }.bind(this);
 
             soundSection = (
                 <SettingItemMax
@@ -377,8 +375,8 @@ export default class NotificationsTab extends React.Component {
             }
 
             handleUpdateSoundSection = function updateSoundSection() {
-                self.props.updateSection('sound');
+                this.props.updateSection('sound');
-            };
+            }.bind(this);
 
             soundSection = (
                 <SettingItemMin
@@ -409,7 +407,7 @@ export default class NotificationsTab extends React.Component {
                             <input
                                 type='radio'
                                 checked={emailActive[0]}
-                                onChange={self.handleEmailRadio.bind(this, 'true')}
+                                onChange={this.handleEmailRadio.bind(this, 'true')}
                             >
                                 On
                             </input>
@@ -421,7 +419,7 @@ export default class NotificationsTab extends React.Component {
                             <input
                                 type='radio'
                                 checked={emailActive[1]}
-                                onChange={self.handleEmailRadio.bind(this, 'false')}
+                                onChange={this.handleEmailRadio.bind(this, 'false')}
                             >
                                 Off
                             </input>
@@ -433,9 +431,9 @@ export default class NotificationsTab extends React.Component {
             );
 
             handleUpdateEmailSection = function updateEmailSection(e) {
-                self.props.updateSection('');
+                this.props.updateSection('');
                 e.preventDefault();
-            };
+            }.bind(this);
 
             emailSection = (
                 <SettingItemMax
@@ -455,8 +453,8 @@ export default class NotificationsTab extends React.Component {
             }
 
             handleUpdateEmailSection = function updateEmailSection() {
-                self.props.updateSection('email');
+                this.props.updateSection('email');
-            };
+            }.bind(this);
 
             emailSection = (
                 <SettingItemMin
@@ -480,8 +478,8 @@ export default class NotificationsTab extends React.Component {
 
             if (user.first_name) {
                 handleUpdateFirstNameKey = function handleFirstNameKeyChange(e) {
-                    self.updateFirstNameKey(e.target.checked);
+                    this.updateFirstNameKey(e.target.checked);
-                };
+                }.bind(this);
                 inputs.push(
                     <div key='userNotificationFirstNameOption'>
                         <div className='checkbox'>
@@ -500,8 +498,8 @@ export default class NotificationsTab extends React.Component {
             }
 
             handleUpdateUsernameKey = function handleUsernameKeyChange(e) {
-                self.updateUsernameKey(e.target.checked);
+                this.updateUsernameKey(e.target.checked);
-            };
+            }.bind(this);
             inputs.push(
                 <div key='userNotificationUsernameOption'>
                     <div className='checkbox'>
@@ -519,8 +517,8 @@ export default class NotificationsTab extends React.Component {
             );
 
             handleUpdateMentionKey = function handleMentionKeyChange(e) {
-                self.updateMentionKey(e.target.checked);
+                this.updateMentionKey(e.target.checked);
-            };
+            }.bind(this);
             inputs.push(
                 <div key='userNotificationMentionOption'>
                     <div className='checkbox'>
@@ -538,8 +536,8 @@ export default class NotificationsTab extends React.Component {
             );
 
             handleUpdateAllKey = function handleAllKeyChange(e) {
-                self.updateAllKey(e.target.checked);
+                this.updateAllKey(e.target.checked);
-            };
+            }.bind(this);
             inputs.push(
                 <div key='userNotificationAllOption'>
                     <div className='checkbox'>
@@ -557,8 +555,8 @@ export default class NotificationsTab extends React.Component {
             );
 
             handleUpdateChannelKey = function handleChannelKeyChange(e) {
-                self.updateChannelKey(e.target.checked);
+                this.updateChannelKey(e.target.checked);
-            };
+            }.bind(this);
             inputs.push(
                 <div key='userNotificationChannelOption'>
                     <div className='checkbox'>
@@ -600,9 +598,9 @@ export default class NotificationsTab extends React.Component {
             );
 
             handleUpdateKeysSection = function updateKeysSection(e) {
-                self.props.updateSection('');
+                this.props.updateSection('');
                 e.preventDefault();
-            };
+            }.bind(this);
             keysSection = (
                 <SettingItemMax
                     title='Words that trigger mentions'
@@ -645,8 +643,8 @@ export default class NotificationsTab extends React.Component {
             }
 
             handleUpdateKeysSection = function updateKeysSection() {
-                self.props.updateSection('keys');
+                this.props.updateSection('keys');
-            };
+            }.bind(this);
 
             keysSection = (
                 <SettingItemMin