From b9e16f41f161c772e1701c4ac47ca5319c706912 Mon Sep 17 00:00:00 2001
From: JoramWilander <jwawilander@gmail.com>
Date: Wed, 2 Sep 2015 14:26:01 -0400
Subject: Remove use of getDOMNode from multiple files.

---
 web/react/components/channel_notifications.jsx     |  6 +-
 web/react/components/get_link_modal.jsx            | 21 ++-----
 web/react/components/sidebar.jsx                   | 30 ++++-----
 web/react/components/team_feature_tab.jsx          |  7 +--
 .../team_signup_allowed_domains_page.jsx           |  6 +-
 web/react/components/team_signup_password_page.jsx |  2 +-
 web/react/components/user_settings_appearance.jsx  |  4 +-
 web/react/components/user_settings_security.jsx    | 11 ++--
 web/react/components/view_image.jsx                | 72 ++++++++++------------
 9 files changed, 72 insertions(+), 87 deletions(-)

(limited to 'web/react')

diff --git a/web/react/components/channel_notifications.jsx b/web/react/components/channel_notifications.jsx
index 6b16e362c..173646597 100644
--- a/web/react/components/channel_notifications.jsx
+++ b/web/react/components/channel_notifications.jsx
@@ -26,7 +26,7 @@ export default class ChannelNotifications extends React.Component {
     componentDidMount() {
         ChannelStore.addChangeListener(this.onListenerChange);
 
-        $(this.refs.modal.getDOMNode()).on('show.bs.modal', function showModal(e) {
+        $(React.findDOMNode(this.refs.modal)).on('show.bs.modal', function showModal(e) {
             var button = e.relatedTarget;
             var channelId = button.getAttribute('data-channelid');
 
@@ -95,11 +95,11 @@ export default class ChannelNotifications extends React.Component {
     }
     handleRadioClick(notifyLevel) {
         this.setState({notifyLevel: notifyLevel, quietMode: false});
-        this.refs.modal.getDOMNode().focus();
+        React.findDOMNode(this.refs.modal).focus();
     }
     handleQuietToggle(quietMode) {
         this.setState({notifyLevel: 'none', quietMode: quietMode});
-        this.refs.modal.getDOMNode().focus();
+        React.findDOMNode(this.refs.modal).focus();
     }
     createDesktopSection(serverError) {
         var handleUpdateSection;
diff --git a/web/react/components/get_link_modal.jsx b/web/react/components/get_link_modal.jsx
index f0ebe9bce..fc32d946b 100644
--- a/web/react/components/get_link_modal.jsx
+++ b/web/react/components/get_link_modal.jsx
@@ -2,33 +2,24 @@
 // See License.txt for license information.
 
 var UserStore = require('../stores/user_store.jsx');
-var ZeroClipboardMixin = require('react-zeroclipboard-mixin');
-
-ZeroClipboardMixin.ZeroClipboard.config({
-    swfPath: '../../static/flash/ZeroClipboard.swf'
-});
 
 export default class GetLinkModal extends React.Component {
     constructor(props) {
         super(props);
 
-        this.zeroclipboardElementsSelector = '[data-copy-btn]';
-        this.mixins = [ZeroClipboardMixin];
-
         this.handleClick = this.handleClick.bind(this);
 
         this.state = {copiedLink: false};
     }
     componentDidMount() {
-        var self = this;
         if (this.refs.modal) {
-            $(this.refs.modal.getDOMNode()).on('show.bs.modal', function show(e) {
+            $(React.findDOMNode(this.refs.modal)).on('show.bs.modal', function show(e) {
                 var button = e.relatedTarget;
-                self.setState({title: $(button).attr('data-title'), value: $(button).attr('data-value')});
-            });
-            $(this.refs.modal.getDOMNode()).on('hide.bs.modal', function hide() {
-                self.setState({copiedLink: false});
-            });
+                this.setState({title: $(button).attr('data-title'), value: $(button).attr('data-value')});
+            }.bind(this));
+            $(React.findDOMNode(this.refs.modal)).on('hide.bs.modal', function hide() {
+                this.setState({copiedLink: false});
+            }.bind(this));
         }
     }
     handleClick() {
diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx
index cead26c4b..ef23f5bc2 100644
--- a/web/react/components/sidebar.jsx
+++ b/web/react/components/sidebar.jsx
@@ -272,25 +272,25 @@ export default class Sidebar extends React.Component {
         this.updateUnreadIndicators();
     }
     updateUnreadIndicators() {
-        var container = $(this.refs.container.getDOMNode());
+        var container = $(React.findDOMNode(this.refs.container));
 
         if (this.firstUnreadChannel) {
-            var firstUnreadElement = $(this.refs[this.firstUnreadChannel].getDOMNode());
+            var firstUnreadElement = $(React.findDOMNode(this.refs[this.firstUnreadChannel]));
 
             if (firstUnreadElement.position().top + firstUnreadElement.height() < 0) {
-                $(this.refs.topUnreadIndicator.getDOMNode()).css('display', 'initial');
+                $(React.findDOMNode(this.refs.topUnreadIndicator)).css('display', 'initial');
             } else {
-                $(this.refs.topUnreadIndicator.getDOMNode()).css('display', 'none');
+                $(React.findDOMNode(this.refs.topUnreadIndicator)).css('display', 'none');
             }
         }
 
         if (this.lastUnreadChannel) {
-            var lastUnreadElement = $(this.refs[this.lastUnreadChannel].getDOMNode());
+            var lastUnreadElement = $(React.findDOMNode(this.refs[this.lastUnreadChannel]));
 
             if (lastUnreadElement.position().top > container.height()) {
-                $(this.refs.bottomUnreadIndicator.getDOMNode()).css('display', 'initial');
+                $(React.findDOMNode(this.refs.bottomUnreadIndicator)).css('display', 'initial');
             } else {
-                $(this.refs.bottomUnreadIndicator.getDOMNode()).css('display', 'none');
+                $(React.findDOMNode(this.refs.bottomUnreadIndicator)).css('display', 'none');
             }
         }
     }
@@ -315,10 +315,10 @@ export default class Sidebar extends React.Component {
         if (unread) {
             titleClass = 'unread-title';
 
-            if (!self.firstUnreadChannel) {
-                self.firstUnreadChannel = channel.name;
+            if (!this.firstUnreadChannel) {
+                this.firstUnreadChannel = channel.name;
             }
-            self.lastUnreadChannel = channel.name;
+            this.lastUnreadChannel = channel.name;
         }
 
         var badge = null;
@@ -335,7 +335,7 @@ export default class Sidebar extends React.Component {
                 badge = <span className='badge pull-right small'>{channelMember.mention_count}</span>;
                 this.badgesActive = true;
             }
-        } else if (self.state.loadingDMChannel === index && channel.type === 'D') {
+        } else if (this.state.loadingDMChannel === index && channel.type === 'D') {
             badge = (
                 <img
                     className='channel-loading-gif pull-right'
@@ -377,19 +377,19 @@ export default class Sidebar extends React.Component {
             // It's a direct message channel that doesn't exist yet so let's create it now
             var otherUserId = Utils.getUserIdFromChannelName(channel);
 
-            if (self.state.loadingDMChannel === -1) {
+            if (this.state.loadingDMChannel === -1) {
                 handleClick = function clickHandler(e) {
                     e.preventDefault();
-                    self.setState({loadingDMChannel: index});
+                    this.setState({loadingDMChannel: index});
 
                     Client.createDirectChannel(channel, otherUserId,
                         function success(data) {
-                            self.setState({loadingDMChannel: -1});
+                            this.setState({loadingDMChannel: -1});
                             AsyncClient.getChannel(data.id);
                             Utils.switchChannel(data);
                         },
                         function error() {
-                            self.setState({loadingDMChannel: -1});
+                            this.setState({loadingDMChannel: -1});
                             window.location.href = TeamStore.getCurrentTeamUrl() + '/channels/' + channel.name;
                         }
                     );
diff --git a/web/react/components/team_feature_tab.jsx b/web/react/components/team_feature_tab.jsx
index 44af513b4..e5398332e 100644
--- a/web/react/components/team_feature_tab.jsx
+++ b/web/react/components/team_feature_tab.jsx
@@ -52,7 +52,7 @@ export default class FeatureTab extends React.Component {
     }
     handleValetRadio(val) {
         this.setState({allowValet: val});
-        this.refs.wrapper.getDOMNode().focus();
+        React.findDOMNode(this.refs.wrapper).focus();
     }
     onUpdateSection(e) {
         e.preventDefault();
@@ -73,7 +73,6 @@ export default class FeatureTab extends React.Component {
         }
 
         var valetSection;
-        var self = this;
 
         if (this.props.activeSection === 'valet') {
             var valetActive = [false, false];
@@ -92,7 +91,7 @@ export default class FeatureTab extends React.Component {
                             <input
                                 type='radio'
                                 checked={valetActive[0]}
-                                onChange={self.handleValetRadio.bind(this, 'true')}
+                                onChange={this.handleValetRadio.bind(this, 'true')}
                             >
                                 On
                             </input>
@@ -104,7 +103,7 @@ export default class FeatureTab extends React.Component {
                             <input
                                 type='radio'
                                 checked={valetActive[1]}
-                                onChange={self.handleValetRadio.bind(this, 'false')}
+                                onChange={this.handleValetRadio.bind(this, 'false')}
                             >
                                 Off
                             </input>
diff --git a/web/react/components/team_signup_allowed_domains_page.jsx b/web/react/components/team_signup_allowed_domains_page.jsx
index 7a27d4725..aee5afd23 100644
--- a/web/react/components/team_signup_allowed_domains_page.jsx
+++ b/web/react/components/team_signup_allowed_domains_page.jsx
@@ -20,15 +20,15 @@ export default class TeamSignupAllowedDomainsPage extends React.Component {
     submitNext(e) {
         e.preventDefault();
 
-        if (this.refs.open_network.getDOMNode().checked) {
+        if (React.findDOMNode(this.refs.open_network).checked) {
             this.props.state.wizard = 'send_invites';
             this.props.state.team.type = 'O';
             this.props.updateParent(this.props.state);
             return;
         }
 
-        if (this.refs.allow.getDOMNode().checked) {
-            var name = this.refs.name.getDOMNode().value.trim();
+        if (React.findDOMNode(this.refs.allow).checked) {
+            var name = React.findDOMNode(this.refs.name).value.trim();
             var domainRegex = /^\w+\.\w+$/;
             if (!name) {
                 this.setState({nameError: 'This field is required'});
diff --git a/web/react/components/team_signup_password_page.jsx b/web/react/components/team_signup_password_page.jsx
index bc86c5542..c26be7e93 100644
--- a/web/react/components/team_signup_password_page.jsx
+++ b/web/react/components/team_signup_password_page.jsx
@@ -22,7 +22,7 @@ export default class TeamSignupPasswordPage extends React.Component {
     submitNext(e) {
         e.preventDefault();
 
-        var password = this.refs.password.getDOMNode().value.trim();
+        var password = React.findDOMNode(this.refs.password).value.trim();
         if (!password || password.length < 5) {
             this.setState({passwordError: 'Please enter at least 5 characters'});
             return;
diff --git a/web/react/components/user_settings_appearance.jsx b/web/react/components/user_settings_appearance.jsx
index f9eed3b3e..878ec42fc 100644
--- a/web/react/components/user_settings_appearance.jsx
+++ b/web/react/components/user_settings_appearance.jsx
@@ -59,14 +59,14 @@ export default class UserSettingsAppearance extends React.Component {
     }
     componentDidMount() {
         if (this.props.activeSection === 'theme') {
-            $(this.refs[this.state.theme].getDOMNode()).addClass('active-border');
+            $(React.findDOMNode(this.refs[this.state.theme])).addClass('active-border');
         }
         $('#user_settings').on('hidden.bs.modal', this.handleClose);
     }
     componentDidUpdate() {
         if (this.props.activeSection === 'theme') {
             $('.color-btn').removeClass('active-border');
-            $(this.refs[this.state.theme].getDOMNode()).addClass('active-border');
+            $(React.findDOMNode(this.refs[this.state.theme])).addClass('active-border');
         }
     }
     componentWillUnmount() {
diff --git a/web/react/components/user_settings_security.jsx b/web/react/components/user_settings_security.jsx
index 82828743e..a9f62097a 100644
--- a/web/react/components/user_settings_security.jsx
+++ b/web/react/components/user_settings_security.jsx
@@ -107,7 +107,6 @@ export default class SecurityTab extends React.Component {
 
         var updateSectionStatus;
         var passwordSection;
-        var self = this;
         if (this.props.activeSection === 'password') {
             var inputs = [];
             var submit = null;
@@ -163,10 +162,10 @@ export default class SecurityTab extends React.Component {
             }
 
             updateSectionStatus = function resetSection(e) {
-                self.props.updateSection('');
-                self.setState({currentPassword: '', newPassword: '', confirmPassword: '', serverError: null, passwordError: null});
+                this.props.updateSection('');
+                this.setState({currentPassword: '', newPassword: '', confirmPassword: '', serverError: null, passwordError: null});
                 e.preventDefault();
-            };
+            }.bind(this);
 
             passwordSection = (
                 <SettingItemMax
@@ -201,8 +200,8 @@ export default class SecurityTab extends React.Component {
             }
 
             updateSectionStatus = function updateSection() {
-                self.props.updateSection('password');
-            };
+                this.props.updateSection('password');
+            }.bind(this);
 
             passwordSection = (
                 <SettingItemMin
diff --git a/web/react/components/view_image.jsx b/web/react/components/view_image.jsx
index c16e41685..6e61ab156 100644
--- a/web/react/components/view_image.jsx
+++ b/web/react/components/view_image.jsx
@@ -66,22 +66,21 @@ export default class ViewImageModal extends React.Component {
         var fileType = Utils.getFileType(fileInfo.ext);
 
         if (fileType === 'image') {
-            var self = this;
             var img = new Image();
             img.load(this.getPreviewImagePath(filename),
                 function load() {
-                    var progress = self.state.progress;
+                    var progress = this.state.progress;
                     progress[id] = img.completedPercentage;
-                    self.setState({progress: progress});
-                });
+                    this.setState({progress: progress});
+                }.bind(this));
             img.onload = (function onload(imgid) {
                 return function onloadReturn() {
-                    var loaded = self.state.loaded;
+                    var loaded = this.state.loaded;
                     loaded[imgid] = true;
-                    self.setState({loaded: loaded});
-                    $(self.refs.image.getDOMNode()).css('max-height', imgHeight);
-                };
-            }(id));
+                    this.setState({loaded: loaded});
+                    $(React.findDOMNode(this.refs.image)).css('max-height', imgHeight);
+                }.bind(this);
+            }.bind(this)(id));
             var images = this.state.images;
             images[id] = img;
             this.setState({images: images});
@@ -95,48 +94,47 @@ export default class ViewImageModal extends React.Component {
     componentDidUpdate() {
         if (this.state.loaded[this.state.imgId]) {
             if (this.refs.imageWrap) {
-                $(this.refs.imageWrap.getDOMNode()).removeClass('default');
+                $(React.findDOMNode(this.refs.imageWrap)).removeClass('default');
             }
         }
     }
     componentDidMount() {
-        var self = this;
         $('#' + this.props.modalId).on('shown.bs.modal', function onModalShow() {
-            self.setState({viewed: true});
-            self.loadImage(self.state.imgId);
-        });
+            this.setState({viewed: true});
+            this.loadImage(this.state.imgId);
+        }.bind(this));
 
-        $(this.refs.modal.getDOMNode()).click(function onModalClick(e) {
-            if (e.target === this || e.target === self.refs.imageBody.getDOMNode()) {
+        $(React.findDOMNode(this.refs.modal)).click(function onModalClick(e) {
+            if (e.target === this || e.target === React.findDOMNode(this.refs.imageBody)) {
                 $('.image_modal').modal('hide');
             }
-        });
+        }.bind(this));
 
-        $(this.refs.imageWrap.getDOMNode()).hover(
+        $(React.findDOMNode(this.refs.imageWrap)).hover(
             function onModalHover() {
-                $(self.refs.imageFooter.getDOMNode()).addClass('footer--show');
-            }, function offModalHover() {
-                $(self.refs.imageFooter.getDOMNode()).removeClass('footer--show');
-            }
+                $(React.findDOMNode(this.refs.imageFooter)).addClass('footer--show');
+            }.bind(this), function offModalHover() {
+                $(React.findDOMNode(this.refs.imageFooter)).removeClass('footer--show');
+            }.bind(this)
         );
 
         if (this.refs.previewArrowLeft) {
-            $(this.refs.previewArrowLeft.getDOMNode()).hover(
+            $(React.findDOMNode(this.refs.previewArrowLeft)).hover(
                 function onModalHover() {
-                    $(self.refs.imageFooter.getDOMNode()).addClass('footer--show');
-                }, function offModalHover() {
-                    $(self.refs.imageFooter.getDOMNode()).removeClass('footer--show');
-                }
+                    $(React.findDOMNode(this.refs.imageFooter)).addClass('footer--show');
+                }.bind(this), function offModalHover() {
+                    $(React.findDOMNode(this.refs.imageFooter)).removeClass('footer--show');
+                }.bind(this)
             );
         }
 
         if (this.refs.previewArrowRight) {
-            $(this.refs.previewArrowRight.getDOMNode()).hover(
+            $(React.findDOMNode(this.refs.previewArrowRight)).hover(
                 function onModalHover() {
-                    $(self.refs.imageFooter.getDOMNode()).addClass('footer--show');
-                }, function offModalHover() {
-                    $(self.refs.imageFooter.getDOMNode()).removeClass('footer--show');
-                }
+                    $(React.findDOMNode(this.refs.imageFooter)).addClass('footer--show');
+                }.bind(this), function offModalHover() {
+                    $(React.findDOMNode(this.refs.imageFooter)).removeClass('footer--show');
+                }.bind(this)
             );
         }
 
@@ -242,17 +240,15 @@ export default class ViewImageModal extends React.Component {
 
                 // asynchronously request the actual size of this file
                 if (!(filename in this.state.fileSizes)) {
-                    var self = this;
-
                     Client.getFileInfo(
                         filename,
                         function success(data) {
-                            if (self.canSetState) {
-                                var fileSizes = self.state.fileSizes;
+                            if (this.canSetState) {
+                                var fileSizes = this.state.fileSizes;
                                 fileSizes[filename] = parseInt(data.size, 10);
-                                self.setState(fileSizes);
+                                this.setState(fileSizes);
                             }
-                        },
+                        }.bind(this),
                         function fail() {}
                     );
                 }
-- 
cgit v1.2.3-1-g7c22