Refactored various React components to use ES6 syntax and to match the style guide without any errors or warnings

web/react/components/create_post.jsx

@@ -1,33 +1,68 @@
 // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-var AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
-var client = require('../utils/client.jsx');
-var AsyncClient = require('../utils/async_client.jsx');
-var ChannelStore = require('../stores/channel_store.jsx');
-var PostStore = require('../stores/post_store.jsx');
-var UserStore = require('../stores/user_store.jsx');
-var SocketStore = require('../stores/socket_store.jsx');
-var MsgTyping = require('./msg_typing.jsx');
-var Textbox = require('./textbox.jsx');
-var FileUpload = require('./file_upload.jsx');
-var FilePreview = require('./file_preview.jsx');
-var utils = require('../utils/utils.jsx');
+const AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
+const Client = require('../utils/client.jsx');
+const AsyncClient = require('../utils/async_client.jsx');
+const ChannelStore = require('../stores/channel_store.jsx');
+const PostStore = require('../stores/post_store.jsx');
+const UserStore = require('../stores/user_store.jsx');
+const SocketStore = require('../stores/socket_store.jsx');
+const MsgTyping = require('./msg_typing.jsx');
+const Textbox = require('./textbox.jsx');
+const FileUpload = require('./file_upload.jsx');
+const FilePreview = require('./file_preview.jsx');
+const Utils = require('../utils/utils.jsx');
 
-var Constants = require('../utils/constants.jsx');
-var ActionTypes = Constants.ActionTypes;
+const Constants = require('../utils/constants.jsx');
+const ActionTypes = Constants.ActionTypes;
 
-module.exports = React.createClass({
-    displayName: 'CreatePost',
-    lastTime: 0,
-    handleSubmit: function(e) {
+export default class CreatePost extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.lastTime = 0;
+
+        this.handleSubmit = this.handleSubmit.bind(this);
+        this.postMsgKeyPress = this.postMsgKeyPress.bind(this);
+        this.handleUserInput = this.handleUserInput.bind(this);
+        this.resizePostHolder = this.resizePostHolder.bind(this);
+        this.handleUploadStart = this.handleUploadStart.bind(this);
+        this.handleFileUploadComplete = this.handleFileUploadComplete.bind(this);
+        this.handleUploadError = this.handleUploadError.bind(this);
+        this.removePreview = this.removePreview.bind(this);
+        this.onChange = this.onChange.bind(this);
+        this.getFileCount = this.getFileCount.bind(this);
+
+        PostStore.clearDraftUploads();
+
+        const draft = PostStore.getCurrentDraft();
+        let previews = [];
+        let messageText = '';
+        let uploadsInProgress = [];
+        if (draft && draft.previews && draft.message) {
+            previews = draft.previews;
+            messageText = draft.message;
+            uploadsInProgress = draft.uploadsInProgress;
+        }
+
+        this.state = {
+            channelId: ChannelStore.getCurrentId(),
+            messageText: messageText,
+            uploadsInProgress: uploadsInProgress,
+            previews: previews,
+            submitting: false,
+            initialText: messageText
+        };
+    }
+    handleSubmit(e) {
         e.preventDefault();
 
         if (this.state.uploadsInProgress.length > 0 || this.state.submitting) {
             return;
         }
 
-        var post = {};
+        let post = {};
         post.filenames = [];
         post.message = this.state.messageText;
 
@@ -36,18 +71,18 @@ module.exports = React.createClass({
         }
 
         if (post.message.length > Constants.CHARACTER_LIMIT) {
-            this.setState({postError: 'Post length must be less than ' + Constants.CHARACTER_LIMIT + ' characters.'});
+            this.setState({postError: `Post length must be less than ${Constants.CHARACTER_LIMIT} characters.`});
             return;
         }
 
         this.setState({submitting: true, serverError: null});
 
         if (post.message.indexOf('/') === 0) {
-            client.executeCommand(
+            Client.executeCommand(
                 this.state.channelId,
                 post.message,
                 false,
-                function(data) {
+                function handleCommandSuccess(data) {
                     PostStore.storeDraft(data.channel_id, null);
                     this.setState({messageText: '', submitting: false, postError: null, previews: [], serverError: null});
 
@@ -55,8 +90,8 @@ module.exports = React.createClass({
                         window.location.href = data.goto_location;
                     }
                 }.bind(this),
-                function(err) {
-                    var state = {};
+                function handleCommandError(err) {
+                    let state = {};
                     state.serverError = err.message;
                     state.submitting = false;
                     this.setState(state);
@@ -66,26 +101,26 @@ module.exports = React.createClass({
             post.channel_id = this.state.channelId;
             post.filenames = this.state.previews;
 
-            var time = utils.getTimestamp();
-            var userId = UserStore.getCurrentId();
-            post.pending_post_id = userId + ':' + time;
+            const time = Utils.getTimestamp();
+            const userId = UserStore.getCurrentId();
+            post.pending_post_id = `${userId}:${time}`;
             post.user_id = userId;
             post.create_at = time;
             post.root_id = this.state.rootId;
             post.parent_id = this.state.parentId;
 
-            var channel = ChannelStore.get(this.state.channelId);
+            const channel = ChannelStore.get(this.state.channelId);
 
             PostStore.storePendingPost(post);
             PostStore.storeDraft(channel.id, null);
             this.setState({messageText: '', submitting: false, postError: null, previews: [], serverError: null});
 
-            client.createPost(post, channel,
-                function(data) {
+            Client.createPost(post, channel,
+                function handlePostSuccess(data) {
                     this.resizePostHolder();
                     AsyncClient.getPosts();
 
-                    var member = ChannelStore.getMember(channel.id);
+                    let member = ChannelStore.getMember(channel.id);
                     member.msg_count = channel.total_msg_count;
                     member.last_viewed_at = Date.now();
                     ChannelStore.setChannelMember(member);
@@ -95,8 +130,8 @@ module.exports = React.createClass({
                         post: data
                     });
                 }.bind(this),
-                function(err) {
-                    var state = {};
+                function handlePostError(err) {
+                    let state = {};
 
                     if (err.message === 'Invalid RootId parameter') {
                         if ($('#post_deleted').length > 0) {
@@ -113,83 +148,83 @@ module.exports = React.createClass({
                 }.bind(this)
             );
         }
-    },
-    componentDidUpdate: function() {
+    }
+    componentDidUpdate() {
         this.resizePostHolder();
-    },
-    postMsgKeyPress: function(e) {
+    }
+    postMsgKeyPress(e) {
         if (e.which === 13 && !e.shiftKey && !e.altKey) {
             e.preventDefault();
-            this.refs.textbox.getDOMNode().blur();
+            React.findDOMNode(this.refs.textbox).blur();
             this.handleSubmit(e);
         }
 
-        var t = Date.now();
+        const t = Date.now();
         if ((t - this.lastTime) > 5000) {
-            SocketStore.sendMessage({channel_id: this.state.channelId, action: 'typing', props: {'parent_id': ''}, state: {}});
+            SocketStore.sendMessage({channel_id: this.state.channelId, action: 'typing', props: {parent_id: ''}, state: {}});
             this.lastTime = t;
         }
-    },
-    handleUserInput: function(messageText) {
+    }
+    handleUserInput(messageText) {
         this.resizePostHolder();
         this.setState({messageText: messageText});
 
-        var draft = PostStore.getCurrentDraft();
-        draft['message'] = messageText;
+        let draft = PostStore.getCurrentDraft();
+        draft.message = messageText;
         PostStore.storeCurrentDraft(draft);
-    },
-    resizePostHolder: function() {
-        var height = $(window).height() - $(this.refs.topDiv.getDOMNode()).height() - $('#error_bar').outerHeight() - 50;
-        $('.post-list-holder-by-time').css('height', height + 'px');
+    }
+    resizePostHolder() {
+        const height = $(window).height() - $(React.findDOMNode(this.refs.topDiv)).height() - $('#error_bar').outerHeight() - 50;
+        $('.post-list-holder-by-time').css('height', `${height}px`);
         $(window).trigger('resize');
-    },
-    handleUploadStart: function(clientIds, channelId) {
-        var draft = PostStore.getDraft(channelId);
+    }
+    handleUploadStart(clientIds, channelId) {
+        let draft = PostStore.getDraft(channelId);
 
-        draft['uploadsInProgress'] = draft['uploadsInProgress'].concat(clientIds);
+        draft.uploadsInProgress = draft.uploadsInProgress.concat(clientIds);
         PostStore.storeDraft(channelId, draft);
 
-        this.setState({uploadsInProgress: draft['uploadsInProgress']});
-    },
-    handleFileUploadComplete: function(filenames, clientIds, channelId) {
-        var draft = PostStore.getDraft(channelId);
+        this.setState({uploadsInProgress: draft.uploadsInProgress});
+    }
+    handleFileUploadComplete(filenames, clientIds, channelId) {
+        let draft = PostStore.getDraft(channelId);
 
         // remove each finished file from uploads
-        for (var i = 0; i < clientIds.length; i++) {
-            var index = draft['uploadsInProgress'].indexOf(clientIds[i]);
+        for (let i = 0; i < clientIds.length; i++) {
+            const index = draft.uploadsInProgress.indexOf(clientIds[i]);
 
             if (index !== -1) {
-                draft['uploadsInProgress'].splice(index, 1);
+                draft.uploadsInProgress.splice(index, 1);
             }
         }
 
-        draft['previews'] = draft['previews'].concat(filenames);
+        draft.previews = draft.previews.concat(filenames);
         PostStore.storeDraft(channelId, draft);
 
-        this.setState({uploadsInProgress: draft['uploadsInProgress'], previews: draft['previews']});
-    },
-    handleUploadError: function(err, clientId) {
+        this.setState({uploadsInProgress: draft.uploadsInProgress, previews: draft.previews});
+    }
+    handleUploadError(err, clientId) {
         if (clientId !== -1) {
-            var draft = PostStore.getDraft(this.state.channelId);
+            let draft = PostStore.getDraft(this.state.channelId);
 
-            var index = draft['uploadsInProgress'].indexOf(clientId);
+            const index = draft.uploadsInProgress.indexOf(clientId);
             if (index !== -1) {
-                draft['uploadsInProgress'].splice(index, 1);
+                draft.uploadsInProgress.splice(index, 1);
             }
 
             PostStore.storeDraft(this.state.channelId, draft);
 
-            this.setState({uploadsInProgress: draft['uploadsInProgress'], serverError: err});
+            this.setState({uploadsInProgress: draft.uploadsInProgress, serverError: err});
         } else {
             this.setState({serverError: err});
         }
-    },
-    removePreview: function(id) {
-        var previews = this.state.previews;
-        var uploadsInProgress = this.state.uploadsInProgress;
+    }
+    removePreview(id) {
+        let previews = this.state.previews;
+        let uploadsInProgress = this.state.uploadsInProgress;
 
         // id can either be the path of an uploaded file or the client id of an in progress upload
-        var index = previews.indexOf(id);
+        let index = previews.indexOf(id);
         if (index !== -1) {
             previews.splice(index, 1);
         } else {
@@ -201,28 +236,28 @@ module.exports = React.createClass({
             }
         }
 
-        var draft = PostStore.getCurrentDraft();
-        draft['previews'] = previews;
-        draft['uploadsInProgress'] = uploadsInProgress;
+        let draft = PostStore.getCurrentDraft();
+        draft.previews = previews;
+        draft.uploadsInProgress = uploadsInProgress;
         PostStore.storeCurrentDraft(draft);
 
         this.setState({previews: previews, uploadsInProgress: uploadsInProgress});
-    },
-    componentDidMount: function() {
-        ChannelStore.addChangeListener(this._onChange);
+    }
+    componentDidMount() {
+        ChannelStore.addChangeListener(this.onChange);
         this.resizePostHolder();
-    },
-    componentWillUnmount: function() {
-        ChannelStore.removeChangeListener(this._onChange);
-    },
-    _onChange: function() {
-        var channelId = ChannelStore.getCurrentId();
+    }
+    componentWillUnmount() {
+        ChannelStore.removeChangeListener(this.onChange);
+    }
+    onChange() {
+        const channelId = ChannelStore.getCurrentId();
         if (this.state.channelId !== channelId) {
-            var draft = PostStore.getCurrentDraft();
+            let draft = PostStore.getCurrentDraft();
 
-            var previews = [];
-            var messageText = '';
-            var uploadsInProgress = [];
+            let previews = [];
+            let messageText = '';
+            let uploadsInProgress = [];
             if (draft && draft.previews && draft.message) {
                 previews = draft.previews;
                 messageText = draft.message;
@@ -231,33 +266,17 @@ module.exports = React.createClass({
 
             this.setState({channelId: channelId, messageText: messageText, initialText: messageText, submitting: false, serverError: null, postError: null, previews: previews, uploadsInProgress: uploadsInProgress});
         }
-    },
-    getInitialState: function() {
-        PostStore.clearDraftUploads();
-
-        var draft = PostStore.getCurrentDraft();
-        var previews = [];
-        var messageText = '';
-        var uploadsInProgress = [];
-        if (draft && draft.previews && draft.message) {
-            previews = draft.previews;
-            messageText = draft.message;
-            uploadsInProgress = draft.uploadsInProgress;
-        }
-
-        return {channelId: ChannelStore.getCurrentId(), messageText: messageText, uploadsInProgress: uploadsInProgress, previews: previews, submitting: false, initialText: messageText};
-    },
-    getFileCount: function(channelId) {
+    }
+    getFileCount(channelId) {
         if (channelId === this.state.channelId) {
             return this.state.previews.length + this.state.uploadsInProgress.length;
-        } else {
-            var draft = PostStore.getDraft(channelId);
-
-            return draft['previews'].length + draft['uploadsInProgress'].length;
         }
-    },
-    render: function() {
-        var serverError = null;
+
+        const draft = PostStore.getDraft(channelId);
+        return draft.previews.length + draft.uploadsInProgress.length;
+    }
+    render() {
+        let serverError = null;
         if (this.state.serverError) {
             serverError = (
                 <div className='has-error'>
@@ -266,12 +285,12 @@ module.exports = React.createClass({
             );
         }
 
-        var postError = null;
+        let postError = null;
         if (this.state.postError) {
             postError = <label className='control-label'>{this.state.postError}</label>;
         }
 
-        var preview = null;
+        let preview = null;
         if (this.state.previews.length > 0 || this.state.uploadsInProgress.length > 0) {
             preview = (
                 <FilePreview
@@ -281,13 +300,18 @@ module.exports = React.createClass({
             );
         }
 
-        var postFooterClassName = 'post-create-footer';
+        let postFooterClassName = 'post-create-footer';
         if (postError) {
             postFooterClassName += ' has-error';
         }
 
         return (
-            <form id='create_post' ref='topDiv' role='form' onSubmit={this.handleSubmit}>
+            <form
+                id='create_post'
+                ref='topDiv'
+                role='form'
+                onSubmit={this.handleSubmit}
+            >
                 <div className='post-create'>
                     <div className='post-create-body'>
                         <Textbox
@@ -311,10 +335,13 @@ module.exports = React.createClass({
                         {postError}
                         {serverError}
                         {preview}
-                        <MsgTyping channelId={this.state.channelId} parentId=''/>
+                        <MsgTyping
+                            channelId={this.state.channelId}
+                            parentId=''
+                        />
                     </div>
                 </div>
             </form>
         );
     }
-});
+}