You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
educoder/public/react/src/modules/courses/graduation/tasks/GraduationTaskssettingReply.js

279 lines
8.7 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

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: 'GraduationTask',
*/
class GraduationTaskssettingReply 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: 'GraduationTask',
jour_id: graduation_topic_id,
notes: content,
// m_parent_id
reply_id: memo.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('')
const user = this._getUser();
this.setState({
comments: addNewComment(this.state.comments, _id, content, user, this.props.isSuperAdmin(), this),
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: {
jour_type: 'GraduationTask',
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;
this.setState({
comments: addSecondLevelComment(comments, comment, commentIndex, newId, commentContent, user, editor)
})
const newMemo2 = Object.assign({}, this.props.memo);
newMemo2.total_count = newMemo2.total_count + 1;
this.setState({
memo: newMemo2
})
}
}).catch((error) => {
console.log(error)
})
}
loadMoreChildComments = (parent) => {
const graduation_topic_id = this.props.memo.id
const course_id = this.props.course_id
const url = `/graduation_tasks/${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 = `/graduation_tasks/${graduation_topic_id}/show_comment.json?page=${this.state.pageCount}`
// page limit parent_id
axios.get(url,{
})
.then((response) => {
const { comments, messages_count } = response.data
this.setState({
comments: generateComments(comments, this.transformReply),
// : this.state.comments.concat(comments),
total_count: messages_count
})
}).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(
<React.Fragment>
<style>{`
`}</style>
<MemoDetailMDEditor {...this.props} ref="editor" memo={memo} usingMockInput={true} placeholder="请在此输入对本作品的评语最大限制2000个字符"
height={160} showError={true}></MemoDetailMDEditor>
<div className="padding40 bor-bottom-greyE 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> }
</React.Fragment>
)
}
}
export default ImageLayerOfCommentHOC() (GraduationTaskssettingReply);