通用评论

App.js 18KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.RenderText = exports.Editor = undefined;
  6. var _tag = require("antd/es/tag");
  7. var _tag2 = _interopRequireDefault(_tag);
  8. var _message2 = require("antd/es/message");
  9. var _message3 = _interopRequireDefault(_message2);
  10. 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; };
  11. 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; }; }();
  12. require("antd/es/tag/style/css");
  13. require("antd/es/message/style/css");
  14. var _react = require("react");
  15. var _react2 = _interopRequireDefault(_react);
  16. var _propTypes = require("prop-types");
  17. var _propTypes2 = _interopRequireDefault(_propTypes);
  18. var _axios = require("axios");
  19. var _axios2 = _interopRequireDefault(_axios);
  20. var _constant = require("./constant");
  21. var _Comment = require("./Comment");
  22. var _helper = require("./helper");
  23. var _CommentInput = require("./components/CommentInput");
  24. var _CommentInput2 = _interopRequireDefault(_CommentInput);
  25. var _CommentList = require("./components/CommentList");
  26. var _CommentList2 = _interopRequireDefault(_CommentList);
  27. var _Editor = require("./components/Editor");
  28. var _Editor2 = _interopRequireDefault(_Editor);
  29. var _RenderText = require("./components/RenderText");
  30. var _RenderText2 = _interopRequireDefault(_RenderText);
  31. var _lang = require("./lang");
  32. var _lang2 = _interopRequireDefault(_lang);
  33. require("./App.css");
  34. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  35. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  36. 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; }
  37. 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; }
  38. var App = function (_Component) {
  39. _inherits(App, _Component);
  40. function App(props) {
  41. _classCallCheck(this, App);
  42. var _this = _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).call(this, props));
  43. _this.state = {
  44. loading: {},
  45. // oss 配置
  46. oss: {},
  47. // 评论数据
  48. list: [],
  49. page: 1,
  50. total: 0,
  51. // 是否没有更多评论了
  52. isNoMoreComment: false
  53. };
  54. _this.handleChangeLoading = _this.handleChangeLoading.bind(_this);
  55. _this.sGetComment = _this.sGetComment.bind(_this);
  56. _this.sGetReply = _this.sGetReply.bind(_this);
  57. _this.sCreateComment = _this.sCreateComment.bind(_this);
  58. _this.sCreateReply = _this.sCreateReply.bind(_this);
  59. _this.sCommentFavor = _this.sCommentFavor.bind(_this);
  60. _this.sReplyFavor = _this.sReplyFavor.bind(_this);
  61. _this.sOssSts = _this.sOssSts.bind(_this);
  62. return _this;
  63. }
  64. _createClass(App, [{
  65. key: "componentWillMount",
  66. value: function componentWillMount() {
  67. this.axios = _axios2.default;
  68. this.axios.defaults.withCredentials = true;
  69. if (this.props.token) {
  70. this.axios.defaults.headers.common["Authorization"] = "Bearer " + this.props.token;
  71. }
  72. }
  73. }, {
  74. key: "componentDidMount",
  75. value: function componentDidMount() {}
  76. /**
  77. * 改变 loading 状态
  78. * @param {string} key key
  79. * @param {string} value value
  80. */
  81. }, {
  82. key: "handleChangeLoading",
  83. value: function handleChangeLoading(key, value) {
  84. var loading = this.state.loading;
  85. loading[key] = value;
  86. this.setState({ loading: loading });
  87. }
  88. /**
  89. * 获取评论列表
  90. */
  91. }, {
  92. key: "sGetComment",
  93. value: function sGetComment() {
  94. var _this2 = this;
  95. var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
  96. _ref$page = _ref.page,
  97. page = _ref$page === undefined ? 1 : _ref$page;
  98. this.handleChangeLoading("sGetComment", true);
  99. var _props = this.props,
  100. API = _props.API,
  101. type = _props.type,
  102. businessId = _props.businessId;
  103. this.axios.get(API + "/comments?type=" + type + "&business_id=" + businessId + "&page=" + page + "&limit=" + _constant.LIMIT).then(function (response) {
  104. var _response$data = response.data,
  105. list = _response$data.list,
  106. page = _response$data.page,
  107. total = _response$data.total;
  108. if (list) {
  109. var newList = list;
  110. if (page > 1) {
  111. var oldList = _this2.state.list;
  112. // 删除临时数据
  113. oldList = oldList.filter(function (o) {
  114. return !o.isTemporary;
  115. });
  116. newList = oldList.concat(newList);
  117. }
  118. _this2.setState({
  119. list: newList,
  120. page: page,
  121. total: total
  122. });
  123. } else {
  124. _message3.default.info("没有更多评论了");
  125. _this2.setState({
  126. isNoMoreComment: true
  127. });
  128. }
  129. }).catch(function (error) {
  130. if (error.response && error.response.data && error.response.data.msg) {
  131. _message3.default.error(_lang2.default[error.response.data.msg] || _constant.ERROR_DEFAULT);
  132. return;
  133. }
  134. _message3.default.error(_lang2.default[error.message] || _constant.ERROR_DEFAULT);
  135. }).finally(function () {
  136. _this2.handleChangeLoading("sGetComment", false);
  137. });
  138. }
  139. /**
  140. * 获取更多回复
  141. */
  142. }, {
  143. key: "sGetReply",
  144. value: function sGetReply() {
  145. var _this3 = this;
  146. var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
  147. commentId = _ref2.commentId,
  148. _ref2$page = _ref2.page,
  149. page = _ref2$page === undefined ? 1 : _ref2$page;
  150. this.handleChangeLoading("sGetReply", true);
  151. var API = this.props.API;
  152. this.axios.get(API + "/replies?comment_id=" + commentId + "&page=" + page + "&limit=" + _constant.LIMIT).then(function (response) {
  153. if (!response.data.list) {
  154. _message3.default.info("没有更多数据了!");
  155. }
  156. var list = _this3.state.list.map(function (item) {
  157. if (item.id === commentId) {
  158. if (!item.replies) item.replies = [];
  159. if (response.data.list) {
  160. if (page === 1) {
  161. // 如果当前页数为第一页,则清空当前所有的 replies
  162. // 并将获取到的 replies 存放在 state
  163. item.replies = response.data.list;
  164. } else {
  165. item.replies = item.replies.filter(function (o) {
  166. return !o.isTemporary;
  167. }).concat(response.data.list);
  168. // 如果当前页数非第一页,则合并 replies
  169. }
  170. item.reply_count = response.data.total;
  171. item.reply_page = response.data.page;
  172. } else {
  173. item.isNoMoreReply = true;
  174. }
  175. }
  176. return item;
  177. });
  178. _this3.setState({ list: list });
  179. }).catch(function (error) {
  180. if (error.response && error.response.data && error.response.data.msg) {
  181. _message3.default.error(_lang2.default[error.response.data.msg] || _constant.ERROR_DEFAULT);
  182. return;
  183. }
  184. _message3.default.error(_lang2.default[error.message] || _constant.ERROR_DEFAULT);
  185. }).finally(function () {
  186. _this3.handleChangeLoading("sGetReply", false);
  187. });
  188. }
  189. /**
  190. * 添加评论
  191. * @param {object} {content} comment content
  192. */
  193. }, {
  194. key: "sCreateComment",
  195. value: function sCreateComment() {
  196. var _this4 = this;
  197. var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
  198. content = _ref3.content;
  199. var cb = arguments[1];
  200. if (!content) return _message3.default.error("评论内容不能为空 ");
  201. this.handleChangeLoading("sCreateComment", true);
  202. var _props2 = this.props,
  203. API = _props2.API,
  204. type = _props2.type,
  205. businessId = _props2.businessId;
  206. this.axios(API + "/comments", {
  207. method: "post",
  208. data: {
  209. type: type,
  210. business_id: businessId,
  211. content: content
  212. },
  213. withCredentials: true
  214. }).then(function (response) {
  215. _message3.default.success("评论成功!");
  216. if ((0, _helper.isFunction)(cb)) cb();
  217. // 将数据写入到 list 中
  218. // 临时插入
  219. // 等到获取数据之后,删除临时数据
  220. var _state = _this4.state,
  221. list = _state.list,
  222. total = _state.total;
  223. list.unshift(_extends({}, response.data, {
  224. isTemporary: true // 临时的数据
  225. }));
  226. _this4.setState({ list: list, total: total + 1 });
  227. }).catch(function (error) {
  228. if (error.response && error.response.data && error.response.data.msg) {
  229. _message3.default.error(_lang2.default[error.response.data.msg] || _constant.ERROR_DEFAULT);
  230. return;
  231. }
  232. _message3.default.error(_lang2.default[error.message] || _constant.ERROR_DEFAULT);
  233. }).finally(function () {
  234. _this4.handleChangeLoading("sCreateComment", false);
  235. });
  236. }
  237. /**
  238. * 添加回复
  239. * 回复评论/回复回复
  240. * @param {object} data { comment_id, content, [reply_id] }
  241. */
  242. }, {
  243. key: "sCreateReply",
  244. value: function sCreateReply(data, cb) {
  245. var _this5 = this;
  246. if (!data.content) return _message3.default.error("回复内容不能为空 ");
  247. this.handleChangeLoading("sCreateReply", true);
  248. var API = this.props.API;
  249. this.axios(API + "/replies", {
  250. method: "post",
  251. data: data,
  252. withCredentials: true
  253. }).then(function (response) {
  254. _message3.default.success("回复成功!");
  255. if ((0, _helper.isFunction)(cb)) cb();
  256. // 将数据写入到 list 中
  257. // 临时插入
  258. // 等到获取数据之后,删除临时数据
  259. var list = _this5.state.list.map(function (item) {
  260. if (item.id === data.comment_id) {
  261. if (!item.replies) item.replies = [];
  262. item.replies.push(_extends({}, response.data, {
  263. isTemporary: true // 临时的数据
  264. }));
  265. item.reply_count += 1;
  266. }
  267. return item;
  268. });
  269. _this5.setState({ list: list });
  270. }).catch(function (error) {
  271. if (error.response && error.response.data && error.response.data.msg) {
  272. _message3.default.error(_lang2.default[error.response.data.msg] || _constant.ERROR_DEFAULT);
  273. return;
  274. }
  275. _message3.default.error(_lang2.default[error.message] || _constant.ERROR_DEFAULT);
  276. }).finally(function () {
  277. _this5.handleChangeLoading("sCreateReply", false);
  278. });
  279. }
  280. /**
  281. * 评论 点赞/取消点赞
  282. * @param {string} commentId { commentId }
  283. * @param {boolean} favored 是否已经点过赞
  284. */
  285. }, {
  286. key: "sCommentFavor",
  287. value: function sCommentFavor(commentId, favored) {
  288. var _this6 = this;
  289. this.handleChangeLoading("sCommentFavor", true);
  290. var API = this.props.API;
  291. this.axios(API + "/comments/" + commentId + "/favor", {
  292. method: favored ? "delete" : "put",
  293. withCredentials: true
  294. }).then(function (response) {
  295. _message3.default.success(favored ? "取消点赞成功!" : "点赞成功!");
  296. // 更新 list 中的该项数据的 favored
  297. var list = _this6.state.list.map(function (item) {
  298. if (item.id === commentId) {
  299. item.favored = !favored;
  300. item.favor_count += favored ? -1 : 1;
  301. }
  302. return item;
  303. });
  304. _this6.setState({ list: list });
  305. }).catch(function (error) {
  306. if (error.response && error.response.data && error.response.data.msg) {
  307. _message3.default.error(_lang2.default[error.response.data.msg] || _constant.ERROR_DEFAULT);
  308. return;
  309. }
  310. _message3.default.error(_lang2.default[error.message] || _constant.ERROR_DEFAULT);
  311. }).finally(function () {
  312. _this6.handleChangeLoading("sCommentFavor", false);
  313. });
  314. }
  315. /**
  316. * 回复 点赞/取消点赞
  317. * @param {string} replyId replyId
  318. * @param {string} commentId commentId
  319. * @param {boolean} favored 是否已经点过赞
  320. */
  321. }, {
  322. key: "sReplyFavor",
  323. value: function sReplyFavor(replyId, commentId, favored) {
  324. var _this7 = this;
  325. this.handleChangeLoading("sReplyFavor", true);
  326. var API = this.props.API;
  327. this.axios(API + "/replies/" + replyId + "/favor", {
  328. method: favored ? "delete" : "put",
  329. data: {
  330. comment_id: commentId
  331. },
  332. withCredentials: true
  333. }).then(function (response) {
  334. _message3.default.success(favored ? "取消点赞成功!" : "点赞成功!");
  335. // 更新 list 中的该项数据的 favored
  336. var list = _this7.state.list.map(function (item) {
  337. if (item.id === commentId) {
  338. item.replies = item.replies.map(function (r) {
  339. if (r.id === replyId) {
  340. r.favored = !favored;
  341. // r.favor_count = response.data.favor_count;
  342. // 点赞数 +1,而不是使用后端返回的点赞数
  343. // 不然如果返回的不是增加 1,用户可能以为程序错误
  344. r.favor_count += favored ? -1 : 1;
  345. }
  346. return r;
  347. });
  348. }
  349. return item;
  350. });
  351. _this7.setState({ list: list });
  352. }).catch(function (error) {
  353. if (error.response && error.response.data && error.response.data.msg) {
  354. _message3.default.error(_lang2.default[error.response.data.msg] || _constant.ERROR_DEFAULT);
  355. return;
  356. }
  357. _message3.default.error(_lang2.default[error.message] || _constant.ERROR_DEFAULT);
  358. }).finally(function () {
  359. _this7.handleChangeLoading("sReplyFavor", false);
  360. });
  361. }
  362. /**
  363. * 获取 OSS 上传的参数
  364. */
  365. }, {
  366. key: "sOssSts",
  367. value: function sOssSts() {
  368. var _this8 = this;
  369. this.handleChangeLoading("sOssSts", true);
  370. this.axios.get("http://api.links123.net/comment/v1/oss/sts").then(function (response) {
  371. _this8.setState({ oss: _extends({}, response.data) });
  372. }).catch(function (error) {
  373. if (error.response && error.response.data && error.response.data.msg) {
  374. _message3.default.error(_lang2.default[error.response.data.msg] || _constant.ERROR_DEFAULT);
  375. return;
  376. }
  377. _message3.default.error(_lang2.default[error.message] || _constant.ERROR_DEFAULT);
  378. }).finally(function () {
  379. _this8.handleChangeLoading("sOssSts", false);
  380. });
  381. }
  382. }, {
  383. key: "render",
  384. value: function render() {
  385. // 添加到 Context 的数据
  386. var value = _extends({}, this.state, this.props, {
  387. sCreateComment: this.sCreateComment,
  388. sGetComment: this.sGetComment,
  389. sCommentFavor: this.sCommentFavor,
  390. sReplyFavor: this.sReplyFavor,
  391. sCreateReply: this.sCreateReply,
  392. sGetReply: this.sGetReply,
  393. sOssSts: this.sOssSts
  394. });
  395. return _react2.default.createElement(
  396. _Comment.CommentContext.Provider,
  397. { value: value },
  398. _react2.default.createElement(
  399. "div",
  400. { className: "comment" },
  401. this.props.showHeader && _react2.default.createElement(
  402. "div",
  403. { style: { marginBottom: 15 } },
  404. _react2.default.createElement(
  405. _tag2.default,
  406. { className: "comment-header-tag" },
  407. "\u7559\u8A00"
  408. ),
  409. _react2.default.createElement(
  410. "span",
  411. { className: "comment-header-tip" },
  412. "\u53E3\u7891"
  413. ),
  414. _react2.default.createElement(
  415. "span",
  416. { className: "comment-header-text" },
  417. "(\u5168\u7AD9\u6311\u51FA\u6BDB\u75C5\u6216\u63D0\u51FA\u5408\u7406\u5EFA\u8BAE\uFF0C\u5956\u52B110\u5230100\u5143\u7EA2\u5305)"
  418. )
  419. ),
  420. this.props.showEditor && _react2.default.createElement(_CommentInput2.default, { content: this.props.children }),
  421. this.props.showList && _react2.default.createElement(
  422. "div",
  423. { style: { marginTop: 20 } },
  424. _react2.default.createElement(_CommentList2.default, null)
  425. )
  426. )
  427. );
  428. }
  429. }]);
  430. return App;
  431. }(_react.Component);
  432. App.propTypes = {
  433. type: _propTypes2.default.number.isRequired, // 评论的 type
  434. businessId: _propTypes2.default.string.isRequired, // 评论的 business_id
  435. API: _propTypes2.default.string, // 评论的 API 前缀
  436. showList: _propTypes2.default.bool, // 是否显示评论列表
  437. showEditor: _propTypes2.default.bool, // 是否显示评论输入框
  438. showHeader: _propTypes2.default.bool // 是否显示评论顶部的提示
  439. };
  440. App.defaultProps = {
  441. API: "http://api.links123.net/comment/v1",
  442. showList: true,
  443. showEditor: true,
  444. showHeader: true
  445. };
  446. exports.Editor = _Editor2.default;
  447. exports.RenderText = _RenderText2.default;
  448. exports.default = App;
  449. //# sourceMappingURL=App.js.map