通用评论

App.js 14KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.Editor = undefined;
  6. var _message2 = require("antd/es/message");
  7. var _message3 = _interopRequireDefault(_message2);
  8. var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
  9. var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
  10. require("antd/es/message/style/css");
  11. var _react = require("react");
  12. var _react2 = _interopRequireDefault(_react);
  13. var _propTypes = require("prop-types");
  14. var _propTypes2 = _interopRequireDefault(_propTypes);
  15. var _axios = require("./axios");
  16. var _axios2 = _interopRequireDefault(_axios);
  17. var _constant = require("./constant");
  18. var _Comment = require("./Comment");
  19. var _helper = require("./helper");
  20. var _CommentInput = require("./components/CommentInput");
  21. var _CommentInput2 = _interopRequireDefault(_CommentInput);
  22. var _CommentList = require("./components/CommentList");
  23. var _CommentList2 = _interopRequireDefault(_CommentList);
  24. var _Editor = require("./components/Editor");
  25. var _Editor2 = _interopRequireDefault(_Editor);
  26. require("./App.css");
  27. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  28. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  29. 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; }
  30. 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; }
  31. var App = function (_Component) {
  32. _inherits(App, _Component);
  33. function App(props) {
  34. _classCallCheck(this, App);
  35. var _this = _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).call(this, props));
  36. _this.state = {
  37. loading: {},
  38. // oss 配置
  39. oss: {},
  40. // 评论数据
  41. list: [],
  42. page: 1,
  43. total: 0,
  44. // 是否没有更多评论了
  45. isNoMoreComment: false
  46. };
  47. _this.handleChangeLoading = _this.handleChangeLoading.bind(_this);
  48. _this.sGetComment = _this.sGetComment.bind(_this);
  49. _this.sGetReply = _this.sGetReply.bind(_this);
  50. _this.sCreateComment = _this.sCreateComment.bind(_this);
  51. _this.sCreateReply = _this.sCreateReply.bind(_this);
  52. _this.sCommentFavor = _this.sCommentFavor.bind(_this);
  53. _this.sOssSts = _this.sOssSts.bind(_this);
  54. return _this;
  55. }
  56. _createClass(App, [{
  57. key: "componentDidMount",
  58. value: function componentDidMount() {}
  59. /**
  60. * 改变 loading 状态
  61. * @param {string} key key
  62. * @param {string} value value
  63. */
  64. }, {
  65. key: "handleChangeLoading",
  66. value: function handleChangeLoading(key, value) {
  67. var loading = this.state.loading;
  68. loading[key] = value;
  69. this.setState({ loading: loading });
  70. }
  71. /**
  72. * 获取评论列表
  73. */
  74. }, {
  75. key: "sGetComment",
  76. value: function sGetComment() {
  77. var _this2 = this;
  78. var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
  79. _ref$page = _ref.page,
  80. page = _ref$page === undefined ? 1 : _ref$page;
  81. this.handleChangeLoading("sGetComment", true);
  82. var _props = this.props,
  83. API = _props.API,
  84. type = _props.type,
  85. businessId = _props.businessId;
  86. _axios2.default.get(API + "/comments?type=" + type + "&business_id=" + businessId + "&page=" + page + "&limit=" + _constant.LIMIT).then(function (response) {
  87. var _response$data = response.data,
  88. list = _response$data.list,
  89. page = _response$data.page,
  90. total = _response$data.total;
  91. if (list) {
  92. var newList = list;
  93. if (page > 1) {
  94. var oldList = _this2.state.list;
  95. // 删除临时数据
  96. oldList = oldList.filter(function (o) {
  97. return !o.isTemporary;
  98. });
  99. newList = oldList.concat(newList);
  100. }
  101. _this2.setState({
  102. list: newList,
  103. page: page,
  104. total: total
  105. });
  106. } else {
  107. _message3.default.info("没有更多评论了");
  108. _this2.setState({
  109. isNoMoreComment: true
  110. });
  111. }
  112. }).catch(function (error) {
  113. if (error.response && error.response.data && error.response.data.msg) {
  114. _message3.default.error(error.response.data.msg || _constant.ERROR_DEFAULT);
  115. return;
  116. }
  117. _message3.default.error(error.message || _constant.ERROR_DEFAULT);
  118. }).finally(function () {
  119. _this2.handleChangeLoading("sGetComment", false);
  120. });
  121. }
  122. /**
  123. * 获取更多回复
  124. */
  125. }, {
  126. key: "sGetReply",
  127. value: function sGetReply() {
  128. var _this3 = this;
  129. var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
  130. commentId = _ref2.commentId,
  131. _ref2$page = _ref2.page,
  132. page = _ref2$page === undefined ? 1 : _ref2$page;
  133. this.handleChangeLoading("sGetReply", true);
  134. var API = this.props.API;
  135. _axios2.default.get(API + "/replies?comment_id=" + commentId + "&page=" + page + "&limit=" + _constant.LIMIT).then(function (response) {
  136. var replies = response.data.list;
  137. if (!replies) {
  138. _message3.default.info("没有更多数据了!");
  139. }
  140. var list = _this3.state.list.map(function (item) {
  141. if (item.id === commentId) {
  142. if (!item.replies) item.replies = [];
  143. if (replies) {
  144. if (page === 1) {
  145. // 如果当前页数为第一页,则清空当前所有的 replies
  146. // 并将获取到的 replies 存放在 state
  147. item.replies = replies;
  148. } else {
  149. item.replies = item.replies.concat(replies);
  150. // 如果当前页数非第一页,则合并 replies
  151. }
  152. } else {
  153. item.isNoMoreReply = true;
  154. }
  155. }
  156. return item;
  157. });
  158. _this3.setState({ list: list });
  159. }).catch(function (error) {
  160. if (error.response && error.response.data && error.response.data.msg) {
  161. _message3.default.error(error.response.data.msg || _constant.ERROR_DEFAULT);
  162. return;
  163. }
  164. _message3.default.error(error.message || _constant.ERROR_DEFAULT);
  165. }).finally(function () {
  166. _this3.handleChangeLoading("sGetReply", false);
  167. });
  168. }
  169. /**
  170. * 添加评论
  171. * @param {string} content comment content
  172. */
  173. }, {
  174. key: "sCreateComment",
  175. value: function sCreateComment(content) {
  176. var _this4 = this;
  177. if (!content) return _message3.default.error("评论内容不能为空 ");
  178. this.handleChangeLoading("sCreateComment", true);
  179. var _props2 = this.props,
  180. API = _props2.API,
  181. type = _props2.type,
  182. businessId = _props2.businessId;
  183. (0, _axios2.default)(API + "/comments", {
  184. method: "post",
  185. data: {
  186. type: type,
  187. business_id: businessId,
  188. content: content
  189. },
  190. withCredentials: true
  191. }).then(function (response) {
  192. _message3.default.success("评论成功!");
  193. // 将数据写入到 list 中
  194. // 临时插入
  195. // 等到获取数据之后,删除临时数据
  196. var list = _this4.state.list;
  197. list.unshift(_extends({}, response.data, {
  198. isTemporary: true // 临时的数据
  199. }));
  200. _this4.setState({ list: list });
  201. }).catch(function (error) {
  202. if (error.response && error.response.data && error.response.data.msg) {
  203. _message3.default.error(error.response.data.msg || _constant.ERROR_DEFAULT);
  204. return;
  205. }
  206. _message3.default.error(error.message || _constant.ERROR_DEFAULT);
  207. }).finally(function () {
  208. _this4.handleChangeLoading("sCreateComment", false);
  209. });
  210. }
  211. /**
  212. * 添加回复
  213. * 回复评论/回复回复
  214. * @param {object} data { comment_id, content, [reply_id] }
  215. */
  216. }, {
  217. key: "sCreateReply",
  218. value: function sCreateReply(data, cb) {
  219. var _this5 = this;
  220. if (!data.content) return _message3.default.error("回复内容不能为空 ");
  221. this.handleChangeLoading("sCreateReply", true);
  222. var API = this.props.API;
  223. (0, _axios2.default)(API + "/replies", {
  224. method: "post",
  225. data: data,
  226. withCredentials: true
  227. }).then(function (response) {
  228. // // 将该条数据插入到 list 中
  229. // const list = this.state.list.map(item => {
  230. // if (item.id === data.comment_id) {
  231. // if (!item.replies) item.replies = [];
  232. // item.reply_count += 1
  233. // item.replies.unshift(response.data);
  234. // }
  235. // return item;
  236. // });
  237. // this.setState({ list });
  238. _this5.sGetReply({ commentId: data.comment_id });
  239. _message3.default.success("回复成功!");
  240. if ((0, _helper.isFunction)(cb)) cb();
  241. }).catch(function (error) {
  242. if (error.response && error.response.data && error.response.data.msg) {
  243. _message3.default.error(error.response.data.msg || _constant.ERROR_DEFAULT);
  244. return;
  245. }
  246. _message3.default.error(error.message || _constant.ERROR_DEFAULT);
  247. }).finally(function () {
  248. _this5.handleChangeLoading("sCreateReply", false);
  249. });
  250. }
  251. /**
  252. * 点赞/取消点赞
  253. * @param {string} commentId { commentId }
  254. * @param {boolean} favored 是否已经点过赞
  255. */
  256. }, {
  257. key: "sCommentFavor",
  258. value: function sCommentFavor(commentId, favored) {
  259. var _this6 = this;
  260. this.handleChangeLoading("sCommentFavor", true);
  261. var API = this.props.API;
  262. (0, _axios2.default)(API + "/comments/" + commentId + "/favor", {
  263. method: favored ? "delete" : "put",
  264. withCredentials: true
  265. }).then(function (response) {
  266. _message3.default.success(favored ? "取消点赞成功!" : "点赞成功!");
  267. // 更新 list 中的该项数据的 favored
  268. var list = _this6.state.list.map(function (item) {
  269. if (item.id === commentId) {
  270. item.favored = !favored;
  271. item.favor_count += favored ? -1 : 1;
  272. }
  273. return item;
  274. });
  275. _this6.setState({ list: list });
  276. }).catch(function (error) {
  277. if (error.response && error.response.data && error.response.data.msg) {
  278. _message3.default.error(error.response.data.msg || _constant.ERROR_DEFAULT);
  279. return;
  280. }
  281. _message3.default.error(error.message || _constant.ERROR_DEFAULT);
  282. }).finally(function () {
  283. _this6.handleChangeLoading("sCommentFavor", false);
  284. });
  285. }
  286. /**
  287. * 获取 OSS 上传的参数
  288. */
  289. }, {
  290. key: "sOssSts",
  291. value: function sOssSts() {
  292. var _this7 = this;
  293. this.handleChangeLoading("sOssSts", true);
  294. var API = this.props.API;
  295. _axios2.default.get(API + "/oss/sts").then(function (response) {
  296. _this7.setState({ oss: _extends({}, response.data) });
  297. }).catch(function (error) {
  298. if (error.response && error.response.data && error.response.data.msg) {
  299. _message3.default.error(error.response.data.msg || _constant.ERROR_DEFAULT);
  300. return;
  301. }
  302. _message3.default.error(error.message || _constant.ERROR_DEFAULT);
  303. }).finally(function () {
  304. _this7.handleChangeLoading("sOssSts", false);
  305. });
  306. }
  307. }, {
  308. key: "render",
  309. value: function render() {
  310. // 添加到 Context 的数据
  311. var value = _extends({}, this.state, this.props, {
  312. sCreateComment: this.sCreateComment,
  313. sGetComment: this.sGetComment,
  314. sCommentFavor: this.sCommentFavor,
  315. sCreateReply: this.sCreateReply,
  316. sGetReply: this.sGetReply,
  317. sOssSts: this.sOssSts
  318. });
  319. return _react2.default.createElement(
  320. _Comment.CommentContext.Provider,
  321. { value: value },
  322. _react2.default.createElement(
  323. "div",
  324. { className: "comment" },
  325. this.props.showEditor && _react2.default.createElement(_CommentInput2.default, { content: this.props.children }),
  326. this.props.showList && _react2.default.createElement(
  327. "div",
  328. { style: { marginTop: 20 } },
  329. _react2.default.createElement(_CommentList2.default, null)
  330. )
  331. )
  332. );
  333. }
  334. }]);
  335. return App;
  336. }(_react.Component);
  337. App.propTypes = {
  338. type: _propTypes2.default.number.isRequired, // 评论的 type
  339. businessId: _propTypes2.default.string.isRequired, // 评论的 business_id
  340. API: _propTypes2.default.string, // 评论的 API 前缀
  341. showList: _propTypes2.default.bool, // 是否显示评论列表
  342. showEditor: _propTypes2.default.bool // 是否显示评论输入框
  343. };
  344. App.defaultProps = {
  345. API: "http://api.links123.net/comment/v1",
  346. showList: true,
  347. showEditor: true
  348. };
  349. exports.Editor = _Editor2.default;
  350. exports.default = App;
  351. //# sourceMappingURL=App.js.map