MM-2065 style refactoring

web/react/components/channel_info_modal.jsx

@@ -3,57 +3,86 @@
 
 var ChannelStore = require('../stores/channel_store.jsx');
 
-module.exports = React.createClass({
+export default class CommandList extends React.Component {
-    componentDidMount: function() {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            channel_id: ChannelStore.getCurrentId()
+        };
+    }
+
+    componentDidMount() {
         var self = this;
-        if(this.refs.modal) {
+        if (this.refs.modal) {
-          $(this.refs.modal.getDOMNode()).on('show.bs.modal', function(e) {
+            $(this.refs.modal.getDOMNode()).on('show.bs.modal', function show(e) {
-              var button = e.relatedTarget;
+                var button = e.relatedTarget;
-              self.setState({ channel_id: $(button).attr('data-channelid') });
+                self.setState({channel_id: $(button).attr('data-channelid')});
-          });
+            });
         }
-    },
+    }
-    getInitialState: function() {
+
-        return { channel_id: ChannelStore.getCurrentId() };
+    render() {
-    },
-    render: function() {
         var channel = ChannelStore.get(this.state.channel_id);
 
         if (!channel) {
             channel = {};
-            channel.display_name = "No Channel Found";
+            channel.display_name = 'No Channel Found';
-            channel.name = "No Channel Found";
+            channel.name = 'No Channel Found';
-            channel.id = "No Channel Found";
+            channel.id = 'No Channel Found';
         }
 
         return (
-            <div className="modal fade" ref="modal" id="channel_info" tabIndex="-1" role="dialog" aria-hidden="true">
+            <div
-               <div className="modal-dialog">
+              className='modal fade'
-                  <div className="modal-content">
+              ref='modal'
-                    <div className="modal-header">
+              id='channel_info'
-                      <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+              tabIndex='-1'
-                      <h4 className="modal-title" id="myModalLabel"><span className="name">{channel.display_name}</span></h4>
+              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'
+                        aria-label='Close'
+                      >
+                        <span aria-hidden='true'>&times;</span>
+                      </button>
+                      <h4
+                        className='modal-title'
+                        id='myModalLabel'
+                      >
+                        <span className='name'>{channel.display_name}</span>
+                      </h4>
                     </div>
-                    <div className="modal-body">
+                    <div className='modal-body'>
-                      <div className="row form-group">
+                      <div className='row form-group'>
-                        <div className="col-sm-3 info__label">Channel Name: </div>
+                        <div className='col-sm-3 info__label'>Channel Name: </div>
-                        <div className="col-sm-9">{channel.display_name}</div>
+                        <div className='col-sm-9'>{channel.display_name}</div>
                       </div>
-                      <div className="row form-group">
+                      <div className='row form-group'>
-                        <div className="col-sm-3 info__label">Channel Handle:</div>
+                        <div className='col-sm-3 info__label'>Channel Handle:</div>
-                        <div className="col-sm-9">{channel.name}</div>
+                        <div className='col-sm-9'>{channel.name}</div>
                       </div>
-                      <div className="row">
+                      <div className='row'>
-                        <div className="col-sm-3 info__label">Channel ID:</div>
+                        <div className='col-sm-3 info__label'>Channel ID:</div>
-                        <div className="col-sm-9">{channel.id}</div>
+                        <div className='col-sm-9'>{channel.id}</div>
                       </div>
                     </div>
-                    <div className="modal-footer">
+                    <div className='modal-footer'>
-                      <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
+                      <button
+                        type='button'
+                        className='btn btn-default'
+                        data-dismiss='modal'
+                      >Close</button>
                     </div>
                   </div>
                </div>
             </div>
         );
     }
-});
+}

web/react/components/channel_invite_modal.jsx

@@ -9,7 +9,6 @@ var utils = require('../utils/utils.jsx');
 var client = require('../utils/client.jsx');
 var AsyncClient = require('../utils/async_client.jsx');
 
-
 export default class ChannelInviteModal extends React.Component {
     constructor() {
         super();
@@ -129,15 +128,37 @@ export default class ChannelInviteModal extends React.Component {
         if (this.state.loading) {
             content = (<LoadingScreen />);
         } else {
-            content = (<MemberList memberList={this.state.nonmembers} isAdmin={isAdmin} handleInvite={this.handleInvite} />);
+            content = (
+                <MemberList
+                    memberList={this.state.nonmembers}
+                    isAdmin={isAdmin}
+                    handleInvite={this.handleInvite}
+                />
+            );
         }
 
         return (
-            <div className='modal fade' id='channel_invite' tabIndex='-1' role='dialog' aria-hidden='true'>
+            <div
-              <div className='modal-dialog' role='document'>
+                className='modal fade'
+                id='channel_invite'
+                tabIndex='-1'
+                role='dialog'
+                aria-hidden='true'
+            >
+              <div
+                className='modal-dialog'
+                role='document'
+              >
                 <div className='modal-content'>
                   <div className='modal-header'>
-                    <button type='button' className='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
+                    <button
+                        type='button'
+                        className='close'
+                        data-dismiss='modal'
+                        aria-label='Close'
+                    >
+                        <span aria-hidden='true'>&times;</span>
+                    </button>
                     <h4 className='modal-title'>Add New Members to <span className='name'>{this.state.channelName}</span></h4>
                   </div>
                   <div className='modal-body'>
@@ -145,7 +166,11 @@ export default class ChannelInviteModal extends React.Component {
                     {content}
                   </div>
                   <div className='modal-footer'>
-                    <button type='button' className='btn btn-default' data-dismiss='modal'>Close</button>
+                    <button
+                        type='button'
+                        className='btn btn-default'
+                        data-dismiss='modal'
+                    >Close</button>
                   </div>
                 </div>
               </div>
@@ -153,4 +178,3 @@ export default class ChannelInviteModal extends React.Component {
         );
     }
 }
-ChannelInviteModal.displayName = 'ChannelInviteModal';

web/react/components/command_list.jsx

@@ -3,25 +3,40 @@
 
 var client = require('../utils/client.jsx');
 
-module.exports = React.createClass({
+export default class CommandList extends React.Component {
-    getInitialState: function() {
+    constructor(props) {
-        return { suggestions: [ ], cmd: "" };
+        super(props);
-    },
-    handleClick: function(i) {
-        this.props.addCommand(this.state.suggestions[i].suggestion)
-        this.setState({ suggestions: [ ], cmd: "" });
-    },
-    addFirstCommand: function() {
-        if (this.state.suggestions.length == 0) return;
-        this.handleClick(0);
-    },
-    isEmpty: function() {
-        return this.state.suggestions.length == 0;
-    },
-    getSuggestedCommands: function(cmd) {
 
-        if (!cmd || cmd.charAt(0) != '/') {
+        this.handleClick = this.handleClick.bind(this);
-            this.setState({ suggestions: [ ], cmd: "" });
+        this.addFirstCommand = this.addFirstCommand.bind(this);
+        this.isEmpty = this.isEmpty.bind(this);
+        this.getSuggestedCommands = this.getSuggestedCommands.bind(this);
+
+        this.state = {
+            suggestions: [ ],
+            cmd: ''
+        };
+    }
+
+    handleClick(i) {
+        this.props.addCommand(this.state.suggestions[i].suggestion);
+        this.setState({suggestions: [ ], cmd: ''});
+    }
+
+    addFirstCommand() {
+        if (this.state.suggestions.length === 0) {
+            return;
+        }
+        this.handleClick(0);
+    }
+
+    isEmpty() {
+        return this.state.suggestions.length === 0;
+    }
+
+    getSuggestedCommands(cmd) {
+        if (!cmd || cmd.charAt(0) !== '/') {
+            this.setState({suggestions: [ ], cmd: ''});
             return;
         }
 
@@ -29,36 +44,56 @@ module.exports = React.createClass({
             this.props.channelId,
             cmd,
             true,
-            function(data) {
+            function success(data) {
                 if (data.suggestions.length === 1 && data.suggestions[0].suggestion === cmd) {
                     data.suggestions = [];
                 }
-                this.setState({ suggestions: data.suggestions, cmd: cmd  });
+                this.setState({suggestions: data.suggestions, cmd: cmd});
             }.bind(this),
-            function(err){
+            function fail() {
-            }
+        }
         );
-    },
+    }
-    render: function() {
+
-        if (this.state.suggestions.length == 0) return (<div/>);
+    render() {
+        if (this.state.suggestions.length === 0) {
+            return (<div/>);
+        }
 
         var suggestions = [];
 
         for (var i = 0; i < this.state.suggestions.length; i++) {
-            if (this.state.suggestions[i].suggestion != this.state.cmd) {
+            if (this.state.suggestions[i].suggestion !== this.state.cmd) {
                 suggestions.push(
-                    <div key={i} className="command-name" onClick={this.handleClick.bind(this, i)}>
+                    <div
-                        <div className="command__title"><strong>{ this.state.suggestions[i].suggestion }</strong></div>
+                        key={i}
-                        <div className="command__desc">{ this.state.suggestions[i].description }</div>
+                        className='command-name'
+                        onClick={this.handleClick.bind(this, i)}
+                    >
+                        <div className='command__title'><strong>{this.state.suggestions[i].suggestion}</strong></div>
+                        <div className='command__desc'>{this.state.suggestions[i].description}</div>
                     </div>
                 );
             }
         }
 
         return (
-            <div ref="mentionlist" className="command-box" style={{height:(this.state.suggestions.length*56)+2}}>
+            <div
-                { suggestions }
+                ref='mentionlist'
+                className='command-box'
+                style={{height: (this.state.suggestions.length * 56) + 2}}
+            >
+                {suggestions}
             </div>
         );
     }
-});
+}
+
+CommandList.defaultProps = {
+    channelId: null
+};
+
+CommandList.propTypes = {
+    addCommand: React.PropTypes.func,
+    channelId: React.PropTypes.string
+};

web/react/components/file_upload.jsx

@@ -6,20 +6,19 @@ var Constants = require('../utils/constants.jsx');
 var ChannelStore = require('../stores/channel_store.jsx');
 var utils = require('../utils/utils.jsx');
 
-module.exports = React.createClass({
+export default class FileUpload extends React.Component {
-    displayName: 'FileUpload',
+    constructor(props) {
-    propTypes: {
+        super(props);
-        onUploadError: React.PropTypes.func,
+
-        getFileCount: React.PropTypes.func,
+        this.handleChange = this.handleChange.bind(this);
-        onFileUpload: React.PropTypes.func,
+        this.handleDrop = this.handleDrop.bind(this);
-        onUploadStart: React.PropTypes.func,
+
-        channelId: React.PropTypes.string,
+        this.state = {
-        postType: React.PropTypes.string
+            requests: {}
-    },
+        };
-    getInitialState: function() {
+    }
-        return {requests: {}};
+
-    },
+    handleChange() {
-    handleChange: function() {
         var element = $(this.refs.fileInput.getDOMNode());
         var files = element.prop('files');
 
@@ -30,7 +29,7 @@ module.exports = React.createClass({
         // This looks redundant, but must be done this way due to
         // setState being an asynchronous call
         var numFiles = 0;
-        for (var i = 0; i < files.length; i++) {
+        for (let i = 0; i < files.length; i++) {
             if (files[i].size <= Constants.MAX_FILE_SIZE) {
                 numFiles++;
             }
@@ -42,7 +41,7 @@ module.exports = React.createClass({
             this.props.onUploadError('Uploads limited to ' + Constants.MAX_UPLOAD_FILES + ' files maximum. Please use additional posts for more files.');
         }
 
-        for (var i = 0; i < files.length && i < numToUpload; i++) {
+        for (let i = 0; i < files.length && i < numToUpload; i++) {
             if (files[i].size > Constants.MAX_FILE_SIZE) {
                 this.props.onUploadError('Files must be no more than ' + Constants.MAX_FILE_SIZE / 1000000 + ' MB');
                 continue;
@@ -58,7 +57,7 @@ module.exports = React.createClass({
             formData.append('client_ids', clientId);
 
             var request = client.uploadFile(formData,
-                function(data) {
+                function success(data) {
                     var parsedData = $.parseJSON(data);
                     this.props.onFileUpload(parsedData.filenames, parsedData.client_ids, channelId);
 
@@ -68,7 +67,7 @@ module.exports = React.createClass({
                     }
                     this.setState({requests: requests});
                 }.bind(this),
-                function(err) {
+                function fail(err) {
                     this.props.onUploadError(err, clientId);
                 }.bind(this)
             );
@@ -87,9 +86,12 @@ module.exports = React.createClass({
                 element[0].type = 'text';
                 element[0].type = 'file';
             }
-        } catch(e) {}
+        } catch(e) {
-    },
+            // Do nothing
-    handleDrop: function(e) {
+        }
+    }
+
+    handleDrop(e) {
         this.props.onUploadError(null);
 
         var files = e.originalEvent.dataTransfer.files;
@@ -120,7 +122,7 @@ module.exports = React.createClass({
                 formData.append('client_ids', clientId);
 
                 var request = client.uploadFile(formData,
-                    function(data) {
+                    function success(data) {
                         var parsedData = $.parseJSON(data);
                         this.props.onFileUpload(parsedData.filenames, parsedData.client_ids, channelId);
 
@@ -130,7 +132,7 @@ module.exports = React.createClass({
                         }
                         this.setState({requests: requests});
                     }.bind(this),
-                    function(err) {
+                    function fail(err) {
                         this.props.onUploadError(err, clientId);
                     }.bind(this)
                 );
@@ -144,40 +146,41 @@ module.exports = React.createClass({
         } else {
             this.props.onUploadError('Invalid file upload', -1);
         }
-    },
+    }
-    componentDidMount: function() {
+
+    componentDidMount() {
         var inputDiv = this.refs.input.getDOMNode();
         var self = this;
 
         if (this.props.postType === 'post') {
             $('.row.main').dragster({
-                enter: function() {
+                enter() {
                     $('.center-file-overlay').removeClass('hidden');
                 },
-                leave: function() {
+                leave() {
                     $('.center-file-overlay').addClass('hidden');
                 },
-                drop: function(dragsterEvent, e) {
+                drop(dragsterEvent, e) {
                     $('.center-file-overlay').addClass('hidden');
                     self.handleDrop(e);
                 }
             });
         } else if (this.props.postType === 'comment') {
             $('.post-right__container').dragster({
-                enter: function() {
+                enter() {
                     $('.right-file-overlay').removeClass('hidden');
                 },
-                leave: function() {
+                leave() {
                     $('.right-file-overlay').addClass('hidden');
                 },
-                drop: function(dragsterEvent, e) {
+                drop(dragsterEvent, e) {
                     $('.right-file-overlay').addClass('hidden');
                     self.handleDrop(e);
                 }
             });
         }
 
-        document.addEventListener('paste', function(e) {
+        document.addEventListener('paste', function handlePaste(e) {
             var textarea = $(inputDiv.parentNode.parentNode).find('.custom-textarea')[0];
 
             if (textarea !== e.target && !$.contains(textarea, e.target)) {
@@ -191,7 +194,7 @@ module.exports = React.createClass({
             var items = e.clipboardData.items;
             var numItems = 0;
             if (items) {
-                for (var i = 0; i < items.length; i++) {
+                for (let i = 0; i < items.length; i++) {
                     if (items[i].type.indexOf('image') !== -1) {
                         var testExt = items[i].type.split('/')[1].toLowerCase();
 
@@ -269,8 +272,9 @@ module.exports = React.createClass({
                 }
             }
         });
-    },
+    }
-    cancelUpload: function(clientId) {
+
+    cancelUpload(clientId) {
         var requests = this.state.requests;
         var request = requests[clientId];
 
@@ -280,15 +284,33 @@ module.exports = React.createClass({
             delete requests[clientId];
             this.setState({requests: requests});
         }
-    },
+    }
-    render: function() {
+
+    render() {
         return (
-            <span ref='input' className='btn btn-file'>
+            <span
+                ref='input'
+                className='btn btn-file'
+            >
                 <span>
                     <i className='glyphicon glyphicon-paperclip' />
                 </span>
-                <input ref='fileInput' type='file' onChange={this.handleChange} multiple/>
+                <input
+                    ref='fileInput'
+                    type='file'
+                    onChange={this.handleChange}
+                    multiple='true'
+                />
             </span>
         );
     }
-});
+}
+
+FileUpload.propTypes = {
+    onUploadError: React.PropTypes.func,
+    getFileCount: React.PropTypes.func,
+    onFileUpload: React.PropTypes.func,
+    onUploadStart: React.PropTypes.func,
+    channelId: React.PropTypes.string,
+    postType: React.PropTypes.string
+};

web/react/components/find_team.jsx

@@ -1,53 +1,57 @@
 // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-
 var utils = require('../utils/utils.jsx');
 var client = require('../utils/client.jsx');
 
-module.exports = React.createClass({
+export default class FindTeam extends React.Component {
-     handleSubmit: function(e) {
+    constructor(props) {
+        super(props);
+        this.state = {};
+
+        this.handleSubmit = this.handleSubmit.bind(this);
+    }
+
+    handleSubmit(e) {
         e.preventDefault();
 
         var state = { };
 
         var email = this.refs.email.getDOMNode().value.trim().toLowerCase();
         if (!email || !utils.isEmail(email)) {
-            state.email_error = "Please enter a valid email address";
+            state.email_error = 'Please enter a valid email address';
             this.setState(state);
             return;
         }
-        else {
+
-            state.email_error = "";
+        state.email_error = '';
-        }
 
         client.findTeamsSendEmail(email,
-            function(data) {
+            function success() {
                 state.sent = true;
                 this.setState(state);
             }.bind(this),
-            function(err) {
+            function fail(err) {
                 state.email_error = err.message;
                 this.setState(state);
             }.bind(this)
         );
-    },
+    }
-    getInitialState: function() {
-        return {  };
-    },
-    render: function() {
 
-        var email_error = this.state.email_error ? <label className='control-label'>{ this.state.email_error }</label> : null;
+    render() {
+        var emailError = null;
+        var emailErrorClass = 'form-group';
 
-        var divStyle = {
+        if (this.state.email_error) {
-            "marginTop": "50px",
+            emailError = <label className='control-label'>{this.state.email_error}</label>;
+            emailErrorClass = 'form-group has-error';
         }
 
         if (this.state.sent) {
             return (
                 <div>
-                    <h4>{"Find Your " + utils.toTitleCase(strings.Team)}</h4>
+                    <h4>{'Find Your ' + utils.toTitleCase(strings.Team)}</h4>
-                    <p>{"An email was sent with links to any " + strings.TeamPlural + " to which you are a member."}</p>
+                    <p>{'An email was sent with links to any ' + strings.TeamPlural + ' to which you are a member.'}</p>
                 </div>
             );
         }
@@ -56,17 +60,25 @@ module.exports = React.createClass({
         <div>
                 <h4>Find Your Team</h4>
                 <form onSubmit={this.handleSubmit}>
-                    <p>{"Get an email with links to any " + strings.TeamPlural + " to which you are a member."}</p>
+                    <p>{'Get an email with links to any ' + strings.TeamPlural + ' to which you are a member.'}</p>
-                    <div className="form-group">
+                    <div className='form-group'>
                         <label className='control-label'>Email</label>
-                        <div className={ email_error ? "form-group has-error" : "form-group" }>
+                        <div className={emailErrorClass}>
-                            <input type="text" ref="email" className="form-control" placeholder="you@domain.com" maxLength="128" />
+                            <input
-                            { email_error }
+                                type='text'
+                                ref='email'
+                                className='form-control'
+                                placeholder='you@domain.com'
+                                maxLength='128'
+                            />
+                            {emailError}
                         </div>
                     </div>
-                    <button className="btn btn-md btn-primary" type="submit">Send</button>
+                    <button
+                        className='btn btn-md btn-primary'
+                        type='submit'>Send</button>
                 </form>
                 </div>
         );
     }
-});
+}

web/react/components/invite_member_modal.jsx

@@ -7,10 +7,28 @@ var Client = require('../utils/client.jsx');
 var UserStore = require('../stores/user_store.jsx');
 var ConfirmModal = require('./confirm_modal.jsx');
 
-module.exports = React.createClass({
+export default class InviteMemberModal extends React.Component {
-    componentDidMount: function() {
+    constructor(props) {
+        super(props);
+
+        this.handleSubmit = this.handleSubmit.bind(this);
+        this.addInviteFields = this.addInviteFields.bind(this);
+        this.clearFields = this.clearFields.bind(this);
+        this.removeInviteFields = this.removeInviteFields.bind(this);
+
+        this.state = {
+            inviteIds: [0],
+            idCount: 0,
+            emailErrors: {},
+            firstNameErrors: {},
+            lastNameErrors: {},
+            emailEnabled: !ConfigStore.getSettingAsBoolean('ByPassEmail', false)
+        };
+    }
+
+    componentDidMount() {
         var self = this;
-        $('#invite_member').on('hide.bs.modal', function(e) {
+        $('#invite_member').on('hide.bs.modal', function hide(e) {
             if ($('#invite_member').attr('data-confirm') === 'true') {
                 $('#invite_member').attr('data-confirm', 'false');
                 return;
@@ -31,11 +49,12 @@ module.exports = React.createClass({
             }
         });
 
-        $('#invite_member').on('hidden.bs.modal', function() {
+        $('#invite_member').on('hidden.bs.modal', function show() {
             self.clearFields();
         });
-    },
+    }
-    handleSubmit: function(e) {
+
+    handleSubmit() {
         if (!this.state.emailEnabled) {
             return;
         }
@@ -90,11 +109,11 @@ module.exports = React.createClass({
         data.invites = invites;
 
         Client.inviteMembers(data,
-            function() {
+            function success() {
                 $(this.refs.modal.getDOMNode()).attr('data-confirm', 'true');
                 $(this.refs.modal.getDOMNode()).modal('hide');
             }.bind(this),
-            function(err) {
+            function fail(err) {
                 if (err.message === 'This person is already on your team') {
                     emailErrors[err.detailed_error] = err.message;
                     this.setState({emailErrors: emailErrors});
@@ -103,18 +122,21 @@ module.exports = React.createClass({
                 }
             }.bind(this)
         );
-    },
+    }
-    componentDidUpdate: function() {
+
+    componentDidUpdate() {
         $(this.refs.modalBody.getDOMNode()).css('max-height', $(window).height() - 200);
         $(this.refs.modalBody.getDOMNode()).css('overflow-y', 'scroll');
-    },
+    }
-    addInviteFields: function() {
+
+    addInviteFields() {
         var count = this.state.idCount + 1;
         var inviteIds = this.state.inviteIds;
         inviteIds.push(count);
         this.setState({inviteIds: inviteIds, idCount: count});
-    },
+    }
-    clearFields: function() {
+
+    clearFields() {
         var inviteIds = this.state.inviteIds;
 
         for (var i = 0; i < inviteIds.length; i++) {
@@ -133,8 +155,9 @@ module.exports = React.createClass({
             firstNameErrors: {},
             lastNameErrors: {}
         });
-    },
+    }
-    removeInviteFields: function(index) {
+
+    removeInviteFields(index) {
         var count = this.state.idCount;
         var inviteIds = this.state.inviteIds;
         var i = inviteIds.indexOf(index);
@@ -145,24 +168,10 @@ module.exports = React.createClass({
             inviteIds.push(++count);
         }
         this.setState({inviteIds: inviteIds, idCount: count});
-    },
+    }
-    getInitialState: function() {
-        return {
-            inviteIds: [0],
-            idCount: 0,
-            emailErrors: {},
-            firstNameErrors: {},
-            lastNameErrors: {},
-            emailEnabled: !ConfigStore.getSettingAsBoolean('ByPassEmail', false)
-        };
-    },
-    render: function() {
-        var currentUser = UserStore.getCurrentUser();
 
-        var inputDisabled = '';
+    render() {
-        if (!this.state.emailEnabled) {
+        var currentUser = UserStore.getCurrentUser();
-            inputDisabled = 'disabled';
-        }
 
         if (currentUser != null) {
             var inviteSections = [];
@@ -185,7 +194,13 @@ module.exports = React.createClass({
                 var removeButton = null;
                 if (index) {
                     removeButton = (<div>
-                                        <button type='button' className='btn btn-link remove__member' onClick={this.removeInviteFields.bind(this, index)}><span className='fa fa-trash'></span></button>
+                                        <button
+                                            type='button'
+                                            className='btn btn-link remove__member'
+                                            onClick={this.removeInviteFields.bind(this, index)}
+                                        >
+                                            <span className='fa fa-trash'></span>
+                                        </button>
                                     </div>);
                 }
                 var emailClass = 'form-group invite';
@@ -206,13 +221,27 @@ module.exports = React.createClass({
                     nameFields = (<div className='row--invite'>
                                     <div className='col-sm-6'>
                                         <div className={firstNameClass}>
-                                            <input type='text' className='form-control' ref={'first_name' + index} placeholder='First name' maxLength='64' disabled={!this.state.emailEnabled}/>
+                                            <input
+                                                type='text'
+                                                className='form-control'
+                                                ref={'first_name' + index}
+                                                placeholder='First name'
+                                                maxLength='64'
+                                                disabled={!this.state.emailEnabled}
+                                            />
                                             {firstNameError}
                                         </div>
                                     </div>
                                     <div className='col-sm-6'>
                                         <div className={lastNameClass}>
-                                            <input type='text' className='form-control' ref={'last_name' + index} placeholder='Last name' maxLength='64' disabled={!this.state.emailEnabled}/>
+                                            <input
+                                                type='text'
+                                                className='form-control'
+                                                ref={'last_name' + index}
+                                                placeholder='Last name'
+                                                maxLength='64'
+                                                disabled={!this.state.emailEnabled}
+                                            />
                                             {lastNameError}
                                         </div>
                                     </div>
@@ -223,7 +252,15 @@ module.exports = React.createClass({
                     <div key={'key' + index}>
                     {removeButton}
                     <div className={emailClass}>
-                        <input onKeyUp={this.displayNameKeyUp} type='text' ref={'email' + index} className='form-control' placeholder='email@domain.com' maxLength='64' disabled={!this.state.emailEnabled}/>
+                        <input
+                            onKeyUp={this.displayNameKeyUp}
+                            type='text'
+                            ref={'email' + index}
+                            className='form-control'
+                            placeholder='email@domain.com'
+                            maxLength='64'
+                            disabled={!this.state.emailEnabled}
+                        />
                         {emailError}
                     </div>
                     {nameFields}
@@ -242,23 +279,44 @@ module.exports = React.createClass({
                 content = (
                     <div>
                         {serverError}
-                        <button type='button' className='btn btn-default' onClick={this.addInviteFields}>Add another</button>
+                        <button
+                            type='button'
+                            className='btn btn-default'
+                            onClick={this.addInviteFields}
+                        >Add another</button>
                         <br/>
                         <br/>
                         <span>People invited automatically join Town Square channel.</span>
                     </div>
                 );
 
-                sendButton = <button onClick={this.handleSubmit} type='button' className='btn btn-primary'>Send Invitations</button>
+                sendButton =
+                    (
+                        <button
+                            onClick={this.handleSubmit}
+                            type='button'
+                            className='btn btn-primary'
+                        >Send Invitations</button>
+                    );
             } else {
                 var teamInviteLink = null;
                 if (currentUser && this.props.teamType === 'O') {
                     var linkUrl = utils.getWindowLocationOrigin() + '/signup_user_complete/?id=' + currentUser.team_id;
-                    var link = <a href='#' data-toggle='modal' data-target='#get_link' data-title='Team Invite' data-value={linkUrl} onClick={
+                    var link =
-                        function() {
+                        (
-                            $('#invite_member').modal('hide');
+                            <a
-                        }
+                                href='#'
-                    }>Team Invite Link</a>;
+                                data-toggle='modal'
+                                data-target='#get_link'
+                                data-title='Team Invite'
+                                data-value={linkUrl}
+                                onClick={
+                                    function click() {
+                                        $('#invite_member').modal('hide');
+                                    }
+                                }
+                            >Team Invite Link</a>
+                    );
 
                     teamInviteLink = (
                         <p>
@@ -277,22 +335,46 @@ module.exports = React.createClass({
 
             return (
                 <div>
-                    <div className='modal fade' ref='modal' id='invite_member' tabIndex='-1' role='dialog' aria-hidden='true'>
+                    <div
+                        className='modal fade'
+                        ref='modal'
+                        id='invite_member'
+                        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' aria-label='Close' data-reactid='.5.0.0.0.0'><span aria-hidden='true' data-reactid='.5.0.0.0.0.0'>×</span></button>
+                            <button
-                              <h4 className='modal-title' id='myModalLabel'>Invite New Member</h4>
+                                type='button'
+                                className='close'
+                                data-dismiss='modal'
+                                aria-label='Close'
+                            >
+                                <span aria-hidden='true'>×</span>
+                            </button>
+                            <h4
+                                className='modal-title'
+                                id='myModalLabel'
+                            >Invite New Member</h4>
                             </div>
-                            <div ref='modalBody' className='modal-body'>
+                            <div
+                                ref='modalBody'
+                                className='modal-body'
+                            >
                                 <form role='form'>
                                     {inviteSections}
                                 </form>
                                 {content}
                             </div>
                             <div className='modal-footer'>
-                              <button type='button' className='btn btn-default' data-dismiss='modal'>Cancel</button>
+                                <button
-                              {sendButton}
+                                    type='button'
+                                    className='btn btn-default'
+                                    data-dismiss='modal'
+                                >Cancel</button>
+                                {sendButton}
                             </div>
                           </div>
                        </div>
@@ -309,4 +391,8 @@ module.exports = React.createClass({
         }
         return <div/>;
     }
-});
+}
+
+InviteMemberModal.propTypes = {
+    teamType: React.PropTypes.string
+};

web/react/components/member_list.jsx

@@ -3,32 +3,45 @@
 
 var MemberListItem = require('./member_list_item.jsx');
 
-module.exports = React.createClass({
+export default class MemberList extends React.Component {
-    render: function() {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
         var members = [];
 
-        if (this.props.memberList != null) {
+        if (this.props.memberList !== null) {
             members = this.props.memberList;
         }
 
-        var message = "";
+        var message = '';
-        if (members.length === 0)
+        if (members.length === 0) {
             message = <span>No users to add.</span>;
+        }
 
         return (
-            <div className="member-list-holder">
+            <div className='member-list-holder'>
-                {members.map(function(member) {
+                {members.map(function mymembers(member) {
-                    return <MemberListItem 
+                    return (<MemberListItem
                                 key={member.id}
                                 member={member}
                                 isAdmin={this.props.isAdmin}
                                 handleInvite={this.props.handleInvite}
                                 handleRemove={this.props.handleRemove}
                                 handleMakeAdmin={this.props.handleMakeAdmin}
-                            />;
+                            />);
                 }, this)}
                 {message}
             </div>
         );
     }
-});
+}
+
+MemberList.propTypes = {
+    memberList: React.PropTypes.array,
+    isAdmin: React.PropTypes.bool,
+    handleInvite: React.PropTypes.func,
+    handleRemove: React.PropTypes.func,
+    handleMakeAdmin: React.PropTypes.func
+};

web/react/components/more_direct_channels.jsx

@@ -7,19 +7,22 @@ var Client = require('../utils/client.jsx');
 var AsyncClient = require('../utils/async_client.jsx');
 var utils = require('../utils/utils.jsx');
 
-module.exports = React.createClass({
+export default class MoreDirectChannels extends React.Component {
-    displayName: 'MoreDirectChannels',
+    constructor(props) {
-    componentDidMount: function() {
+        super(props);
+
+        this.state = {channels: [], loadingDMChannel: -1};
+    }
+
+    componentDidMount() {
         var self = this;
         $(this.refs.modal.getDOMNode()).on('show.bs.modal', function showModal(e) {
             var button = e.relatedTarget;
             self.setState({channels: $(button).data('channels')});
         });
-    },
+    }
-    getInitialState: function() {
+
-        return {channels: [], loadingDMChannel: -1};
+    render() {
-    },
-    render: function() {
         var self = this;
 
         var directMessageItems = this.state.channels.map(function mapActivityToChannel(channel, index) {
@@ -48,7 +51,12 @@ module.exports = React.createClass({
                 var otherUserId = utils.getUserIdFromChannelName(channel);
 
                 if (self.state.loadingDMChannel === index) {
-                    badge = <img className='channel-loading-gif pull-right' src='/static/images/load.gif'/>;
+                    badge = (
+                        <img
+                            className='channel-loading-gif pull-right'
+                            src='/static/images/load.gif'
+                        />
+                    );
                 }
 
                 if (self.state.loadingDMChannel === -1) {
@@ -73,16 +81,36 @@ module.exports = React.createClass({
             }
 
             return (
-                <li key={channel.name} className={active}><a className={'sidebar-channel ' + titleClass} href='#' onClick={handleClick}>{badge}{channel.display_name}</a></li>
+                <li
+                    key={channel.name}
+                    className={active}
+                >
+                    <a
+                        className={'sidebar-channel ' + titleClass}
+                        href='#'
+                        onClick={handleClick}
+                    >{badge}{channel.display_name}</a>
+                </li>
             );
         });
 
         return (
-            <div className='modal fade' id='more_direct_channels' ref='modal' tabIndex='-1' role='dialog' aria-hidden='true'>
+            <div
+                className='modal fade'
+                id='more_direct_channels'
+                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'>Close</span>
                             </button>
@@ -94,11 +122,15 @@ module.exports = React.createClass({
                             </ul>
                         </div>
                         <div className='modal-footer'>
-                            <button type='button' className='btn btn-default' data-dismiss='modal'>Close</button>
+                            <button
+                                type='button'
+                                className='btn btn-default'
+                                data-dismiss='modal'
+                            >Close</button>
                         </div>
                     </div>
                 </div>
             </div>
         );
     }
-});
+}

web/react/components/msg_typing.jsx

@@ -1,57 +1,70 @@
 // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-
 var SocketStore = require('../stores/socket_store.jsx');
 var UserStore = require('../stores/user_store.jsx');
 
-module.exports = React.createClass({
+export default class MsgTyping extends React.Component {
-    timer: null,
+    constructor(props) {
-    lastTime: 0,
+        super(props);
-    componentDidMount: function() {
-        SocketStore.addChangeListener(this._onChange);
-    },
-    componentWillReceiveProps: function(newProps) {
-        if(this.props.channelId !== newProps.channelId) {
-            this.setState({text:""});
-        }
-    },
-    componentWillUnmount: function() {
-        SocketStore.removeChangeListener(this._onChange);
-    },
-    _onChange: function(msg) {
-        if (msg.action == "typing" && 
-            this.props.channelId == msg.channel_id &&
-            this.props.parentId == msg.props.parent_id) {
 
+        this.timer = null;
+        this.lastTime = 0;
+
+        this.onChange = this.onChange.bind(this);
+
+        this.state = {
+            text: ''
+        };
+    }
+
+    componentDidMount() {
+        SocketStore.addChangeListener(this.onChange);
+    }
+
+    componentWillReceiveProps(newProps) {
+        if (this.props.channelId !== newProps.channelId) {
+            this.setState({text: ''});
+        }
+    }
+
+    componentWillUnmount() {
+        SocketStore.removeChangeListener(this.onChange);
+    }
+
+    onChange(msg) {
+        if (msg.action === 'typing' &&
+            this.props.channelId === msg.channel_id &&
+            this.props.parentId === msg.props.parent_id) {
             this.lastTime = new Date().getTime();
 
-            var username = "Someone";
+            var username = 'Someone';
             if (UserStore.hasProfile(msg.user_id)) {
                 username = UserStore.getProfile(msg.user_id).username;
             }
 
-            this.setState({ text: username + " is typing..." });
+            this.setState({text: username + ' is typing...'});
 
             if (!this.timer) {
-                var outer = this;
+                this.timer = setInterval(function myTimer() {
-                outer.timer = setInterval(function() {
+                    if ((new Date().getTime() - this.lastTime) > 8000) {
-                    if ((new Date().getTime() - outer.lastTime) > 8000) {
+                        this.setState({text: ''});
-                        outer.setState({ text: "" });
+                    }
-                    } 
+                }.bind(this), 3000);
-                }, 3000);
             }
+        } else if (msg.action === 'posted' && msg.channel_id === this.props.channelId) {
+            this.setState({text: ''});
         }
-        else if (msg.action == "posted" && msg.channel_id === this.props.channelId) {
+    }
-            this.setState({text:""})
+
-        }
+    render() {
-    },
-    getInitialState: function() {
-        return { text: "" };
-    },
-    render: function() {
         return (
-            <span className="msg-typing">{ this.state.text }</span>
+            <span className='msg-typing'>{this.state.text}</span>
         );
     }
-});
+}
+
+MsgTyping.propTypes = {
+    channelId: React.PropTypes.string,
+    parentId: React.PropTypes.string
+};

web/react/components/post_list.jsx

@@ -51,8 +51,10 @@ export default class PostList extends React.Component {
 
             if (deletedPosts && Object.keys(deletedPosts).length > 0) {
                 for (var pid in deletedPosts) {
-                    postList.posts[pid] = deletedPosts[pid];
+                    if (deletedPosts.hasOwnProperty(pid)) {
-                    postList.order.unshift(pid);
+                        postList.posts[pid] = deletedPosts[pid];
+                        postList.order.unshift(pid);
+                    }
                 }
 
                 postList.order.sort(function postSort(a, b) {
@@ -71,7 +73,9 @@ export default class PostList extends React.Component {
             if (pendingPostList) {
                 postList.order = pendingPostList.order.concat(postList.order);
                 for (var ppid in pendingPostList.posts) {
-                    postList.posts[ppid] = pendingPostList.posts[ppid];
+                    if (pendingPostList.posts.hasOwnProperty(ppid)) {
+                        postList.posts[ppid] = pendingPostList.posts[ppid];
+                    }
                 }
             }
         }
@@ -267,7 +271,6 @@ export default class PostList extends React.Component {
         }
     }
     onSocketChange(msg) {
-        var postList;
         var post;
         if (msg.action === 'posted' || msg.action === 'post_edited') {
             post = JSON.parse(msg.props.post);
@@ -280,7 +283,6 @@ export default class PostList extends React.Component {
             }
 
             post = JSON.parse(msg.props.post);
-            postList = this.state.postList;
 
             PostStore.storeUnseenDeletedPost(post);
             PostStore.removePost(post, true);
@@ -644,11 +646,18 @@ export default class PostList extends React.Component {
         if (posts && this.state.isFirstLoadComplete) {
             postCtls = this.createPosts(posts, order);
         } else {
-            postCtls.push(<LoadingScreen position='absolute' />);
+            postCtls.push(
+                <LoadingScreen
+                    position='absolute'
+                    key='loading'
+                />);
         }
 
         return (
-            <div ref='postlist' className='post-list-holder-by-time'>
+            <div
+                ref='postlist'
+                className='post-list-holder-by-time'
+            >
                 <div className='post-list__table'>
                     <div className='post-list__content'>
                         {moreMessages}
@@ -658,4 +667,4 @@ export default class PostList extends React.Component {
             </div>
         );
     }
-}
+}

web/react/components/removed_from_channel_modal.jsx

@@ -3,62 +3,99 @@
 
 var ChannelStore = require('../stores/channel_store.jsx');
 var UserStore = require('../stores/user_store.jsx');
-var BrowserStore = require('../stores/browser_store.jsx')
+var BrowserStore = require('../stores/browser_store.jsx');
 var utils = require('../utils/utils.jsx');
 
-module.exports = React.createClass({
+export default class RemovedFromChannelModal extends React.Component {
-    handleShow: function() {
+    constructor(props) {
-      var newState = {};
+        super(props);
-      if(BrowserStore.getItem("channel-removed-state")) {
-        newState = BrowserStore.getItem("channel-removed-state");
-        BrowserStore.removeItem("channel-removed-state");
-      }
 
-      this.setState(newState);
+        this.handleShow = this.handleShow.bind(this);
-    },
+        this.handleClose = this.handleClose.bind(this);
-    handleClose: function() {
-      var townSquare = ChannelStore.getByName("town-square");
-      utils.switchChannel(townSquare);
 
-      this.setState({channelName: "", remover: ""});
+        this.state = {
-    },
+            channelName: '',
-    componentDidMount: function() {
+            remover: ''
-      $(this.getDOMNode()).on('show.bs.modal',this.handleShow);
+        };
-      $(this.getDOMNode()).on('hidden.bs.modal',this.handleClose);
+    }
-    },
+
-    componentWillUnmount: function() {
+    handleShow() {
-      $(this.getDOMNode()).off('show.bs.modal',this.handleShow);
+        var newState = {};
-      $(this.getDOMNode()).off('hidden.bs.modal',this.handleClose);
+        if (BrowserStore.getItem('channel-removed-state')) {
-    },
+            newState = BrowserStore.getItem('channel-removed-state');
-    getInitialState: function() {
+            BrowserStore.removeItem('channel-removed-state');
-      return {channelName: "", remover: ""}
+        }
-    },
+
-    render: function() {
+        this.setState(newState);
+    }
+
+    handleClose() {
+        var townSquare = ChannelStore.getByName('town-square');
+        utils.switchChannel(townSquare);
+
+        this.setState({channelName: '', remover: ''});
+    }
+
+    componentDidMount() {
+        $(React.findDOMNode(this)).on('show.bs.modal', this.handleShow);
+        $(React.findDOMNode(this)).on('hidden.bs.modal', this.handleClose);
+    }
+
+    componentWillUnmount() {
+        $(React.findDOMNode(this)).off('show.bs.modal', this.handleShow);
+        $(React.findDOMNode(this)).off('hidden.bs.modal', this.handleClose);
+    }
+
+    render() {
         var currentUser = UserStore.getCurrentUser();
-        var channelName = this.state.channelName ? this.state.channelName : "the channel"
+
-        var remover = this.state.remover ? this.state.remover : "Someone"
+        var channelName = 'the channel';
+        if (this.state.channelName) {
+            channelName = this.state.channelName;
+        }
+
+        var remover = 'Someone';
+        if (this.state.remover) {
+            remover = this.state.remover;
+        }
 
         if (currentUser != null) {
             return (
-                <div className='modal fade' ref='modal' id='removed_from_channel' tabIndex='-1' role='dialog' aria-hidden='true'>
+                <div
-                   <div className='modal-dialog'>
+                    className='modal fade'
-                      <div className='modal-content'>
+                    ref='modal'
-                        <div className='modal-header'>
+                    id='removed_from_channel'
-                          <button type='button' className='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
+                    tabIndex='-1'
-                          <h4 className='modal-title'>Removed from <span className='name'>{channelName}</span></h4>
+                    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'
+                                    aria-label='Close'
+                                ><span aria-hidden='true'>&times;</span></button>
+                                <h4 className='modal-title'>Removed from <span className='name'>{channelName}</span></h4>
+                            </div>
+                            <div className='modal-body'>
+                                  <p>{remover} removed you from {channelName}</p>
+                            </div>
+                            <div className='modal-footer'>
+                                <button
+                                    type='button'
+                                    className='btn btn-primary'
+                                    data-dismiss='modal'
+                                >Okay</button>
+                            </div>
                         </div>
-                        <div className='modal-body'>
+                    </div>
-                            <p>{remover} removed you from {channelName}</p>
-                        </div>
-                        <div className='modal-footer'>
-                          <button type='button' className='btn btn-primary' data-dismiss='modal'>Okay</button>
-                        </div>
-                      </div>
-                   </div>
                 </div>
             );
-        } else {
-            return <div/>;
         }
+
+        return <div/>;
     }
-});
+}

web/react/components/rhs_thread.jsx

@@ -33,7 +33,9 @@ export default class RhsThread extends React.Component {
 
         if (pendingPostList) {
             for (var pid in pendingPostList.posts) {
-                postList.posts[pid] = pendingPostList.posts[pid];
+                if (pendingPostList.posts.hasOwnProperty(pid)) {
+                    postList.posts[pid] = pendingPostList.posts[pid];
+                }
             }
         }
 
@@ -81,7 +83,9 @@ export default class RhsThread extends React.Component {
         if (currentPosts.posts[currentPosts.order[0]].channel_id === currentSelected.posts[currentSelected.order[0]].channel_id) {
             currentSelected.posts = {};
             for (var postId in currentPosts.posts) {
-                currentSelected.posts[postId] = currentPosts.posts[postId];
+                if (currentPosts.posts.hasOwnProperty(postId)) {
+                    currentSelected.posts[postId] = currentPosts.posts[postId];
+                }
             }
 
             PostStore.storeSelectedPost(currentSelected);
@@ -128,9 +132,11 @@ export default class RhsThread extends React.Component {
         var postsArray = [];
 
         for (var postId in postList.posts) {
-            var cpost = postList.posts[postId];
+            if (postList.posts.hasOwnProperty(postId)) {
-            if (cpost.root_id === rootPost.id) {
+                var cpost = postList.posts[postId];
-                postsArray.push(cpost);
+                if (cpost.root_id === rootPost.id) {
+                    postsArray.push(cpost);
+                }
             }
         }
 
@@ -209,6 +215,7 @@ RhsThread.defaultProps = {
     fromSearch: '',
     isMentionSearch: false
 };
+
 RhsThread.propTypes = {
     fromSearch: React.PropTypes.string,
     isMentionSearch: React.PropTypes.bool

web/react/components/setting_picture.jsx

@@ -1,25 +1,33 @@
 // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-module.exports = React.createClass({
+export default class SettingPicture extends React.Component {
-    setPicture: function(file) {
+    constructor(props) {
+        super(props);
+
+        this.setPicture = this.setPicture.bind(this);
+    }
+
+    setPicture(file) {
         if (file) {
             var reader = new FileReader();
 
             var img = this.refs.image.getDOMNode();
-            reader.onload = function(e) {
+            reader.onload = function load(e) {
                 $(img).attr('src', e.target.result);
             };
 
             reader.readAsDataURL(file);
         }
-    },
+    }
-    componentWillReceiveProps: function(nextProps) {
+
+    componentWillReceiveProps(nextProps) {
         if (nextProps.picture) {
             this.setPicture(nextProps.picture);
         }
-    },
+    }
-    render: function() {
+
+    render() {
         var clientError = null;
         if (this.props.client_error) {
             clientError = <div className='form-group has-error'><label className='control-label'>{this.props.client_error}</label></div>;
@@ -31,14 +39,31 @@ module.exports = React.createClass({
 
         var img = null;
         if (this.props.picture) {
-            img = (<img ref='image' className='profile-img' src=''/>);
+            img = (
+                <img
+                    ref='image'
+                    className='profile-img'
+                    src=''
+                />
+            );
         } else {
-            img = (<img ref='image' className='profile-img' src={this.props.src}/>);
+            img = (
+                <img
+                    ref='image'
+                    className='profile-img'
+                    src={this.props.src}
+                />
+            );
         }
 
         var confirmButton;
         if (this.props.loadingPicture) {
-            confirmButton = <img className='spinner' src='/static/images/load.gif'/>;
+            confirmButton = (
+                <img
+                    className='spinner'
+                    src='/static/images/load.gif'
+                />
+            );
         } else {
             var confirmButtonClass = 'btn btn-sm';
             if (this.props.submitActive) {
@@ -46,9 +71,15 @@ module.exports = React.createClass({
             } else {
                 confirmButtonClass += ' btn-inactive disabled';
             }
-            confirmButton = <a className={confirmButtonClass} onClick={this.props.submit}>Save</a>;
+
+            confirmButton = (
+                <a
+                    className={confirmButtonClass}
+                    onClick={this.props.submit}
+                >Save</a>
+            );
         }
-        var helpText = 'Upload a profile picture in either JPG or PNG format, at least ' + config.ProfileWidth + 'px in width and ' + config.ProfileHeight + 'px height.'
+        var helpText = 'Upload a profile picture in either JPG or PNG format, at least ' + config.ProfileWidth + 'px in width and ' + config.ProfileHeight + 'px height.';
 
         var self = this;
         return (
@@ -65,13 +96,36 @@ module.exports = React.createClass({
                         <li className='setting-list-item'>
                             {serverError}
                             {clientError}
-                            <span className='btn btn-sm btn-primary btn-file sel-btn'>Select<input ref='input' accept='.jpg,.png,.bmp' type='file' onChange={this.props.pictureChange}/></span>
+                            <span className='btn btn-sm btn-primary btn-file sel-btn'
+                            >Select<input
+                                ref='input'
+                                accept='.jpg,.png,.bmp'
+                                type='file'
+                                onChange={this.props.pictureChange}
+                                />
+                            </span>
                             {confirmButton}
-                            <a className='btn btn-sm theme' href='#' onClick={self.props.updateSection}>Cancel</a>
+                            <a
+                                className='btn btn-sm theme'
+                                href='#'
+                                onClick={self.props.updateSection}
+                            >Cancel</a>
                         </li>
                     </ul>
                 </li>
             </ul>
         );
     }
-});
+}
+
+SettingPicture.propTypes = {
+    client_error: React.PropTypes.string,
+    server_error: React.PropTypes.string,
+    src: React.PropTypes.string,
+    picture: React.PropTypes.object,
+    loadingPicture: React.PropTypes.bool,
+    submitActive: React.PropTypes.bool,
+    submit: React.PropTypes.func,
+    title: React.PropTypes.string,
+    pictureChange: React.PropTypes.func
+};

web/react/components/setting_upload.jsx

@@ -1,36 +1,37 @@
 // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-module.exports = React.createClass({
+export default class SettingsUpload extends React.Component {
-    displayName: 'Setting Upload',
+
-    propTypes: {
+    constructor(props) {
-        title: React.PropTypes.string.isRequired,
+        super(props);
-        submit: React.PropTypes.func.isRequired,
+
-        fileTypesAccepted: React.PropTypes.string.isRequired,
+        this.doFileSelect = this.doFileSelect.bind(this);
-        clientError: React.PropTypes.string,
+        this.doSubmit = this.doSubmit.bind(this);
-        serverError: React.PropTypes.string,
+        this.onFileSelect = this.onFileSelect.bind(this);
-        helpText: React.PropTypes.string
+
-    },
+        this.state = {
-    getInitialState: function() {
-        return {
             clientError: this.props.clientError,
             serverError: this.props.serverError
         };
-    },
+    }
-    componentWillReceiveProps: function() {
+
+    componentWillReceiveProps() {
         this.setState({
             clientError: this.props.clientError,
             serverError: this.props.serverError
         });
-    },
+    }
-    doFileSelect: function(e) {
+
+    doFileSelect(e) {
         e.preventDefault();
         this.setState({
             clientError: '',
             serverError: ''
         });
-    },
+    }
-    doSubmit: function(e) {
+
+    doSubmit(e) {
         e.preventDefault();
         var inputnode = this.refs.uploadinput.getDOMNode();
         if (inputnode.files && inputnode.files[0]) {
@@ -38,16 +39,18 @@ module.exports = React.createClass({
         } else {
             this.setState({clientError: 'No file selected.'});
         }
-    },
+    }
-    onFileSelect: function(e) {
+
+    onFileSelect(e) {
         var filename = $(e.target).val();
         if (filename.substring(3, 11) === 'fakepath') {
             filename = filename.substring(12);
         }
         $(e.target).closest('li').find('.file-status').addClass('hide');
         $(e.target).closest('li').find('.file-name').removeClass('hide').html(filename);
-    },
+    }
-    render: function() {
+
+    render() {
         var clientError = null;
         if (this.state.clientError) {
             clientError = (
@@ -67,7 +70,11 @@ module.exports = React.createClass({
                 <li className='col-xs-offset-3 col-xs-8'>
                     <ul className='setting-list'>
                         <li className='setting-list-item'>
-                            <span className='btn btn-sm btn-primary btn-file sel-btn'>Select file<input ref='uploadinput' accept={this.props.fileTypesAccepted} type='file' onChange={this.onFileSelect}/></span>
+                            <span className='btn btn-sm btn-primary btn-file sel-btn'>Select file<input
+                                ref='uploadinput'
+                                accept={this.props.fileTypesAccepted}
+                                type='file'
+                                onChange={this.onFileSelect}/></span>
                             <a
                                 className={'btn btn-sm btn-primary'}
                                 onClick={this.doSubmit}>
@@ -82,4 +89,13 @@ module.exports = React.createClass({
             </ul>
         );
     }
-});
+}
+
+SettingsUpload.propTypes = {
+    title: React.PropTypes.string.isRequired,
+    submit: React.PropTypes.func.isRequired,
+    fileTypesAccepted: React.PropTypes.string.isRequired,
+    clientError: React.PropTypes.string,
+    serverError: React.PropTypes.string,
+    helpText: React.PropTypes.object
+};

web/react/components/sidebar_right_menu.jsx

@@ -5,12 +5,19 @@ var UserStore = require('../stores/user_store.jsx');
 var client = require('../utils/client.jsx');
 var utils = require('../utils/utils.jsx');
 
-module.exports = React.createClass({
+export default class SidebarRightMenu extends React.Component {
-    handleLogoutClick: function(e) {
+    constructor(props) {
+        super(props);
+
+        this.handleLogoutClick = this.handleLogoutClick.bind(this);
+    }
+
+    handleLogoutClick(e) {
         e.preventDefault();
         client.logout();
-    },
+    }
-    render: function() {
+
+    render() {
         var teamLink = '';
         var inviteLink = '';
         var teamSettingsLink = '';
@@ -23,14 +30,22 @@ module.exports = React.createClass({
 
             inviteLink = (
                 <li>
-                    <a href='#' data-toggle='modal' data-target='#invite_member'><i className='glyphicon glyphicon-user'></i>Invite New Member</a>
+                    <a href='#'
+                        data-toggle='modal'
+                        data-target='#invite_member'
+                    ><i className='glyphicon glyphicon-user'></i>Invite New Member</a>
                 </li>
             );
 
             if (this.props.teamType === 'O') {
                 teamLink = (
                     <li>
-                        <a href='#' data-toggle='modal' data-target='#get_link' data-title='Team Invite' data-value={utils.getWindowLocationOrigin()+'/signup_user_complete/?id='+currentUser.team_id}><i className='glyphicon glyphicon-link'></i>Get Team Invite Link</a>
+                        <a href='#'
+                            data-toggle='modal'
+                            data-target='#get_link'
+                            data-title='Team Invite'
+                            data-value={utils.getWindowLocationOrigin() + '/signup_user_complete/?id=' + currentUser.team_id}
+                        ><i className='glyphicon glyphicon-link'></i>Get Team Invite Link</a>
                     </li>
                 );
             }
@@ -39,12 +54,20 @@ module.exports = React.createClass({
         if (isAdmin) {
             teamSettingsLink = (
                 <li>
-                    <a href='#' data-toggle='modal' data-target='#team_settings'><i className='glyphicon glyphicon-globe'></i>Team Settings</a>
+                    <a
+                        href='#'
+                        data-toggle='modal'
+                        data-target='#team_settings'
+                    ><i className='glyphicon glyphicon-globe'></i>Team Settings</a>
                 </li>
             );
             manageLink = (
                 <li>
-                    <a href='#' data-toggle='modal' data-target='#team_members'><i className='glyphicon glyphicon-wrench'></i>Manage Team</a>
+                    <a
+                        href='#'
+                        data-toggle='modal'
+                        data-target='#team_members'
+                        ><i className='glyphicon glyphicon-wrench'></i>Manage Team</a>
                 </li>
             );
         }
@@ -61,23 +84,48 @@ module.exports = React.createClass({
         return (
             <div>
                 <div className='team__header theme'>
-                    <a className='team__name' href='/channels/town-square'>{teamDisplayName}</a>
+                    <a
+                        className='team__name'
+                        href='/channels/town-square'
+                    >{teamDisplayName}</a>
                 </div>
 
                 <div className='nav-pills__container'>
                     <ul className='nav nav-pills nav-stacked'>
-                        <li><a href='#' data-toggle='modal' data-target='#user_settings'><i className='glyphicon glyphicon-cog'></i>Account Settings</a></li>
+                        <li>
+                            <a
+                                href='#'
+                                data-toggle='modal'
+                                data-target='#user_settings'
+                            ><i className='glyphicon glyphicon-cog'></i>Account Settings</a></li>
                         {teamSettingsLink}
                         {inviteLink}
                         {teamLink}
                         {manageLink}
-                        <li><a href='#' onClick={this.handleLogoutClick}><i className='glyphicon glyphicon-log-out'></i>Logout</a></li>
+                        <li>
+                            <a
+                                href='#'
+                                onClick={this.handleLogoutClick}
+                            ><i className='glyphicon glyphicon-log-out'></i>Logout</a></li>
                         <li className='divider'></li>
-                        <li><a target='_blank' href='/static/help/configure_links.html'><i className='glyphicon glyphicon-question-sign'></i>Help</a></li>
+                        <li>
-                        <li><a target='_blank' href='/static/help/configure_links.html'><i className='glyphicon glyphicon-earphone'></i>Report a Problem</a></li>
+                            <a
+                                target='_blank'
+                                href='/static/help/configure_links.html'
+                            ><i className='glyphicon glyphicon-question-sign'></i>Help</a></li>
+                        <li>
+                            <a
+                                target='_blank'
+                                href='/static/help/configure_links.html'
+                            ><i className='glyphicon glyphicon-earphone'></i>Report a Problem</a></li>
                     </ul>
                 </div>
             </div>
         );
     }
-});
+}
+
+SidebarRightMenu.propTypes = {
+    teamType: React.PropTypes.string,
+    teamDisplayName: React.PropTypes.string
+};

web/react/components/team_import_tab.jsx

@@ -4,26 +4,38 @@
 var utils = require('../utils/utils.jsx');
 var SettingUpload = require('./setting_upload.jsx');
 
-module.exports = React.createClass({
+export default class TeamImportTab extends React.Component {
-    displayName: 'Import Tab',
+    constructor(props) {
-    getInitialState: function() {
+        super(props);
-        return {status: 'ready', link: ''};
+
-    },
+        this.onImportFailure = this.onImportFailure.bind(this);
-    onImportFailure: function() {
+        this.onImportSuccess = this.onImportSuccess.bind(this);
+        this.doImportSlack = this.doImportSlack.bind(this);
+
+        this.state = {
+            status: 'ready',
+            link: ''
+        };
+    }
+
+    onImportFailure() {
         this.setState({status: 'fail', link: ''});
-    },
+    }
-    onImportSuccess: function(data) {
+
+    onImportSuccess(data) {
         this.setState({status: 'done', link: 'data:application/octet-stream;charset=utf-8,' + encodeURIComponent(data)});
-    },
+    }
-    doImportSlack: function(file) {
+
+    doImportSlack(file) {
         this.setState({status: 'in-progress', link: ''});
         utils.importSlack(file, this.onImportSuccess, this.onImportFailure);
-    },
+    }
-    render: function() {
+
+    render() {
         var uploadHelpText = (
             <div>
                 <br/>
-                Slack does not allow you to export files, images, private groups or direct messages stored in Slack. Therefore, Slack import to Mattermost only supports importing of text messages in your Slack team's public channels. 
+                Slack does not allow you to export files, images, private groups or direct messages stored in Slack. Therefore, Slack import to Mattermost only supports importing of text messages in your Slack team's public channels.
                 <br/><br/>
                 The Slack import to Mattermost is in "Preview". Slack bot posts and channels with underscores do not yet import.
                 <br/><br/>
@@ -39,22 +51,25 @@ module.exports = React.createClass({
 
         var messageSection;
         switch (this.state.status) {
-            case 'ready':
+
-                messageSection = '';
+        case 'ready':
+            messageSection = '';
             break;
-            case 'in-progress':
+        case 'in-progress':
-                messageSection = (
+            messageSection = (
-                    <p className="confirm-import alert alert-warning"><i className="fa fa-spinner fa-pulse"></i> Importing...</p>
+                <p className='confirm-import alert alert-warning'><i className='fa fa-spinner fa-pulse'></i> Importing...</p>
             );
             break;
-            case 'done':
+        case 'done':
-                messageSection = (
+            messageSection = (
-                    <p className="confirm-import alert alert-success"><i className="fa fa-check"></i> Import successful: <a href={this.state.link} download='MattermostImportSummary.txt'>View Summary</a></p>
+                <p className='confirm-import alert alert-success'><i className='fa fa-check'></i> Import successful: <a href={this.state.link}
+                download='MattermostImportSummary.txt'>View Summary</a></p>
             );
             break;
-            case 'fail':
+        case 'fail':
-                messageSection = (
+            messageSection = (
-                    <p className="confirm-import alert alert-warning"><i className="fa fa-warning"></i> Import failure: <a href={this.state.link} download='MattermostImportSummary.txt'>View Summary</a></p>
+                <p className='confirm-import alert alert-warning'><i className='fa fa-warning'></i> Import failure: <a href={this.state.link}
+                download='MattermostImportSummary.txt'>View Summary</a></p>
             );
             break;
         }
@@ -62,10 +77,22 @@ module.exports = React.createClass({
         return (
             <div>
                 <div className='modal-header'>
-                    <button type='button' className='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
+                    <button type='button'
-                    <h4 className='modal-title' ref='title'><i className='modal-back'></i>Import</h4>
+                        className='close'
+                        data-dismiss='modal'
+                        aria-label='Close'
+                    >
+                        <span aria-hidden='true'>&times;</span>
+                    </button>
+                    <h4
+                        className='modal-title'
+                        ref='title'
+                    ><i className='modal-back'></i>Import</h4>
                 </div>
-                <div ref='wrapper' className='user-settings'>
+                <div
+                    ref='wrapper'
+                    className='user-settings'
+                >
                     <h3 className='tab-header'>Import</h3>
                     <div className='divider-dark first'/>
                     {uploadSection}
@@ -75,4 +102,4 @@ module.exports = React.createClass({
             </div>
         );
     }
-});
+}

web/react/components/team_members.jsx

@@ -2,77 +2,131 @@
 // See License.txt for license information.
 
 var UserStore = require('../stores/user_store.jsx');
-var ChannelStore = require('../stores/channel_store.jsx');
 var MemberListTeam = require('./member_list_team.jsx');
-var Client = require('../utils/client.jsx');
 var utils = require('../utils/utils.jsx');
 
 function getStateFromStores() {
     var users = UserStore.getProfiles();
-    var member_list = [];
+    var memberList = [];
-    for (var id in users) member_list.push(users[id]);
+    for (var id in users) {
+        if (users.hasOwnProperty(id)) {
+            memberList.push(users[id]);
+        }
+    }
+
+    memberList.sort(function sort(a, b) {
+        if (a.username < b.username) {
+            return -1;
+        }
+
+        if (a.username > b.username) {
+            return 1;
+        }
 
-    member_list.sort(function(a,b) {
-        if (a.username < b.username) return -1;
-        if (a.username > b.username) return 1;
         return 0;
     });
 
     return {
-        member_list: member_list
+        member_list: memberList
     };
 }
 
-module.exports = React.createClass({
+export default class TeamMembers extends React.Component {
-    componentDidMount: function() {
+    constructor(props) {
-        UserStore.addChangeListener(this._onChange);
+        super(props);
+
+        this.onChange = this.onChange.bind(this);
+
+        this.state = getStateFromStores();
+    }
+
+    componentDidMount() {
+        UserStore.addChangeListener(this.onChange);
 
         var self = this;
-        $(this.refs.modal.getDOMNode()).on('hidden.bs.modal', function(e) {
+        $(this.refs.modal.getDOMNode()).on('hidden.bs.modal', function show() {
-            self.setState({ render_members: false });
+            self.setState({render_members: false});
         });
 
-        $(this.refs.modal.getDOMNode()).on('show.bs.modal', function(e) {
+        $(this.refs.modal.getDOMNode()).on('show.bs.modal', function hide() {
-            self.setState({ render_members: true });
+            self.setState({render_members: true});
         });
-    },
+    }
-     componentWillUnmount: function() {
+
-        UserStore.removeChangeListener(this._onChange);
+    componentWillUnmount() {
-    },
+        UserStore.removeChangeListener(this.onChange);
-    _onChange: function() {
+    }
+
+    onChange() {
         var newState = getStateFromStores();
         if (!utils.areStatesEqual(newState, this.state)) {
             this.setState(newState);
         }
-    },
+    }
-    getInitialState: function() {
+
-        return getStateFromStores();
+    render() {
-    },
+        var serverError = null;
-    render: function() {
+
-        var server_error = this.state.server_error ? <label className='has-error control-label'>{this.state.server_error}</label> : null;
+        if (this.state.server_error) {
+            serverError = <label className='has-error control-label'>{this.state.server_error}</label>;
+        }
+
+        var renderMembers = '';
+
+        if (this.state.render_members) {
+            renderMembers = <MemberListTeam users={this.state.member_list} />;
+        }
 
         return (
-            <div className="modal fade" ref="modal" id="team_members" tabIndex="-1" role="dialog" aria-hidden="true">
+            <div
-               <div className="modal-dialog">
+                className='modal fade'
-                  <div className="modal-content">
+                ref='modal'
-                    <div className="modal-header">
+                id='team_members'
-                      <button type="button" className="close" data-dismiss="modal" aria-label="Close" data-reactid=".5.0.0.0.0"><span aria-hidden="true" data-reactid=".5.0.0.0.0.0">×</span></button>
+                tabIndex='-1'
-                      <h4 className="modal-title" id="myModalLabel">{this.props.teamDisplayName + " Members"}</h4>
+                role='dialog'
-                    </div>
+                aria-hidden='true'
-                    <div ref="modalBody" className="modal-body">
+            >
-                        <div className="channel-settings">
+                <div className='modal-dialog'>
-                            <div className="team-member-list">
+                    <div className='modal-content'>
-                                { this.state.render_members ? <MemberListTeam users={this.state.member_list} /> : "" }
+                        <div className='modal-header'>
+                            <button
+                                type='button'
+                                className='close'
+                                data-dismiss='modal'
+                                aria-label='Close'
+                            >
+                                <span aria-hidden='true'>×</span>
+                            </button>
+                            <h4
+                                className='modal-title'
+                                id='myModalLabel'
+                            >{this.props.teamDisplayName + ' Members'}</h4>
+                        </div>
+                        <div
+                            ref='modalBody'
+                            className='modal-body'
+                        >
+                            <div className='channel-settings'>
+                                <div className='team-member-list'>
+                                    {renderMembers}
+                                </div>
+                                {serverError}
                             </div>
-                            { server_error }
+                        </div>
+                        <div className='modal-footer'>
+                            <button
+                                type='button'
+                                className='btn btn-default'
+                                data-dismiss='modal'
+                            >Close</button>
                         </div>
                     </div>
-                    <div className="modal-footer">
-                      <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
-                    </div>
-                  </div>
                </div>
             </div>
         );
     }
-});
+}
+
+TeamMembers.propTypes = {
+    teamDisplayName: React.PropTypes.string
+};

web/react/components/user_settings.jsx

@@ -8,56 +8,82 @@ var SecurityTab = require('./user_settings_security.jsx');
 var GeneralTab = require('./user_settings_general.jsx');
 var AppearanceTab = require('./user_settings_appearance.jsx');
 
-module.exports = React.createClass({
+export default class UserSettings extends React.Component {
-    displayName: 'UserSettings',
+    constructor(props) {
-    propTypes: {
+        super(props);
-        activeTab: React.PropTypes.string,
+
-        activeSection: React.PropTypes.string,
+        this.onListenerChange = this.onListenerChange.bind(this);
-        updateSection: React.PropTypes.func,
+
-        updateTab: React.PropTypes.func
+        this.state = {user: UserStore.getCurrentUser()};
-    },
+    }
-    componentDidMount: function() {
+
+    componentDidMount() {
         UserStore.addChangeListener(this.onListenerChange);
-    },
+    }
-    componentWillUnmount: function() {
+
+    componentWillUnmount() {
         UserStore.removeChangeListener(this.onListenerChange);
-    },
+    }
-    onListenerChange: function () {
+
+    onListenerChange() {
         var user = UserStore.getCurrentUser();
         if (!utils.areStatesEqual(this.state.user, user)) {
             this.setState({user: user});
         }
-    },
+    }
-    getInitialState: function() {
+
-        return {user: UserStore.getCurrentUser()};
+    render() {
-    },
-    render: function() {
         if (this.props.activeTab === 'general') {
             return (
                 <div>
-                    <GeneralTab user={this.state.user} activeSection={this.props.activeSection} updateSection={this.props.updateSection} />
+                    <GeneralTab
+                        user={this.state.user}
+                        activeSection={this.props.activeSection}
+                        updateSection={this.props.updateSection}
+                    />
                 </div>
             );
         } else if (this.props.activeTab === 'security') {
             return (
                 <div>
-                    <SecurityTab user={this.state.user} activeSection={this.props.activeSection} updateSection={this.props.updateSection} updateTab={this.props.updateTab} />
+                    <SecurityTab
+                        user={this.state.user}
+                        activeSection={this.props.activeSection}
+                        updateSection={this.props.updateSection}
+                        updateTab={this.props.updateTab}
+                    />
                 </div>
             );
         } else if (this.props.activeTab === 'notifications') {
             return (
                 <div>
-                    <NotificationsTab user={this.state.user} activeSection={this.props.activeSection} updateSection={this.props.updateSection} updateTab={this.props.updateTab} />
+                    <NotificationsTab
+                        user={this.state.user}
+                        activeSection={this.props.activeSection}
+                        updateSection={this.props.updateSection}
+                        updateTab={this.props.updateTab}
+                    />
                 </div>
             );
         } else if (this.props.activeTab === 'appearance') {
             return (
                 <div>
-                    <AppearanceTab activeSection={this.props.activeSection} updateSection={this.props.updateSection} updateTab={this.props.updateTab} />
+                    <AppearanceTab
+                        activeSection={this.props.activeSection}
+                        updateSection={this.props.updateSection}
+                        updateTab={this.props.updateTab}
+                    />
                 </div>
             );
-        } else {
-            return <div/>;
         }
+
+        return <div/>;
     }
-});
+}
+
+UserSettings.propTypes = {
+    activeTab: React.PropTypes.string,
+    activeSection: React.PropTypes.string,
+    updateSection: React.PropTypes.func,
+    updateTab: React.PropTypes.func
+};