dev_local_scyd
parent
fc4a68932c
commit
fac2c50d17
@ -1,296 +1,299 @@
|
||||
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, 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: {
|
||||
// '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} imageExpand={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);
|
||||
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;
|
||||
let mycontent= response.data.content;
|
||||
|
||||
// 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, mycontent, user, 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: {
|
||||
// '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;
|
||||
let mycontent= response.data.content;
|
||||
|
||||
const newMemo2 = Object.assign({}, this.props.memo);
|
||||
newMemo2.total_count = newMemo2.total_count + 1;
|
||||
|
||||
this.setState({
|
||||
comments: addSecondLevelComment(comments, comment, commentIndex, newId, mycontent, 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} imageExpand={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);
|
||||
|
||||
@ -1,271 +1,273 @@
|
||||
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.$;
|
||||
class GraduateTopicReply 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: 'GraduationTopic',
|
||||
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: 'GraduationTopic',
|
||||
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 = `/courses/${course_id}/graduation_topics/${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 = `/courses/${course_id}/graduation_topics/${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 {
|
||||
isSuperAdmin: isSuperAdmin,
|
||||
admin: isAdmin, //
|
||||
permission: true, //
|
||||
children: children,
|
||||
child_message_count: reply.child_message_count,
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
// 公共接口 --- 删除回复
|
||||
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>
|
||||
<MemoDetailMDEditor ref="editor" memo={memo} usingMockInput={true} placeholder="说点什么"
|
||||
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() (GraduateTopicReply);
|
||||
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.$;
|
||||
class GraduateTopicReply 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: 'GraduationTopic',
|
||||
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;
|
||||
let mycontent= response.data.content;
|
||||
// md
|
||||
editor.setValue && editor.setValue('')
|
||||
|
||||
const user = this._getUser();
|
||||
this.setState({
|
||||
comments: addNewComment(this.state.comments, _id, mycontent, 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: 'GraduationTopic',
|
||||
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;
|
||||
let mycontent= response.data.content;
|
||||
|
||||
this.setState({
|
||||
comments: addSecondLevelComment(comments, comment, commentIndex, newId, mycontent, 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 = `/courses/${course_id}/graduation_topics/${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 = `/courses/${course_id}/graduation_topics/${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 {
|
||||
isSuperAdmin: isSuperAdmin,
|
||||
admin: isAdmin, //
|
||||
permission: true, //
|
||||
children: children,
|
||||
child_message_count: reply.child_message_count,
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
// 公共接口 --- 删除回复
|
||||
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>
|
||||
<MemoDetailMDEditor ref="editor" memo={memo} usingMockInput={true} placeholder="说点什么"
|
||||
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() (GraduateTopicReply);
|
||||
|
||||
Loading…
Reference in new issue