|
|
import React, { Component } from 'react';
|
|
|
import { Redirect } from 'react-router';
|
|
|
|
|
|
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
|
|
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
|
|
import classNames from 'classnames'
|
|
|
|
|
|
import axios from 'axios'
|
|
|
|
|
|
import moment from 'moment'
|
|
|
|
|
|
import Comments from '../comment/Comments'
|
|
|
|
|
|
import update from 'immutability-helper'
|
|
|
// import Tooltip from 'material-ui/Tooltip';
|
|
|
import RewardDialog from '../common/RewardDialog';
|
|
|
|
|
|
import {ImageLayerOfCommentHOC} from '../page/layers/ImageLayerOfCommentHOC'
|
|
|
|
|
|
import MemoDetailKEEditor from './MemoDetailKEEditor'
|
|
|
import MemoDetailMDEditor from './MemoDetailMDEditor'
|
|
|
|
|
|
import { bytesToSize } from 'educoder'
|
|
|
import { Tooltip } from 'antd'
|
|
|
const $ = window.$
|
|
|
function urlStringify(params) {
|
|
|
let noParams = true;
|
|
|
let paramsUrl = '';
|
|
|
for (let key in params) {
|
|
|
noParams = false;
|
|
|
paramsUrl += `${key}=${params[key]}&`
|
|
|
}
|
|
|
if (noParams) {
|
|
|
return '';
|
|
|
}
|
|
|
paramsUrl = paramsUrl.substring(0, paramsUrl.length - 1);
|
|
|
return paramsUrl;
|
|
|
}
|
|
|
class MemoDetail extends Component {
|
|
|
constructor(props) {
|
|
|
super(props)
|
|
|
|
|
|
this.state = {
|
|
|
memoLoading: true,
|
|
|
hasMoreComments: false,
|
|
|
pageCount: 2,
|
|
|
|
|
|
goldRewardDialogOpen: false
|
|
|
}
|
|
|
}
|
|
|
componentDidMount() {
|
|
|
window.$("html,body").animate({"scrollTop":0})
|
|
|
|
|
|
const { match } = this.props
|
|
|
|
|
|
const memoUrl = `/memos/${match.params.memoId}.json`;
|
|
|
this.setState({
|
|
|
memoLoading: true
|
|
|
})
|
|
|
axios.get(memoUrl,{
|
|
|
// withCredentials: true,
|
|
|
})
|
|
|
.then((response) => {
|
|
|
const memo = response.data.memo
|
|
|
if (response.data.status === -1) {
|
|
|
setTimeout(() => {
|
|
|
this.props.showNotification('帖子不存在！')
|
|
|
}, 300)
|
|
|
this.props.history.push(`/forums`)
|
|
|
return;
|
|
|
} else if (memo) {
|
|
|
// this.setState({...response.data})
|
|
|
|
|
|
const { memo_replies, memo } = response.data;
|
|
|
let hasMoreComments = false;
|
|
|
if (memo_replies && memo_replies.length === 10 && memo.replies_count > 10) {
|
|
|
// 遍历一遍，计算下是否还有评论未加载
|
|
|
let totalCount = 10;
|
|
|
memo_replies.forEach(item=>{
|
|
|
totalCount += item.children.length
|
|
|
})
|
|
|
if (totalCount < memo.replies_count) {
|
|
|
hasMoreComments = true;
|
|
|
}
|
|
|
}
|
|
|
this.setState({
|
|
|
hasMoreComments,
|
|
|
pageCount: 2,
|
|
|
comments: memo_replies
|
|
|
})
|
|
|
delete response.data.memo_replies;
|
|
|
// reset
|
|
|
response.data.memo.praise_count = response.data.memo.memo_praise_count
|
|
|
this.props.initForumState(response.data)
|
|
|
// const user = response.data.current_user;
|
|
|
// user.tidding_count = response.data.tidding_count;
|
|
|
// this.props.initCommonState(user)
|
|
|
}
|
|
|
this.setState({
|
|
|
memoLoading: false
|
|
|
})
|
|
|
|
|
|
}).catch((error) => {
|
|
|
console.log(error)
|
|
|
})
|
|
|
|
|
|
$('body>#root').on('onMemoDelete', (event) => {
|
|
|
// const val = $('body>#root').data('onMemoDelete')
|
|
|
const val = window.onMemoDelete ;
|
|
|
this.onMemoDelete( JSON.parse(decodeURIComponent(val)) )
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
componentWillUnmount() {
|
|
|
$('body>#root').off('onMemoDelete')
|
|
|
}
|
|
|
onMemoDelete(memo) {
|
|
|
const deleteUrl = `/memos/${memo.id}.json`;
|
|
|
// 获取memo list
|
|
|
axios.delete(deleteUrl, {
|
|
|
// withCredentials: true,
|
|
|
})
|
|
|
.then((response) => {
|
|
|
const status = response.data.status
|
|
|
if (status === 0) {
|
|
|
|
|
|
this.props.showNotification('删除成功');
|
|
|
this.props.history.push(`/forums`)
|
|
|
|
|
|
} else if (status === -1) {
|
|
|
this.props.showNotification('帖子已被删除');
|
|
|
this.props.history.push(`/forums`)
|
|
|
}
|
|
|
}).catch((error) => {
|
|
|
console.log(error)
|
|
|
})
|
|
|
}
|
|
|
|
|
|
componentDidUpdate(prevProps, prevState, snapshot) {
|
|
|
// if (this.props.memo && this.props.memo.content
|
|
|
// && (!prevProps.memo || prevProps.memo.content != this.props.memo.content) ) {
|
|
|
if (this.props.memo && this.props.memo.content && prevState.memoLoading === true && this.state.memoLoading === false) {
|
|
|
// md渲染content，等xhr执行完（即memoLoading变化），memo.content更新后初始化md
|
|
|
if (this.props.memo.is_md) {
|
|
|
setTimeout(()=>{
|
|
|
var shixunDescr = window.editormd.markdownToHTML("memo_content_editorMd", {
|
|
|
htmlDecode: "style,script,iframe", // you can filter tags decode
|
|
|
taskList: true,
|
|
|
tex: true, // 默认不解析
|
|
|
flowChart: true, // 默认不解析
|
|
|
sequenceDiagram: true // 默认不解析
|
|
|
});
|
|
|
}, 200)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
clickPraise(){
|
|
|
const { memo } = this.props;
|
|
|
const url = `/discusses/${memo.id}/plus.json`;
|
|
|
console.log(url)
|
|
|
axios.post(url, {
|
|
|
container_type: 'Memo',
|
|
|
type: 1 // "踩0；赞1"
|
|
|
},
|
|
|
{
|
|
|
// withCredentials: true
|
|
|
}
|
|
|
).then((response) => {
|
|
|
console.log(response);
|
|
|
const newMemo = Object.assign({}, this.props.memo)
|
|
|
newMemo.praise_count = response.data.praise_count
|
|
|
newMemo.user_praise = !newMemo.user_praise
|
|
|
this.props.initForumState({memo : newMemo })
|
|
|
}).catch((error) => {
|
|
|
console.log(error)
|
|
|
})
|
|
|
}
|
|
|
renderAttachment() {
|
|
|
const { memo, attachments_list } = this.props;
|
|
|
const attachments = []
|
|
|
attachments_list.forEach((item, index) => {
|
|
|
const ar = item.url.split('/')
|
|
|
const fileName = item.title
|
|
|
let filesize = item.filesize
|
|
|
|
|
|
attachments.push(
|
|
|
<p className="clearfix" key={index} >
|
|
|
<a href={item.url} className="color-green clearfix notefileDownload" target="_blank">
|
|
|
<i className="iconfont icon-xiazai color-green ml5 fl"></i><span className="fl">{fileName}{filesize? ` ${filesize}` : ''}</span>
|
|
|
</a>
|
|
|
</p>
|
|
|
)
|
|
|
})
|
|
|
return attachments;
|
|
|
}
|
|
|
// ------------------------------------------------------------------------------------------- comments START
|
|
|
// ------------------------------------------------------------------------------------------- comments START
|
|
|
_getUser() {
|
|
|
const { current_user } = this.props;
|
|
|
current_user.user_url = `/users/${current_user.login}`;
|
|
|
return current_user;
|
|
|
}
|
|
|
_findById(id, arg_comments) {
|
|
|
const comments = arg_comments;
|
|
|
for(let i = 0; i < comments.length; i++) {
|
|
|
if (id === comments[i].id) {
|
|
|
return i;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
replyComment = (commentContent, id, editor) => {
|
|
|
const { showNotification } = this.props;
|
|
|
if (!commentContent || commentContent.length === 0) {
|
|
|
showNotification('必须填写内容！')
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
if (this.props.memo.id === id ) { // 回复帖子
|
|
|
this.createNewComment(commentContent, id, editor);
|
|
|
return;
|
|
|
}
|
|
|
// /${id}
|
|
|
const url = `/memos/reply.json`;
|
|
|
const { comments } = this.state;
|
|
|
const user = this._getUser();
|
|
|
/*
|
|
|
移除末尾的空行
|
|
|
.replace(/(\n<p>\n\t<br \/>\n<\/p>)*$/g,'');
|
|
|
|
|
|
*/
|
|
|
if (commentContent) {
|
|
|
commentContent = commentContent.replace(/(\n<p>\n\t<br \/>\n<\/p>)*$/g,'');
|
|
|
}
|
|
|
axios.post(url, {
|
|
|
parent_id: id,
|
|
|
content: commentContent
|
|
|
},
|
|
|
{
|
|
|
// withCredentials: true
|
|
|
}
|
|
|
).then((response) => {
|
|
|
response.data.memo = response.data
|
|
|
if (response.data.memo) {
|
|
|
let newDiscuss = response.data.memo;
|
|
|
|
|
|
var commentIndex = this._findById(id, comments);
|
|
|
let comment = comments[commentIndex];
|
|
|
if (!comment.children ) {
|
|
|
comment.children = []
|
|
|
}
|
|
|
// TODO userName iamge_url
|
|
|
comment.children.push( {
|
|
|
"can_delete": true,
|
|
|
"content": commentContent,
|
|
|
|
|
|
"image_url": user.image_url,
|
|
|
"username": user.username,
|
|
|
"user_login": user.login,
|
|
|
|
|
|
"id": newDiscuss.id,
|
|
|
// "position": newDiscuss.position,
|
|
|
"time": "1分钟前",
|
|
|
"praise_count": 0,
|
|
|
|
|
|
"user_id": newDiscuss.author_id,
|
|
|
})
|
|
|
|
|
|
|
|
|
comments[commentIndex] = comment
|
|
|
// ke
|
|
|
editor.html && editor.html('')
|
|
|
// md
|
|
|
if (editor.setValue) {
|
|
|
editor.setValue('')
|
|
|
const $ = window.$
|
|
|
var view_selector = `.commentItemMDEditorView_${id}`
|
|
|
$(view_selector).hide();
|
|
|
}
|
|
|
|
|
|
|
|
|
this.setState({
|
|
|
// runTesting: false,
|
|
|
comments: comments
|
|
|
}, ()=>{
|
|
|
// keditor代码美化
|
|
|
editor.html && window.prettyPrint()
|
|
|
})
|
|
|
|
|
|
const newMemo2 = Object.assign({}, this.props.memo);
|
|
|
newMemo2.replies_count = newMemo2.replies_count + 1;
|
|
|
this.props.initForumState({
|
|
|
memo: newMemo2
|
|
|
})
|
|
|
}
|
|
|
console.log(response)
|
|
|
}).catch((error) => {
|
|
|
console.log(error)
|
|
|
})
|
|
|
}
|
|
|
deleteComment = (parrentComment, childCommentId) => {
|
|
|
let deleteCommentId = parrentComment.id
|
|
|
if (childCommentId) {
|
|
|
deleteCommentId = childCommentId;
|
|
|
}
|
|
|
const url = `/memos/${deleteCommentId}.json`
|
|
|
let comments = this.state.comments;
|
|
|
|
|
|
axios.delete(url,
|
|
|
{
|
|
|
// withCredentials: true
|
|
|
}
|
|
|
).then((response) => {
|
|
|
// TODO 删除成功或失败
|
|
|
if (response.data && response.data.status === 0) {
|
|
|
const commentIndex = this._findById(parrentComment.id, comments);
|
|
|
|
|
|
// https://stackoverflow.com/questions/29527385/removing-element-from-array-in-component-state
|
|
|
if (!childCommentId) {
|
|
|
this.setState((prevState) => ({
|
|
|
comments: update(prevState.comments, {$splice: [[commentIndex, 1]]})
|
|
|
}))
|
|
|
|
|
|
// if (this.state.comments.length <= 5) {
|
|
|
// this.fetchComment()
|
|
|
// }
|
|
|
} else {
|
|
|
let childCommentIndex = this._findById(childCommentId, comments[commentIndex].children);
|
|
|
comments[commentIndex].children = update(comments[commentIndex].children, {$splice: [[childCommentIndex, 1]]})
|
|
|
this.setState({ comments })
|
|
|
}
|
|
|
|
|
|
const newMemo = Object.assign({}, this.props.memo);
|
|
|
newMemo.replies_count = newMemo.replies_count - 1;
|
|
|
this.props.initForumState({
|
|
|
memo: newMemo
|
|
|
})
|
|
|
}
|
|
|
console.log(response)
|
|
|
}).catch((error) => {
|
|
|
console.log(error)
|
|
|
})
|
|
|
}
|
|
|
// 评论点赞
|
|
|
commentPraise = (discussId) => {
|
|
|
const { comments } = this.state;
|
|
|
const commentIndex = this._findById(discussId, comments);
|
|
|
|
|
|
const url = `/discusses/${discussId}/plus.json`
|
|
|
axios.post(url, {
|
|
|
// id: discussId,
|
|
|
// container_id: challenge.id,
|
|
|
container_type: 'Memo', //Discuss
|
|
|
type: comments[commentIndex].user_praise === true ? 0 : 1, // "踩0；赞1"
|
|
|
},
|
|
|
{
|
|
|
// withCredentials: true
|
|
|
}
|
|
|
).then((response) => {
|
|
|
if (response.data.praise_count === 0 || response.data.praise_count) {
|
|
|
|
|
|
comments[commentIndex].user_praise = !comments[commentIndex].user_praise;
|
|
|
comments[commentIndex].praise_count = response.data.praise_count;
|
|
|
|
|
|
this.setState({
|
|
|
comments
|
|
|
})
|
|
|
}
|
|
|
console.log(response)
|
|
|
}).catch((error) => {
|
|
|
console.log(error)
|
|
|
})
|
|
|
}
|
|
|
rewardCode = (parrentComment, childComment, amount) => {
|
|
|
const { showNotification } = this.props;
|
|
|
const { comments } = this.state;
|
|
|
let handleComment = parrentComment
|
|
|
if (childComment) {
|
|
|
handleComment = childComment;
|
|
|
}
|
|
|
let handleCommentId = handleComment.id;
|
|
|
const url = `/discusses/${handleCommentId}/reward_code.json`
|
|
|
|
|
|
axios.post(url, {
|
|
|
id: handleCommentId,
|
|
|
|
|
|
container_type: 'Memo',
|
|
|
score: amount,
|
|
|
user_id: handleComment.user_id
|
|
|
},
|
|
|
{
|
|
|
// withCredentials: true
|
|
|
}
|
|
|
).then((response) => {
|
|
|
if (response.data && response.data.code) {
|
|
|
const commentIndex = this._findById(parrentComment.id, comments);
|
|
|
|
|
|
if (childComment) {
|
|
|
const childCommentIndex = this._findById(handleComment.id, parrentComment.children);
|
|
|
const newChildComment = Object.assign({}, childComment);
|
|
|
newChildComment.reward = response.data.code
|
|
|
parrentComment.children[childCommentIndex] = newChildComment
|
|
|
|
|
|
comments[commentIndex] = parrentComment;
|
|
|
|
|
|
this.setState({
|
|
|
comments
|
|
|
})
|
|
|
} else {
|
|
|
comments[commentIndex].reward = response.data.code;
|
|
|
|
|
|
this.setState({
|
|
|
comments
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
}).catch((error) => {
|
|
|
console.log(error)
|
|
|
showNotification('奖励失败，请联系系统管理员！')
|
|
|
})
|
|
|
}
|
|
|
hiddenComment = (item, childCommentId) => {
|
|
|
const id = item.id
|
|
|
const { showNotification } = this.props;
|
|
|
const user = this._getUser();
|
|
|
const url = `/memos/${id}/hidden.json`
|
|
|
const { comments } = this.state;
|
|
|
|
|
|
const commentIndex = this._findById(id, comments);
|
|
|
const comment = comments[commentIndex];
|
|
|
axios.post(url, {
|
|
|
hidden: !comment.hidden ? "1" : "0"
|
|
|
},
|
|
|
{
|
|
|
// withCredentials: true
|
|
|
}
|
|
|
).then((response) => {
|
|
|
if (response.data.status === -1) {
|
|
|
showNotification(response.data.message)
|
|
|
return;
|
|
|
}
|
|
|
if (response.data.status === 0) {
|
|
|
|
|
|
if (!childCommentId) {
|
|
|
comment.hidden = !comment.hidden;
|
|
|
this.setState({
|
|
|
comments: comments
|
|
|
})
|
|
|
} else { // TODO 目前子回复没hidden字段
|
|
|
let childCommentIndex = this._findById(childCommentId, comments[commentIndex].children);
|
|
|
const childComment = comments[commentIndex].children[childCommentIndex]
|
|
|
childComment.hidden = !childComment.hidden;
|
|
|
this.setState({ comments })
|
|
|
}
|
|
|
|
|
|
}
|
|
|
// {"message":"Couldn't find Discuss with id=911","status":-1}
|
|
|
console.log(response)
|
|
|
}).catch((error) => {
|
|
|
console.log(error)
|
|
|
})
|
|
|
}
|
|
|
createNewComment = (commentContent, id, editor) => {
|
|
|
let content = commentContent;
|
|
|
const { memo } = this.props;
|
|
|
if(content != undefined){
|
|
|
content = content.replace(/(\n<p>\n\t<br \/>\n<\/p>)*$/g,'');
|
|
|
|
|
|
var beforeImage = content.split("<img");
|
|
|
var afterImage = content.split("/>");
|
|
|
if(beforeImage[0] == "" && afterImage[1] == ""){
|
|
|
window.notice_box('不支持纯图片评论<br/>请在评论中增加文字信息');
|
|
|
return;
|
|
|
}
|
|
|
}
|
|
|
// /${memo.id}
|
|
|
const url = `/memos/reply.json`;
|
|
|
let { comments } = this.state;
|
|
|
const user = this._getUser();
|
|
|
axios.post(url, {
|
|
|
parent_id: memo.id,
|
|
|
content: content
|
|
|
},
|
|
|
{
|
|
|
// withCredentials: true
|
|
|
}
|
|
|
).then((response) => {
|
|
|
if (response.data.status === -1) {
|
|
|
console.error('服务端异常')
|
|
|
return;
|
|
|
}
|
|
|
if (response.data) {
|
|
|
response.data.memo = response.data
|
|
|
const newMemo = response.data.memo;
|
|
|
// ke
|
|
|
editor.html && editor.html('');
|
|
|
editor.afterBlur && editor.afterBlur()
|
|
|
// md
|
|
|
editor.setValue && editor.setValue('')
|
|
|
if (!comments) {
|
|
|
comments = [];
|
|
|
}
|
|
|
comments.unshift( {
|
|
|
"can_delete": true,
|
|
|
"admin": user.admin,
|
|
|
"content": content,
|
|
|
|
|
|
"image_url": user.image_url,
|
|
|
"username": user.username,
|
|
|
"user_login": user.login,
|
|
|
|
|
|
"id": newMemo.id,
|
|
|
"reward": null,
|
|
|
"hidden": newMemo.hidden,
|
|
|
|
|
|
"user_praise": false,
|
|
|
"time": "1分钟前",
|
|
|
"praise_count": 0,
|
|
|
|
|
|
"user_id": user.user_id,
|
|
|
})
|
|
|
|
|
|
|
|
|
this.setState({
|
|
|
comments
|
|
|
})
|
|
|
const newMemo2 = Object.assign({}, this.props.memo);
|
|
|
newMemo2.replies_count = newMemo2.replies_count + 1;
|
|
|
this.props.initForumState({
|
|
|
memo: newMemo2
|
|
|
})
|
|
|
console.log(response)
|
|
|
}
|
|
|
}).catch((error) => {
|
|
|
console.log(error)
|
|
|
})
|
|
|
}
|
|
|
moreMemos = () => {
|
|
|
let { comments, pageCount } = this.state;
|
|
|
let { memo } = this.props;
|
|
|
const user = this._getUser();
|
|
|
const url = `/memos/${memo.id}/more_reply.json?page=${pageCount}`;
|
|
|
axios.get(url, {
|
|
|
|
|
|
},
|
|
|
{
|
|
|
// withCredentials: true
|
|
|
}
|
|
|
).then((response) => {
|
|
|
if (response.data.status === -1) {
|
|
|
console.error('服务端异常')
|
|
|
return;
|
|
|
}
|
|
|
let { memo_replies } = response.data;
|
|
|
if (!memo_replies || memo_replies.length === 0) {
|
|
|
this.setState({
|
|
|
hasMoreComments: false
|
|
|
})
|
|
|
return;
|
|
|
}
|
|
|
if (response.data.memos_count) {
|
|
|
const newComments = comments.concat(memo_replies);
|
|
|
const hasMoreComments = memo_replies.length === 10
|
|
|
this.setState({
|
|
|
comments: newComments,
|
|
|
hasMoreComments,
|
|
|
pageCount: pageCount+1
|
|
|
})
|
|
|
}
|
|
|
}).catch((error) => {
|
|
|
console.log(error)
|
|
|
})
|
|
|
}
|
|
|
|
|
|
|
|
|
// ------------------------------------------------------------------------------------------- comments END
|
|
|
// ------------------------------------------------------------------------------------------- comments END
|
|
|
// 置顶
|
|
|
setTop(memo) {
|
|
|
const params = {
|
|
|
sticky: memo.sticky ? 0 : 1,
|
|
|
}
|
|
|
if (this.state.p_s_order) {
|
|
|
params.order = this.state.p_s_order;
|
|
|
}
|
|
|
if (this.state.p_forum_id) {
|
|
|
params.forum_id = this.state.p_forum_id;
|
|
|
}
|
|
|
let paramsUrl = urlStringify(params)
|
|
|
const set_top_or_down_Url = `/memos/${memo.id}/sticky_or_cancel.json?${paramsUrl}`;
|
|
|
// 获取memo list
|
|
|
axios.post(set_top_or_down_Url, {
|
|
|
// withCredentials: true,
|
|
|
})
|
|
|
.then((response) => {
|
|
|
const status = response.data.status
|
|
|
if (status === 0) {
|
|
|
this.props.showNotification( memo.sticky ? '取消置顶成功' : '置顶成功');
|
|
|
memo.sticky = memo.sticky ? false : true
|
|
|
this.setState({
|
|
|
memo: Object.assign({}, memo)
|
|
|
})
|
|
|
}
|
|
|
}).catch((error) => {
|
|
|
console.log(error)
|
|
|
})
|
|
|
}
|
|
|
// --------------------------------------------------------------------------------------------帖子獎勵
|
|
|
rewardCodeMemo = (inputVal) => {
|
|
|
console.log(inputVal)
|
|
|
const { memo, author_info } = this.props;
|
|
|
const newMemo = Object.assign({}, memo);
|
|
|
const _reward = parseInt(inputVal)
|
|
|
|
|
|
const url = `/discusses/${memo.id}/reward_code.json`
|
|
|
|
|
|
axios.post(url, {
|
|
|
id: memo.id,
|
|
|
|
|
|
container_type: 'Memo',
|
|
|
score: _reward,
|
|
|
user_id: author_info.user_id
|
|
|
}, {
|
|
|
// withCredentials: true,
|
|
|
})
|
|
|
.then((response) => {
|
|
|
const { code } = response.data;
|
|
|
if (code > 0) {
|
|
|
newMemo.reward = code
|
|
|
this.props.initForumState({
|
|
|
memo: newMemo
|
|
|
})
|
|
|
this.props.showNotification( '奖励成功' );
|
|
|
} else {
|
|
|
this.props.showNotification( '奖励失败，请联系系统管理员！' );
|
|
|
}
|
|
|
}).catch((error) => {
|
|
|
console.log(error)
|
|
|
})
|
|
|
}
|
|
|
setRewardDialogVisible = (visible) => {
|
|
|
this.setState({
|
|
|
goldRewardDialogOpen: visible
|
|
|
})
|
|
|
}
|
|
|
showRewardDialog = () => {
|
|
|
this.setState({
|
|
|
goldRewardDialogOpen: true
|
|
|
})
|
|
|
}
|
|
|
// --------------------------------------------------------------------------------------------帖子獎勵 END
|
|
|
showCommentInput = () => {
|
|
|
if (window.__useKindEditor === true) {
|
|
|
this.refs.editor.showEditor();
|
|
|
} else {
|
|
|
this.refs.editor.showEditor();
|
|
|
}
|
|
|
}
|
|
|
render() {
|
|
|
const { match, history } = this.props
|
|
|
const { memo, recommend_shixun, current_user,author_info } = this.props;
|
|
|
const { comments, hasMoreComments, goldRewardDialogOpen } = this.state;
|
|
|
|
|
|
if (!memo || this.state.memoLoading) {
|
|
|
return <div className="edu-back-white" id="forum_index_list"></div>
|
|
|
}
|
|
|
let _current_user = {}
|
|
|
if (current_user) {
|
|
|
_current_user = current_user
|
|
|
}
|
|
|
(_current_user.user_url = `/users/${_current_user.login}`);
|
|
|
memo.isDetailPage = true;
|
|
|
// TODO 图片上传地址
|
|
|
return (
|
|
|
<div className="edu-back-white memoDetail" id="forum_index_list"> {/* fl with100 */}
|
|
|
<style>{`
|
|
|
.memoDetail .commentsbtn {
|
|
|
margin-top: 6px;
|
|
|
}
|
|
|
`}</style>
|
|
|
|
|
|
<RewardDialog goldRewardDialogOpen={goldRewardDialogOpen}
|
|
|
setRewardDialogVisible={this.setRewardDialogVisible}
|
|
|
rewardCode={this.rewardCodeMemo}
|
|
|
{...this.props}
|
|
|
></RewardDialog>
|
|
|
<div className="clearfix">
|
|
|
<div id="forum_list" className="forum_table mh650">
|
|
|
<div className="padding40-30 bor-bottom-greyE">
|
|
|
<div className="font-16 mb5 cdefault clearfix pr pr35" style={{display: 'flex', alignItems: 'center'}}>
|
|
|
{/* overflowHidden1 */}
|
|
|
<span className="noteDetailTitle " style={{maxWidth: '634px'}}>{memo.subject}</span>
|
|
|
{ memo.sticky && <span className="btn-cir btn-cir-red ml10 "
|
|
|
style={{ height: '20px', alignSelf: 'flex-start', marginTop: '10px' }}
|
|
|
>置顶</span>}
|
|
|
{ !!memo.reward &&
|
|
|
<Tooltip title={`获得平台奖励金币：${memo.reward}`}>
|
|
|
<span className="color-orange font-14 ml15"
|
|
|
style={{ height: '20px', alignSelf: 'flex-start', marginTop: '1px' }}
|
|
|
>
|
|
|
<i className="iconfont icon-gift mr5"></i>
|
|
|
<span style={{ 'vertical-align': 'sub' }}>{memo.reward}</span>
|
|
|
</span>
|
|
|
</Tooltip>
|
|
|
}
|
|
|
|
|
|
<div style={{ flex: 1, alignSelf: 'flex-start' }}>
|
|
|
{ _current_user && (_current_user.admin === true || _current_user.user_id === author_info.user_id) &&
|
|
|
<div className="edu-position-hidebox" style={{position: 'absolute', right: '12px',top:'4px'}}>
|
|
|
<a href="javascript:void(0);"><i className="fa fa-bars font-16"></i></a>
|
|
|
<ul className="edu-position-hide undis">
|
|
|
{ _current_user.admin === true &&
|
|
|
( memo.sticky === true ?
|
|
|
<li><a href="javascript:void(0);" onClick={() => this.setTop(memo)}>取消置顶</a></li>
|
|
|
:
|
|
|
<li><a href="javascript:void(0);" onClick={() => this.setTop(memo)}>置 顶</a></li> )
|
|
|
}
|
|
|
<li><Link to={`/forums/${memo.id}/edit`}>编 辑</Link></li>
|
|
|
<li>
|
|
|
<a href="javascript:void(0)" onClick={() =>
|
|
|
window.delete_confirm_box_2_react(`onMemoDelete`, '您确定要删除吗？' , memo)}>
|
|
|
|
|
|
删 除</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
}
|
|
|
<Link className={`task-hide fr return_btn color-grey-6 mt2 ${ _current_user && (_current_user.admin === true
|
|
|
|| _current_user.user_id === author_info.user_id) ? '': 'no_mr'} `} to="/forums"
|
|
|
style={{ marginRight: '10px'}}
|
|
|
>
|
|
|
返回
|
|
|
</Link>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className="color-grey-9 clearfix">
|
|
|
<span className="fl">{moment(memo.time).fromNow()} 发布</span>
|
|
|
<div className="fr detailIcons">
|
|
|
<style>{`
|
|
|
.detailIcons i{
|
|
|
vertical-align: sub;
|
|
|
}
|
|
|
`}</style>
|
|
|
{ _current_user.admin && <Tooltip title={ "帖子奖励" }>
|
|
|
<span className="noteDetailNum rightline cdefault" style={{padding: '0 4px', cursor: 'pointer'}}>
|
|
|
<i className="iconfont icon-jiangli mr5" onClick={this.showRewardDialog}></i>
|
|
|
</span>
|
|
|
</Tooltip> }
|
|
|
<span className={`noteDetailNum ${!!memo.replies_count ? 'rightline' : ''} cdefault`}>
|
|
|
<i className="iconfont icon-liulanyan mr5"></i>{memo.viewed_count}
|
|
|
</span>
|
|
|
{ !!memo.replies_count &&
|
|
|
<Tooltip title={ "写评论" }>
|
|
|
<a href="javascript:void(0)" className="noteDetailNum">
|
|
|
<i className="iconfont icon-huifu1 mr5" onClick={this.showCommentInput}></i>{memo.replies_count}
|
|
|
</a>
|
|
|
</Tooltip>
|
|
|
}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div className="padding40 memoContent new_li">
|
|
|
{ !memo.is_md ?
|
|
|
<div dangerouslySetInnerHTML={{__html: memo.content}}></div> :
|
|
|
|
|
|
<div id="memo_content_editorMd" className="new_li">
|
|
|
<textarea style={{'display': 'none'}}>
|
|
|
{memo.content}
|
|
|
</textarea>
|
|
|
</div>
|
|
|
}
|
|
|
</div>
|
|
|
|
|
|
<div className="padding40 bor-bottom-greyE" style={{ paddingTop: '0px'}}>
|
|
|
|
|
|
|
|
|
<div className="mt10 mb20">
|
|
|
<p className={`noteDetailPoint ${memo.user_praise ? 'Pointed' : ''} `} onClick={()=>{this.clickPraise()}} >
|
|
|
<i className="iconfont icon-dianzan"></i><br/>
|
|
|
<span>{memo.praise_count}</span>
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
{ this.props.attachments_list &&
|
|
|
<div>
|
|
|
{this.renderAttachment()}
|
|
|
</div>
|
|
|
}
|
|
|
</div>
|
|
|
{ window.__useKindEditor === true ?
|
|
|
<MemoDetailKEEditor ref="editor" memo={memo}></MemoDetailKEEditor>
|
|
|
:
|
|
|
<MemoDetailMDEditor ref="editor" memo={memo}></MemoDetailMDEditor>
|
|
|
|
|
|
}
|
|
|
{/* onClick={ this.createNewComment } */}
|
|
|
<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">{memo.replies_count}</span>
|
|
|
</div>
|
|
|
|
|
|
<Comments comments={comments} user={_current_user}
|
|
|
replyComment={this.replyComment}
|
|
|
deleteComment={this.deleteComment}
|
|
|
commentPraise={this.commentPraise}
|
|
|
rewardCode={this.rewardCode}
|
|
|
hiddenComment={this.hiddenComment}
|
|
|
|
|
|
|
|
|
></Comments>
|
|
|
{ hasMoreComments ?
|
|
|
<div className="memoMore" style={{ cursor: 'default' }}>
|
|
|
<a onClick={this.moreMemos}>查看更多评论</a>
|
|
|
<div className="writeCommentBtn" onClick={this.showCommentInput}>写评论</div>
|
|
|
</div>
|
|
|
:
|
|
|
<div className="memoMore">
|
|
|
<div className="writeCommentBtn" onClick={this.showCommentInput}>写评论</div>
|
|
|
</div>}
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
export default ImageLayerOfCommentHOC() (MemoDetail);
|
