import { Component, linkEvent } from 'inferno'; import { Link } from 'inferno-router'; import { CommentNode as CommentNodeI, CommentLikeForm, CommentForm as CommentFormI, EditUserMentionForm, SaveCommentForm, BanFromCommunityForm, BanUserForm, CommunityUser, UserView, AddModToCommunityForm, AddAdminForm, TransferCommunityForm, TransferSiteForm, BanType, CommentSortType, SortType, } from '../interfaces'; import { WebSocketService, UserService } from '../services'; import { mdToHtml, getUnixTime, canMod, isMod, pictshareAvatarThumbnail, showAvatars, setupTippy, colorList, } from '../utils'; import moment from 'moment'; import { MomentTime } from './moment-time'; import { CommentForm } from './comment-form'; import { CommentNodes } from './comment-nodes'; import { i18n } from '../i18next'; interface CommentNodeState { showReply: boolean; showEdit: boolean; showRemoveDialog: boolean; removeReason: string; showBanDialog: boolean; banReason: string; banExpires: string; banType: BanType; showConfirmTransferSite: boolean; showConfirmTransferCommunity: boolean; showConfirmAppointAsMod: boolean; showConfirmAppointAsAdmin: boolean; collapsed: boolean; viewSource: boolean; showAdvanced: boolean; my_vote: number; score: number; upvotes: number; downvotes: number; borderColor: string; readLoading: boolean; saveLoading: boolean; } interface CommentNodeProps { node: CommentNodeI; noIndent?: boolean; viewOnly?: boolean; locked?: boolean; markable?: boolean; showContext?: boolean; moderators: Array; admins: Array; // TODO is this necessary, can't I get it from the node itself? postCreatorId?: number; showCommunity?: boolean; sort?: CommentSortType; sortType?: SortType; } export class CommentNode extends Component { private emptyState: CommentNodeState = { showReply: false, showEdit: false, showRemoveDialog: false, removeReason: null, showBanDialog: false, banReason: null, banExpires: null, banType: BanType.Community, collapsed: false, viewSource: false, showAdvanced: false, showConfirmTransferSite: false, showConfirmTransferCommunity: false, showConfirmAppointAsMod: false, showConfirmAppointAsAdmin: false, my_vote: this.props.node.comment.my_vote, score: this.props.node.comment.score, upvotes: this.props.node.comment.upvotes, downvotes: this.props.node.comment.downvotes, borderColor: this.props.node.comment.depth ? colorList[this.props.node.comment.depth % colorList.length] : colorList[0], readLoading: false, saveLoading: false, }; constructor(props: any, context: any) { super(props, context); this.state = this.emptyState; this.handleReplyCancel = this.handleReplyCancel.bind(this); this.handleCommentUpvote = this.handleCommentUpvote.bind(this); this.handleCommentDownvote = this.handleCommentDownvote.bind(this); } componentWillReceiveProps(nextProps: CommentNodeProps) { this.state.my_vote = nextProps.node.comment.my_vote; this.state.upvotes = nextProps.node.comment.upvotes; this.state.downvotes = nextProps.node.comment.downvotes; this.state.score = nextProps.node.comment.score; this.state.readLoading = false; this.state.saveLoading = false; this.setState(this.state); } render() { let node = this.props.node; return (
{node.comment.creator_avatar && showAvatars() && ( )} {node.comment.creator_name} {this.isMod && (
{i18n.t('mod')}
)} {this.isAdmin && (
{i18n.t('admin')}
)} {this.isPostCreator && (
{i18n.t('creator')}
)} {(node.comment.banned_from_community || node.comment.banned) && (
{i18n.t('banned')}
)} {this.props.showCommunity && ( <> {i18n.t('to')} {node.comment.community_name} )}
{this.state.collapsed ? ( ) : ( )}
{this.state.score}
{/* end of user row */} {this.state.showEdit && ( )} {!this.state.showEdit && !this.state.collapsed && (
{this.state.viewSource ? (
{this.commentUnlessRemoved}
) : (
)}
{this.props.showContext && this.linkBtn} {this.props.markable && ( )} {UserService.Instance.user && !this.props.viewOnly && ( <> {WebSocketService.Instance.site.enable_downvotes && ( )} {!this.state.showAdvanced ? ( ) : ( <> {!this.myComment && ( )} {!this.props.showContext && this.linkBtn} {this.myComment && ( <> )} {/* Admins and mods can remove comments */} {(this.canMod || this.canAdmin) && ( <> {!node.comment.removed ? ( ) : ( )} )} {/* Mods can ban from community, and appoint as mods to community */} {this.canMod && ( <> {!this.isMod && (!node.comment.banned_from_community ? ( ) : ( ))} {!node.comment.banned_from_community && (!this.state.showConfirmAppointAsMod ? ( ) : ( <> ))} )} {/* Community creators and admins can transfer community to another mod */} {(this.amCommunityCreator || this.canAdmin) && this.isMod && (!this.state.showConfirmTransferCommunity ? ( ) : ( <> ))} {/* Admins can ban from all, and appoint other admins */} {this.canAdmin && ( <> {!this.isAdmin && (!node.comment.banned ? ( ) : ( ))} {!node.comment.banned && (!this.state.showConfirmAppointAsAdmin ? ( ) : ( <> ))} )} {/* Site Creator can transfer to another admin */} {this.amSiteCreator && this.isAdmin && (!this.state.showConfirmTransferSite ? ( ) : ( <> ))} )} )}
{/* end of button group */}
)}
{/* end of details */} {this.state.showRemoveDialog && (
)} {this.state.showBanDialog && (
{/* TODO hold off on expires until later */} {/*
*/} {/* */} {/* */} {/*
*/}
)} {this.state.showReply && ( )} {node.children && !this.state.collapsed && ( )} {/* A collapsed clearfix */} {this.state.collapsed &&
}
); } get linkBtn() { let node = this.props.node; return ( ); } get loadingIcon() { return ( ); } get myComment(): boolean { return ( UserService.Instance.user && this.props.node.comment.creator_id == UserService.Instance.user.id ); } get isMod(): boolean { return ( this.props.moderators && isMod( this.props.moderators.map(m => m.user_id), this.props.node.comment.creator_id ) ); } get isAdmin(): boolean { return ( this.props.admins && isMod( this.props.admins.map(a => a.id), this.props.node.comment.creator_id ) ); } get isPostCreator(): boolean { return this.props.node.comment.creator_id == this.props.postCreatorId; } get canMod(): boolean { if (this.props.admins && this.props.moderators) { let adminsThenMods = this.props.admins .map(a => a.id) .concat(this.props.moderators.map(m => m.user_id)); return canMod( UserService.Instance.user, adminsThenMods, this.props.node.comment.creator_id ); } else { return false; } } get canAdmin(): boolean { return ( this.props.admins && canMod( UserService.Instance.user, this.props.admins.map(a => a.id), this.props.node.comment.creator_id ) ); } get amCommunityCreator(): boolean { return ( this.props.moderators && UserService.Instance.user && this.props.node.comment.creator_id != UserService.Instance.user.id && UserService.Instance.user.id == this.props.moderators[0].user_id ); } get amSiteCreator(): boolean { return ( this.props.admins && UserService.Instance.user && this.props.node.comment.creator_id != UserService.Instance.user.id && UserService.Instance.user.id == this.props.admins[0].id ); } get commentUnlessRemoved(): string { let node = this.props.node; return node.comment.removed ? `*${i18n.t('removed')}*` : node.comment.deleted ? `*${i18n.t('deleted')}*` : node.comment.content; } handleReplyClick(i: CommentNode) { i.state.showReply = true; i.setState(i.state); } handleEditClick(i: CommentNode) { i.state.showEdit = true; i.setState(i.state); } handleDeleteClick(i: CommentNode) { let deleteForm: CommentFormI = { content: i.props.node.comment.content, edit_id: i.props.node.comment.id, creator_id: i.props.node.comment.creator_id, post_id: i.props.node.comment.post_id, parent_id: i.props.node.comment.parent_id, deleted: !i.props.node.comment.deleted, auth: null, }; WebSocketService.Instance.editComment(deleteForm); } handleSaveCommentClick(i: CommentNode) { let saved = i.props.node.comment.saved == undefined ? true : !i.props.node.comment.saved; let form: SaveCommentForm = { comment_id: i.props.node.comment.id, save: saved, }; WebSocketService.Instance.saveComment(form); i.state.saveLoading = true; i.setState(this.state); } handleReplyCancel() { this.state.showReply = false; this.state.showEdit = false; this.setState(this.state); } handleCommentUpvote(i: CommentNodeI) { let new_vote = this.state.my_vote == 1 ? 0 : 1; if (this.state.my_vote == 1) { this.state.score--; this.state.upvotes--; } else if (this.state.my_vote == -1) { this.state.downvotes--; this.state.upvotes++; this.state.score += 2; } else { this.state.upvotes++; this.state.score++; } this.state.my_vote = new_vote; let form: CommentLikeForm = { comment_id: i.comment.id, post_id: i.comment.post_id, score: this.state.my_vote, }; WebSocketService.Instance.likeComment(form); this.setState(this.state); setupTippy(); } handleCommentDownvote(i: CommentNodeI) { let new_vote = this.state.my_vote == -1 ? 0 : -1; if (this.state.my_vote == 1) { this.state.score -= 2; this.state.upvotes--; this.state.downvotes++; } else if (this.state.my_vote == -1) { this.state.downvotes--; this.state.score++; } else { this.state.downvotes++; this.state.score--; } this.state.my_vote = new_vote; let form: CommentLikeForm = { comment_id: i.comment.id, post_id: i.comment.post_id, score: this.state.my_vote, }; WebSocketService.Instance.likeComment(form); this.setState(this.state); setupTippy(); } handleModRemoveShow(i: CommentNode) { i.state.showRemoveDialog = true; i.setState(i.state); } handleModRemoveReasonChange(i: CommentNode, event: any) { i.state.removeReason = event.target.value; i.setState(i.state); } handleModRemoveSubmit(i: CommentNode) { event.preventDefault(); let form: CommentFormI = { content: i.props.node.comment.content, edit_id: i.props.node.comment.id, creator_id: i.props.node.comment.creator_id, post_id: i.props.node.comment.post_id, parent_id: i.props.node.comment.parent_id, removed: !i.props.node.comment.removed, reason: i.state.removeReason, auth: null, }; WebSocketService.Instance.editComment(form); i.state.showRemoveDialog = false; i.setState(i.state); } handleMarkRead(i: CommentNode) { // if it has a user_mention_id field, then its a mention if (i.props.node.comment.user_mention_id) { let form: EditUserMentionForm = { user_mention_id: i.props.node.comment.user_mention_id, read: !i.props.node.comment.read, }; WebSocketService.Instance.editUserMention(form); } else { let form: CommentFormI = { content: i.props.node.comment.content, edit_id: i.props.node.comment.id, creator_id: i.props.node.comment.creator_id, post_id: i.props.node.comment.post_id, parent_id: i.props.node.comment.parent_id, read: !i.props.node.comment.read, auth: null, }; WebSocketService.Instance.editComment(form); } i.state.readLoading = true; i.setState(this.state); } handleModBanFromCommunityShow(i: CommentNode) { i.state.showBanDialog = !i.state.showBanDialog; i.state.banType = BanType.Community; i.setState(i.state); } handleModBanShow(i: CommentNode) { i.state.showBanDialog = !i.state.showBanDialog; i.state.banType = BanType.Site; i.setState(i.state); } handleModBanReasonChange(i: CommentNode, event: any) { i.state.banReason = event.target.value; i.setState(i.state); } handleModBanExpiresChange(i: CommentNode, event: any) { i.state.banExpires = event.target.value; i.setState(i.state); } handleModBanFromCommunitySubmit(i: CommentNode) { i.state.banType = BanType.Community; i.setState(i.state); i.handleModBanBothSubmit(i); } handleModBanSubmit(i: CommentNode) { i.state.banType = BanType.Site; i.setState(i.state); i.handleModBanBothSubmit(i); } handleModBanBothSubmit(i: CommentNode) { event.preventDefault(); if (i.state.banType == BanType.Community) { let form: BanFromCommunityForm = { user_id: i.props.node.comment.creator_id, community_id: i.props.node.comment.community_id, ban: !i.props.node.comment.banned_from_community, reason: i.state.banReason, expires: getUnixTime(i.state.banExpires), }; WebSocketService.Instance.banFromCommunity(form); } else { let form: BanUserForm = { user_id: i.props.node.comment.creator_id, ban: !i.props.node.comment.banned, reason: i.state.banReason, expires: getUnixTime(i.state.banExpires), }; WebSocketService.Instance.banUser(form); } i.state.showBanDialog = false; i.setState(i.state); } handleShowConfirmAppointAsMod(i: CommentNode) { i.state.showConfirmAppointAsMod = true; i.setState(i.state); } handleCancelConfirmAppointAsMod(i: CommentNode) { i.state.showConfirmAppointAsMod = false; i.setState(i.state); } handleAddModToCommunity(i: CommentNode) { let form: AddModToCommunityForm = { user_id: i.props.node.comment.creator_id, community_id: i.props.node.comment.community_id, added: !i.isMod, }; WebSocketService.Instance.addModToCommunity(form); i.state.showConfirmAppointAsMod = false; i.setState(i.state); } handleShowConfirmAppointAsAdmin(i: CommentNode) { i.state.showConfirmAppointAsAdmin = true; i.setState(i.state); } handleCancelConfirmAppointAsAdmin(i: CommentNode) { i.state.showConfirmAppointAsAdmin = false; i.setState(i.state); } handleAddAdmin(i: CommentNode) { let form: AddAdminForm = { user_id: i.props.node.comment.creator_id, added: !i.isAdmin, }; WebSocketService.Instance.addAdmin(form); i.state.showConfirmAppointAsAdmin = false; i.setState(i.state); } handleShowConfirmTransferCommunity(i: CommentNode) { i.state.showConfirmTransferCommunity = true; i.setState(i.state); } handleCancelShowConfirmTransferCommunity(i: CommentNode) { i.state.showConfirmTransferCommunity = false; i.setState(i.state); } handleTransferCommunity(i: CommentNode) { let form: TransferCommunityForm = { community_id: i.props.node.comment.community_id, user_id: i.props.node.comment.creator_id, }; WebSocketService.Instance.transferCommunity(form); i.state.showConfirmTransferCommunity = false; i.setState(i.state); } handleShowConfirmTransferSite(i: CommentNode) { i.state.showConfirmTransferSite = true; i.setState(i.state); } handleCancelShowConfirmTransferSite(i: CommentNode) { i.state.showConfirmTransferSite = false; i.setState(i.state); } handleTransferSite(i: CommentNode) { let form: TransferSiteForm = { user_id: i.props.node.comment.creator_id, }; WebSocketService.Instance.transferSite(form); i.state.showConfirmTransferSite = false; i.setState(i.state); } get isCommentNew(): boolean { let now = moment.utc().subtract(10, 'minutes'); let then = moment.utc(this.props.node.comment.published); return now.isBefore(then); } handleCommentCollapse(i: CommentNode) { i.state.collapsed = !i.state.collapsed; i.setState(i.state); } handleViewSource(i: CommentNode) { i.state.viewSource = !i.state.viewSource; i.setState(i.state); } handleShowAdvanced(i: CommentNode) { i.state.showAdvanced = !i.state.showAdvanced; i.setState(i.state); setupTippy(); } get scoreColor() { if (this.state.my_vote == 1) { return 'text-info'; } else if (this.state.my_vote == -1) { return 'text-danger'; } else { return 'text-muted'; } } get pointsTippy(): string { let points = i18n.t('number_of_points', { count: this.state.score, }); let upvotes = i18n.t('number_of_upvotes', { count: this.state.upvotes, }); let downvotes = i18n.t('number_of_downvotes', { count: this.state.downvotes, }); return `${points} • ${upvotes} • ${downvotes}`; } }