通用评论

App.js 18KB

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