From 069f8513130dd6e717a153b85684cd63b6d32a0e Mon Sep 17 00:00:00 2001
From: nickago <ngonella@calpoly.edu>
Date: Mon, 31 Aug 2015 10:10:22 -0700
Subject: Cosmetic Refactoring

---
 web/react/components/edit_post_modal.jsx           | 145 +++++++++-------
 web/react/components/error_bar.jsx                 |  80 +++++----
 web/react/components/file_attachment.jsx           | 188 ++++++++++++---------
 web/react/components/file_attachment_list.jsx      |  56 +++---
 web/react/components/member_list_item.jsx          | 118 +++++++++----
 web/react/components/mention_list.jsx              | 140 ++++++++-------
 web/react/components/new_channel.jsx               | 119 ++++++++-----
 web/react/components/post.jsx                      | 120 +++++++++----
 web/react/components/search_bar.jsx                | 126 ++++++++------
 web/react/components/setting_item_max.jsx          |  67 ++++++--
 .../components/team_signup_display_name_page.jsx   |  68 +++++---
 web/react/components/user_settings_general.jsx     |  43 +++--
 12 files changed, 794 insertions(+), 476 deletions(-)

(limited to 'web/react/components')

diff --git a/web/react/components/edit_post_modal.jsx b/web/react/components/edit_post_modal.jsx
index 1c5a1ed5e..fef60c715 100644
--- a/web/react/components/edit_post_modal.jsx
+++ b/web/react/components/edit_post_modal.jsx
@@ -3,13 +3,21 @@
 
 var Client = require('../utils/client.jsx');
 var AsyncClient = require('../utils/async_client.jsx');
-var Constants = require('../utils/constants.jsx');
-var utils = require('../utils/utils.jsx');
 var Textbox = require('./textbox.jsx');
 var BrowserStore = require('../stores/browser_store.jsx');
 
-module.exports = React.createClass({
-    handleEdit: function(e) {
+export default class EditPostModal extends React.Component {
+    constructor() {
+        super();
+
+        this.handleEdit = this.handleEdit.bind(this);
+        this.handleEditInput = this.handleEditInput.bind(this);
+        this.handleEditKeyPress = this.handleEditKeyPress.bind(this);
+        this.handleUserInput = this.handleUserInput.bind(this);
+
+        this.state = {editText: '', title: '', post_id: '', channel_id: '', comments: 0, refocusId: ''};
+    }
+    handleEdit() {
         var updatedPost = {};
         updatedPost.message = this.state.editText.trim();
 
@@ -17,8 +25,8 @@ module.exports = React.createClass({
             var tempState = this.state;
             delete tempState.editText;
             BrowserStore.setItem('edit_state_transfer', tempState);
-            $("#edit_post").modal('hide');
-            $("#delete_post").modal('show');
+            $('#edit_post').modal('hide');
+            $('#delete_post').modal('show');
             return;
         }
 
@@ -26,79 +34,102 @@ module.exports = React.createClass({
         updatedPost.channel_id = this.state.channel_id;
 
         Client.updatePost(updatedPost,
-            function(data) {
+            function success() {
                 AsyncClient.getPosts(this.state.channel_id);
                 window.scrollTo(0, 0);
             }.bind(this),
-            function(err) {
-                AsyncClient.dispatchError(err, "updatePost");
-            }.bind(this)
+            function error(err) {
+                AsyncClient.dispatchError(err, 'updatePost');
+            }
         );
 
-        $("#edit_post").modal('hide');
+        $('#edit_post').modal('hide');
         $(this.state.refocusId).focus();
-    },
-    handleEditInput: function(editMessage) {
+    }
+    handleEditInput(editMessage) {
         this.setState({editText: editMessage});
-    },
-    handleEditKeyPress: function(e) {
-        if (e.which == 13 && !e.shiftKey && !e.altKey) {
+    }
+    handleEditKeyPress(e) {
+        if (e.which === 13 && !e.shiftKey && !e.altKey) {
             e.preventDefault();
-            this.refs.editbox.getDOMNode().blur();
+            React.findDOMNode(this.refs.editbox).blur();
             this.handleEdit(e);
         }
-    },
-    handleUserInput: function(e) {
-        this.setState({ editText: e.target.value });
-    },
-    componentDidMount: function() {
+    }
+    handleUserInput(e) {
+        this.setState({editText: e.target.value});
+    }
+    componentDidMount() {
         var self = this;
 
-        $(this.refs.modal.getDOMNode()).on('hidden.bs.modal', function(e) {
-            self.setState({editText: "", title: "", channel_id: "", post_id: "", comments: 0, refocusId: "", error: ''});
+        $(React.findDOMNode(this.refs.modal)).on('hidden.bs.modal', function onHidden() {
+            self.setState({editText: '', title: '', channel_id: '', post_id: '', comments: 0, refocusId: '', error: ''});
         });
 
-        $(this.refs.modal.getDOMNode()).on('show.bs.modal', function(e) {
+        $(React.findDOMNode(this.refs.modal)).on('show.bs.modal', function onShow(e) {
             var button = e.relatedTarget;
-            self.setState({ editText: $(button).attr('data-message'), title: $(button).attr('data-title'), channel_id: $(button).attr('data-channelid'), post_id: $(button).attr('data-postid'), comments: $(button).attr('data-comments'), refocusId: $(button).attr('data-refoucsid') });
+            self.setState({editText: $(button).attr('data-message'), title: $(button).attr('data-title'), channel_id: $(button).attr('data-channelid'), post_id: $(button).attr('data-postid'), comments: $(button).attr('data-comments'), refocusId: $(button).attr('data-refoucsid')});
         });
 
-        $(this.refs.modal.getDOMNode()).on('shown.bs.modal', function(e) {
+        $(React.findDOMNode(this.refs.modal)).on('shown.bs.modal', function onShown() {
             self.refs.editbox.resize();
         });
-    },
-    getInitialState: function() {
-        return { editText: "", title: "", post_id: "", channel_id: "", comments: 0, refocusId: "" };
-    },
-    render: function() {
-        var error = this.state.error ? <div className='form-group has-error'><br /><label className='control-label'>{ this.state.error }</label></div> : <div className='form-group'><br /></div>;
+    }
+    render() {
+        var error = (<div className='form-group'><br /></div>);
+        if (this.state.error) {
+            error = (<div className='form-group has-error'><br /><label className='control-label'>{this.state.error}</label></div>);
+        }
 
         return (
-            <div className="modal fade edit-modal" ref="modal" id="edit_post" role="dialog" tabIndex="-1" aria-hidden="true">
-              <div className="modal-dialog modal-push-down">
-                <div className="modal-content">
-                  <div className="modal-header">
-                    <button type="button" className="close" data-dismiss="modal" aria-label="Close" onClick={this.handleEditClose}><span aria-hidden="true">&times;</span></button>
-                    <h4 className="modal-title">Edit {this.state.title}</h4>
-                  </div>
-                  <div className="edit-modal-body modal-body">
-                    <Textbox
-                        onUserInput={this.handleEditInput}
-                        onKeyPress={this.handleEditKeyPress}
-                        messageText={this.state.editText}
-                        createMessage="Edit the post..."
-                        id="edit_textbox"
-                        ref="editbox"
-                    />
-                    { error }
-                  </div>
-                  <div className="modal-footer">
-                    <button type="button" className="btn btn-default" data-dismiss="modal">Cancel</button>
-                    <button type="button" className="btn btn-primary" onClick={this.handleEdit}>Save</button>
-                  </div>
+            <div
+                className='modal fade edit-modal'
+                ref='modal'
+                id='edit_post'
+                role='dialog'
+                tabIndex='-1'
+                aria-hidden='true' >
+                <div className='modal-dialog modal-push-down'>
+                    <div className='modal-content'>
+                        <div className='modal-header'>
+                            <button
+                                type='button'
+                                className='close'
+                                data-dismiss='modal'
+                                aria-label='Close'
+                                onClick={this.handleEditClose}>
+                                <span aria-hidden='true'>&times;</span>
+                            </button>
+                        <h4 className='modal-title'>Edit {this.state.title}</h4>
+                        </div>
+                        <div className='edit-modal-body modal-body'>
+                            <Textbox
+                                onUserInput={this.handleEditInput}
+                                onKeyPress={this.handleEditKeyPress}
+                                messageText={this.state.editText}
+                                createMessage='Edit the post...'
+                                id='edit_textbox'
+                                ref='editbox'
+                                />
+                            {error}
+                        </div>
+                        <div className='modal-footer'>
+                            <button
+                                type='button'
+                                className='btn btn-default'
+                                data-dismiss='modal' >
+                                Cancel
+                            </button>
+                            <button
+                                type='button'
+                                className='btn btn-primary'
+                                onClick={this.handleEdit}>
+                                Save
+                            </button>
+                        </div>
+                    </div>
                 </div>
-              </div>
             </div>
         );
     }
-});
+}
diff --git a/web/react/components/error_bar.jsx b/web/react/components/error_bar.jsx
index f7514a009..95f3e572c 100644
--- a/web/react/components/error_bar.jsx
+++ b/web/react/components/error_bar.jsx
@@ -7,32 +7,40 @@ var AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
 var Constants = require('../utils/constants.jsx');
 var ActionTypes = Constants.ActionTypes;
 
-function getStateFromStores() {
-    var error = ErrorStore.getLastError();
-    if (error && error.message !== "There appears to be a problem with your internet connection") {
-        return { message: error.message };
-    } else {
-        return { message: null };
-    }
-}
+export default class ErrorBar extends React.Component {
+    constructor() {
+        super();
 
-module.exports = React.createClass({
-    displayName: 'ErrorBar',
+        this.onErrorChange = this.onErrorChange.bind(this);
+        this.handleClose = this.handleClose.bind(this);
 
-    componentDidMount: function() {
-        ErrorStore.addChangeListener(this._onChange);
+        this.state = this.getStateFromStores();
+        if (this.state.message) {
+            setTimeout(this.handleClose, 10000);
+        }
+    }
+    getStateFromStores() {
+        var error = ErrorStore.getLastError();
+        if (!error || error.message === 'There appears to be a problem with your internet connection') {
+            return {message: null};
+        }
+
+        return {message: error.message};
+    }
+    componentDidMount() {
+        ErrorStore.addChangeListener(this.onErrorChange);
         $('body').css('padding-top', $(React.findDOMNode(this)).outerHeight());
-        $(window).resize(function() {
+        $(window).resize(function onResize() {
             if (this.state.message) {
                 $('body').css('padding-top', $(React.findDOMNode(this)).outerHeight());
             }
         }.bind(this));
-    },
-    componentWillUnmount: function() {
-        ErrorStore.removeChangeListener(this._onChange);
-    },
-    _onChange: function() {
-        var newState = getStateFromStores();
+    }
+    componentWillUnmount() {
+        ErrorStore.removeChangeListener(this.onErrorChange);
+    }
+    onErrorChange() {
+        var newState = this.getStateFromStores();
         if (!utils.areStatesEqual(newState, this.state)) {
             if (newState.message) {
                 setTimeout(this.handleClose, 10000);
@@ -40,9 +48,11 @@ module.exports = React.createClass({
 
             this.setState(newState);
         }
-    },
-    handleClose: function(e) {
-        if (e) e.preventDefault();
+    }
+    handleClose(e) {
+        if (e) {
+            e.preventDefault();
+        }
 
         AppDispatcher.handleServerAction({
             type: ActionTypes.RECIEVED_ERROR,
@@ -50,24 +60,22 @@ module.exports = React.createClass({
         });
 
         $('body').css('padding-top', '0');
-    },
-    getInitialState: function() {
-        var state = getStateFromStores();
-        if (state.message) {
-            setTimeout(this.handleClose, 10000);
-        }
-        return state;
-    },
-    render: function() {
+    }
+    render() {
         if (this.state.message) {
             return (
-                <div className="error-bar">
+                <div className='error-bar'>
                     <span>{this.state.message}</span>
-                    <a href="#" className="error-bar__close" onClick={this.handleClose}>&times;</a>
+                    <a
+                        href='#'
+                        className='error-bar__close'
+                        onClick={this.handleClose}>
+                        &times;
+                    </a>
                 </div>
             );
-        } else {
-            return <div/>;
         }
+
+        return <div/>;
     }
-});
\ No newline at end of file
+}
diff --git a/web/react/components/file_attachment.jsx b/web/react/components/file_attachment.jsx
index 45e6c5e28..d07afbc2b 100644
--- a/web/react/components/file_attachment.jsx
+++ b/web/react/components/file_attachment.jsx
@@ -5,31 +5,24 @@ var utils = require('../utils/utils.jsx');
 var Client = require('../utils/client.jsx');
 var Constants = require('../utils/constants.jsx');
 
-module.exports = React.createClass({
-    displayName: "FileAttachment",
-    canSetState: false,
-    propTypes: {
-        // a list of file pathes displayed by the parent FileAttachmentList
-        filename: React.PropTypes.string.isRequired,
-        // the index of this attachment preview in the parent FileAttachmentList
-        index: React.PropTypes.number.isRequired,
-        // the identifier of the modal dialog used to preview files
-        modalId: React.PropTypes.string.isRequired,
-        // handler for when the thumbnail is clicked
-        handleImageClick: React.PropTypes.func
-    },
-    getInitialState: function() {
-        return {fileSize: -1};
-    },
-    componentDidMount: function() {
+export default class FileAttachment extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.loadFiles = this.loadFiles.bind(this);
+
+        this.canSetState = false;
+        this.state = {fileSize: -1};
+    }
+    componentDidMount() {
         this.loadFiles();
-    },
-    componentDidUpdate: function(prevProps) {
+    }
+    componentDidUpdate(prevProps) {
         if (this.props.filename !== prevProps.filename) {
             this.loadFiles();
         }
-    },
-    loadFiles: function() {
+    }
+    loadFiles() {
         this.canSetState = true;
 
         var filename = this.props.filename;
@@ -39,91 +32,92 @@ module.exports = React.createClass({
             var type = utils.getFileType(fileInfo.ext);
 
             // This is a temporary patch to fix issue with old files using absolute paths
-            if (fileInfo.path.indexOf("/api/v1/files/get") != -1) {
-                fileInfo.path = fileInfo.path.split("/api/v1/files/get")[1];
+            if (fileInfo.path.indexOf('/api/v1/files/get') !== -1) {
+                fileInfo.path = fileInfo.path.split('/api/v1/files/get')[1];
             }
-            fileInfo.path = utils.getWindowLocationOrigin() + "/api/v1/files/get" + fileInfo.path;
-
-            if (type === "image") {
-                var self = this;
-                $('<img/>').attr('src', fileInfo.path+'_thumb.jpg').load(function(path, name){ return function() {
-                    $(this).remove();
-                    if (name in self.refs) {
-                        var imgDiv = self.refs[name].getDOMNode();
-
-                        $(imgDiv).removeClass('post__load');
-                        $(imgDiv).addClass('post__image');
-
-                        var width = this.width || $(this).width();
-                        var height = this.height || $(this).height();
-
-                        if (width < Constants.THUMBNAIL_WIDTH
-                                && height < Constants.THUMBNAIL_HEIGHT) {
-                            $(imgDiv).addClass('small');
-                        } else {
-                            $(imgDiv).addClass('normal');
+            fileInfo.path = utils.getWindowLocationOrigin() + '/api/v1/files/get' + fileInfo.path;
+
+            if (type === 'image') {
+                var self = this; // Need this reference since we use the given "this"
+                $('<img/>').attr('src', fileInfo.path + '_thumb.jpg').load(function loadWrapper(path, name) {
+                    return function loader() {
+                        $(this).remove();
+                        if (name in self.refs) {
+                            var imgDiv = React.findDOMNode(self.refs[name]);
+
+                            $(imgDiv).removeClass('post__load');
+                            $(imgDiv).addClass('post__image');
+
+                            var width = this.width || $(this).width();
+                            var height = this.height || $(this).height();
+
+                            if (width < Constants.THUMBNAIL_WIDTH &&
+                                height < Constants.THUMBNAIL_HEIGHT) {
+                                $(imgDiv).addClass('small');
+                            } else {
+                                $(imgDiv).addClass('normal');
+                            }
+
+                            var re1 = new RegExp(' ', 'g');
+                            var re2 = new RegExp('\\(', 'g');
+                            var re3 = new RegExp('\\)', 'g');
+                            var url = path.replace(re1, '%20').replace(re2, '%28').replace(re3, '%29');
+                            $(imgDiv).css('background-image', 'url(' + url + '_thumb.jpg)');
                         }
-
-                        var re1 = new RegExp(' ', 'g');
-                        var re2 = new RegExp('\\(', 'g');
-                        var re3 = new RegExp('\\)', 'g');
-                        var url = path.replace(re1, '%20').replace(re2, '%28').replace(re3, '%29');
-                        $(imgDiv).css('background-image', 'url('+url+'_thumb.jpg)');
-                    }
-                }}(fileInfo.path, filename));
+                    }; }(fileInfo.path, filename));
             }
         }
-    },
-    componentWillUnmount: function() {
+    }
+    componentWillUnmount() {
         // keep track of when this component is mounted so that we can asynchronously change state without worrying about whether or not we're mounted
         this.canSetState = false;
-    },
-    shouldComponentUpdate: function(nextProps, nextState) {
+    }
+    shouldComponentUpdate(nextProps, nextState) {
         if (!utils.areStatesEqual(nextProps, this.props)) {
             return true;
         }
 
         // the only time this object should update is when it receives an updated file size which we can usually handle without re-rendering
-        if (nextState.fileSize != this.state.fileSize) {
+        if (nextState.fileSize !== this.state.fileSize) {
             if (this.refs.fileSize) {
                 // update the UI element to display the file size without re-rendering the whole component
-                this.refs.fileSize.getDOMNode().innerHTML = utils.fileSizeToString(nextState.fileSize);
+                React.findDOMNode(this.refs.fileSize).innerHTML = utils.fileSizeToString(nextState.fileSize);
 
                 return false;
-            } else {
-                // we can't find the element that should hold the file size so we must not have rendered yet
-                return true;
             }
-        } else {
+
+            // we can't find the element that should hold the file size so we must not have rendered yet
             return true;
         }
-    },
-    render: function() {
+
+        return true;
+    }
+    render() {
         var filename = this.props.filename;
 
         var fileInfo = utils.splitFileLocation(filename);
         var type = utils.getFileType(fileInfo.ext);
 
         var thumbnail;
-        if (type === "image") {
-            thumbnail = <div ref={filename} className="post__load" style={{backgroundImage: 'url(/static/images/load.gif)'}}/>;
+        if (type === 'image') {
+            thumbnail = (<div
+                            ref={filename}
+                            className='post__load'
+                            style={{backgroundImage: 'url(/static/images/load.gif)'}} />);
         } else {
-            thumbnail = <div className={"file-icon "+utils.getIconClassName(type)}/>;
+            thumbnail = <div className={'file-icon ' + utils.getIconClassName(type)}/>;
         }
 
-        var fileSizeString = "";
+        var fileSizeString = '';
         if (this.state.fileSize < 0) {
-            var self = this;
-
             Client.getFileInfo(
                 filename,
-                function(data) {
-                    if (self.canSetState) {
-                        self.setState({fileSize: parseInt(data["size"], 10)});
+                function success(data) {
+                    if (this.canSetState) {
+                        this.setState({fileSize: parseInt(data.size, 10)});
                     }
-                },
-                function(err) {
-                }
+                }.bind(this),
+                function error() {}
             );
         } else {
             fileSizeString = utils.fileSizeToString(this.state.fileSize);
@@ -132,25 +126,51 @@ module.exports = React.createClass({
         var filenameString = decodeURIComponent(utils.getFileName(filename));
         var trimmedFilename;
         if (filenameString.length > 35) {
-            trimmedFilename = filenameString.substring(0, Math.min(35, filenameString.length)) + "...";
+            trimmedFilename = filenameString.substring(0, Math.min(35, filenameString.length)) + '...';
         } else {
             trimmedFilename = filenameString;
         }
 
         return (
-            <div className="post-image__column" key={filename}>
-                <a className="post-image__thumbnail" href="#" onClick={this.props.handleImageClick}
-                    data-img-id={this.props.index} data-toggle="modal" data-target={"#" + this.props.modalId }>
+            <div
+                className='post-image__column'
+                key={filename}>
+                <a className='post-image__thumbnail'
+                    href='#'
+                    onClick={this.props.handleImageClick}
+                    data-img-id={this.props.index}
+                    data-toggle='modal'
+                    data-target={'#' + this.props.modalId} >
                     {thumbnail}
                 </a>
-                <div className="post-image__details">
-                    <div data-toggle="tooltip" title={filenameString} className="post-image__name">{trimmedFilename}</div>
+                <div className='post-image__details'>
+                    <div
+                        data-toggle='tooltip'
+                        title={filenameString}
+                        className='post-image__name' >
+                        {trimmedFilename}
+                    </div>
                     <div>
-                        <span className="post-image__type">{fileInfo.ext.toUpperCase()}</span>
-                        <span className="post-image__size">{fileSizeString}</span>
+                        <span className='post-image__type'>{fileInfo.ext.toUpperCase()}</span>
+                        <span className='post-image__size'>{fileSizeString}</span>
                     </div>
                 </div>
             </div>
         );
     }
-});
+}
+
+FileAttachment.propTypes = {
+
+    // a list of file pathes displayed by the parent FileAttachmentList
+    filename: React.PropTypes.string.isRequired,
+
+    // the index of this attachment preview in the parent FileAttachmentList
+    index: React.PropTypes.number.isRequired,
+
+    // the identifier of the modal dialog used to preview files
+    modalId: React.PropTypes.string.isRequired,
+
+    // handler for when the thumbnail is clicked
+    handleImageClick: React.PropTypes.func
+};
diff --git a/web/react/components/file_attachment_list.jsx b/web/react/components/file_attachment_list.jsx
index df4424d03..33643de73 100644
--- a/web/react/components/file_attachment_list.jsx
+++ b/web/react/components/file_attachment_list.jsx
@@ -5,33 +5,30 @@ var ViewImageModal = require('./view_image.jsx');
 var FileAttachment = require('./file_attachment.jsx');
 var Constants = require('../utils/constants.jsx');
 
-module.exports = React.createClass({
-    displayName: "FileAttachmentList",
-    propTypes: {
-        // a list of file pathes displayed by this
-        filenames: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
-        // the identifier of the modal dialog used to preview files
-        modalId: React.PropTypes.string.isRequired,
-        // the channel that this is part of
-        channelId: React.PropTypes.string,
-        // the user that owns the post that this is attached to
-        userId: React.PropTypes.string
-    },
-    getInitialState: function() {
-        return {startImgId: 0};
-    },
-    render: function() {
+export default class FileAttachmentList extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {startImgId: 0};
+    }
+    render() {
         var filenames = this.props.filenames;
         var modalId = this.props.modalId;
 
         var postFiles = [];
         for (var i = 0; i < filenames.length && i < Constants.MAX_DISPLAY_FILES; i++) {
-            postFiles.push(<FileAttachment key={i} filename={filenames[i]} index={i} modalId={modalId} handleImageClick={this.handleImageClick} />);
+            postFiles.push(
+                <FileAttachment
+                    key={i}
+                    filename={filenames[i]}
+                    index={i}
+                    modalId={modalId}
+                    handleImageClick={this.handleImageClick} />
+            );
         }
 
         return (
             <div>
-                <div className="post-image__columns">
+                <div className='post-image__columns'>
                     {postFiles}
                 </div>
                 <ViewImageModal
@@ -42,8 +39,23 @@ module.exports = React.createClass({
                     filenames={filenames} />
             </div>
         );
-    },
-    handleImageClick: function(e) {
-        this.setState({startImgId: parseInt($(e.target.parentNode).attr('data-img-id'))});
     }
-});
+    handleImageClick(e) {
+        this.setState({startImgId: parseInt($(e.target.parentNode).attr('data-img-id'), 10)});
+    }
+}
+
+FileAttachmentList.propTypes = {
+
+    // a list of file pathes displayed by this
+    filenames: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
+
+    // the identifier of the modal dialog used to preview files
+    modalId: React.PropTypes.string.isRequired,
+
+    // the channel that this is part of
+    channelId: React.PropTypes.string,
+
+    // the user that owns the post that this is attached to
+    userId: React.PropTypes.string
+};
diff --git a/web/react/components/member_list_item.jsx b/web/react/components/member_list_item.jsx
index a5279909b..d244939f5 100644
--- a/web/react/components/member_list_item.jsx
+++ b/web/react/components/member_list_item.jsx
@@ -1,64 +1,116 @@
 // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-var ChannelStore = require('../stores/channel_store.jsx');
 var UserStore = require('../stores/user_store.jsx');
 
-module.exports = React.createClass({
-    displayName: 'MemberListItem',
-    handleInvite: function(e) {
+export default class MemberListItem extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.handleInvite = this.handleInvite.bind(this);
+        this.handleRemove = this.handleRemove.bind(this);
+        this.handleMakeAdmin = this.handleMakeAdmin.bind(this);
+    }
+    handleInvite(e) {
         e.preventDefault();
         this.props.handleInvite(this.props.member.id);
-    },
-    handleRemove: function(e) {
+    }
+    handleRemove(e) {
         e.preventDefault();
         this.props.handleRemove(this.props.member.id);
-    },
-    handleMakeAdmin: function(e) {
+    }
+    handleMakeAdmin(e) {
         e.preventDefault();
         this.props.handleMakeAdmin(this.props.member.id);
-    },
-    render: function() {
-
+    }
+    render() {
         var member = this.props.member;
         var isAdmin = this.props.isAdmin;
-        var isMemberAdmin = member.roles.indexOf("admin") > -1;
+        var isMemberAdmin = member.roles.indexOf('admin') > -1;
         var timestamp = UserStore.getCurrentUser().update_at;
 
         var invite;
         if (member.invited && this.props.handleInvite) {
-            invite = <span className="member-role">Added</span>;
+            invite = <span className='member-role'>Added</span>;
         } else if (this.props.handleInvite) {
-            invite = <a onClick={this.handleInvite} className="btn btn-sm btn-primary member-invite"><i className="glyphicon glyphicon-envelope"/>  Add</a>;
-        } else if (isAdmin && !isMemberAdmin && (member.id != UserStore.getCurrentId())) {
+            invite = (
+                    <a
+                        onClick={this.handleInvite}
+                        className='btn btn-sm btn-primary member-invite'>
+                        <i className='glyphicon glyphicon-envelope'/>  Add
+                    </a>
+            );
+        } else if (isAdmin && !isMemberAdmin && (member.id !== UserStore.getCurrentId())) {
             var self = this;
+
+            let makeAdminOption = null;
+            if (makeAdminOption) {
+                makeAdminOption = (
+                                    <li role='presentation'>
+                                        <a
+                                            href=''
+                                            role='menuitem'
+                                            onClick={self.handleMakeAdmin}>Make Admin
+                                        </a>
+                                    </li>);
+            }
+
+            let handleRemoveOption = null;
+            if (handleRemoveOption) {
+                handleRemoveOption = (
+                                        <li role='presentation'>
+                                            <a
+                                                href=''
+                                                role='menuitem'
+                                                onClick={self.handleRemove}>Remove Member
+                                            </a>
+                                        </li>);
+            }
+
             invite = (
-                        <div className="dropdown member-drop">
-                            <a href="#" className="dropdown-toggle theme" type="button" id="channel_header_dropdown" data-toggle="dropdown" aria-expanded="true">
-                                <span className="text-capitalize">{member.roles || 'Member'}  </span>
-                                <span className="caret"></span>
+                        <div className='dropdown member-drop'>
+                            <a
+                                href='#'
+                                className='dropdown-toggle theme'
+                                type='button'
+                                id='channel_header_dropdown'
+                                data-toggle='dropdown'
+                                aria-expanded='true' >
+                                <span className='text-capitalize'>{member.roles || 'Member'} </span>
+                                <span className='caret'></span>
                             </a>
-                            <ul className="dropdown-menu member-menu" role="menu" aria-labelledby="channel_header_dropdown">
-                                { this.props.handleMakeAdmin ?
-                                <li role="presentation"><a href="" role="menuitem" onClick={self.handleMakeAdmin}>Make Admin</a></li>
-                                : null }
-                                { this.props.handleRemove ?
-                                <li role="presentation"><a href="" role="menuitem" onClick={self.handleRemove}>Remove Member</a></li>
-                                : null }
+                            <ul
+                                className='dropdown-menu member-menu'
+                                role='menu'
+                                aria-labelledby='channel_header_dropdown'>
+                                {makeAdminOption}
+                                {handleRemoveOption}
                             </ul>
                         </div>
                     );
         } else {
-            invite = <div className="member-role text-capitalize">{member.roles || 'Member'}<span className="caret hidden"></span></div>;
+            invite = <div className='member-role text-capitalize'>{member.roles || 'Member'}<span className='caret hidden'></span></div>;
         }
 
         return (
-            <div className="row member-div">
-                <img className="post-profile-img pull-left" src={"/api/v1/users/" + member.id + "/image?time=" + timestamp} height="36" width="36" />
-                <span className="member-name">{member.username}</span>
-                <span className="member-email">{member.email}</span>
-                { invite }
+            <div className='row member-div'>
+                <img
+                    className='post-profile-img pull-left'
+                    src={'/api/v1/users/' + member.id + '/image?time=' + timestamp}
+                    height='36'
+                    width='36' />
+                <span className='member-name'>{member.username}</span>
+                <span className='member-email'>{member.email}</span>
+                {invite}
             </div>
         );
     }
-});
+}
+
+MemberListItem.propTypes = {
+    handleInvite: React.PropTypes.func,
+    handleRemove: React.PropTypes.func,
+    handleMakeAdmin: React.PropTypes.func,
+    member: React.PropTypes.object,
+    isAdmin: React.PropTypes.bool
+};
diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx
index f562cfb29..afea30161 100644
--- a/web/react/components/mention_list.jsx
+++ b/web/react/components/mention_list.jsx
@@ -14,54 +14,66 @@ var MAX_HEIGHT_LIST = 292;
 var MAX_ITEMS_IN_LIST = 25;
 var ITEM_HEIGHT = 36;
 
-module.exports = React.createClass({
-    displayName: 'MentionList',
-    componentDidMount: function() {
+export default class MentionList extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.onListenerChange = this.onListenerChange.bind(this);
+        this.handleClick = this.handleClick.bind(this);
+        this.handleMouseEnter = this.handleMouseEnter.bind(this);
+        this.getSelection = this.getSelection.bind(this);
+        this.addCurrentMention = this.addCurrentMention.bind(this);
+        this.addFirstMention = this.addFirstMention.bind(this);
+        this.isEmpty = this.isEmpty.bind(this);
+        this.scrollToMention = this.scrollToMention.bind(this);
+
+        this.state = {excludeUsers: [], mentionText: '-1', selectedMention: 0, selectedUsername: ''};
+    }
+    componentDidMount() {
         PostStore.addMentionDataChangeListener(this.onListenerChange);
-        var self = this;
 
-        $('.post-right__scroll').scroll(function(){
-            if($('.mentions--top').length){
-                $('#reply_mention_tab .mentions--top').css({ bottom: $(window).height() - $('.post-right__scroll #reply_textbox').offset().top });
+        $('.post-right__scroll').scroll(function onScroll() {
+            if ($('.mentions--top').length) {
+                $('#reply_mention_tab .mentions--top').css({bottom: $(window).height() - $('.post-right__scroll #reply_textbox').offset().top});
             }
         });
 
         $('body').on('keydown.mentionlist', '#' + this.props.id,
-            function(e) {
-                if (!self.isEmpty() && self.state.mentionText !== '-1' && (e.which === 13 || e.which === 9)) {
+            function onMentionListKey(e) {
+                if (!this.isEmpty() && this.state.mentionText !== '-1' && (e.which === 13 || e.which === 9)) {
                     e.stopPropagation();
                     e.preventDefault();
-                    self.addCurrentMention();
-                } else if (!self.isEmpty() && self.state.mentionText !== '-1' && (e.which === 38 || e.which === 40)) {
+                    this.addCurrentMention();
+                } else if (!this.isEmpty() && this.state.mentionText !== '-1' && (e.which === 38 || e.which === 40)) {
                     e.stopPropagation();
                     e.preventDefault();
 
                     if (e.which === 38) {
-                        if (self.getSelection(self.state.selectedMention - 1)) {
-                            self.setState({selectedMention: self.state.selectedMention - 1, selectedUsername: self.refs['mention' + (self.state.selectedMention - 1)].props.username});
+                        if (this.getSelection(this.state.selectedMention - 1)) {
+                            this.setState({selectedMention: this.state.selectedMention - 1, selectedUsername: this.refs['mention' + (this.state.selectedMention - 1)].props.username});
                         }
                     } else if (e.which === 40) {
-                        if (self.getSelection(self.state.selectedMention + 1)) {
-                            self.setState({selectedMention: self.state.selectedMention + 1, selectedUsername: self.refs['mention' + (self.state.selectedMention + 1)].props.username});
+                        if (this.getSelection(this.state.selectedMention + 1)) {
+                            this.setState({selectedMention: this.state.selectedMention + 1, selectedUsername: this.refs['mention' + (this.state.selectedMention + 1)].props.username});
                         }
                     }
 
-                    self.scrollToMention(e.which);
+                    this.scrollToMention(e.which);
                 }
-            }
+            }.bind(this)
         );
-        $(document).click(function(e) {
-            if (!($('#' + self.props.id).is(e.target) || $('#' + self.props.id).has(e.target).length ||
-                ('mentionlist' in self.refs && $(self.refs.mentionlist.getDOMNode()).has(e.target).length))) {
-                self.setState({mentionText: '-1'});
+        $(document).click(function onClick(e) {
+            if (!($('#' + this.props.id).is(e.target) || $('#' + this.props.id).has(e.target).length ||
+                ('mentionlist' in this.refs && $(React.findDOMNode(this.refs.mentionlist)).has(e.target).length))) {
+                this.setState({mentionText: '-1'});
             }
-        });
-    },
-    componentWillUnmount: function() {
+        }.bind(this));
+    }
+    componentWillUnmount() {
         PostStore.removeMentionDataChangeListener(this.onListenerChange);
         $('body').off('keydown.mentionlist', '#' + this.props.id);
-    },
-    componentDidUpdate: function() {
+    }
+    componentDidUpdate() {
         if (this.state.mentionText !== '-1') {
             if (this.state.selectedUsername !== '' && (!this.getSelection(this.state.selectedMention) || this.state.selectedUsername !== this.refs['mention' + this.state.selectedMention].props.username)) {
                 var tempSelectedMention = -1;
@@ -80,8 +92,8 @@ module.exports = React.createClass({
         } else if (this.state.selectedMention !== 0) {
             this.setState({selectedMention: 0, selectedUsername: ''});
         }
-    },
-    onListenerChange: function(id, mentionText) {
+    }
+    onListenerChange(id, mentionText) {
         if (id !== this.props.id) {
             return;
         }
@@ -92,8 +104,8 @@ module.exports = React.createClass({
         }
 
         this.setState(newState);
-    },
-    handleClick: function(name) {
+    }
+    handleClick(name) {
         AppDispatcher.handleViewAction({
             type: ActionTypes.RECIEVED_ADD_MENTION,
             id: this.props.id,
@@ -101,33 +113,33 @@ module.exports = React.createClass({
         });
 
         this.setState({mentionText: '-1'});
-    },
-    handleMouseEnter: function(listId) {
+    }
+    handleMouseEnter(listId) {
         this.setState({selectedMention: listId, selectedUsername: this.refs['mention' + listId].props.username});
-    },
-    getSelection: function(listId) {
+    }
+    getSelection(listId) {
         if (!this.refs['mention' + listId]) {
             return false;
         }
         return true;
-    },
-    addCurrentMention: function() {
+    }
+    addCurrentMention() {
         if (!this.getSelection(this.state.selectedMention)) {
             this.addFirstMention();
         } else {
             this.refs['mention' + this.state.selectedMention].handleClick();
         }
-    },
-    addFirstMention: function() {
+    }
+    addFirstMention() {
         if (!this.refs.mention0) {
             return;
         }
         this.refs.mention0.handleClick();
-    },
-    isEmpty: function() {
+    }
+    isEmpty() {
         return (!this.refs.mention0);
-    },
-    scrollToMention: function(keyPressed) {
+    }
+    scrollToMention(keyPressed) {
         var direction;
         if (keyPressed === 38) {
             direction = 'up';
@@ -145,12 +157,8 @@ module.exports = React.createClass({
         $('#mentionsbox').animate({
             scrollTop: scrollAmount
         }, 75);
-    },
-    getInitialState: function() {
-        return {excludeUsers: [], mentionText: '-1', selectedMention: 0, selectedUsername: ''};
-    },
-    render: function() {
-        var self = this;
+    }
+    render() {
         var mentionText = this.state.mentionText;
         if (mentionText === '-1') {
             return null;
@@ -158,8 +166,10 @@ module.exports = React.createClass({
 
         var profiles = UserStore.getActiveOnlyProfiles();
         var users = [];
-        for (var id in profiles) {
-            users.push(profiles[id]);
+        for (let id in profiles) {
+            if (profiles[id]) {
+                users.push(profiles[id]);
+            }
         }
 
         var all = {};
@@ -176,7 +186,7 @@ module.exports = React.createClass({
         channel.id = 'channelmention';
         users.push(channel);
 
-        users.sort(function(a, b) {
+        users.sort(function sortByUsername(a, b) {
             if (a.username < b.username) {
                 return -1;
             }
@@ -185,29 +195,34 @@ module.exports = React.createClass({
             }
             return 0;
         });
-        var mentions = {};
+        var mentions = [];
         var index = 0;
 
         for (var i = 0; i < users.length && index < MAX_ITEMS_IN_LIST; i++) {
             if ((users[i].first_name && users[i].first_name.lastIndexOf(mentionText, 0) === 0) ||
                     (users[i].last_name && users[i].last_name.lastIndexOf(mentionText, 0) === 0) ||
                     users[i].username.lastIndexOf(mentionText, 0) === 0) {
+                let isFocused = '';
+                if (this.state.selectedMention === index) {
+                    isFocused = 'mentions-focus';
+                }
                 mentions[index] = (
                     <Mention
+                        key={'mention_key_' + index}
                         ref={'mention' + index}
                         username={users[i].username}
                         secondary_text={Utils.getFullName(users[i])}
                         id={users[i].id}
                         listId={index}
-                        isFocused={this.state.selectedMention === index ? 'mentions-focus' : ''}
-                        handleMouseEnter={function(value) { return function() { self.handleMouseEnter(value); } }(index)}
+                        isFocused={isFocused}
+                        handleMouseEnter={this.handleMouseEnter.bind(this, index)}
                         handleClick={this.handleClick} />
                 );
                 index++;
             }
         }
 
-        var numMentions = Object.keys(mentions).length;
+        var numMentions = mentions.length;
 
         if (numMentions < 1) {
             return null;
@@ -223,11 +238,20 @@ module.exports = React.createClass({
         };
 
         return (
-            <div className='mentions--top' style={style}>
-                <div ref='mentionlist' className='mentions-box' id='mentionsbox'>
+            <div
+                className='mentions--top'
+                style={style}>
+                <div
+                    ref='mentionlist'
+                    className='mentions-box'
+                    id='mentionsbox'>
                     {mentions}
                 </div>
             </div>
         );
     }
-});
+}
+
+MentionList.propTypes = {
+    id: React.PropTypes.string
+};
diff --git a/web/react/components/new_channel.jsx b/web/react/components/new_channel.jsx
index fc24a7cdc..a02a4c1c0 100644
--- a/web/react/components/new_channel.jsx
+++ b/web/react/components/new_channel.jsx
@@ -5,17 +5,24 @@ var utils = require('../utils/utils.jsx');
 var client = require('../utils/client.jsx');
 var asyncClient = require('../utils/async_client.jsx');
 var UserStore = require('../stores/user_store.jsx');
-var TeamStore = require('../stores/team_store.jsx');
 
-module.exports = React.createClass({
-    displayName: 'NewChannelModal',
-    handleSubmit: function(e) {
+export default class NewChannelModal extends React.Component {
+    constructor() {
+        super();
+
+        this.handleSubmit = this.handleSubmit.bind(this);
+        this.displayNameKeyUp = this.displayNameKeyUp.bind(this);
+        this.handleClose = this.handleClose.bind(this);
+
+        this.state = {channelType: ''};
+    }
+    handleSubmit(e) {
         e.preventDefault();
 
         var channel = {};
         var state = {serverError: ''};
 
-        channel.display_name = this.refs.display_name.getDOMNode().value.trim();
+        channel.display_name = React.findDOMNode(this.refs.display_name).value.trim();
         if (!channel.display_name) {
             state.displayNameError = 'This field is required';
             state.inValid = true;
@@ -26,7 +33,7 @@ module.exports = React.createClass({
             state.displayNameError = '';
         }
 
-        channel.name = this.refs.channel_name.getDOMNode().value.trim();
+        channel.name = React.findDOMNode(this.refs.channel_name).value.trim();
         if (!channel.name) {
             state.nameError = 'This field is required';
             state.inValid = true;
@@ -52,54 +59,51 @@ module.exports = React.createClass({
         var cu = UserStore.getCurrentUser();
         channel.team_id = cu.team_id;
 
-        channel.description = this.refs.channel_desc.getDOMNode().value.trim();
+        channel.description = React.findDOMNode(this.refs.channel_desc).value.trim();
         channel.type = this.state.channelType;
 
         client.createChannel(channel,
-            function(data) {
-                $(this.refs.modal.getDOMNode()).modal('hide');
+            function success(data) {
+                $(React.findDOMNode(this.refs.modal)).modal('hide');
 
                 asyncClient.getChannel(data.id);
                 utils.switchChannel(data);
 
-                this.refs.display_name.getDOMNode().value = '';
-                this.refs.channel_name.getDOMNode().value = '';
-                this.refs.channel_desc.getDOMNode().value = '';
+                React.findDOMNode(this.refs.display_name).value = '';
+                React.findDOMNode(this.refs.channel_name).value = '';
+                React.findDOMNode(this.refs.channel_desc).value = '';
             }.bind(this),
-            function(err) {
+            function error(err) {
                 state.serverError = err.message;
                 state.inValid = true;
                 this.setState(state);
             }.bind(this)
         );
-    },
-    displayNameKeyUp: function() {
-        var displayName = this.refs.display_name.getDOMNode().value.trim();
+    }
+    displayNameKeyUp() {
+        var displayName = React.findDOMNode(this.refs.display_name).value.trim();
         var channelName = utils.cleanUpUrlable(displayName);
-        this.refs.channel_name.getDOMNode().value = channelName;
-    },
-    componentDidMount: function() {
+        React.findDOMNode(this.refs.channel_name).value = channelName;
+    }
+    componentDidMount() {
         var self = this;
-        $(this.refs.modal.getDOMNode()).on('show.bs.modal', function(e) {
+        $(React.findDOMNode(this.refs.modal)).on('show.bs.modal', function onModalShow(e) {
             var button = e.relatedTarget;
             self.setState({channelType: $(button).attr('data-channeltype')});
         });
-        $(this.refs.modal.getDOMNode()).on('hidden.bs.modal', this.handleClose);
-    },
-    componentWillUnmount: function() {
-        $(this.refs.modal.getDOMNode()).off('hidden.bs.modal', this.handleClose);
-    },
-    handleClose: function() {
-        $(this.getDOMNode()).find('.form-control').each(function clearForms() {
+        $(React.findDOMNode(this.refs.modal)).on('hidden.bs.modal', this.handleClose);
+    }
+    componentWillUnmount() {
+        $(React.findDOMNode(this.refs.modal)).off('hidden.bs.modal', this.handleClose);
+    }
+    handleClose() {
+        $(React.findDOMNode(this)).find('.form-control').each(function clearForms() {
             this.value = '';
         });
 
         this.setState({channelType: '', displayNameError: '', nameError: '', serverError: '', inValid: false});
-    },
-    getInitialState: function() {
-        return {channelType: ''};
-    },
-    render: function() {
+    }
+    render() {
         var displayNameError = null;
         var nameError = null;
         var serverError = null;
@@ -124,11 +128,20 @@ module.exports = React.createClass({
         }
 
         return (
-            <div className='modal fade' id='new_channel' ref='modal' tabIndex='-1' role='dialog' aria-hidden='true'>
+            <div
+                className='modal fade'
+                id='new_channel'
+                ref='modal'
+                tabIndex='-1'
+                role='dialog'
+                aria-hidden='true'>
                 <div className='modal-dialog'>
                     <div className='modal-content'>
                         <div className='modal-header'>
-                            <button type='button' className='close' data-dismiss='modal'>
+                            <button
+                                type='button'
+                                className='close'
+                                data-dismiss='modal'>
                                 <span aria-hidden='true'>&times;</span>
                                 <span className='sr-only'>Cancel</span>
                             </button>
@@ -138,23 +151,49 @@ module.exports = React.createClass({
                             <div className='modal-body'>
                                 <div className={displayNameClass}>
                                     <label className='control-label'>Display Name</label>
-                                    <input onKeyUp={this.displayNameKeyUp} type='text' ref='display_name' className='form-control' placeholder='Enter display name' maxLength='22' />
+                                    <input
+                                        onKeyUp={this.displayNameKeyUp}
+                                        type='text'
+                                        ref='display_name'
+                                        className='form-control'
+                                        placeholder='Enter display name'
+                                        maxLength='22' />
                                     {displayNameError}
                                 </div>
                                 <div className={nameClass}>
                                     <label className='control-label'>Handle</label>
-                                    <input type='text' className='form-control' ref='channel_name' placeholder="lowercase alphanumeric's only" maxLength='22' />
+                                    <input
+                                        type='text'
+                                        className='form-control'
+                                        ref='channel_name'
+                                        placeholder="lowercase alphanumeric's only"
+                                        maxLength='22' />
                                     {nameError}
                                 </div>
                                 <div className='form-group'>
                                     <label className='control-label'>Description</label>
-                                    <textarea className='form-control no-resize' ref='channel_desc' rows='3' placeholder='Description' maxLength='1024'></textarea>
+                                    <textarea
+                                        className='form-control no-resize'
+                                        ref='channel_desc'
+                                        rows='3'
+                                        placeholder='Description'
+                                        maxLength='1024' />
                                 </div>
                                 {serverError}
                             </div>
                             <div className='modal-footer'>
-                                <button type='button' className='btn btn-default' data-dismiss='modal'>Cancel</button>
-                                <button onClick={this.handleSubmit} type='submit' className='btn btn-primary'>Create New {channelTerm}</button>
+                                <button
+                                    type='button'
+                                    className='btn btn-default'
+                                    data-dismiss='modal' >
+                                    Cancel
+                                </button>
+                                <button
+                                    onClick={this.handleSubmit}
+                                    type='submit'
+                                    className='btn btn-primary' >
+                                    Create New {channelTerm}
+                                </button>
                             </div>
                         </form>
                     </div>
@@ -162,4 +201,4 @@ module.exports = React.createClass({
             </div>
         );
     }
-});
+}
diff --git a/web/react/components/post.jsx b/web/react/components/post.jsx
index acc2b51d2..e284f4b6a 100644
--- a/web/react/components/post.jsx
+++ b/web/react/components/post.jsx
@@ -15,9 +15,17 @@ var utils = require('../utils/utils.jsx');
 
 var PostInfo = require('./post_info.jsx');
 
-module.exports = React.createClass({
-    displayName: 'Post',
-    handleCommentClick: function(e) {
+export default class Post extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.handleCommentClick = this.handleCommentClick.bind(this);
+        this.forceUpdateInfo = this.forceUpdateInfo.bind(this);
+        this.retryPost = this.retryPost.bind(this);
+
+        this.state = {};
+    }
+    handleCommentClick(e) {
         e.preventDefault();
 
         var data = {};
@@ -33,31 +41,31 @@ module.exports = React.createClass({
             type: ActionTypes.RECIEVED_SEARCH,
             results: null
         });
-    },
-    forceUpdateInfo: function() {
+    }
+    forceUpdateInfo() {
         this.refs.info.forceUpdate();
         this.refs.header.forceUpdate();
-    },
-    retryPost: function(e) {
+    }
+    retryPost(e) {
         e.preventDefault();
 
         var post = this.props.post;
         client.createPost(post, post.channel_id,
-            function(data) {
+            function success(data) {
                 AsyncClient.getPosts();
 
                 var channel = ChannelStore.get(post.channel_id);
                 var member = ChannelStore.getMember(post.channel_id);
                 member.msg_count = channel.total_msg_count;
-                member.last_viewed_at = (new Date).getTime();
+                member.last_viewed_at = utils.getTimestamp();
                 ChannelStore.setChannelMember(member);
 
                 AppDispatcher.handleServerAction({
                     type: ActionTypes.RECIEVED_POST,
                     post: data
                 });
-            }.bind(this),
-            function(err) {
+            },
+            function error() {
                 post.state = Constants.POST_FAILED;
                 PostStore.updatePendingPost(post);
                 this.forceUpdate();
@@ -67,18 +75,15 @@ module.exports = React.createClass({
         post.state = Constants.POST_LOADING;
         PostStore.updatePendingPost(post);
         this.forceUpdate();
-    },
-    shouldComponentUpdate: function(nextProps) {
+    }
+    shouldComponentUpdate(nextProps) {
         if (!utils.areStatesEqual(nextProps.post, this.props.post)) {
             return true;
         }
 
         return false;
-    },
-    getInitialState: function() {
-        return { };
-    },
-    render: function() {
+    }
+    render() {
         var post = this.props.post;
         var parentPost = this.props.parentPost;
         var posts = this.props.posts;
@@ -89,19 +94,27 @@ module.exports = React.createClass({
         }
 
         var commentCount = 0;
-        var commentRootId = parentPost ? post.root_id : post.id;
+        var commentRootId;
+        if (parentPost) {
+            commentRootId = post.root_id;
+        } else {
+            commentRootId = post.id;
+        }
         for (var postId in posts) {
-            if (posts[postId].root_id == commentRootId) {
+            if (posts[postId].root_id === commentRootId) {
                 commentCount += 1;
             }
         }
 
-        var error = this.state.error ? <div className='form-group has-error'><label className='control-label'>{ this.state.error }</label></div> : null;
-
-        var rootUser =  this.props.sameRoot ? 'same--root' : 'other--root';
+        var rootUser;
+        if (this.props.sameRoot) {
+            rootUser = 'same--root';
+        } else {
+            rootUser = 'other--root';
+        }
 
         var postType = '';
-        if (type != 'Post'){
+        if (type !== 'Post') {
             postType = 'post--comment';
         }
 
@@ -122,21 +135,60 @@ module.exports = React.createClass({
             sameUserClass = 'same--user';
         }
 
+        var profilePic = null;
+        if (this.props.hideProfilePic) {
+            profilePic = (
+                <div className='post-profile-img__container'>
+                    <img
+                        className='post-profile-img'
+                        src={'/api/v1/users/' + post.user_id + '/image?time=' + timestamp}
+                        height='36'
+                        width='36' />
+                </div>
+            );
+        }
+
         return (
             <div>
-                <div id={post.id} className={'post ' + sameUserClass + ' ' + rootUser + ' ' + postType + ' ' + currentUserCss}>
-                    { !this.props.hideProfilePic ?
-                    <div className='post-profile-img__container'>
-                        <img className='post-profile-img' src={'/api/v1/users/' + post.user_id + '/image?time=' + timestamp} height='36' width='36' />
-                    </div>
-                    : null }
+                <div
+                    id={post.id}
+                    className={'post ' + sameUserClass + ' ' + rootUser + ' ' + postType + ' ' + currentUserCss} >
+                    {profilePic}
                     <div className='post__content'>
-                        <PostHeader ref='header' post={post} sameRoot={this.props.sameRoot} commentCount={commentCount} handleCommentClick={this.handleCommentClick} isLastComment={this.props.isLastComment} />
-                        <PostBody post={post} sameRoot={this.props.sameRoot} parentPost={parentPost} posts={posts} handleCommentClick={this.handleCommentClick} retryPost={this.retryPost} />
-                        <PostInfo ref='info' post={post} sameRoot={this.props.sameRoot} commentCount={commentCount} handleCommentClick={this.handleCommentClick} allowReply='true' />
+                        <PostHeader
+                            ref='header'
+                            post={post}
+                            sameRoot={this.props.sameRoot}
+                            commentCount={commentCount}
+                            handleCommentClick={this.handleCommentClick}
+                            isLastComment={this.props.isLastComment} />
+                        <PostBody
+                            post={post}
+                            sameRoot={this.props.sameRoot}
+                            parentPost={parentPost}
+                            posts={posts}
+                            handleCommentClick={this.handleCommentClick}
+                            retryPost={this.retryPost} />
+                        <PostInfo
+                            ref='info'
+                            post={post}
+                            sameRoot={this.props.sameRoot}
+                            commentCount={commentCount}
+                            handleCommentClick={this.handleCommentClick}
+                            allowReply='true' />
                     </div>
                 </div>
             </div>
         );
     }
-});
+}
+
+Post.propTypes = {
+    post: React.PropTypes.object,
+    posts: React.PropTypes.object,
+    parentPost: React.PropTypes.object,
+    sameUser: React.PropTypes.bool,
+    sameRoot: React.PropTypes.bool,
+    hideProfilePic: React.PropTypes.bool,
+    isLastComment: React.PropTypes.bool
+};
diff --git a/web/react/components/search_bar.jsx b/web/react/components/search_bar.jsx
index b11b39e9e..8da8231a2 100644
--- a/web/react/components/search_bar.jsx
+++ b/web/react/components/search_bar.jsx
@@ -1,7 +1,6 @@
 // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-
 var client = require('../utils/client.jsx');
 var AsyncClient = require('../utils/async_client.jsx');
 var PostStore = require('../stores/post_store.jsx');
@@ -10,36 +9,47 @@ var utils = require('../utils/utils.jsx');
 var Constants = require('../utils/constants.jsx');
 var ActionTypes = Constants.ActionTypes;
 
-function getSearchTermStateFromStores() {
-    var term = PostStore.getSearchTerm() || '';
-    return {
-        search_term: term
-    };
-}
+export default class SearchBar extends React.Component {
+    constructor() {
+        super();
+        this.mounted = false;
 
-module.exports = React.createClass({
-    displayName: 'SearchBar',
-    componentDidMount: function() {
-        PostStore.addSearchTermChangeListener(this._onChange);
-    },
-    componentWillUnmount: function() {
-        PostStore.removeSearchTermChangeListener(this._onChange);
-    },
-    _onChange: function(doSearch, isMentionSearch) {
-        if (this.isMounted()) {
-            var newState = getSearchTermStateFromStores();
+        this.onListenerChange = this.onListenerChange.bind(this);
+        this.handleUserInput = this.handleUserInput.bind(this);
+        this.performSearch = this.performSearch.bind(this);
+        this.handleSubmit = this.handleSubmit.bind(this);
+
+        this.state = this.getSearchTermStateFromStores();
+    }
+    getSearchTermStateFromStores() {
+        var term = PostStore.getSearchTerm() || '';
+        return {
+            searchTerm: term
+        };
+    }
+    componentDidMount() {
+        PostStore.addSearchTermChangeListener(this.onListenerChange);
+        this.mounted = true;
+    }
+    componentWillUnmount() {
+        PostStore.removeSearchTermChangeListener(this.onListenerChange);
+        this.mounted = false;
+    }
+    onListenerChange(doSearch, isMentionSearch) {
+        if (this.mounted) {
+            var newState = this.getSearchTermStateFromStores();
             if (!utils.areStatesEqual(newState, this.state)) {
                 this.setState(newState);
             }
             if (doSearch) {
-                this.performSearch(newState.search_term, isMentionSearch);
+                this.performSearch(newState.searchTerm, isMentionSearch);
             }
         }
-    },
-    clearFocus: function(e) {
+    }
+    clearFocus() {
         $('.search-bar__container').removeClass('focused');
-    },
-    handleClose: function(e) {
+    }
+    handleClose(e) {
         e.preventDefault();
 
         AppDispatcher.handleServerAction({
@@ -58,23 +68,23 @@ module.exports = React.createClass({
             type: ActionTypes.RECIEVED_POST_SELECTED,
             results: null
         });
-    },
-    handleUserInput: function(e) {
+    }
+    handleUserInput(e) {
         var term = e.target.value;
         PostStore.storeSearchTerm(term);
         PostStore.emitSearchTermChange(false);
-        this.setState({ search_term: term });
-    },
-    handleUserFocus: function(e) {
+        this.setState({searchTerm: term});
+    }
+    handleUserFocus(e) {
         e.target.select();
         $('.search-bar__container').addClass('focused');
-    },
-    performSearch: function(terms, isMentionSearch) {
+    }
+    performSearch(terms, isMentionSearch) {
         if (terms.length) {
             this.setState({isSearching: true});
             client.search(
                 terms,
-                function(data) {
+                function success(data) {
                     this.setState({isSearching: false});
                     if (utils.isMobile()) {
                         React.findDOMNode(this.refs.search).value = '';
@@ -86,38 +96,50 @@ module.exports = React.createClass({
                         is_mention_search: isMentionSearch
                     });
                 }.bind(this),
-                function(err) {
+                function error(err) {
                     this.setState({isSearching: false});
-                    AsyncClient.dispatchError(err, "search");
+                    AsyncClient.dispatchError(err, 'search');
                 }.bind(this)
             );
         }
-    },
-    handleSubmit: function(e) {
+    }
+    handleSubmit(e) {
         e.preventDefault();
-        this.performSearch(this.state.search_term.trim());
-    },
-    getInitialState: function() {
-        return getSearchTermStateFromStores();
-    },
-    render: function() {
+        this.performSearch(this.state.searchTerm.trim());
+    }
+    render() {
+        var isSearching = null;
+        if (this.state.isSearching) {
+            isSearching = <span className={'glyphicon glyphicon-refresh glyphicon-refresh-animate'}></span>;
+        }
         return (
             <div>
-                <div className="sidebar__collapse" onClick={this.handleClose}><span className="fa fa-angle-left"></span></div>
-                <span onClick={this.clearFocus} className="search__clear">Cancel</span>
-                <form role="form" className="search__form relative-div" onSubmit={this.handleSubmit}>
-                    <span className="glyphicon glyphicon-search sidebar__search-icon"></span>
+                <div
+                    className='sidebar__collapse'
+                    onClick={this.handleClose} >
+                    <span className='fa fa-angle-left'></span>
+                </div>
+                <span
+                    className='search__clear'
+                    onClick={this.clearFocus}>
+                    Cancel
+                </span>
+                <form
+                    role='form'
+                    className='search__form relative-div'
+                    onSubmit={this.handleSubmit}>
+                    <span className='glyphicon glyphicon-search sidebar__search-icon'></span>
                     <input
-                        type="text"
-                        ref="search"
-                        className="form-control search-bar"
-                        placeholder="Search"
-                        value={this.state.search_term}
+                        type='text'
+                        ref='search'
+                        className='form-control search-bar'
+                        placeholder='Search'
+                        value={this.state.searchTerm}
                         onFocus={this.handleUserFocus}
                         onChange={this.handleUserInput} />
-                    {this.state.isSearching ? <span className={"glyphicon glyphicon-refresh glyphicon-refresh-animate"}></span> : null}
+                    {isSearching}
                 </form>
             </div>
         );
     }
-});
+}
diff --git a/web/react/components/setting_item_max.jsx b/web/react/components/setting_item_max.jsx
index b978cdb0c..e67e458af 100644
--- a/web/react/components/setting_item_max.jsx
+++ b/web/react/components/setting_item_max.jsx
@@ -1,33 +1,68 @@
 // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-module.exports = React.createClass({
-    render: function() {
-        var clientError = this.props.client_error ? <div className='form-group'><label className='col-sm-12 has-error'>{ this.props.client_error }</label></div> : null;
-        var server_error = this.props.server_error ? <div className='form-group'><label className='col-sm-12 has-error'>{ this.props.server_error }</label></div> : null;
-        var extraInfo = this.props.extraInfo ? this.props.extraInfo : null;
+export default class SettingItemMax extends React.Component {
+    render() {
+        var clientError = null;
+        if (this.props.client_error) {
+            clientError = (<div className='form-group'><label className='col-sm-12 has-error'>{this.props.client_error}</label></div>);
+        }
+
+        var serverError = null;
+        if (this.props.server_error) {
+            serverError = (<div className='form-group'><label className='col-sm-12 has-error'>{this.props.server_error}</label></div>);
+        }
+
+        var extraInfo = null;
+        if (this.props.extraInfo) {
+            extraInfo = this.props.extraInfo;
+        }
+
+        var submit = '';
+        if (this.props.submit) {
+            submit = (<a
+                        className='btn btn-sm btn-primary'
+                        href='#'
+                        onClick={this.props.submit}>
+                        Submit</a>);
+        }
 
         var inputs = this.props.inputs;
 
         return (
-            <ul className="section-max form-horizontal">
-                <li className="col-sm-12 section-title">{this.props.title}</li>
-                <li className="col-sm-9 col-sm-offset-3">
-                    <ul className="setting-list">
-                        <li className="setting-list-item">
+            <ul className='section-max form-horizontal'>
+                <li className='col-sm-12 section-title'>{this.props.title}</li>
+                <li className='col-sm-9 col-sm-offset-3'>
+                    <ul className='setting-list'>
+                        <li className='setting-list-item'>
                             {inputs}
                             {extraInfo}
                         </li>
-                        <li className="setting-list-item">
+                        <li className='setting-list-item'>
                             <hr />
-                            { server_error }
-                            { clientError }
-                            { this.props.submit ? <a className="btn btn-sm btn-primary" href="#" onClick={this.props.submit}>Submit</a> : "" }
-                            <a className="btn btn-sm theme" href="#" onClick={this.props.updateSection}>Cancel</a>
+                            {serverError}
+                            {clientError}
+                            {submit}
+                            <a
+                                className='btn btn-sm theme'
+                                href='#'
+                                onClick={this.props.updateSection} >
+                                Cancel
+                            </a>
                         </li>
                     </ul>
                 </li>
             </ul>
         );
     }
-});
+}
+
+SettingItemMax.propTypes = {
+    inputs: React.PropTypes.array,
+    client_error: React.PropTypes.string,
+    server_error: React.PropTypes.string,
+    extraInfo: React.PropTypes.element,
+    updateSection: React.PropTypes.func,
+    submit: React.PropTypes.func,
+    title: React.PropTypes.string
+};
diff --git a/web/react/components/team_signup_display_name_page.jsx b/web/react/components/team_signup_display_name_page.jsx
index b5e93de1b..de756f4d5 100644
--- a/web/react/components/team_signup_display_name_page.jsx
+++ b/web/react/components/team_signup_display_name_page.jsx
@@ -4,21 +4,24 @@
 var utils = require('../utils/utils.jsx');
 var client = require('../utils/client.jsx');
 
-module.exports = React.createClass({
-    displayName: 'TeamSignupDisplayNamePage',
-    propTypes: {
-        state: React.PropTypes.object,
-        updateParent: React.PropTypes.func
-    },
-    submitBack: function(e) {
+export default class TeamSignupDisplayNamePage extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.submitBack = this.submitBack.bind(this);
+        this.submitNext = this.submitNext.bind(this);
+
+        this.state = {};
+    }
+    submitBack(e) {
         e.preventDefault();
         this.props.state.wizard = 'welcome';
         this.props.updateParent(this.props.state);
-    },
-    submitNext: function(e) {
+    }
+    submitNext(e) {
         e.preventDefault();
 
-        var displayName = this.refs.name.getDOMNode().value.trim();
+        var displayName = React.findDOMNode(this.refs.name).value.trim();
         if (!displayName) {
             this.setState({nameError: 'This field is required'});
             return;
@@ -28,15 +31,12 @@ module.exports = React.createClass({
         this.props.state.team.display_name = displayName;
         this.props.state.team.name = utils.cleanUpUrlable(displayName);
         this.props.updateParent(this.props.state);
-    },
-    getInitialState: function() {
-        return {};
-    },
-    handleFocus: function(e) {
+    }
+    handleFocus(e) {
         e.preventDefault();
         e.currentTarget.select();
-    },
-    render: function() {
+    }
+    render() {
         client.track('signup', 'signup_team_02_name');
 
         var nameError = null;
@@ -49,24 +49,48 @@ module.exports = React.createClass({
         return (
             <div>
                 <form>
-                    <img className='signup-team-logo' src='/static/images/logo.png' />
+                    <img
+                        className='signup-team-logo'
+                        src='/static/images/logo.png' />
 
                     <h2>{utils.toTitleCase(strings.Team) + ' Name'}</h2>
                     <div className={nameDivClass}>
                         <div className='row'>
                             <div className='col-sm-9'>
-                                <input type='text' ref='name' className='form-control' placeholder='' maxLength='128' defaultValue={this.props.state.team.display_name} autoFocus={true} onFocus={this.handleFocus} />
+                                <input
+                                    type='text'
+                                    ref='name'
+                                    className='form-control'
+                                    placeholder=''
+                                    maxLength='128'
+                                    defaultValue={this.props.state.team.display_name}
+                                    autoFocus={true}
+                                    onFocus={this.handleFocus} />
                             </div>
                         </div>
                         {nameError}
                     </div>
                     <div>{'Name your ' + strings.Team + ' in any language. Your ' + strings.Team + ' name shows in menus and headings.'}</div>
-                    <button type='submit' className='btn btn-primary margin--extra' onClick={this.submitNext}>Next<i className='glyphicon glyphicon-chevron-right'></i></button>
+                    <button
+                        type='submit'
+                        className='btn btn-primary margin--extra'
+                        onClick={this.submitNext} >
+                        Next<i className='glyphicon glyphicon-chevron-right'></i>
+                    </button>
                     <div className='margin--extra'>
-                        <a href='#' onClick={this.submitBack}>Back to previous step</a>
+                        <a
+                            href='#'
+                            onClick={this.submitBack}>
+                            Back to previous step
+                        </a>
                     </div>
                 </form>
             </div>
         );
     }
-});
+}
+
+TeamSignupDisplayNamePage.propTypes = {
+    state: React.PropTypes.object,
+    updateParent: React.PropTypes.func
+};
diff --git a/web/react/components/user_settings_general.jsx b/web/react/components/user_settings_general.jsx
index ddd2fb607..ead7ac1d5 100644
--- a/web/react/components/user_settings_general.jsx
+++ b/web/react/components/user_settings_general.jsx
@@ -194,7 +194,7 @@ export default class UserSettingsGeneralTab extends React.Component {
         this.props.updateSection(section);
     }
     handleClose() {
-        $(this.getDOMNode()).find('.form-control').each(function clearForms() {
+        $(React.findDOMNode(this)).find('.form-control').each(function clearForms() {
             this.value = '';
         });
 
@@ -230,7 +230,6 @@ export default class UserSettingsGeneralTab extends React.Component {
         }
 
         var nameSection;
-        var self = this;
         var inputs = [];
 
         if (this.props.activeSection === 'name') {
@@ -276,9 +275,9 @@ export default class UserSettingsGeneralTab extends React.Component {
                     server_error={serverError}
                     client_error={clientError}
                     updateSection={function clearSection(e) {
-                        self.updateSection('');
+                        this.updateSection('');
                         e.preventDefault();
-                    }}
+                    }.bind(this)}
                 />
             );
         } else {
@@ -297,8 +296,8 @@ export default class UserSettingsGeneralTab extends React.Component {
                     title='Full Name'
                     describe={fullName}
                     updateSection={function updateNameSection() {
-                        self.updateSection('name');
-                    }}
+                        this.updateSection('name');
+                    }.bind(this)}
                 />
             );
         }
@@ -335,9 +334,9 @@ export default class UserSettingsGeneralTab extends React.Component {
                     server_error={serverError}
                     client_error={clientError}
                     updateSection={function clearSection(e) {
-                        self.updateSection('');
+                        this.updateSection('');
                         e.preventDefault();
-                    }}
+                    }.bind(this)}
                 />
             );
         } else {
@@ -346,8 +345,8 @@ export default class UserSettingsGeneralTab extends React.Component {
                     title='Nickname'
                     describe={UserStore.getCurrentUser().nickname}
                     updateSection={function updateNicknameSection() {
-                        self.updateSection('nickname');
-                    }}
+                        this.updateSection('nickname');
+                    }.bind(this)}
                 />
             );
         }
@@ -384,9 +383,9 @@ export default class UserSettingsGeneralTab extends React.Component {
                     server_error={serverError}
                     client_error={clientError}
                     updateSection={function clearSection(e) {
-                        self.updateSection('');
+                        this.updateSection('');
                         e.preventDefault();
-                    }}
+                    }.bind(this)}
                 />
             );
         } else {
@@ -395,8 +394,8 @@ export default class UserSettingsGeneralTab extends React.Component {
                     title='Username'
                     describe={UserStore.getCurrentUser().username}
                     updateSection={function updateUsernameSection() {
-                        self.updateSection('username');
-                    }}
+                        this.updateSection('username');
+                    }.bind(this)}
                 />
             );
         }
@@ -433,9 +432,9 @@ export default class UserSettingsGeneralTab extends React.Component {
                     server_error={serverError}
                     client_error={emailError}
                     updateSection={function clearSection(e) {
-                        self.updateSection('');
+                        this.updateSection('');
                         e.preventDefault();
-                    }}
+                    }.bind(this)}
                 />
             );
         } else {
@@ -444,8 +443,8 @@ export default class UserSettingsGeneralTab extends React.Component {
                     title='Email'
                     describe={UserStore.getCurrentUser().email}
                     updateSection={function updateEmailSection() {
-                        self.updateSection('email');
-                    }}
+                        this.updateSection('email');
+                    }.bind(this)}
                 />
             );
         }
@@ -460,9 +459,9 @@ export default class UserSettingsGeneralTab extends React.Component {
                     server_error={serverError}
                     client_error={clientError}
                     updateSection={function clearSection(e) {
-                        self.updateSection('');
+                        this.updateSection('');
                         e.preventDefault();
-                    }}
+                    }.bind(this)}
                     picture={this.state.picture}
                     pictureChange={this.updatePicture}
                     submitActive={this.submitActive}
@@ -479,8 +478,8 @@ export default class UserSettingsGeneralTab extends React.Component {
                     title='Profile Picture'
                     describe={minMessage}
                     updateSection={function updatePictureSection() {
-                        self.updateSection('picture');
-                    }}
+                        this.updateSection('picture');
+                    }.bind(this)}
                 />
             );
         }
-- 
cgit v1.2.3-1-g7c22