123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308 |
- import React, { Component } from "react";
- import { message } from "antd";
- import axios from "./axios";
- import { URL, ERROR_DEFAULT, LIMIT } from "./constant";
- import { CommentContext } from "./Comment";
- import { isFunction } from "./helper";
- import CommentInput from "./components/CommentInput";
- import CommentList from "./components/CommentList";
- // import * as mock from "./mock";
- import "./App.css";
-
- class App extends Component {
- constructor(props) {
- super(props);
- this.state = {
- loading: {},
-
- // oss 配置
- oss: {},
-
- // 评论数据
- list: [],
- page: 1,
- total: 0,
- // 是否没有更多评论了
- isNoMoreComment: false
- };
- this.handleChangeLoading = this.handleChangeLoading.bind(this);
- this.sGetComment = this.sGetComment.bind(this);
- this.sGetReply = this.sGetReply.bind(this);
- this.sCreateComment = this.sCreateComment.bind(this);
- this.sCreateReply = this.sCreateReply.bind(this);
- this.sCommentFavor = this.sCommentFavor.bind(this);
- this.sOssSts = this.sOssSts.bind(this);
- }
-
- componentDidMount() {
- this.sGetComment();
- }
-
- /**
- * 改变 loading 状态
- * @param {string} key key
- * @param {string} value value
- */
- handleChangeLoading(key, value) {
- const { loading } = this.state;
- loading[key] = value;
- this.setState({ loading });
- }
-
- /**
- * 获取评论列表
- */
- sGetComment({ type = 1, businessId = 1, page = 1 } = {}) {
- this.handleChangeLoading("sGetComment", true);
- // 测试数据列表
- // const { comments } = mock;
- // this.setState({
- // list: comments.list,
- // page: 1,
- // total: 100
- // });
- // this.handleChangeLoading("sGetComment", false);
- // return;
- axios
- .get(
- `${URL}/comments?type=${type}&business_id=${businessId}&page=${page}&limit=${LIMIT}`
- )
- .then(response => {
- const { list, page, total } = response.data;
- if (list) {
- let newList = list;
- if (page > 1) {
- let { list: oldList } = this.state;
- // 删除临时数据
- oldList = oldList.filter(o => !o.isTemporary);
- newList = oldList.concat(newList);
- }
- this.setState({
- list: newList,
- page,
- total
- });
- } else {
- message.info("没有更多评论了");
- this.setState({
- isNoMoreComment: true
- });
- }
- })
- .catch(error => {
- if (error.response && error.response.data && error.response.data.msg) {
- message.error(error.response.data.msg || ERROR_DEFAULT);
- return;
- }
- message.error(error.message || ERROR_DEFAULT);
- })
- .finally(() => {
- this.handleChangeLoading("sGetComment", false);
- });
- }
-
- /**
- * 获取更多回复
- */
- sGetReply({ commentId, page = 1 } = {}) {
- this.handleChangeLoading("sGetReply", true);
- axios
- .get(`${URL}/replies?comment_id=${commentId}&page=${page}&limit=${LIMIT}`)
- .then(response => {
- const { list: replies } = response.data;
- if (!replies) {
- message.info("没有更多数据了!");
- }
- const list = this.state.list.map(item => {
- if (item.id === commentId) {
- if (!item.replies) item.replies = [];
- if (replies) {
- if (page === 1) {
- // 如果当前页数为第一页,则清空当前所有的 replies
- // 并将获取到的 replies 存放在 state
- item.replies = replies;
- } else {
- item.replies = item.replies.concat(replies);
- // 如果当前页数非第一页,则合并 replies
- }
- } else {
- item.isNoMoreReply = true;
- }
- }
- return item;
- });
- this.setState({ list });
- })
- .catch(error => {
- if (error.response && error.response.data && error.response.data.msg) {
- message.error(error.response.data.msg || ERROR_DEFAULT);
- return;
- }
- message.error(error.message || ERROR_DEFAULT);
- })
- .finally(() => {
- this.handleChangeLoading("sGetReply", false);
- });
- }
-
- /**
- * 添加评论
- * @param {object} data { type, business_id, content }
- */
- sCreateComment(data) {
- if (!data.content) return message.error("评论内容不能为空 ");
- this.handleChangeLoading("sCreateComment", true);
- axios(`${URL}/comments`, {
- method: "post",
- data,
- withCredentials: true
- })
- .then(response => {
- message.success("评论成功!");
- // 将数据写入到 list 中
- // 临时插入
- // 等到获取数据之后,删除临时数据
- const { list } = this.state;
- list.unshift({
- ...response.data,
- isTemporary: true // 临时的数据
- });
- this.setState({ list });
- })
- .catch(error => {
- if (error.response && error.response.data && error.response.data.msg) {
- message.error(error.response.data.msg || ERROR_DEFAULT);
- return;
- }
- message.error(error.message || ERROR_DEFAULT);
- })
- .finally(() => {
- this.handleChangeLoading("sCreateComment", false);
- });
- }
-
- /**
- * 添加回复
- * 回复评论/回复回复
- * @param {object} data { comment_id, content, [reply_id] }
- */
- sCreateReply(data, cb) {
- if (!data.content) return message.error("回复内容不能为空 ");
- this.handleChangeLoading("sCreateReply", true);
- axios(`${URL}/replies`, {
- method: "post",
- data,
- withCredentials: true
- })
- .then(response => {
- // console.log("response: ", response.data);
- // // 将该条数据插入到 list 中
- // const list = this.state.list.map(item => {
- // if (item.id === data.comment_id) {
- // if (!item.replies) item.replies = [];
- // item.reply_count += 1
- // item.replies.unshift(response.data);
- // }
- // return item;
- // });
- // this.setState({ list });
- this.sGetReply({ commentId: data.comment_id });
- message.success("回复成功!");
- if (isFunction(cb)) cb();
- })
- .catch(error => {
- if (error.response && error.response.data && error.response.data.msg) {
- message.error(error.response.data.msg || ERROR_DEFAULT);
- return;
- }
- message.error(error.message || ERROR_DEFAULT);
- })
- .finally(() => {
- this.handleChangeLoading("sCreateReply", false);
- });
- }
-
- /**
- * 点赞/取消点赞
- * @param {string} commentId { commentId }
- * @param {boolean} favored 是否已经点过赞
- */
- sCommentFavor(commentId, favored) {
- this.handleChangeLoading("sCommentFavor", true);
- axios(`${URL}/comments/${commentId}/favor`, {
- method: favored ? "delete" : "put",
- withCredentials: true
- })
- .then(response => {
- message.success(favored ? "取消点赞成功!" : "点赞成功!");
- // 更新 list 中的该项数据的 favored
- const list = this.state.list.map(item => {
- if (item.id === commentId) {
- item.favored = !favored;
- item.favor_count += favored ? -1 : 1;
- }
- return item;
- });
- this.setState({ list });
- })
- .catch(error => {
- if (error.response && error.response.data && error.response.data.msg) {
- message.error(error.response.data.msg || ERROR_DEFAULT);
- return;
- }
- message.error(error.message || ERROR_DEFAULT);
- })
- .finally(() => {
- this.handleChangeLoading("sCommentFavor", false);
- });
- }
-
- /**
- * 获取 OSS 上传的参数
- */
- sOssSts() {
- this.handleChangeLoading("sOssSts", true);
- axios
- .get(`${URL}/oss/sts`)
- .then(response => {
- this.setState({ oss: { ...response.data } });
- })
- .catch(error => {
- if (error.response && error.response.data && error.response.data.msg) {
- message.error(error.response.data.msg || ERROR_DEFAULT);
- return;
- }
- message.error(error.message || ERROR_DEFAULT);
- })
- .finally(() => {
- this.handleChangeLoading("sOssSts", false);
- });
- }
-
- render() {
- // 添加到 Context 的数据
- const value = {
- ...this.state,
- sCreateComment: this.sCreateComment,
- sGetComment: this.sGetComment,
- sCommentFavor: this.sCommentFavor,
- sCreateReply: this.sCreateReply,
- sGetReply: this.sGetReply,
- sOssSts: this.sOssSts
- };
-
- return (
- <CommentContext.Provider value={value}>
- <div className="comment">
- <CommentInput />
- <div style={{ marginTop: 20 }}>
- <CommentList />
- </div>
- </div>
- </CommentContext.Provider>
- );
- }
- }
-
- export default App;
|