Merge pull request #399 from mattermost/update-dependencies

MM-1908 Update dependencies and switch to Babelify

web/react/.eslintrc

@@ -1,8 +1,10 @@
 {
+    "extends": "eslint:recommended",
         "ecmaFeatures": {
             "jsx": true,
             "blockBindings": true,
-		"modules": true
+            "modules": true,
+            "classes": true
         },
         "plugins": [
             "react"
@@ -45,18 +47,31 @@
             "eqeqeq": [2, "smart"],
             "guard-for-in": 1,
             "no-alert": 1,
+            "no-array-constructor": 2,
             "no-caller": 2,
             "no-div-regex": 1,
             "no-else-return": 1,
             "no-eval": 2,
             "no-extend-native": 2,
+            "no-extra-bind": 2,
             "no-floating-decimal": 2,
+            "no-implied-eval": 2,
+            "no-iterator": 2,
             "no-labels": 2,
             "no-lone-blocks": 1,
+            "no-loop-func": 2,
             "no-multi-spaces": [2, { "exceptions": { "Property": false } }],
             "no-multi-str": 0,
+            "no-native-reassign": 2,
+            "no-new": 2,
+            "no-new-func": 2,
+            "no-new-object": 2,
+            "no-new-wrappers": 2,
+            "no-octal-escape": 2,
             "no-param-reassign": 2,
             "no-process-env": 2,
+            "no-process-exit": 2,
+            "no-proto": 2,
             "no-redeclare": 2,
             "no-return-assign": [2, "always"],
             "no-script-url": 2,
@@ -64,6 +79,7 @@
             "no-sequences": 2,
             "no-throw-literal": 2,
             "no-unused-expressions": 2,
+            "no-undef-init": 2,
             "no-void": 2,
             "no-warning-comments": 0,
             "no-with": 2,
@@ -74,7 +90,8 @@
 
             "no-undefined": 2,
             "no-shadow": [2, {"hoist": "functions"}],
-		"no-unused-vars": [2, {"vars": "all", "args": "all"}],
+            "no-shadow-restricted-names": 2,
+            "no-unused-vars": [2, {"vars": "all", "args": "after-used"}],
             "no-use-before-define": [2, "nofunc"],
 
             // Style
@@ -87,7 +104,7 @@
             "consistent-this": [2, "self"],
             "func-names": 2,
             "func-style": [2, "declaration"],
-		"indent": [2, 4, {"indentSwitchCase": false}],
+            "indent": [2, 4, {"SwitchCase": 0}],
             "key-spacing": [2, {"beforeColon": false, "afterColon": true}],
             "lines-around-comment": [2, { "beforeBlockComment": true, "beforeLineComment": true, "allowBlockStart": true, "allowBlockEnd": true }],
             "linebreak-style": 2,
@@ -122,7 +139,10 @@
             "react/display-name": [2, { "acceptTranspilerName": true }],
             "react/jsx-boolean-value": [2, "always"],
             "react/jsx-curly-spacing": [2, "never"],
+            "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,
             "react/jsx-quotes": [2, "single", "avoid-escape"],
             "react/jsx-uses-react": 2,
@@ -134,6 +154,7 @@
             "react/no-unknown-property": 2,
             "react/prop-types": 2,
             "react/sort-comp": 0,
+            "react/self-closing-comp": 2,
             "react/wrap-multilines": 2
         }
 }

web/react/components/post.jsx

@@ -3,7 +3,6 @@
 
 var PostHeader = require('./post_header.jsx');
 var PostBody = require('./post_body.jsx');
-var PostInfo = require('./post_info.jsx');
 var AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
 var Constants = require('../utils/constants.jsx');
 var UserStore = require('../stores/user_store.jsx');
@@ -13,6 +12,8 @@ var client = require('../utils/client.jsx');
 var AsyncClient = require('../utils/async_client.jsx');
 var ActionTypes = Constants.ActionTypes;
 
+var PostInfo = require('./post_info.jsx');
+
 module.exports = React.createClass({
     displayName: "Post",
     handleCommentClick: function(e) {

web/react/components/post_info.jsx

@@ -6,11 +6,18 @@ var utils = require('../utils/utils.jsx');
 
 var Constants = require('../utils/constants.jsx');
 
-module.exports = React.createClass({
+export default class PostInfo extends React.Component {
-    getInitialState: function() {
+    constructor(props) {
-        return { };
+        super(props);
-    },
+        this.state = {};
-    render: function() {
+    }
+    shouldShowComment(state, type, isOwner) {
+        if (state === Constants.POST_FAILED || state === Constants.POST_LOADING) {
+            return false;
+        }
+        return isOwner || (this.props.allowReply === 'true' && type !== 'Comment');
+    }
+    createDropdown() {
         var post = this.props.post;
         var isOwner = UserStore.getCurrentId() === post.user_id;
         var isAdmin = UserStore.getCurrentUser().roles.indexOf('admin') > -1;
@@ -20,6 +27,89 @@ module.exports = React.createClass({
             type = 'Comment';
         }
 
+        if (!this.shouldShowComment(post.state, type, isOwner)) {
+            return '';
+        }
+
+        var dropdownContents = [];
+        var dataComments = 0;
+        if (type === 'Post') {
+            dataComments = this.props.commentCount;
+        }
+
+        if (isOwner) {
+            dropdownContents.push(
+                <li role='presentation'>
+                    <a
+                        href='#'
+                        role='menuitem'
+                        data-toggle='modal'
+                        data-target='#edit_post'
+                        data-title={type}
+                        data-message={post.message}
+                        data-postid={post.id}
+                        data-channelid={post.channel_id}
+                        data-comments={dataComments}
+                    >
+                        Edit
+                    </a>
+                </li>
+            );
+        }
+
+        if (isOwner || isAdmin) {
+            dropdownContents.push(
+                <li role='presentation'>
+                    <a
+                        href='#'
+                        role='menuitem'
+                        data-toggle='modal'
+                        data-target='#delete_post'
+                        data-title={type}
+                        data-postid={post.id}
+                        data-channelid={post.channel_id}
+                        data-comments={dataComments}
+                    >
+                        Delete
+                    </a>
+                </li>
+            );
+        }
+
+        if (this.props.allowReply === 'true') {
+            dropdownContents.push(
+                <li role='presentation'>
+                    <a
+                        className='reply-link theme'
+                        href='#'
+                        onClick={this.props.handleCommentClick}
+                    >
+                        Reply
+                    </a>
+                </li>
+            );
+        }
+
+        return (
+            <div>
+                <a
+                    href='#'
+                    className='dropdown-toggle theme'
+                    type='button'
+                    data-toggle='dropdown'
+                    aria-expanded='false'
+                />
+                <ul
+                    className='dropdown-menu'
+                    role='menu'
+                >
+                    {dropdownContents}
+                </ul>
+            </div>
+        );
+    }
+    render() {
+        var post = this.props.post;
         var comments = '';
         var lastCommentClass = ' comment-icon__container__hide';
         if (this.props.isLastComment) {
@@ -27,47 +117,30 @@ module.exports = React.createClass({
         }
 
         if (this.props.commentCount >= 1 && post.state !== Constants.POST_FAILED && post.state !== Constants.POST_LOADING) {
-            comments = <a href='#' className={'comment-icon__container theme' + lastCommentClass} onClick={this.props.handleCommentClick}><span className='comment-icon' dangerouslySetInnerHTML={{__html: Constants.COMMENT_ICON}} />{this.props.commentCount}</a>;
+            comments = (
-        }
+                <a
-
+                    href='#'
-        var showDropdown = isOwner || (this.props.allowReply === 'true' && type !== 'Comment');
+                    className={'comment-icon__container theme' + lastCommentClass}
-        if (post.state === Constants.POST_FAILED || post.state === Constants.POST_LOADING) {
+                    onClick={this.props.handleCommentClick}
-            showDropdown = false;
+                >
-        }
+                    <span
-
+                        className='comment-icon'
-        var dropdownContents = [];
+                        dangerouslySetInnerHTML={{__html: Constants.COMMENT_ICON}}
-        var dropdown;
+                    />
-        if (showDropdown) {
+                    {this.props.commentCount}
-            var dataComments = 0;
+                </a>
-            if (type === 'Post') {
-                dataComments = this.props.commentCount;
-            }
-
-            if (isOwner) {
-                dropdownContents.push(<li role='presentation'><a href='#' role='menuitem' data-toggle='modal' data-target='#edit_post' data-title={type} data-message={post.message} data-postid={post.id} data-channelid={post.channel_id} data-comments={dataComments}>Edit</a></li>);
-            }
-
-            if (isOwner || isAdmin) {
-                dropdownContents.push(<li role='presentation'><a href='#' role='menuitem' data-toggle='modal' data-target='#delete_post' data-title={type} data-postid={post.id} data-channelid={post.channel_id} data-comments={dataComments}>Delete</a></li>);
-            }
-
-            if (this.props.allowReply === 'true') {
-                dropdownContents.push(<li role='presentation'><a className='reply-link theme' href='#' onClick={this.props.handleCommentClick}>Reply</a></li>);
-            }
-
-            dropdown = (
-                <div>
-                    <a href='#' className='dropdown-toggle theme' type='button' data-toggle='dropdown' aria-expanded='false' />
-                    <ul className='dropdown-menu' role='menu'>
-                        {dropdownContents}
-                    </ul>
-                </div>
             );
         }
 
+        var dropdown = this.createDropdown();
+
         return (
             <ul className='post-header post-info'>
-                <li className='post-header-col'><time className='post-profile-time'>{utils.displayDateTime(post.create_at)}</time></li>
+                <li className='post-header-col'>
+                    <time className='post-profile-time'>
+                        {utils.displayDateTime(post.create_at)}
+                    </time>
+                </li>
                 <li className='post-header-col post-header__reply'>
                     <div className='dropdown'>
                         {dropdown}
@@ -77,4 +150,18 @@ module.exports = React.createClass({
             </ul>
         );
     }
-});
+}
+
+PostInfo.defaultProps = {
+    post: null,
+    commentCount: 0,
+    isLastComment: false,
+    allowReply: false
+};
+PostInfo.propTypes = {
+    post: React.PropTypes.object,
+    commentCount: React.PropTypes.number,
+    isLastComment: React.PropTypes.bool,
+    allowReply: React.PropTypes.string,
+    handleCommentClick: React.PropTypes.func
+};

web/react/package.json

@@ -3,22 +3,21 @@
   "version": "0.0.1",
   "private": true,
   "dependencies": {
-    "flux": "^2.0.0",
+    "autolinker": "^0.18.1",
-    "keymirror": "~0.1.0",
+    "flux": "^2.1.1",
-    "object-assign": "^1.0.0",
+    "keymirror": "^0.1.1",
-    "react": "^0.12.0",
+    "object-assign": "^3.0.0",
-    "autolinker": "^0.15.2",
+    "react": "^0.13.3",
     "react-zeroclipboard-mixin": "^0.1.0"
   },
   "devDependencies": {
-    "browserify": "^6.2.0",
+    "browserify": "^11.0.1",
-    "envify": "^3.0.0",
+    "envify": "^3.4.0",
-    "jest-cli": "~0.1.17",
+    "babelify": "^6.1.3",
-    "reactify": "^0.15.2",
+    "uglify-js": "^2.4.24",
-    "uglify-js": "~2.4.15",
+    "watchify": "^3.3.1",
-    "watchify": "^2.1.1",
+    "eslint": "^1.1.0",
-    "eslint": "^0.24.1",
+    "eslint-plugin-react": "^3.2.3"
-    "eslint-plugin-react": "^3.0.0"
   },
   "scripts": {
     "start": "watchify --extension=jsx -o ../static/js/bundle.js -v -d ./**/*.jsx",
@@ -28,7 +27,7 @@
   },
   "browserify": {
     "transform": [
-      "reactify",
+      ["babelify", {"blacklist": ["strict"]}],
       "envify"
     ]
   },