|
|
@ -56,6 +56,8 @@ interface CommentNodeState {
|
|
|
|
upvotes: number;
|
|
|
|
upvotes: number;
|
|
|
|
downvotes: number;
|
|
|
|
downvotes: number;
|
|
|
|
borderColor: string;
|
|
|
|
borderColor: string;
|
|
|
|
|
|
|
|
readLoading: boolean;
|
|
|
|
|
|
|
|
saveLoading: boolean;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
interface CommentNodeProps {
|
|
|
|
interface CommentNodeProps {
|
|
|
@ -97,6 +99,8 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|
|
|
borderColor: this.props.node.comment.depth
|
|
|
|
borderColor: this.props.node.comment.depth
|
|
|
|
? colorList[this.props.node.comment.depth % colorList.length]
|
|
|
|
? colorList[this.props.node.comment.depth % colorList.length]
|
|
|
|
: colorList[0],
|
|
|
|
: colorList[0],
|
|
|
|
|
|
|
|
readLoading: false,
|
|
|
|
|
|
|
|
saveLoading: false,
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
constructor(props: any, context: any) {
|
|
|
|
constructor(props: any, context: any) {
|
|
|
@ -113,6 +117,8 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|
|
|
this.state.upvotes = nextProps.node.comment.upvotes;
|
|
|
|
this.state.upvotes = nextProps.node.comment.upvotes;
|
|
|
|
this.state.downvotes = nextProps.node.comment.downvotes;
|
|
|
|
this.state.downvotes = nextProps.node.comment.downvotes;
|
|
|
|
this.state.score = nextProps.node.comment.score;
|
|
|
|
this.state.score = nextProps.node.comment.score;
|
|
|
|
|
|
|
|
this.state.readLoading = false;
|
|
|
|
|
|
|
|
this.state.saveLoading = false;
|
|
|
|
this.setState(this.state);
|
|
|
|
this.setState(this.state);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
@ -255,12 +261,16 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|
|
|
: i18n.t('mark_as_read')
|
|
|
|
: i18n.t('mark_as_read')
|
|
|
|
}
|
|
|
|
}
|
|
|
|
>
|
|
|
|
>
|
|
|
|
|
|
|
|
{this.state.readLoading ? (
|
|
|
|
|
|
|
|
this.loadingIcon
|
|
|
|
|
|
|
|
) : (
|
|
|
|
<svg
|
|
|
|
<svg
|
|
|
|
class={`icon icon-inline ${node.comment.read &&
|
|
|
|
class={`icon icon-inline ${node.comment.read &&
|
|
|
|
'text-success'}`}
|
|
|
|
'text-success'}`}
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<use xlinkHref="#icon-check"></use>
|
|
|
|
<use xlinkHref="#icon-check"></use>
|
|
|
|
</svg>
|
|
|
|
</svg>
|
|
|
|
|
|
|
|
)}
|
|
|
|
</button>
|
|
|
|
</button>
|
|
|
|
</li>
|
|
|
|
</li>
|
|
|
|
)}
|
|
|
|
)}
|
|
|
@ -308,25 +318,37 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|
|
|
<li className="list-inline-item">
|
|
|
|
<li className="list-inline-item">
|
|
|
|
<button
|
|
|
|
<button
|
|
|
|
class="btn btn-link btn-sm btn-animate text-muted"
|
|
|
|
class="btn btn-link btn-sm btn-animate text-muted"
|
|
|
|
onClick={linkEvent(this, this.handleReplyClick)}
|
|
|
|
onClick={linkEvent(this, this.handleSaveCommentClick)}
|
|
|
|
data-tippy-content={i18n.t('reply')}
|
|
|
|
data-tippy-content={
|
|
|
|
|
|
|
|
node.comment.saved
|
|
|
|
|
|
|
|
? i18n.t('unsave')
|
|
|
|
|
|
|
|
: i18n.t('save')
|
|
|
|
|
|
|
|
}
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<svg class="icon icon-inline">
|
|
|
|
{this.state.saveLoading ? (
|
|
|
|
<use xlinkHref="#icon-reply1"></use>
|
|
|
|
this.loadingIcon
|
|
|
|
|
|
|
|
) : (
|
|
|
|
|
|
|
|
<svg
|
|
|
|
|
|
|
|
class={`icon icon-inline ${node.comment.saved &&
|
|
|
|
|
|
|
|
'text-warning'}`}
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<use xlinkHref="#icon-star"></use>
|
|
|
|
</svg>
|
|
|
|
</svg>
|
|
|
|
|
|
|
|
)}
|
|
|
|
</button>
|
|
|
|
</button>
|
|
|
|
</li>
|
|
|
|
</li>
|
|
|
|
<li className="list-inline-item">
|
|
|
|
<li className="list-inline-item">
|
|
|
|
<Link
|
|
|
|
<button
|
|
|
|
className="btn btn-link btn-sm btn-animate text-muted"
|
|
|
|
class="btn btn-link btn-sm btn-animate text-muted"
|
|
|
|
to={`/post/${node.comment.post_id}/comment/${node.comment.id}`}
|
|
|
|
onClick={linkEvent(this, this.handleReplyClick)}
|
|
|
|
title={i18n.t('link')}
|
|
|
|
data-tippy-content={i18n.t('reply')}
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<svg class="icon icon-inline">
|
|
|
|
<svg class="icon icon-inline">
|
|
|
|
<use xlinkHref="#icon-link"></use>
|
|
|
|
<use xlinkHref="#icon-reply1"></use>
|
|
|
|
</svg>
|
|
|
|
</svg>
|
|
|
|
</Link>
|
|
|
|
</button>
|
|
|
|
</li>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
{this.props.markable && this.linkBtn}
|
|
|
|
{!this.state.showAdvanced ? (
|
|
|
|
{!this.state.showAdvanced ? (
|
|
|
|
<li className="list-inline-item">
|
|
|
|
<li className="list-inline-item">
|
|
|
|
<button
|
|
|
|
<button
|
|
|
@ -354,27 +376,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|
|
|
</Link>
|
|
|
|
</Link>
|
|
|
|
</li>
|
|
|
|
</li>
|
|
|
|
)}
|
|
|
|
)}
|
|
|
|
<li className="list-inline-item">
|
|
|
|
{!this.props.markable && this.linkBtn}
|
|
|
|
<button
|
|
|
|
|
|
|
|
class="btn btn-link btn-sm btn-animate text-muted"
|
|
|
|
|
|
|
|
onClick={linkEvent(
|
|
|
|
|
|
|
|
this,
|
|
|
|
|
|
|
|
this.handleSaveCommentClick
|
|
|
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
data-tippy-content={
|
|
|
|
|
|
|
|
node.comment.saved
|
|
|
|
|
|
|
|
? i18n.t('unsave')
|
|
|
|
|
|
|
|
: i18n.t('save')
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<svg
|
|
|
|
|
|
|
|
class={`icon icon-inline ${node.comment.saved &&
|
|
|
|
|
|
|
|
'text-warning'}`}
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<use xlinkHref="#icon-star"></use>
|
|
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<li className="list-inline-item">
|
|
|
|
<li className="list-inline-item">
|
|
|
|
<button
|
|
|
|
<button
|
|
|
|
className="btn btn-link btn-sm btn-animate text-muted"
|
|
|
|
className="btn btn-link btn-sm btn-animate text-muted"
|
|
|
@ -756,6 +758,31 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
get linkBtn() {
|
|
|
|
|
|
|
|
let node = this.props.node;
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
|
|
|
<li className="list-inline-item">
|
|
|
|
|
|
|
|
<Link
|
|
|
|
|
|
|
|
className="btn btn-link btn-sm btn-animate text-muted"
|
|
|
|
|
|
|
|
to={`/post/${node.comment.post_id}/comment/${node.comment.id}`}
|
|
|
|
|
|
|
|
title={i18n.t('link')}
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<svg class="icon icon-inline">
|
|
|
|
|
|
|
|
<use xlinkHref="#icon-link"></use>
|
|
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
|
|
</Link>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
get loadingIcon() {
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
|
|
|
<svg class="icon icon-spinner spin">
|
|
|
|
|
|
|
|
<use xlinkHref="#icon-spinner"></use>
|
|
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
get myComment(): boolean {
|
|
|
|
get myComment(): boolean {
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
UserService.Instance.user &&
|
|
|
|
UserService.Instance.user &&
|
|
|
@ -875,6 +902,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
WebSocketService.Instance.saveComment(form);
|
|
|
|
WebSocketService.Instance.saveComment(form);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
i.state.saveLoading = true;
|
|
|
|
|
|
|
|
i.setState(this.state);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
handleReplyCancel() {
|
|
|
|
handleReplyCancel() {
|
|
|
@ -987,6 +1017,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|
|
|
};
|
|
|
|
};
|
|
|
|
WebSocketService.Instance.editComment(form);
|
|
|
|
WebSocketService.Instance.editComment(form);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
i.state.readLoading = true;
|
|
|
|
|
|
|
|
i.setState(this.state);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
handleModBanFromCommunityShow(i: CommentNode) {
|
|
|
|
handleModBanFromCommunityShow(i: CommentNode) {
|
|
|
|