Merge branch 'feature/token' of node/npmcomment into master

CHANGELOG.md

@@ -1,5 +1,10 @@
 # CHANGELOG
 
+## 0.2.1
+
+- [x] feat: 添加 props token
+- [x] feat: 编辑器没有值的时候，默认处于 disabled 状态
+
 ## 0.2.0
 
 - [x] feat: 添加 showHeader 属性

README.md

@@ -22,6 +22,7 @@ import Comment, { Editor } from 'comment';
 | showList | boolean |   true  | false     | 是否显示评论列表|
 | showEditor | boolean |   true  | false     | 是否显示评论输入框|
 | showHeader | boolean |   true  | false     | 是否显示评论顶部的提示|
+| token | string |     | false     | token，用于身份认证，非必须。默认使用 cookie|
 
 
 

lib/App.js

@@ -29,7 +29,7 @@ var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _axios = require("./axios");
+var _axios = require("axios");
 
 var _axios2 = _interopRequireDefault(_axios);
 
@@ -98,6 +98,15 @@ var App = function (_Component) {
   }
 
   _createClass(App, [{
+    key: "componentWillMount",
+    value: function componentWillMount() {
+      this.axios = _axios2.default;
+      this.axios.defaults.withCredentials = true;
+      if (this.props.token) {
+        this.axios.defaults.headers.common["Authorization"] = "Bearer " + this.props.token;
+      }
+    }
+  }, {
     key: "componentDidMount",
     value: function componentDidMount() {}
 
@@ -135,7 +144,7 @@ var App = function (_Component) {
           type = _props.type,
           businessId = _props.businessId;
 
-      _axios2.default.get(API + "/comments?type=" + type + "&business_id=" + businessId + "&page=" + page + "&limit=" + _constant.LIMIT).then(function (response) {
+      this.axios.get(API + "/comments?type=" + type + "&business_id=" + businessId + "&page=" + page + "&limit=" + _constant.LIMIT).then(function (response) {
         var _response$data = response.data,
             list = _response$data.list,
             page = _response$data.page,
@@ -191,7 +200,7 @@ var App = function (_Component) {
       this.handleChangeLoading("sGetReply", true);
       var API = this.props.API;
 
-      _axios2.default.get(API + "/replies?comment_id=" + commentId + "&page=" + page + "&limit=" + _constant.LIMIT).then(function (response) {
+      this.axios.get(API + "/replies?comment_id=" + commentId + "&page=" + page + "&limit=" + _constant.LIMIT).then(function (response) {
         if (!response.data.list) {
           _message3.default.info("没有更多数据了！");
         }
@@ -242,6 +251,8 @@ var App = function (_Component) {
       var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
           content = _ref3.content;
 
+      var cb = arguments[1];
+
       if (!content) return _message3.default.error("评论内容不能为空 ");
       this.handleChangeLoading("sCreateComment", true);
       var _props2 = this.props,
@@ -249,7 +260,7 @@ var App = function (_Component) {
           type = _props2.type,
           businessId = _props2.businessId;
 
-      (0, _axios2.default)(API + "/comments", {
+      this.axios(API + "/comments", {
         method: "post",
         data: {
           type: type,
@@ -259,6 +270,7 @@ var App = function (_Component) {
         withCredentials: true
       }).then(function (response) {
         _message3.default.success("评论成功！");
+        if ((0, _helper.isFunction)(cb)) cb();
         // 将数据写入到 list 中
         // 临时插入
         // 等到获取数据之后，删除临时数据
@@ -292,13 +304,11 @@ var App = function (_Component) {
     value: function sCreateReply(data, cb) {
       var _this5 = this;
 
-      console.log("list: ", this.state.list);
-
       if (!data.content) return _message3.default.error("回复内容不能为空 ");
       this.handleChangeLoading("sCreateReply", true);
       var API = this.props.API;
 
-      (0, _axios2.default)(API + "/replies", {
+      this.axios(API + "/replies", {
         method: "post",
         data: data,
         withCredentials: true
@@ -344,7 +354,7 @@ var App = function (_Component) {
       this.handleChangeLoading("sCommentFavor", true);
       var API = this.props.API;
 
-      (0, _axios2.default)(API + "/comments/" + commentId + "/favor", {
+      this.axios(API + "/comments/" + commentId + "/favor", {
         method: favored ? "delete" : "put",
         withCredentials: true
       }).then(function (response) {
@@ -382,27 +392,33 @@ var App = function (_Component) {
       var _this7 = this;
 
       this.handleChangeLoading("sReplyFavor", true);
-      console.log("replyId, commentId ", replyId, commentId);
-
       var API = this.props.API;
 
-      (0, _axios2.default)(API + "/replies/" + replyId + "/favor", {
+      this.axios(API + "/replies/" + replyId + "/favor", {
         method: favored ? "delete" : "put",
+        data: {
+          comment_id: commentId
+        },
         withCredentials: true
       }).then(function (response) {
-        console.log("response: ", response);
-
         _message3.default.success(favored ? "取消点赞成功！" : "点赞成功！");
-        // TODO: (2018.07.20 node) 对评论的回复点赞，报错
-        // // 更新 list 中的该项数据的 favored
-        // const list = this.state.list.map(item => {
-        //   if (item.id === replyId) {
-        //     item.favored = !favored;
-        //     item.favor_count += favored ? -1 : 1;
-        //   }
-        //   return item;
-        // });
-        // this.setState({ list });
+        // 更新 list 中的该项数据的 favored
+        var list = _this7.state.list.map(function (item) {
+          if (item.id === commentId) {
+            item.replies = item.replies.map(function (r) {
+              if (r.id === replyId) {
+                r.favored = !favored;
+                // r.favor_count =  response.data.favor_count;
+                // 点赞数 +1，而不是使用后端返回的点赞数
+                // 不然如果返回的不是增加 1，用户可能以为程序错误
+                r.favor_count += favored ? -1 : 1;
+              }
+              return r;
+            });
+          }
+          return item;
+        });
+        _this7.setState({ list: list });
       }).catch(function (error) {
         if (error.response && error.response.data && error.response.data.msg) {
           _message3.default.error(_lang2.default[error.response.data.msg] || _constant.ERROR_DEFAULT);
@@ -426,7 +442,7 @@ var App = function (_Component) {
       this.handleChangeLoading("sOssSts", true);
       var API = this.props.API;
 
-      _axios2.default.get(API + "/oss/sts").then(function (response) {
+      this.axios.get(API + "/oss/sts").then(function (response) {
         _this8.setState({ oss: _extends({}, response.data) });
       }).catch(function (error) {
         if (error.response && error.response.data && error.response.data.msg) {

lib/axios.js

@@ -11,6 +11,7 @@ var _axios2 = _interopRequireDefault(_axios);
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 _axios2.default.defaults.withCredentials = true;
+_axios2.default.defaults.headers.common["Authorization"] = "Bearer ";
 
 exports.default = _axios2.default;
 //# sourceMappingURL=axios.js.map

lib/axios.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/axios.js"],"names":["axios","defaults","withCredentials"],"mappings":";;;;;;AAAA;;;;;;AAEAA,gBAAMC,QAAN,CAAeC,eAAf,GAAiC,IAAjC;;kBAEeF,e","file":"axios.js","sourcesContent":["import axios from \"axios\";\n\naxios.defaults.withCredentials = true;\n\nexport default axios;\n"]}
+{"version":3,"sources":["../src/axios.js"],"names":["axios","defaults","withCredentials","headers","common"],"mappings":";;;;;;AAAA;;;;;;AAEAA,gBAAMC,QAAN,CAAeC,eAAf,GAAiC,IAAjC;AACAF,gBAAMC,QAAN,CAAeE,OAAf,CAAuBC,MAAvB,CAA8B,eAA9B,IAAiD,SAAjD;;kBAEeJ,e","file":"axios.js","sourcesContent":["import axios from \"axios\";\n\naxios.defaults.withCredentials = true;\naxios.defaults.headers.common[\"Authorization\"] = \"Bearer \";\n\nexport default axios;\n"]}

lib/components/CommentInput/index.js

@@ -41,9 +41,16 @@ var CommentInput = function (_Component) {
     return _this;
   }
 
+  /**
+   * 提交评论
+   * @param {string} value 需要提交的评论的值
+   * @param {function} cb 提交成功后的回掉
+   */
+
+
   _createClass(CommentInput, [{
     key: "handleSubmit",
-    value: function handleSubmit(value) {
+    value: function handleSubmit(value, cb) {
       var _props = this.props,
           action = _props.action,
           commentId = _props.commentId,
@@ -53,7 +60,7 @@ var CommentInput = function (_Component) {
       if (action === "comment") {
         this.props.app.sCreateComment({
           content: value
-        });
+        }, cb);
       } else if (action === "reply") {
         this.props.app.sCreateReply({
           comment_id: commentId,

lib/components/CommentInput/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CommentInput/index.js"],"names":["CommentInput","props","state","handleSubmit","bind","value","action","commentId","replyId","callback","app","sCreateComment","content","sCreateReply","comment_id","reply_id","childrenWithProps","React","Children","map","cloneElement","child","onSubmit","rows","Component","propTypes","PropTypes","oneOf","defaultProps"],"mappings":";;;;;;;;;;AAAA;;;;AACA;;;;AACA;;;;;;;;;;;;IAEMA,Y;;;AACJ,wBAAYC,KAAZ,EAAmB;AAAA;;AAAA,4HACXA,KADW;;AAEjB,UAAKC,KAAL,GAAa,EAAb;AACA,UAAKC,YAAL,GAAoB,MAAKA,YAAL,CAAkBC,IAAlB,OAApB;AAHiB;AAIlB;;;;iCAEYC,K,EAAO;AAAA,mBAC+B,KAAKJ,KADpC;AAAA,UACVK,MADU,UACVA,MADU;AAAA,UACFC,SADE,UACFA,SADE;AAAA,UACSC,OADT,UACSA,OADT;AAAA,UACkBC,QADlB,UACkBA,QADlB;;AAElB,UAAIH,WAAW,SAAf,EAA0B;AACxB,aAAKL,KAAL,CAAWS,GAAX,CAAeC,cAAf,CAA8B;AAC5BC,mBAASP;AADmB,SAA9B;AAGD,OAJD,MAIO,IAAIC,WAAW,OAAf,EAAwB;AAC7B,aAAKL,KAAL,CAAWS,GAAX,CAAeG,YAAf,CACE;AACEC,sBAAYP,SADd;AAEEK,mBAASP;AAFX,SADF,EAKE;AAAA,iBAAMI,YAAYA,UAAlB;AAAA,SALF;AAOD,OARM,MAQA,IAAIH,WAAW,cAAf,EAA+B;AACpC,aAAKL,KAAL,CAAWS,GAAX,CAAeG,YAAf,CACE;AACEC,sBAAYP,SADd;AAEEK,mBAASP,KAFX;AAGEU,oBAAUP;AAHZ,SADF,EAME;AAAA,iBAAMC,YAAYA,UAAlB;AAAA,SANF;AAQD;AACF;;;6BAEQ;AAAA;;AACP,UAAMO,oBAAoBC,gBAAMC,QAAN,CAAeC,GAAf,CAAmB,KAAKlB,KAAL,CAAWW,OAA9B,EAAuC,iBAAS;AACxE,eAAOK,gBAAMG,YAAN,CAAmBC,KAAnB;AACL;AACA;AACA;AACA;AACAC,oBAAU,OAAKnB;AALV,WAMFkB,MAAMpB,KANJ;AAOL;AACAsB,gBACE,OAAKtB,KAAL,CAAWK,MAAX,KAAsB,SAAtB,GACIe,MAAMpB,KAAN,CAAYsB,IADhB,GAEIF,MAAMpB,KAAN,CAAYsB,IAAZ,GAAmB;AAXpB,WAAP;AAaD,OAdyB,CAA1B;;AAgBA,aAAO;AAAA;AAAA;AAAMP;AAAN,OAAP;AACD;;;;EAnDwBQ,gB;;AAsD3BxB,aAAayB,SAAb,GAAyB;AACvB;AACA;AACA;AACAnB,UAAQoB,oBAAUC,KAAV,CAAgB,CAAC,SAAD,EAAY,OAAZ,EAAqB,cAArB,CAAhB;AAJe,CAAzB;;AAOA3B,aAAa4B,YAAb,GAA4B;AAC1BtB,UAAQ;AADkB,CAA5B;;kBAIe,uBAAQN,YAAR,C","file":"index.js","sourcesContent":["import React, { Component } from \"react\";\nimport PropTypes from \"prop-types\";\nimport Comment from \"../../Comment\";\n\nclass CommentInput extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {};\n    this.handleSubmit = this.handleSubmit.bind(this);\n  }\n\n  handleSubmit(value) {\n    const { action, commentId, replyId, callback } = this.props;\n    if (action === \"comment\") {\n      this.props.app.sCreateComment({\n        content: value\n      });\n    } else if (action === \"reply\") {\n      this.props.app.sCreateReply(\n        {\n          comment_id: commentId,\n          content: value\n        },\n        () => callback && callback()\n      );\n    } else if (action === \"replyToReply\") {\n      this.props.app.sCreateReply(\n        {\n          comment_id: commentId,\n          content: value,\n          reply_id: replyId\n        },\n        () => callback && callback()\n      );\n    }\n  }\n\n  render() {\n    const childrenWithProps = React.Children.map(this.props.content, child => {\n      return React.cloneElement(child, {\n        // 编辑器本身不提交值，但 CommentInput 会提交\n        // CommentInput 主要是负责评论的业务逻辑，提交评论和回复\n        // 默认使用 CommentInput 的 onSubmit 来提交评论\n        // 但也可以使用 Editor 的 props 来覆盖 onSubmit\n        onSubmit: this.handleSubmit,\n        ...child.props,\n        // 如果当前的编辑器不是“评论”，则编辑器高度减小一些\n        rows:\n          this.props.action === \"comment\"\n            ? child.props.rows\n            : child.props.rows - 1\n      });\n    });\n\n    return <div>{childrenWithProps}</div>;\n  }\n}\n\nCommentInput.propTypes = {\n  // comment 评论\n  // reply 评论的回复\n  // replyToReply 回复的回复\n  action: PropTypes.oneOf([\"comment\", \"reply\", \"replyToReply\"])\n};\n\nCommentInput.defaultProps = {\n  action: \"comment\"\n};\n\nexport default Comment(CommentInput);\n"]}
+{"version":3,"sources":["../../../src/components/CommentInput/index.js"],"names":["CommentInput","props","state","handleSubmit","bind","value","cb","action","commentId","replyId","callback","app","sCreateComment","content","sCreateReply","comment_id","reply_id","childrenWithProps","React","Children","map","cloneElement","child","onSubmit","rows","Component","propTypes","PropTypes","oneOf","defaultProps"],"mappings":";;;;;;;;;;AAAA;;;;AACA;;;;AACA;;;;;;;;;;;;IAEMA,Y;;;AACJ,wBAAYC,KAAZ,EAAmB;AAAA;;AAAA,4HACXA,KADW;;AAEjB,UAAKC,KAAL,GAAa,EAAb;AACA,UAAKC,YAAL,GAAoB,MAAKA,YAAL,CAAkBC,IAAlB,OAApB;AAHiB;AAIlB;;AAED;;;;;;;;;iCAKaC,K,EAAOC,E,EAAI;AAAA,mBAC2B,KAAKL,KADhC;AAAA,UACdM,MADc,UACdA,MADc;AAAA,UACNC,SADM,UACNA,SADM;AAAA,UACKC,OADL,UACKA,OADL;AAAA,UACcC,QADd,UACcA,QADd;;AAEtB,UAAIH,WAAW,SAAf,EAA0B;AACxB,aAAKN,KAAL,CAAWU,GAAX,CAAeC,cAAf,CACE;AACEC,mBAASR;AADX,SADF,EAIEC,EAJF;AAMD,OAPD,MAOO,IAAIC,WAAW,OAAf,EAAwB;AAC7B,aAAKN,KAAL,CAAWU,GAAX,CAAeG,YAAf,CACE;AACEC,sBAAYP,SADd;AAEEK,mBAASR;AAFX,SADF,EAKE;AAAA,iBAAMK,YAAYA,UAAlB;AAAA,SALF;AAOD,OARM,MAQA,IAAIH,WAAW,cAAf,EAA+B;AACpC,aAAKN,KAAL,CAAWU,GAAX,CAAeG,YAAf,CACE;AACEC,sBAAYP,SADd;AAEEK,mBAASR,KAFX;AAGEW,oBAAUP;AAHZ,SADF,EAME;AAAA,iBAAMC,YAAYA,UAAlB;AAAA,SANF;AAQD;AACF;;;6BAEQ;AAAA;;AACP,UAAMO,oBAAoBC,gBAAMC,QAAN,CAAeC,GAAf,CAAmB,KAAKnB,KAAL,CAAWY,OAA9B,EAAuC,iBAAS;AACxE,eAAOK,gBAAMG,YAAN,CAAmBC,KAAnB;AACL;AACA;AACA;AACA;AACAC,oBAAU,OAAKpB;AALV,WAMFmB,MAAMrB,KANJ;AAOL;AACAuB,gBACE,OAAKvB,KAAL,CAAWM,MAAX,KAAsB,SAAtB,GACIe,MAAMrB,KAAN,CAAYuB,IADhB,GAEIF,MAAMrB,KAAN,CAAYuB,IAAZ,GAAmB;AAXpB,WAAP;AAaD,OAdyB,CAA1B;;AAgBA,aAAO;AAAA;AAAA;AAAMP;AAAN,OAAP;AACD;;;;EA3DwBQ,gB;;AA8D3BzB,aAAa0B,SAAb,GAAyB;AACvB;AACA;AACA;AACAnB,UAAQoB,oBAAUC,KAAV,CAAgB,CAAC,SAAD,EAAY,OAAZ,EAAqB,cAArB,CAAhB;AAJe,CAAzB;;AAOA5B,aAAa6B,YAAb,GAA4B;AAC1BtB,UAAQ;AADkB,CAA5B;;kBAIe,uBAAQP,YAAR,C","file":"index.js","sourcesContent":["import React, { Component } from \"react\";\nimport PropTypes from \"prop-types\";\nimport Comment from \"../../Comment\";\n\nclass CommentInput extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {};\n    this.handleSubmit = this.handleSubmit.bind(this);\n  }\n\n  /**\n   * 提交评论\n   * @param {string} value 需要提交的评论的值\n   * @param {function} cb 提交成功后的回掉\n   */\n  handleSubmit(value, cb) {\n    const { action, commentId, replyId, callback } = this.props;\n    if (action === \"comment\") {\n      this.props.app.sCreateComment(\n        {\n          content: value\n        },\n        cb\n      );\n    } else if (action === \"reply\") {\n      this.props.app.sCreateReply(\n        {\n          comment_id: commentId,\n          content: value\n        },\n        () => callback && callback()\n      );\n    } else if (action === \"replyToReply\") {\n      this.props.app.sCreateReply(\n        {\n          comment_id: commentId,\n          content: value,\n          reply_id: replyId\n        },\n        () => callback && callback()\n      );\n    }\n  }\n\n  render() {\n    const childrenWithProps = React.Children.map(this.props.content, child => {\n      return React.cloneElement(child, {\n        // 编辑器本身不提交值，但 CommentInput 会提交\n        // CommentInput 主要是负责评论的业务逻辑，提交评论和回复\n        // 默认使用 CommentInput 的 onSubmit 来提交评论\n        // 但也可以使用 Editor 的 props 来覆盖 onSubmit\n        onSubmit: this.handleSubmit,\n        ...child.props,\n        // 如果当前的编辑器不是“评论”，则编辑器高度减小一些\n        rows:\n          this.props.action === \"comment\"\n            ? child.props.rows\n            : child.props.rows - 1\n      });\n    });\n\n    return <div>{childrenWithProps}</div>;\n  }\n}\n\nCommentInput.propTypes = {\n  // comment 评论\n  // reply 评论的回复\n  // replyToReply 回复的回复\n  action: PropTypes.oneOf([\"comment\", \"reply\", \"replyToReply\"])\n};\n\nCommentInput.defaultProps = {\n  action: \"comment\"\n};\n\nexport default Comment(CommentInput);\n"]}

lib/components/ContentItem/index.css

@@ -29,6 +29,9 @@
   margin-left: 5px;
   cursor: pointer;
 }
+.comment-favor {
+  font-size: 20px;
+}
 .comment-favored {
   color: #4a90e2;
 }

lib/components/ContentItem/index.js

@@ -193,7 +193,7 @@ var CommentItem = function (_Component) {
               },
               _react2.default.createElement(_icon2.default, {
                 type: "like-o",
-                className: content.favored ? "comment-favored" : ""
+                className: content.favored ? "comment-favor comment-favored" : "comment-favor"
               }),
               "\xA0",
               content.favor_count

lib/components/Editor/index.js

@@ -147,7 +147,7 @@ var Editor = function (_React$Component) {
     }
 
     /**
-     * 上传文件 TODO:
+     * 上传文件
      * @param {object} param 文件对象
      */
 
@@ -171,6 +171,8 @@ var Editor = function (_React$Component) {
   }, {
     key: "handleSubmit",
     value: function handleSubmit() {
+      var _this2 = this;
+
       var _state = this.state,
           value = _state.value,
           fileMap = _state.fileMap,
@@ -182,12 +184,19 @@ var Editor = function (_React$Component) {
           value += "[" + _constant.OSS_LINK + fileMap[item.uid] + "]";
         });
       }
-      this.props.onSubmit(value);
+      this.props.onSubmit(value, function () {
+        _this2.setState({
+          showUpload: false,
+          value: "",
+          fileList: [],
+          fileMap: {}
+        });
+      });
     }
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
 
       var _props = this.props,
           value = _props.value,
@@ -202,15 +211,15 @@ var Editor = function (_React$Component) {
           emojiToolIcon = _props.emojiToolIcon,
           imageToolIcon = _props.imageToolIcon;
 
-
       var handleSubmit = this.handleSubmit;
+      var disabledSubmit = btnDisabled || !this.props.value && !this.state.value && !this.state.fileList.length;
       return _react2.default.createElement(
         "div",
         { className: "comment-editor" },
         _react2.default.createElement(TextArea, {
           value: value || this.state.value,
           onChange: function onChange(e) {
-            return _this2.handleChange(e.target.value);
+            return _this3.handleChange(e.target.value);
           },
           rows: rows,
           placeholder: placeholder
@@ -271,7 +280,7 @@ var Editor = function (_React$Component) {
                   _react2.default.createElement(_icon2.default, {
                     type: "close",
                     onClick: function onClick() {
-                      return _this2.handleShowUpload(false);
+                      return _this3.handleShowUpload(false);
                     },
                     style: {
                       float: "right",
@@ -283,14 +292,14 @@ var Editor = function (_React$Component) {
               },
               imageToolIcon ? _react2.default.cloneElement(imageToolIcon, {
                 onClick: function onClick() {
-                  return _this2.handleShowUpload(true);
+                  return _this3.handleShowUpload(true);
                 }
               }) : _react2.default.createElement(_icon2.default, {
                 type: "picture",
                 className: "comment-toolbar-icon",
                 style: { marginLeft: 10 },
                 onClick: function onClick() {
-                  return _this2.handleShowUpload(true);
+                  return _this3.handleShowUpload(true);
                 }
               })
             )
@@ -304,11 +313,11 @@ var Editor = function (_React$Component) {
               _button2.default,
               {
                 onClick: function onClick() {
-                  return _this2.handleSubmit();
+                  return _this3.handleSubmit();
                 },
                 type: "primary",
                 loading: btnLoading,
-                disabled: btnDisabled
+                disabled: disabledSubmit
               },
               btnSubmitText
             )

lib/index.js

@@ -25,6 +25,9 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+// e.g.
+// import { Button, Icon } from "antd";
+
 
 var Index = function (_Component) {
   _inherits(Index, _Component);
@@ -70,6 +73,7 @@ var Index = function (_Component) {
         _react2.default.createElement(_App.Editor, null)
       );
 
+      // e.g.
       // 复杂的用户法
       // const props = {
       //   type: 1,

lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["Index","props","state","value","handleChangeValue","bind","handleChangeSubmit","setState","console","log","loading","setTimeout","Component","ReactDOM","render","document","getElementById"],"mappings":";;;;AAAA;;;;AACA;;;;AAEA;;;;AACA;;;;;;;;;;;;IAEMA,K;;;AACJ,iBAAYC,KAAZ,EAAmB;AAAA;;AAAA,8GACXA,KADW;;AAEjB,UAAKC,KAAL,GAAa;AACXC,aAAO;AADI,KAAb;AAGA,UAAKC,iBAAL,GAAyB,MAAKA,iBAAL,CAAuBC,IAAvB,OAAzB;AACA,UAAKC,kBAAL,GAA0B,MAAKA,kBAAL,CAAwBD,IAAxB,OAA1B;AANiB;AAOlB;;;;sCAEiBF,K,EAAO;AACvB,WAAKI,QAAL,CAAc,EAAEJ,YAAF,EAAd;AACAK,cAAQC,GAAR,CAAY,2BAAZ,EAAyCN,KAAzC;AACD;;;uCAEkBA,K,EAAO;AAAA;;AACxB,WAAKI,QAAL,CAAc,EAAEG,SAAS,IAAX,EAAd,EAAiC,YAAM;AACrCC,mBAAW,YAAM;AACf,iBAAKJ,QAAL,CAAc,EAAEG,SAAS,KAAX,EAAd;AACD,SAFD,EAEG,IAFH;AAGD,OAJD;AAKAF,cAAQC,GAAR,CAAY,gBAAZ,EAA8BN,KAA9B;AACD;;;6BAEQ;AACP;AACA,aACE;AAAC,qBAAD;AAAA,UAAK,MAAM,CAAX,EAAc,YAAW,MAAzB;AACE,sCAAC,WAAD;AADF,OADF;;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACD;;;;EAtEiBS,gB;;AAyEpBC,mBAASC,MAAT,CAAgB,8BAAC,KAAD,OAAhB,EAA2BC,SAASC,cAAT,CAAwB,cAAxB,CAA3B;AACA","file":"index.js","sourcesContent":["import React, { Component } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Button, Icon } from \"antd\";\nimport App, { Editor } from \"./App\";\nimport registerServiceWorker from \"./registerServiceWorker\";\n\nclass Index extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      value: \"\"\n    };\n    this.handleChangeValue = this.handleChangeValue.bind(this);\n    this.handleChangeSubmit = this.handleChangeSubmit.bind(this);\n  }\n\n  handleChangeValue(value) {\n    this.setState({ value });\n    console.log(\"handleChangeValue value: \", value);\n  }\n\n  handleChangeSubmit(value) {\n    this.setState({ loading: true }, () => {\n      setTimeout(() => {\n        this.setState({ loading: false });\n      }, 2000);\n    });\n    console.log(\"submit value: \", value);\n  }\n\n  render() {\n    // 最简单的用法\n    return (\n      <App type={1} businessId=\"test\">\n        <Editor />\n      </App>\n    );\n\n    // 复杂的用户法\n    // const props = {\n    //   type: 1,\n    //   businessId: \"1\",\n    //   API: \"http://api.links123.net/comment/v1\",\n    //   showList: true\n    // };\n\n    // const editorProps = {\n    //   showEmoji: true,\n    //   placeholder: \"说点什么吧\",\n    //   rows: 5,\n    //   btnLoading: this.state.loading,\n    //   btnDisable: this.state.loading,\n    //   btnSubmitText: \"提交\",\n    //   value: this.state.value,\n    //   onChange: v => this.handleChangeValue(v),\n    //   onSubmit: v => this.handleChangeSubmit(v),\n    //   button: (\n    //     <Button\n    //       type=\"primary\"\n    //       ghost\n    //       // onClick={() => console.log('click btn: ', this.state.value)}\n    //     >\n    //       自定义按钮\n    //     </Button>\n    //   ),\n    //   emojiToolIcon: <Icon type=\"smile\" style={{ fontSize: 23 }} />,\n    //   imageToolIcon: (\n    //     <Icon type=\"cloud-upload-o\" style={{ fontSize: 25, marginLeft: 10 }} />\n    //   )\n    // };\n\n    // return (\n    //   <App {...props}>\n    //     <Editor {...editorProps} />\n    //   </App>\n    // );\n  }\n}\n\nReactDOM.render(<Index />, document.getElementById(\"root-comment\"));\nregisterServiceWorker();\n"]}
+{"version":3,"sources":["../src/index.js"],"names":["Index","props","state","value","handleChangeValue","bind","handleChangeSubmit","setState","console","log","loading","setTimeout","Component","ReactDOM","render","document","getElementById"],"mappings":";;;;AAAA;;;;AACA;;;;AAGA;;;;AACA;;;;;;;;;;;AAHA;AACA;;;IAIMA,K;;;AACJ,iBAAYC,KAAZ,EAAmB;AAAA;;AAAA,8GACXA,KADW;;AAEjB,UAAKC,KAAL,GAAa;AACXC,aAAO;AADI,KAAb;AAGA,UAAKC,iBAAL,GAAyB,MAAKA,iBAAL,CAAuBC,IAAvB,OAAzB;AACA,UAAKC,kBAAL,GAA0B,MAAKA,kBAAL,CAAwBD,IAAxB,OAA1B;AANiB;AAOlB;;;;sCAEiBF,K,EAAO;AACvB,WAAKI,QAAL,CAAc,EAAEJ,YAAF,EAAd;AACAK,cAAQC,GAAR,CAAY,2BAAZ,EAAyCN,KAAzC;AACD;;;uCAEkBA,K,EAAO;AAAA;;AACxB,WAAKI,QAAL,CAAc,EAAEG,SAAS,IAAX,EAAd,EAAiC,YAAM;AACrCC,mBAAW,YAAM;AACf,iBAAKJ,QAAL,CAAc,EAAEG,SAAS,KAAX,EAAd;AACD,SAFD,EAEG,IAFH;AAGD,OAJD;AAKAF,cAAQC,GAAR,CAAY,gBAAZ,EAA8BN,KAA9B;AACD;;;6BAEQ;AACP;AACA,aACE;AAAC,qBAAD;AAAA,UAAK,MAAM,CAAX,EAAc,YAAW,MAAzB;AACE,sCAAC,WAAD;AADF,OADF;;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACD;;;;EAvEiBS,gB;;AA0EpBC,mBAASC,MAAT,CAAgB,8BAAC,KAAD,OAAhB,EAA2BC,SAASC,cAAT,CAAwB,cAAxB,CAA3B;AACA","file":"index.js","sourcesContent":["import React, { Component } from \"react\";\nimport ReactDOM from \"react-dom\";\n// e.g.\n// import { Button, Icon } from \"antd\";\nimport App, { Editor } from \"./App\";\nimport registerServiceWorker from \"./registerServiceWorker\";\n\nclass Index extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      value: \"\"\n    };\n    this.handleChangeValue = this.handleChangeValue.bind(this);\n    this.handleChangeSubmit = this.handleChangeSubmit.bind(this);\n  }\n\n  handleChangeValue(value) {\n    this.setState({ value });\n    console.log(\"handleChangeValue value: \", value);\n  }\n\n  handleChangeSubmit(value) {\n    this.setState({ loading: true }, () => {\n      setTimeout(() => {\n        this.setState({ loading: false });\n      }, 2000);\n    });\n    console.log(\"submit value: \", value);\n  }\n\n  render() {\n    // 最简单的用法\n    return (\n      <App type={1} businessId=\"test\">\n        <Editor />\n      </App>\n    );\n\n    // e.g.\n    // 复杂的用户法\n    // const props = {\n    //   type: 1,\n    //   businessId: \"1\",\n    //   API: \"http://api.links123.net/comment/v1\",\n    //   showList: true\n    // };\n\n    // const editorProps = {\n    //   showEmoji: true,\n    //   placeholder: \"说点什么吧\",\n    //   rows: 5,\n    //   btnLoading: this.state.loading,\n    //   btnDisable: this.state.loading,\n    //   btnSubmitText: \"提交\",\n    //   value: this.state.value,\n    //   onChange: v => this.handleChangeValue(v),\n    //   onSubmit: v => this.handleChangeSubmit(v),\n    //   button: (\n    //     <Button\n    //       type=\"primary\"\n    //       ghost\n    //       // onClick={() => console.log('click btn: ', this.state.value)}\n    //     >\n    //       自定义按钮\n    //     </Button>\n    //   ),\n    //   emojiToolIcon: <Icon type=\"smile\" style={{ fontSize: 23 }} />,\n    //   imageToolIcon: (\n    //     <Icon type=\"cloud-upload-o\" style={{ fontSize: 25, marginLeft: 10 }} />\n    //   )\n    // };\n\n    // return (\n    //   <App {...props}>\n    //     <Editor {...editorProps} />\n    //   </App>\n    // );\n  }\n}\n\nReactDOM.render(<Index />, document.getElementById(\"root-comment\"));\nregisterServiceWorker();\n"]}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "comment",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "main": "lib/App.js",
   "description": "通用评论",
   "keywords": [
@@ -31,7 +31,7 @@
   },
   "scripts": {
     "precommit": "lint-staged",
-    "prettier": "prettier --single-quote --trailing-comma --write 'src/**/*.{js,jsx,json,css,less}'",
+    "prettier": "prettier --single-quote --trailing-comma=es5 --write 'src/**/*.{js,jsx,json,css,less}'",
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test --env=jsdom",

src/App.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { message, Tag } from "antd";
-import axios from "./axios";
+import axios from "axios";
 import { ERROR_DEFAULT, LIMIT } from "./constant";
 import { CommentContext } from "./Comment";
 import { isFunction } from "./helper";
@@ -37,6 +37,16 @@ class App extends Component {
     this.sOssSts = this.sOssSts.bind(this);
   }
 
+  componentWillMount() {
+    this.axios = axios;
+    this.axios.defaults.withCredentials = true;
+    if (this.props.token) {
+      this.axios.defaults.headers.common["Authorization"] = `Bearer ${
+        this.props.token
+      }`;
+    }
+  }
+
   componentDidMount() {}
 
   /**
@@ -56,7 +66,7 @@ class App extends Component {
   sGetComment({ page = 1 } = {}) {
     this.handleChangeLoading("sGetComment", true);
     const { API, type, businessId } = this.props;
-    axios
+    this.axios
       .get(
         `${API}/comments?type=${type}&business_id=${businessId}&page=${page}&limit=${LIMIT}`
       )
@@ -100,7 +110,7 @@ class App extends Component {
   sGetReply({ commentId, page = 1 } = {}) {
     this.handleChangeLoading("sGetReply", true);
     const { API } = this.props;
-    axios
+    this.axios
       .get(`${API}/replies?comment_id=${commentId}&page=${page}&limit=${LIMIT}`)
       .then(response => {
         if (!response.data.list) {
@@ -146,11 +156,11 @@ class App extends Component {
    * 添加评论
    * @param {object} {content} comment content
    */
-  sCreateComment({ content } = {}) {
+  sCreateComment({ content } = {}, cb) {
     if (!content) return message.error("评论内容不能为空 ");
     this.handleChangeLoading("sCreateComment", true);
     const { API, type, businessId } = this.props;
-    axios(`${API}/comments`, {
+    this.axios(`${API}/comments`, {
       method: "post",
       data: {
         type,
@@ -161,6 +171,7 @@ class App extends Component {
     })
       .then(response => {
         message.success("评论成功！");
+        if (isFunction(cb)) cb();
         // 将数据写入到 list 中
         // 临时插入
         // 等到获取数据之后，删除临时数据
@@ -189,12 +200,10 @@ class App extends Component {
    * @param {object} data { comment_id, content, [reply_id] }
    */
   sCreateReply(data, cb) {
-    console.log("list: ", this.state.list);
-
     if (!data.content) return message.error("回复内容不能为空 ");
     this.handleChangeLoading("sCreateReply", true);
     const { API } = this.props;
-    axios(`${API}/replies`, {
+    this.axios(`${API}/replies`, {
       method: "post",
       data,
       withCredentials: true
@@ -238,7 +247,7 @@ class App extends Component {
   sCommentFavor(commentId, favored) {
     this.handleChangeLoading("sCommentFavor", true);
     const { API } = this.props;
-    axios(`${API}/comments/${commentId}/favor`, {
+    this.axios(`${API}/comments/${commentId}/favor`, {
       method: favored ? "delete" : "put",
       withCredentials: true
     })
@@ -274,27 +283,33 @@ class App extends Component {
    */
   sReplyFavor(replyId, commentId, favored) {
     this.handleChangeLoading("sReplyFavor", true);
-    console.log("replyId, commentId ", replyId, commentId);
-
     const { API } = this.props;
-    axios(`${API}/replies/${replyId}/favor`, {
+    this.axios(`${API}/replies/${replyId}/favor`, {
       method: favored ? "delete" : "put",
+      data: {
+        comment_id: commentId
+      },
       withCredentials: true
     })
       .then(response => {
-        console.log("response: ", response);
-
         message.success(favored ? "取消点赞成功！" : "点赞成功！");
-        // TODO: (2018.07.20 node) 对评论的回复点赞，报错
-        // // 更新 list 中的该项数据的 favored
-        // const list = this.state.list.map(item => {
-        //   if (item.id === replyId) {
-        //     item.favored = !favored;
-        //     item.favor_count += favored ? -1 : 1;
-        //   }
-        //   return item;
-        // });
-        // this.setState({ list });
+        // 更新 list 中的该项数据的 favored
+        const list = this.state.list.map(item => {
+          if (item.id === commentId) {
+            item.replies = item.replies.map(r => {
+              if (r.id === replyId) {
+                r.favored = !favored;
+                // r.favor_count =  response.data.favor_count;
+                // 点赞数 +1，而不是使用后端返回的点赞数
+                // 不然如果返回的不是增加 1，用户可能以为程序错误
+                r.favor_count += favored ? -1 : 1;
+              }
+              return r;
+            });
+          }
+          return item;
+        });
+        this.setState({ list });
       })
       .catch(error => {
         if (error.response && error.response.data && error.response.data.msg) {
@@ -314,7 +329,7 @@ class App extends Component {
   sOssSts() {
     this.handleChangeLoading("sOssSts", true);
     const { API } = this.props;
-    axios
+    this.axios
       .get(`${API}/oss/sts`)
       .then(response => {
         this.setState({ oss: { ...response.data } });

src/axios.js

@@ -1,5 +1,6 @@
 import axios from "axios";
 
 axios.defaults.withCredentials = true;
+axios.defaults.headers.common["Authorization"] = "Bearer ";
 
 export default axios;

src/components/CommentInput/index.js

@@ -9,12 +9,20 @@ class CommentInput extends Component {
     this.handleSubmit = this.handleSubmit.bind(this);
   }
 
-  handleSubmit(value) {
+  /**
+   * 提交评论
+   * @param {string} value 需要提交的评论的值
+   * @param {function} cb 提交成功后的回掉
+   */
+  handleSubmit(value, cb) {
     const { action, commentId, replyId, callback } = this.props;
     if (action === "comment") {
-      this.props.app.sCreateComment({
-        content: value
-      });
+      this.props.app.sCreateComment(
+        {
+          content: value
+        },
+        cb
+      );
     } else if (action === "reply") {
       this.props.app.sCreateReply(
         {

src/components/ContentItem/index.css

@@ -29,6 +29,9 @@
   margin-left: 5px;
   cursor: pointer;
 }
+.comment-favor {
+  font-size: 20px;
+}
 .comment-favored {
   color: #4a90e2;
 }

src/components/ContentItem/index.js

@@ -113,7 +113,11 @@ class CommentItem extends Component {
             >
               <Icon
                 type="like-o"
-                className={content.favored ? "comment-favored" : ""}
+                className={
+                  content.favored
+                    ? "comment-favor comment-favored"
+                    : "comment-favor"
+                }
               />
               &nbsp;{content.favor_count}
             </div>

src/components/Editor/index.js

@@ -75,7 +75,7 @@ class Editor extends React.Component {
   }
 
   /**
-   * 上传文件 TODO:
+   * 上传文件
    * @param {object} param 文件对象
    */
   handleUpload({ uid, path }) {
@@ -97,7 +97,14 @@ class Editor extends React.Component {
         value += `[${OSS_LINK}${fileMap[item.uid]}]`;
       });
     }
-    this.props.onSubmit(value);
+    this.props.onSubmit(value, () => {
+      this.setState({
+        showUpload: false,
+        value: "",
+        fileList: [],
+        fileMap: {}
+      });
+    });
   }
 
   render() {
@@ -114,8 +121,10 @@ class Editor extends React.Component {
       emojiToolIcon,
       imageToolIcon
     } = this.props;
-
     const handleSubmit = this.handleSubmit;
+    const disabledSubmit =
+      btnDisabled ||
+      (!this.props.value && !this.state.value && !this.state.fileList.length);
     return (
       <div className="comment-editor">
         <TextArea
@@ -208,7 +217,7 @@ class Editor extends React.Component {
                 onClick={() => this.handleSubmit()}
                 type="primary"
                 loading={btnLoading}
-                disabled={btnDisabled}
+                disabled={disabledSubmit}
               >
                 {btnSubmitText}
               </Button>

src/index.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import ReactDOM from "react-dom";
-import { Button, Icon } from "antd";
+// e.g.
+// import { Button, Icon } from "antd";
 import App, { Editor } from "./App";
 import registerServiceWorker from "./registerServiceWorker";
 
@@ -36,6 +37,7 @@ class Index extends Component {
       </App>
     );
 
+    // e.g.
     // 复杂的用户法
     // const props = {
     //   type: 1,