Upgrading ESLint and adding some more rules. Refactoring to meet these new rules

2015-09-03 10:49:36 -04:00
--- a/web/react/.eslintrc
+++ b/web/react/.eslintrc
@@ -4,7 +4,9 @@
            "jsx": true,
            "blockBindings": true,
            "modules": true,
-            "classes": true
+            "classes": true,
+            "arrowFunctions": true,
+            "defaultParams": true, 
        },
        "plugins": [
            "react"
@@ -34,16 +36,16 @@
            "no-inner-declarations": 0,
            "no-invalid-regexp": 2,
            "no-irregular-whitespace": 2,
+            "no-unexpected-multiline": 2,
            "no-unreachable": 2,
            "valid-typeof": 2,
-            "no-unexpected-multiline": 2,

            "block-scoped-var": 1,
            "complexity": [0, 8],
            "consistent-return": 2,
            "curly": [2, "all"],
-            "dot-notation": 2,
            "dot-location": [2, "object"],
+            "dot-notation": 2,
            "eqeqeq": [2, "smart"],
            "guard-for-in": 1,
            "no-alert": 1,
@@ -78,8 +80,9 @@
            "no-self-compare": 2,
            "no-sequences": 2,
            "no-throw-literal": 2,
-            "no-unused-expressions": 2,
            "no-undef-init": 2,
+            "no-unused-expressions": 2,
+            "no-useless-concat": 0,
            "no-void": 2,
            "no-warning-comments": 0,
            "no-with": 2,
@@ -135,12 +138,31 @@
            "space-unary-ops": [2, { "words": true, "nonwords": false }],
            "wrap-regex": 2,

+            // ES6 stuff
+            "arrow-parens": [2, "always"],
+            "arrow-spacing": [2, { "before": true, "after": true }],
+            "constructor-super": 2,
+            "generator-star-spacing": [2, {"before": false, "after": true}],
+            "no-class-assign": 2,
+            "no-const-assign": 2,
+            "no-dupe-class-members": 2,
+            "no-this-before-super": 2,
+            "no-var": 0,
+            "object-shorthand": [0, "always"],
+            "prefer-arrow-callback": 0,
+            "prefer-const": 0,
+            "prefer-spread": 2,
+            "prefer-reflect": 0,
+            "prefer-template": 0,
+            "require-yield": 0,
+
            // React Specific
            "react/display-name": [2, { "acceptTranspilerName": true }],
            "react/jsx-boolean-value": [2, "always"],
+            "react/jsx-closing-bracket-location": [2, { "location": "tag-aligned" }],
            "react/jsx-curly-spacing": [2, "never"],
+            "react/jsx-indent-props": [2, 4],
            "react/jsx-max-props-per-line": [2, { "maximum": 1 }],
-            // SOON "react/jsx-indent-props": [2, 4],
            "react/jsx-no-duplicate-props": [2, { "ignoreCase": false }],
            "react/jsx-no-literals": 0,
            "react/jsx-no-undef": 2,
@@ -151,10 +173,11 @@
            "react/no-did-mount-set-state": 2,
            "react/no-did-update-set-state": 2,
            "react/no-multi-comp": 2,
+            "react/no-set-state": 0,
            "react/no-unknown-property": 2,
            "react/prop-types": 2,
-            "react/sort-comp": 0,
            "react/self-closing-comp": 2,
+            "react/sort-comp": 0,
            "react/wrap-multilines": 2
        }
 }
--- a/web/react/components/channel_info_modal.jsx
+++ b/web/react/components/channel_info_modal.jsx
@@ -34,27 +34,27 @@ export default class CommandList extends React.Component {

        return (
            <div
-              className='modal fade'
-              ref='modal'
-              id='channel_info'
-              tabIndex='-1'
-              role='dialog'
-              aria-hidden='true'
+                className='modal fade'
+                ref='modal'
+                id='channel_info'
+                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'
+                          type='button'
+                          className='close'
+                          data-dismiss='modal'
+                          aria-label='Close'
                      >
                        <span aria-hidden='true'>&times;</span>
                      </button>
                      <h4
-                        className='modal-title'
-                        id='myModalLabel'
+                          className='modal-title'
+                          id='myModalLabel'
                      >
                        <span className='name'>{channel.display_name}</span>
                      </h4>
@@ -75,9 +75,9 @@ export default class CommandList extends React.Component {
                    </div>
                    <div className='modal-footer'>
                      <button
-                        type='button'
-                        className='btn btn-default'
-                        data-dismiss='modal'
+                          type='button'
+                          className='btn btn-default'
+                          data-dismiss='modal'
                      >Close</button>
                    </div>
                  </div>
--- a/web/react/components/channel_invite_modal.jsx
+++ b/web/react/components/channel_invite_modal.jsx
@@ -146,8 +146,8 @@ export default class ChannelInviteModal extends React.Component {
                aria-hidden='true'
            >
              <div
-                className='modal-dialog'
-                role='document'
+                  className='modal-dialog'
+                  role='document'
              >
                <div className='modal-content'>
                  <div className='modal-header'>
--- a/web/react/components/create_post.jsx
+++ b/web/react/components/create_post.jsx
@@ -296,7 +296,8 @@ export default class CreatePost extends React.Component {
                <FilePreview
                    files={this.state.previews}
                    onRemove={this.removePreview}
-                    uploadsInProgress={this.state.uploadsInProgress} />
+                    uploadsInProgress={this.state.uploadsInProgress}
+                />
            );
        }

@@ -321,7 +322,8 @@ export default class CreatePost extends React.Component {
                            createMessage='Write a message...'
                            channelId={this.state.channelId}
                            id='post_textbox'
-                            ref='textbox' />
+                            ref='textbox'
+                        />
                        <FileUpload
                            ref='fileUpload'
                            getFileCount={this.getFileCount}
@@ -329,7 +331,8 @@ export default class CreatePost extends React.Component {
                            onFileUpload={this.handleFileUploadComplete}
                            onUploadError={this.handleUploadError}
                            postType='post'
-                            channelId='' />
+                            channelId=''
+                        />
                    </div>
                    <div className={postFooterClassName}>
                        {postError}
--- a/web/react/components/edit_post_modal.jsx
+++ b/web/react/components/edit_post_modal.jsx
@@ -88,7 +88,8 @@ export default class EditPostModal extends React.Component {
                id='edit_post'
                role='dialog'
                tabIndex='-1'
-                aria-hidden='true' >
+                aria-hidden='true'
+            >
                <div className='modal-dialog modal-push-down'>
                    <div className='modal-content'>
                        <div className='modal-header'>
@@ -97,7 +98,8 @@ export default class EditPostModal extends React.Component {
                                className='close'
                                data-dismiss='modal'
                                aria-label='Close'
-                                onClick={this.handleEditClose}>
+                                onClick={this.handleEditClose}
+                            >
                                <span aria-hidden='true'>&times;</span>
                            </button>
                        <h4 className='modal-title'>Edit {this.state.title}</h4>
@@ -110,20 +112,22 @@ export default class EditPostModal extends React.Component {
                                createMessage='Edit the post...'
                                id='edit_textbox'
                                ref='editbox'
-                                />
+                            />
                            {error}
                        </div>
                        <div className='modal-footer'>
                            <button
                                type='button'
                                className='btn btn-default'
-                                data-dismiss='modal' >
+                                data-dismiss='modal'
+                            >
                                Cancel
                            </button>
                            <button
                                type='button'
                                className='btn btn-primary'
-                                onClick={this.handleEdit}>
+                                onClick={this.handleEdit}
+                            >
                                Save
                            </button>
                        </div>
--- a/web/react/components/email_verify.jsx
+++ b/web/react/components/email_verify.jsx
@@ -24,12 +24,14 @@ export default class EmailVerify extends React.Component {
        } else {
            title = config.SiteName + ' Email Not Verified';
            body = <p>Please verify your email address. Check your inbox for an email.</p>;
-            resend = (<button
-                        onClick={this.handleResend}
-                        className='btn btn-primary'
-                    >
-                        Resend Email
-                    </button>);
+            resend = (
+                <button
+                    onClick={this.handleResend}
+                    className='btn btn-primary'
+                >
+                    Resend Email
+                </button>
+            );
        }

        return (
--- a/web/react/components/error_bar.jsx
+++ b/web/react/components/error_bar.jsx
@@ -69,7 +69,8 @@ export default class ErrorBar extends React.Component {
                    <a
                        href='#'
                        className='error-bar__close'
-                        onClick={this.handleClose}>
+                        onClick={this.handleClose}
+                    >
                        &times;
                    </a>
                </div>
--- a/web/react/components/file_attachment.jsx
+++ b/web/react/components/file_attachment.jsx
@@ -101,10 +101,13 @@ export default class FileAttachment extends React.Component {

        var thumbnail;
        if (type === 'image') {
-            thumbnail = (<div
-                            ref={filename}
-                            className='post__load'
-                            style={{backgroundImage: 'url(/static/images/load.gif)'}} />);
+            thumbnail = (
+                <div
+                    ref={filename}
+                    className='post__load'
+                    style={{backgroundImage: 'url(/static/images/load.gif)'}}
+                />
+            );
        } else {
            thumbnail = <div className={'file-icon ' + utils.getIconClassName(type)}/>;
        }
@@ -135,20 +138,23 @@ export default class FileAttachment extends React.Component {
        return (
            <div
                className='post-image__column'
-                key={filename}>
+                key={filename}
+            >
                <a className='post-image__thumbnail'
                    href='#'
                    onClick={this.props.handleImageClick}
                    data-img-id={this.props.index}
                    data-toggle='modal'
-                    data-target={'#' + this.props.modalId} >
+                    data-target={'#' + this.props.modalId}
+                >
                    {thumbnail}
                </a>
                <div className='post-image__details'>
                    <div
                        data-toggle='tooltip'
                        title={filenameString}
-                        className='post-image__name' >
+                        className='post-image__name'
+                    >
                        {trimmedFilename}
                    </div>
                    <div>
--- a/web/react/components/file_attachment_list.jsx
+++ b/web/react/components/file_attachment_list.jsx
@@ -28,7 +28,8 @@ export default class FileAttachmentList extends React.Component {
                    filename={filenames[i]}
                    index={i}
                    modalId={modalId}
-                    handleImageClick={this.handleImageClick} />
+                    handleImageClick={this.handleImageClick}
+                />
            );
        }

@@ -42,7 +43,8 @@ export default class FileAttachmentList extends React.Component {
                    userId={this.props.userId}
                    modalId={modalId}
                    startId={this.state.startImgId}
-                    filenames={filenames} />
+                    filenames={filenames}
+                />
            </div>
        );
    }
--- a/web/react/components/find_team.jsx
+++ b/web/react/components/find_team.jsx
@@ -77,7 +77,10 @@ export default class FindTeam extends React.Component {
                    </div>
                    <button
                        className='btn btn-md btn-primary'
-                        type='submit'>Send</button>
+                        type='submit'
+                    >
+                        Send
+                    </button>
                </form>
                </div>
        );
--- a/web/react/components/member_list.jsx
+++ b/web/react/components/member_list.jsx
@@ -23,14 +23,16 @@ export default class MemberList extends React.Component {
        return (
            <div className='member-list-holder'>
                {members.map(function mymembers(member) {
-                    return (<MemberListItem
-                                key={member.id}
-                                member={member}
-                                isAdmin={this.props.isAdmin}
-                                handleInvite={this.props.handleInvite}
-                                handleRemove={this.props.handleRemove}
-                                handleMakeAdmin={this.props.handleMakeAdmin}
-                            />);
+                    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>
--- a/web/react/components/member_list_item.jsx
+++ b/web/react/components/member_list_item.jsx
@@ -36,8 +36,10 @@ export default class MemberListItem extends React.Component {
            invite = (
                    <a
                        onClick={this.handleInvite}
-                        className='btn btn-sm btn-primary member-invite'>
-                        <i className='glyphicon glyphicon-envelope'/>  Add
+                        className='btn btn-sm btn-primary member-invite'
+                    >
+                        <i className='glyphicon glyphicon-envelope'/>
+                        {' Add'}
                    </a>
            );
        } else if (isAdmin && !isMemberAdmin && (member.id !== UserStore.getCurrentId())) {
@@ -50,7 +52,9 @@ export default class MemberListItem extends React.Component {
                                        <a
                                            href=''
                                            role='menuitem'
-                                            onClick={self.handleMakeAdmin}>Make Admin
+                                            onClick={self.handleMakeAdmin}
+                                        >
+                                            Make Admin
                                        </a>
                                    </li>);
            }
@@ -62,7 +66,9 @@ export default class MemberListItem extends React.Component {
                                            <a
                                                href=''
                                                role='menuitem'
-                                                onClick={self.handleRemove}>Remove Member
+                                                onClick={self.handleRemove}
+                                            >
+                                                Remove Member
                                            </a>
                                        </li>);
            }
@@ -75,14 +81,16 @@ export default class MemberListItem extends React.Component {
                                type='button'
                                id='channel_header_dropdown'
                                data-toggle='dropdown'
-                                aria-expanded='true' >
+                                aria-expanded='true'
+                            >
                                <span className='text-capitalize'>{member.roles || 'Member'} </span>
                                <span className='caret'></span>
                            </a>
                            <ul
                                className='dropdown-menu member-menu'
                                role='menu'
-                                aria-labelledby='channel_header_dropdown'>
+                                aria-labelledby='channel_header_dropdown'
+                            >
                                {makeAdminOption}
                                {handleRemoveOption}
                            </ul>
@@ -98,7 +106,8 @@ export default class MemberListItem extends React.Component {
                    className='post-profile-img pull-left'
                    src={'/api/v1/users/' + member.id + '/image?time=' + timestamp}
                    height='36'
-                    width='36' />
+                    width='36'
+                />
                <span className='member-name'>{member.username}</span>
                <span className='member-email'>{member.email}</span>
                {invite}
--- a/web/react/components/mention.jsx
+++ b/web/react/components/mention.jsx
@@ -19,11 +19,14 @@ export default class Mention extends React.Component {
        if (this.props.id === 'allmention' || this.props.id === 'channelmention') {
            icon = <span><i className='mention-img fa fa-users fa-2x'></i></span>;
        } else if (this.props.id != null) {
-            icon = (<span><img
-                            className='mention-img'
-                            src={'/api/v1/users/' + this.props.id + '/image?time=' + timestamp}
-                        />
-                    </span>);
+            icon = (
+                <span>
+                    <img
+                        className='mention-img'
+                        src={'/api/v1/users/' + this.props.id + '/image?time=' + timestamp}
+                    />
+                </span>
+            );
        } else {
            icon = <span><i className='mention-img fa fa-users fa-2x'></i></span>;
        }
--- a/web/react/components/mention_list.jsx
+++ b/web/react/components/mention_list.jsx
@@ -216,7 +216,8 @@ export default class MentionList extends React.Component {
                        listId={index}
                        isFocused={isFocused}
                        handleMouseEnter={this.handleMouseEnter.bind(this, index)}
-                        handleClick={this.handleClick} />
+                        handleClick={this.handleClick}
+                    />
                );
                index++;
            }
@@ -240,11 +241,13 @@ export default class MentionList extends React.Component {
        return (
            <div
                className='mentions--top'
-                style={style}>
+                style={style}
+            >
                <div
                    ref='mentionlist'
                    className='mentions-box'
-                    id='mentionsbox'>
+                    id='mentionsbox'
+                >
                    {mentions}
                </div>
            </div>
--- a/web/react/components/more_channels.jsx
+++ b/web/react/components/more_channels.jsx
@@ -86,15 +86,21 @@ export default class MoreChannels extends React.Component {
                                {channels.map(function cMap(channel, index) {
                                    var joinButton;
                                    if (self.state.joiningChannel === index) {
-                                        joinButton = (<img
-                                                        className='join-channel-loading-gif'
-                                                        src='/static/images/load.gif'
-                                                    />);
+                                        joinButton = (
+                                            <img
+                                                className='join-channel-loading-gif'
+                                                src='/static/images/load.gif'
+                                            />
+                                            );
                                    } else {
-                                        joinButton = (<button
-                                                        onClick={self.handleJoin.bind(self, channel, index)}
-                                                        className='btn btn-primary'>Join
-                                                    </button>);
+                                        joinButton = (
+                                            <button
+                                                onClick={self.handleJoin.bind(self, channel, index)}
+                                                className='btn btn-primary'
+                                            >
+                                                Join
+                                            </button>
+                                            );
                                    }

                                    return (
@@ -152,7 +158,9 @@ export default class MoreChannels extends React.Component {
                                data-channeltype={this.state.channelType}
                                type='button'
                                className='btn btn-primary channel-create-btn'
-                                onClick={this.handleNewChannel}>Create New Channel
+                                onClick={this.handleNewChannel}
+                            >
+                                Create New Channel
                            </button>
                        </div>
                        <div className='modal-body'>
--- a/web/react/components/navbar_dropdown.jsx
+++ b/web/react/components/navbar_dropdown.jsx
@@ -61,15 +61,17 @@ export default class NavbarDropdown extends React.Component {
        if (currentUser != null) {
            isAdmin = currentUser.roles.indexOf('admin') > -1;

-            inviteLink = (<li>
-                            <a
-                                    href='#'
-                                    data-toggle='modal'
-                                    data-target='#invite_member'
-                                >
-                                Invite New Member
-                            </a>
-                        </li>);
+            inviteLink = (
+                <li>
+                    <a
+                        href='#'
+                        data-toggle='modal'
+                        data-target='#invite_member'
+                    >
+                        Invite New Member
+                    </a>
+                </li>
+            );

            if (this.props.teamType === 'O') {
                teamLink = (
@@ -89,15 +91,17 @@ export default class NavbarDropdown extends React.Component {
        }

        if (isAdmin) {
-            manageLink = (<li>
-                            <a
-                                    href='#'
-                                    data-toggle='modal'
-                                    data-target='#team_members'
-                                >
-                                    Manage Team
-                            </a>
-                        </li>);
+            manageLink = (
+                <li>
+                    <a
+                        href='#'
+                        data-toggle='modal'
+                        data-target='#team_members'
+                    >
+                        Manage Team
+                    </a>
+                </li>
+            );
            teamSettings = (<li>
                                <a
                                    href='#'
@@ -111,11 +115,13 @@ export default class NavbarDropdown extends React.Component {

        var teams = [];

-        teams.push(<li
-                        className='divider'
-                        key='div'
-                    >
-                    </li>);
+        teams.push(
+            <li
+                className='divider'
+                key='div'
+            >
+            </li>
+        );
        if (this.state.teams.length > 1 && this.state.currentTeam) {
            var curTeamName = this.state.currentTeam.name;
            this.state.teams.forEach(function listTeams(teamName) {
--- a/web/react/components/new_channel.jsx
+++ b/web/react/components/new_channel.jsx
@@ -134,14 +134,16 @@ export default class NewChannelModal extends React.Component {
                ref='modal'
                tabIndex='-1'
                role='dialog'
-                aria-hidden='true'>
+                aria-hidden='true'
+            >
                <div className='modal-dialog'>
                    <div className='modal-content'>
                        <div className='modal-header'>
                            <button
                                type='button'
                                className='close'
-                                data-dismiss='modal'>
+                                data-dismiss='modal'
+                            >
                                <span aria-hidden='true'>&times;</span>
                                <span className='sr-only'>Cancel</span>
                            </button>
@@ -157,7 +159,8 @@ export default class NewChannelModal extends React.Component {
                                        ref='display_name'
                                        className='form-control'
                                        placeholder='Enter display name'
-                                        maxLength='22' />
+                                        maxLength='22'
+                                    />
                                    {displayNameError}
                                </div>
                                <div className={nameClass}>
@@ -167,7 +170,8 @@ export default class NewChannelModal extends React.Component {
                                        className='form-control'
                                        ref='channel_name'
                                        placeholder="lowercase alphanumeric's only"
-                                        maxLength='22' />
+                                        maxLength='22'
+                                    />
                                    {nameError}
                                </div>
                                <div className='form-group'>
@@ -177,7 +181,8 @@ export default class NewChannelModal extends React.Component {
                                        ref='channel_desc'
                                        rows='3'
                                        placeholder='Description'
-                                        maxLength='1024' />
+                                        maxLength='1024'
+                                    />
                                </div>
                                {serverError}
                            </div>
@@ -185,13 +190,15 @@ export default class NewChannelModal extends React.Component {
                                <button
                                    type='button'
                                    className='btn btn-default'
-                                    data-dismiss='modal' >
+                                    data-dismiss='modal'
+                                >
                                    Cancel
                                </button>
                                <button
                                    onClick={this.handleSubmit}
                                    type='submit'
-                                    className='btn btn-primary' >
+                                    className='btn btn-primary'
+                                >
                                    Create New {channelTerm}
                                </button>
                            </div>
--- a/web/react/components/post.jsx
+++ b/web/react/components/post.jsx
@@ -143,7 +143,8 @@ export default class Post extends React.Component {
                        className='post-profile-img'
                        src={'/api/v1/users/' + post.user_id + '/image?time=' + timestamp}
                        height='36'
-                        width='36' />
+                        width='36'
+                    />
                </div>
            );
        }
@@ -152,7 +153,8 @@ export default class Post extends React.Component {
            <div>
                <div
                    id={post.id}
-                    className={'post ' + sameUserClass + ' ' + rootUser + ' ' + postType + ' ' + currentUserCss} >
+                    className={'post ' + sameUserClass + ' ' + rootUser + ' ' + postType + ' ' + currentUserCss}
+                >
                    {profilePic}
                    <div className='post__content'>
                        <PostHeader
@@ -161,21 +163,24 @@ export default class Post extends React.Component {
                            sameRoot={this.props.sameRoot}
                            commentCount={commentCount}
                            handleCommentClick={this.handleCommentClick}
-                            isLastComment={this.props.isLastComment} />
+                            isLastComment={this.props.isLastComment}
+                        />
                        <PostBody
                            post={post}
                            sameRoot={this.props.sameRoot}
                            parentPost={parentPost}
                            posts={posts}
                            handleCommentClick={this.handleCommentClick}
-                            retryPost={this.retryPost} />
+                            retryPost={this.retryPost}
+                        />
                        <PostInfo
                            ref='info'
                            post={post}
                            sameRoot={this.props.sameRoot}
                            commentCount={commentCount}
                            handleCommentClick={this.handleCommentClick}
-                            allowReply='true' />
+                            allowReply='true'
+                        />
                    </div>
                </div>
            </div>
--- a/web/react/components/post_list.jsx
+++ b/web/react/components/post_list.jsx
@@ -559,7 +559,7 @@ export default class PostList extends React.Component {
                    >
                        <hr
                            className='separator__hr'
-                         />
+                        />
                        <div className='separator__text'>New Messages</div>
                    </div>
                );
--- a/web/react/components/rhs_comment.jsx
+++ b/web/react/components/rhs_comment.jsx
@@ -161,7 +161,8 @@ export default class RhsComment extends React.Component {
                    filenames={post.filenames}
                    modalId={'rhs_comment_view_image_modal_' + post.id}
                    channelId={post.channel_id}
-                    userId={post.user_id} />
+                    userId={post.user_id}
+                />
            );
        }

--- a/web/react/components/rhs_root_post.jsx
+++ b/web/react/components/rhs_root_post.jsx
@@ -99,7 +99,8 @@ export default class RhsRootPost extends React.Component {
                    filenames={post.filenames}
                    modalId={'rhs_view_image_modal_' + post.id}
                    channelId={post.channel_id}
-                    userId={post.user_id} />
+                    userId={post.user_id}
+                />
            );
        }

--- a/web/react/components/rhs_thread.jsx
+++ b/web/react/components/rhs_thread.jsx
@@ -173,8 +173,7 @@ export default class RhsThread extends React.Component {

        return (
            <div className='post-right__container'>
-                <FileUploadOverlay
-                    overlayType='right' />
+                <FileUploadOverlay overlayType='right' />
                <div className='search-bar__container sidebar--right__search-header'>{searchForm}</div>
                <div className='sidebar-right__body'>
                    <RhsHeaderPost
--- a/web/react/components/search_bar.jsx
+++ b/web/react/components/search_bar.jsx
@@ -116,19 +116,22 @@ export default class SearchBar extends React.Component {
            <div>
                <div
                    className='sidebar__collapse'
-                    onClick={this.handleClose} >
+                    onClick={this.handleClose}
+                >
                    <span className='fa fa-angle-left'></span>
                </div>
                <span
                    className='search__clear'
-                    onClick={this.clearFocus}>
+                    onClick={this.clearFocus}
+                >
                    Cancel
                </span>
                <form
                    role='form'
                    className='search__form relative-div'
-                    onSubmit={this.handleSubmit}>
-                    <span className='glyphicon glyphicon-search sidebar__search-icon'></span>
+                    onSubmit={this.handleSubmit}
+                >
+                    <span className='glyphicon glyphicon-search sidebar__search-icon' />
                    <input
                        type='text'
                        ref='search'
@@ -136,7 +139,8 @@ export default class SearchBar extends React.Component {
                        placeholder='Search'
                        value={this.state.searchTerm}
                        onFocus={this.handleUserFocus}
-                        onChange={this.handleUserInput} />
+                        onChange={this.handleUserInput}
+                    />
                    {isSearching}
                </form>
            </div>
--- a/web/react/components/setting_item_max.jsx
+++ b/web/react/components/setting_item_max.jsx
@@ -20,11 +20,15 @@ export default class SettingItemMax extends React.Component {

        var submit = '';
        if (this.props.submit) {
-            submit = (<a
-                        className='btn btn-sm btn-primary'
-                        href='#'
-                        onClick={this.props.submit}>
-                        Submit</a>);
+            submit = (
+                <a
+                    className='btn btn-sm btn-primary'
+                    href='#'
+                    onClick={this.props.submit}
+                >
+                    Submit
+                </a>
+            );
        }

        var inputs = this.props.inputs;
@@ -46,7 +50,8 @@ export default class SettingItemMax extends React.Component {
                            <a
                                className='btn btn-sm theme'
                                href='#'
-                                onClick={this.props.updateSection} >
+                                onClick={this.props.updateSection}
+                            >
                                Cancel
                            </a>
                        </li>
--- a/web/react/components/setting_picture.jsx
+++ b/web/react/components/setting_picture.jsx
@@ -98,12 +98,13 @@ export default class SettingPicture extends React.Component {
                        <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 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/web/react/components/setting_upload.jsx
+++ b/web/react/components/setting_upload.jsx
@@ -2,7 +2,6 @@
 // See License.txt for license information.

 export default class SettingsUpload extends React.Component {
-
    constructor(props) {
        super(props);

@@ -70,14 +69,19 @@ export default class SettingsUpload extends React.Component {
                <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}>
+                                onClick={this.doSubmit}
+                            >
                                Import
                            </a>
                            <div className='file-status file-name hide'></div>
--- a/web/react/components/sidebar_header.jsx
+++ b/web/react/components/sidebar_header.jsx
@@ -29,10 +29,12 @@ export default class SidebarHeader extends React.Component {
        }

        if (me.last_picture_update) {
-            profilePicture = (<img
-                                className='user__picture'
-                                src={'/api/v1/users/' + me.id + '/image?time=' + me.update_at}
-                            />);
+            profilePicture = (
+                <img
+                    className='user__picture'
+                    src={'/api/v1/users/' + me.id + '/image?time=' + me.update_at}
+                />
+            );
        }

        return (
--- a/web/react/components/sidebar_right.jsx
+++ b/web/react/components/sidebar_right.jsx
@@ -71,10 +71,12 @@ export default class SidebarRight extends React.Component {
        if (this.state.search_visible) {
            content = <SearchResults isMentionSearch={this.state.is_mention_search} />;
        } else if (this.state.post_right_visible) {
-            content = (<RhsThread
-                            fromSearch={this.state.from_search}
-                            isMentionSearch={this.state.is_mention_search}
-                        />);
+            content = (
+                <RhsThread
+                    fromSearch={this.state.from_search}
+                    isMentionSearch={this.state.is_mention_search}
+                />
+            );
        }

        return (
--- a/web/react/components/sidebar_right_menu.jsx
+++ b/web/react/components/sidebar_right_menu.jsx
@@ -68,7 +68,8 @@ export default class SidebarRightMenu extends React.Component {
                        href='#'
                        data-toggle='modal'
                        data-target='#team_members'
-                        ><i className='glyphicon glyphicon-wrench'></i>Manage Team</a>
+                    >
+                    <i className='glyphicon glyphicon-wrench'></i>Manage Team</a>
                </li>
            );
        }
--- a/web/react/components/signup_team_complete.jsx
+++ b/web/react/components/signup_team_complete.jsx
@@ -44,52 +44,66 @@ export default class SignupTeamComplete extends React.Component {
    }
    render() {
        if (this.state.wizard === 'welcome') {
-            return (<WelcomePage
-                        state={this.state}
-                        updateParent={this.updateParent}
-                    />);
+            return (
+                <WelcomePage
+                    state={this.state}
+                    updateParent={this.updateParent}
+                />
+            );
        }

        if (this.state.wizard === 'team_display_name') {
-            return (<TeamDisplayNamePage
-                        state={this.state}
-                        updateParent={this.updateParent}
-                    />);
+            return (
+                <TeamDisplayNamePage
+                    state={this.state}
+                    updateParent={this.updateParent}
+                />
+            );
        }

        if (this.state.wizard === 'team_url') {
-            return (<TeamURLPage
-                        state={this.state}
-                        updateParent={this.updateParent}
-                    />);
+            return (
+                <TeamURLPage
+                    state={this.state}
+                    updateParent={this.updateParent}
+                />
+            );
        }

        if (this.state.wizard === 'allowed_domains') {
-            return (<AllowedDomainsPage
-                        state={this.state}
-                        updateParent={this.updateParent}
-                    />);
+            return (
+                <AllowedDomainsPage
+                    state={this.state}
+                    updateParent={this.updateParent}
+                />
+            );
        }

        if (this.state.wizard === 'send_invites') {
-            return (<SendInivtesPage
-                        state={this.state}
-                        updateParent={this.updateParent}
-                    />);
+            return (
+                <SendInivtesPage
+                    state={this.state}
+                    updateParent={this.updateParent}
+                />
+            );
        }

        if (this.state.wizard === 'username') {
-            return (<UsernamePage
-                        state={this.state}
-                        updateParent={this.updateParent}
-                    />);
+            return (
+                <UsernamePage
+                    state={this.state}
+                    updateParent={this.updateParent}
+                />
+            );
        }

        if (this.state.wizard === 'password') {
-            return (<PasswordPage
-                        state={this.state}
-                        updateParent={this.updateParent}
-                    />);
+            return (
+                <PasswordPage
+                    state={this.state}
+                    updateParent={this.updateParent}
+                />
+            );
        }

        return (<div>You've already completed the signup process for this invitation or this invitation has expired.</div>);
--- a/web/react/components/team_import_tab.jsx
+++ b/web/react/components/team_import_tab.jsx
@@ -46,7 +46,8 @@ export default class TeamImportTab extends React.Component {
                title='Import from Slack'
                submit={this.doImportSlack}
                helpText={uploadHelpText}
-                fileTypesAccepted='.zip'/>
+                fileTypesAccepted='.zip'
+            />
        );

        var messageSection;
@@ -62,14 +63,30 @@ export default class TeamImportTab extends React.Component {
            break;
        case 'done':
            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' />
+                    {' Import successful: '}
+                    <a
+                        href={this.state.link}
+                        download='MattermostImportSummary.txt'
+                    >
+                        {'View Summary'}
+                    </a>
+                </p>
+        );
            break;
        case 'fail':
            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' />
+                    {' Import failure: '}
+                    <a
+                        href={this.state.link}
+                        download='MattermostImportSummary.txt'
+                    >
+                        {'View Summary'}
+                    </a>
+                </p>
            );
            break;
        }
--- a/web/react/components/team_signup_choose_auth.jsx
+++ b/web/react/components/team_signup_choose_auth.jsx
@@ -22,7 +22,7 @@ export default class ChooseAuthPage extends React.Component {
                                this.props.updatePage('service', Constants.GITLAB_SERVICE);
                            }.bind(this)
                        }
-                        >
+                    >
                        <span className='icon' />
                        <span>Create new {strings.Team} with GitLab Account</span>
                    </a>
@@ -40,7 +40,7 @@ export default class ChooseAuthPage extends React.Component {
                                this.props.updatePage('email', '');
                            }.bind(this)
                        }
-                        >
+                    >
                        <span className='fa fa-envelope' />
                        <span>Create new {strings.Team} with email address</span>
                    </a>
--- a/web/react/components/team_signup_display_name_page.jsx
+++ b/web/react/components/team_signup_display_name_page.jsx
@@ -52,8 +52,8 @@ export default class TeamSignupDisplayNamePage extends React.Component {
                <form>
                    <img
                        className='signup-team-logo'
-                        src='/static/images/logo.png' />
-
+                        src='/static/images/logo.png'
+                    />
                    <h2>{utils.toTitleCase(strings.Team) + ' Name'}</h2>
                    <div className={nameDivClass}>
                        <div className='row'>
@@ -66,22 +66,27 @@ export default class TeamSignupDisplayNamePage extends React.Component {
                                    maxLength='128'
                                    defaultValue={this.props.state.team.display_name}
                                    autoFocus={true}
-                                    onFocus={this.handleFocus} />
+                                    onFocus={this.handleFocus}
+                                />
                            </div>
                        </div>
                        {nameError}
                    </div>
-                    <div>{'Name your ' + strings.Team + ' in any language. Your ' + strings.Team + ' name shows in menus and headings.'}</div>
+                    <div>
+                        {'Name your ' + strings.Team + ' in any language. Your ' + strings.Team + ' name shows in menus and headings.'}
+                    </div>
                    <button
                        type='submit'
                        className='btn btn-primary margin--extra'
-                        onClick={this.submitNext} >
+                        onClick={this.submitNext}
+                    >
                        Next<i className='glyphicon glyphicon-chevron-right'></i>
                    </button>
                    <div className='margin--extra'>
                        <a
                            href='#'
-                            onClick={this.submitBack}>
+                            onClick={this.submitBack}
+                        >
                            Back to previous step
                        </a>
                    </div>
--- a/web/react/components/view_image.jsx
+++ b/web/react/components/view_image.jsx
@@ -307,7 +307,8 @@ export default class ViewImageModal extends React.Component {
                    ref='previewArrowLeft'
                    className='modal-prev-bar'
                    href='#'
-                    onClick={this.handlePrev}>
+                    onClick={this.handlePrev}
+                >
                    <i className='image-control image-prev'/>
                </a>
            );
@@ -317,7 +318,8 @@ export default class ViewImageModal extends React.Component {
                    ref='previewArrowRight'
                    className='modal-next-bar'
                    href='#'
-                    onClick={this.handleNext}>
+                    onClick={this.handleNext}
+                >
                    <i className='image-control image-next'/>
                </a>
            );
@@ -351,7 +353,7 @@ export default class ViewImageModal extends React.Component {
                                    ref='imageFooter'
                                    className='modal-button-bar'
                                >
-                                    <span className='pull-left text'>{'File ' + (this.state.imgId + 1) + ' of ' + this.props.filenames.length}</span>
+                                <span className='pull-left text'>{'File ' + (this.state.imgId + 1) + ' of ' + this.props.filenames.length}</span>
                                    <div className='image-links'>
                                        {publicLink}
                                        <a
--- a/web/react/package.json
+++ b/web/react/package.json
@@ -16,8 +16,8 @@
    "babelify": "^6.1.3",
    "uglify-js": "^2.4.24",
    "watchify": "^3.3.1",
-    "eslint": "^1.1.0",
-    "eslint-plugin-react": "^3.2.3"
+    "eslint": "^1.3.1",
+    "eslint-plugin-react": "^3.3.1"
  },
  "scripts": {
    "start": "watchify --extension=jsx -o ../static/js/bundle.js -v -d ./**/*.jsx",
--- a/web/react/pages/channel.jsx
+++ b/web/react/pages/channel.jsx
@@ -73,7 +73,8 @@ function setupChannelPage(teamName, teamType, teamId, channelName, channelId) {
    React.render(
        <Sidebar
            teamDisplayName={teamName}
-            teamType={teamType} />,
+            teamType={teamType}
+        />,
        document.getElementById('sidebar-left')
    );

@@ -190,7 +191,8 @@ function setupChannelPage(teamName, teamType, teamId, channelName, channelId) {
    React.render(
        <SidebarRightMenu
            teamDisplayName={teamName}
-            teamType={teamType} />,
+            teamType={teamType}
+        />,
        document.getElementById('sidebar-menu')
    );

@@ -226,7 +228,8 @@ function setupChannelPage(teamName, teamType, teamId, channelName, channelId) {

    React.render(
        <FileUploadOverlay
-            overlayType='center' />,
+            overlayType='center'
+        />,
        document.getElementById('file_upload_overlay')
    );
 }
--- a/web/react/pages/login.jsx
+++ b/web/react/pages/login.jsx
@@ -8,7 +8,8 @@ function setupLoginPage(teamDisplayName, teamName, authServices) {
        <Login
            teamDisplayName={teamDisplayName}
            teamName={teamName}
-            authServices={authServices} />,
+            authServices={authServices}
+        />,
        document.getElementById('login')
    );
 }
--- a/web/react/pages/signup_team_complete.jsx
+++ b/web/react/pages/signup_team_complete.jsx
@@ -8,7 +8,8 @@ function setupSignupTeamCompletePage(email, data, hash) {
        <SignupTeamComplete
            email={email}
            hash={hash}
-            data={data}/>,
+            data={data}
+        />,
        document.getElementById('signup-team-complete')
    );
 }
--- a/web/react/pages/signup_user_complete.jsx
+++ b/web/react/pages/signup_user_complete.jsx
@@ -12,7 +12,8 @@ function setupSignupUserCompletePage(email, name, uiName, id, data, hash, authSe
            email={email}
            hash={hash}
            data={data}
-            authServices={authServices} />,
+            authServices={authServices}
+        />,
        document.getElementById('signup-user-complete')
    );
 }
--- a/web/react/pages/verify.jsx
+++ b/web/react/pages/verify.jsx
@@ -8,7 +8,8 @@ global.window.setupVerifyPage = function setupVerifyPage(isVerified, teamURL, us
        <EmailVerify
            isVerified={isVerified}
            teamURL={teamURL}
-            userEmail={userEmail} />,
+            userEmail={userEmail}
+        />,
        document.getElementById('verify')
    );
 };