296 lines
9.8 KiB
296 lines
9.8 KiB
import React,{ Component } from "react";
|
|
import { Pagination } from "antd";
|
|
|
|
import update from 'immutability-helper'
|
|
import axios from 'axios'
|
|
import MemoDetailMDEditor from '../../../forums/MemoDetailMDEditor'
|
|
|
|
import '../../../forums/Post.css'
|
|
import '../../../forums/RightSection.css'
|
|
import {ImageLayerOfCommentHOC} from '../../../page/layers/ImageLayerOfCommentHOC'
|
|
|
|
import Comments from '../../../comment/Comments'
|
|
// import './GraduateTopicReply.css'
|
|
import '../../common/courseMessage.css'
|
|
import { generateComments, generateChildComments, _findById, handleContentBeforeCreateNew, addNewComment
|
|
, addSecondLevelComment, NEED_TO_WRITE_CONTENT, handleContentBeforeCreateSecondLevelComment
|
|
, handleDeleteComment, handleCommentPraise, handleHiddenComment } from '../../common/CommentsHelper'
|
|
const REPLY_PAGE_COUNT = 10
|
|
const $ = window.$;
|
|
|
|
/*
|
|
相比较GraduateTopicReply 改动的地方
|
|
列表接口名 /graduation_tasks/${graduation_topic_id}/show_comment.json?parent_id=${parent.id}&limit=500
|
|
回复类型名 jour_type: this.props.jour_type,
|
|
*/
|
|
class CommonReply extends Component{
|
|
constructor(props){
|
|
super(props);
|
|
this.state={
|
|
pageCount: 1
|
|
}
|
|
}
|
|
|
|
componentDidMount(){
|
|
this.fetchReplies()
|
|
|
|
|
|
}
|
|
_getUser() {
|
|
const { current_user } = this.props;
|
|
current_user.user_url = `/users/${current_user.login}`;
|
|
return current_user;
|
|
}
|
|
_findById = _findById
|
|
createNewComment = (commentContent, id, editor) => {
|
|
const graduation_topic_id = this.props.memo.id
|
|
|
|
let content = handleContentBeforeCreateNew(commentContent);
|
|
const { memo } = this.props;
|
|
const url = `/users/reply_message.json`;
|
|
|
|
let { comments } = this.state;
|
|
axios.post(url, {
|
|
journals_for_message: {
|
|
jour_type: this.props.jour_type,
|
|
jour_id: graduation_topic_id,
|
|
notes: content,
|
|
// m_parent_id
|
|
reply_id: memo.user_id || this.state.homework_user_id
|
|
}
|
|
}
|
|
).then((response) => {
|
|
if (response.data.status === -1) {
|
|
console.error('服务端异常')
|
|
return;
|
|
}
|
|
// this.props.showNotification('帖子发表成功')
|
|
|
|
if (response.data && response.data.id) {
|
|
const _id = response.data.id;
|
|
// md
|
|
editor.setValue && editor.setValue('')
|
|
this.refs.editor.close && this.refs.editor.close()
|
|
|
|
const user = this._getUser();
|
|
const isSuperAdmin = this.props.isSuperAdmin()
|
|
|
|
this.setState({
|
|
comments: addNewComment(this.state.comments, _id, content, user, isSuperAdmin),
|
|
total_count: this.state.total_count + 1
|
|
})
|
|
this.refs.editor.showEditor();
|
|
|
|
}
|
|
}).catch((error) => {
|
|
console.log(error)
|
|
})
|
|
}
|
|
replyComment = (commentContent, id, editor) => {
|
|
const { showNotification } = this.props;
|
|
// if (!commentContent || commentContent.length === 0) {
|
|
// showNotification(NEED_TO_WRITE_CONTENT)
|
|
// return;
|
|
// }
|
|
|
|
if (this.props.memo.id === id ) { // 回复帖子
|
|
this.createNewComment(commentContent, id, editor);
|
|
return;
|
|
}
|
|
const url = `/users/reply_message.json`;
|
|
|
|
const { comments } = this.state;
|
|
const user = this._getUser();
|
|
const graduation_topic_id = this.props.memo.id
|
|
const commentIndex = this._findById(id, comments);
|
|
let comment = comments[commentIndex];
|
|
|
|
commentContent = handleContentBeforeCreateSecondLevelComment(commentContent)
|
|
axios.post(url, {
|
|
journals_for_message: {
|
|
// 'GraduationTask'
|
|
jour_type: this.props.jour_type,
|
|
jour_id: graduation_topic_id,
|
|
notes: commentContent,
|
|
m_parent_id: id,
|
|
reply_id: comment.user_id
|
|
}
|
|
},
|
|
{
|
|
}
|
|
).then((response) => {
|
|
if (response.data.id) {
|
|
let newId = response.data.id;
|
|
|
|
const newMemo2 = Object.assign({}, this.props.memo);
|
|
newMemo2.total_count = newMemo2.total_count + 1;
|
|
|
|
this.setState({
|
|
comments: addSecondLevelComment(comments, comment, commentIndex, newId, commentContent, user, editor),
|
|
memo: newMemo2,
|
|
total_count: this.state.total_count + 1
|
|
|
|
})
|
|
}
|
|
|
|
}).catch((error) => {
|
|
console.log(error)
|
|
})
|
|
}
|
|
|
|
loadMoreChildComments = (parent) => {
|
|
const graduation_topic_id = this.props.memo.id
|
|
const course_id = this.props.course_id
|
|
const url = `/${this.props.apiRouteName}/${graduation_topic_id}/show_comment.json?parent_id=${parent.id}&limit=500`
|
|
axios.get(url,{
|
|
})
|
|
.then((response) => {
|
|
const { comments } = response.data
|
|
|
|
|
|
// const memo = Object.assign({}, this.state.memo)
|
|
// memo.sum_replies_count = sum_replies_count;
|
|
this.setState({
|
|
// memo,
|
|
comments: generateChildComments(comments, this.state.comments, parent, this.transformReply)
|
|
})
|
|
}).catch((error) => {
|
|
console.log(error)
|
|
})
|
|
}
|
|
|
|
onPaginationChange = (pageCount) => {
|
|
this.setState({ pageCount }, () => {
|
|
this.fetchReplies()
|
|
})
|
|
}
|
|
|
|
fetchReplies = () => {
|
|
const graduation_topic_id = this.props.memo.id
|
|
const course_id = this.props.course_id
|
|
const url = `/${this.props.apiRouteName}/${graduation_topic_id}/show_comment.json?page=${this.state.pageCount}`
|
|
// page limit parent_id
|
|
axios.get(url,{
|
|
})
|
|
.then((response) => {
|
|
const { comments, messages_count, homework_user_id, parent_messages_count } = response.data
|
|
|
|
this.setState({
|
|
comments: generateComments(comments, this.transformReply),
|
|
// : this.state.comments.concat(comments),
|
|
total_count: parent_messages_count,
|
|
homework_user_id
|
|
})
|
|
}).catch((error) => {
|
|
console.log(error)
|
|
})
|
|
}
|
|
|
|
transformReply = (reply, children = []) => {
|
|
const isAdmin = this.props.isAdmin()
|
|
const isSuperAdmin = this.props.isSuperAdmin()
|
|
return {
|
|
admin: isAdmin, //
|
|
isSuperAdmin: isSuperAdmin,
|
|
permission: true, //
|
|
children: children,
|
|
hidden: reply.hidden,
|
|
id: reply.id,
|
|
image_url: reply.author.image_url,
|
|
reward: null, //
|
|
time: reply.time, // moment(reply.created_on).fromNow(),
|
|
user_id: reply.author.id,
|
|
user_login: reply.author.login,
|
|
user_praise: reply.user_praise,
|
|
username: reply.author.name,
|
|
content: reply.content,
|
|
praise_count: reply.praise_count,
|
|
child_message_count: reply.child_message_count
|
|
}
|
|
}
|
|
|
|
// 公共接口 --- 删除回复
|
|
deleteComment = (parrentComment, childCommentId) => {
|
|
handleDeleteComment(this, parrentComment, childCommentId, 'journals_for_message')
|
|
}
|
|
// 公共接口 --- 回复点赞
|
|
commentPraise = (discussId) => {
|
|
handleCommentPraise(this, discussId, 'journals_for_message')
|
|
}
|
|
// 公共接口 --- 隐藏回复
|
|
hiddenComment = (item, childCommentId) => {
|
|
handleHiddenComment(this, item, childCommentId, 'journals_for_message')
|
|
}
|
|
|
|
showCommentInput = () => {
|
|
this.refs.editor.showEditor();
|
|
}
|
|
initReply = (parent) => {
|
|
if (!parent.isAllChildrenLoaded) {
|
|
this.loadMoreChildComments(parent)
|
|
}
|
|
}
|
|
|
|
render(){
|
|
let { total_count, comments, pageCount } = this.state
|
|
const { current_user, memo } = this.props
|
|
|
|
return(
|
|
<div style={{background: 'rgb(255, 255, 255)', marginTop: '20px'}} className="course-message">
|
|
<style>{`
|
|
.course-message .commentInput {
|
|
padding-bottom: 56px !important;
|
|
}
|
|
.course-message .commentInput.mockInputWrapper {
|
|
padding-bottom: 20px !important;
|
|
}
|
|
.course-message .memoReplies {
|
|
/* border-top: 1px solid #EDEDED; */
|
|
padding-bottom: 30px;
|
|
}
|
|
`}</style>
|
|
<MemoDetailMDEditor ref="editor" memo={memo} usingMockInput={true} placeholder="说点什么"
|
|
height={160} showError={true}
|
|
replyComment={this.replyComment}
|
|
commentsLength={comments ? comments.length : 0}
|
|
></MemoDetailMDEditor>
|
|
{/* bor-bottom-greyE */}
|
|
<div className="padding40 memoReplies commentsDelegateParent"
|
|
style={{ display: (comments && !!comments.length) ? 'block' : 'none' }}>
|
|
<div className="replies_count">
|
|
<span className="labal">全部回复</span>
|
|
<span className="count">{total_count}</span>
|
|
</div>
|
|
|
|
<Comments comments={comments} user={current_user}
|
|
replyComment={this.replyComment}
|
|
deleteComment={this.deleteComment}
|
|
commentPraise={this.commentPraise}
|
|
rewardCode={this.rewardCode}
|
|
hiddenComment={this.hiddenComment}
|
|
|
|
usingAntdModal={true}
|
|
isChildCommentPagination={true}
|
|
loadMoreChildComments={this.loadMoreChildComments}
|
|
initReply={this.initReply}
|
|
showRewardButton={false}
|
|
onlySuperAdminCouldHide={true}
|
|
></Comments>
|
|
|
|
|
|
{/* { true ? :
|
|
<div className="memoMore">
|
|
<div className="writeCommentBtn" onClick={this.showCommentInput}>写评论</div>
|
|
</div>} */}
|
|
</div>
|
|
|
|
{ total_count > REPLY_PAGE_COUNT &&
|
|
<div className="memoMore">
|
|
<Pagination showQuickJumper onChange={this.onPaginationChange} current={pageCount} total={total_count} pageSize={10}/>
|
|
<div className="writeCommentBtn" onClick={this.showCommentInput}>写评论</div>
|
|
</div> }
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
export default ImageLayerOfCommentHOC() (CommonReply); |