import classNames from "classnames"; import { Component, linkEvent } from "inferno"; import { Link } from "inferno-router"; import { AddAdmin, AddModToCommunity, BanFromCommunity, BanPerson, BlockPerson, CommentNode as CommentNodeI, CommentReplyView, CommentView, CommunityModeratorView, CreateCommentLike, CreateCommentReport, DeleteComment, EditComment, GetComments, Language, ListingType, MarkCommentReplyAsRead, MarkPersonMentionAsRead, PersonMentionView, PersonViewSafe, PurgeComment, PurgePerson, RemoveComment, SaveComment, TransferCommunity, } from "lemmy-js-client"; import moment from "moment"; import { i18n } from "../../i18next"; import { BanType, CommentViewType, PurgeType } from "../../interfaces"; import { UserService, WebSocketService } from "../../services"; import { amCommunityCreator, canAdmin, canMod, colorList, commentTreeMaxDepth, futureDaysToUnixTime, isAdmin, isBanned, isMod, mdToHtml, mdToHtmlNoImages, myAuth, numToSI, setupTippy, showScores, wsClient, } from "../../utils"; import { Icon, PurgeWarning, Spinner } from "../common/icon"; import { MomentTime } from "../common/moment-time"; import { CommunityLink } from "../community/community-link"; import { PersonListing } from "../person/person-listing"; import { CommentForm } from "./comment-form"; import { CommentNodes } from "./comment-nodes"; interface CommentNodeState { showReply: boolean; showEdit: boolean; showRemoveDialog: boolean; removeReason?: string; showBanDialog: boolean; removeData: boolean; banReason?: string; banExpireDays?: number; banType: BanType; showPurgeDialog: boolean; purgeReason?: string; purgeType: PurgeType; purgeLoading: boolean; showConfirmTransferSite: boolean; showConfirmTransferCommunity: boolean; showConfirmAppointAsMod: boolean; showConfirmAppointAsAdmin: boolean; collapsed: boolean; viewSource: boolean; showAdvanced: boolean; showReportDialog: boolean; reportReason?: string; my_vote?: number; score: number; upvotes: number; downvotes: number; readLoading: boolean; saveLoading: boolean; } interface CommentNodeProps { node: CommentNodeI; moderators?: CommunityModeratorView[]; admins?: PersonViewSafe[]; noBorder?: boolean; noIndent?: boolean; viewOnly?: boolean; locked?: boolean; markable?: boolean; showContext?: boolean; showCommunity?: boolean; enableDownvotes?: boolean; viewType: CommentViewType; allLanguages: Language[]; siteLanguages: number[]; hideImages?: boolean; } export class CommentNode extends Component { state: CommentNodeState = { showReply: false, showEdit: false, showRemoveDialog: false, showBanDialog: false, removeData: false, banType: BanType.Community, showPurgeDialog: false, purgeLoading: false, purgeType: PurgeType.Person, collapsed: false, viewSource: false, showAdvanced: false, showConfirmTransferSite: false, showConfirmTransferCommunity: false, showConfirmAppointAsMod: false, showConfirmAppointAsAdmin: false, showReportDialog: false, my_vote: this.props.node.comment_view.my_vote, score: this.props.node.comment_view.counts.score, upvotes: this.props.node.comment_view.counts.upvotes, downvotes: this.props.node.comment_view.counts.downvotes, readLoading: false, saveLoading: false, }; constructor(props: any, context: any) { super(props, context); this.handleReplyCancel = this.handleReplyCancel.bind(this); this.handleCommentUpvote = this.handleCommentUpvote.bind(this); this.handleCommentDownvote = this.handleCommentDownvote.bind(this); } // TODO see if there's a better way to do this, and all willReceiveProps componentWillReceiveProps(nextProps: CommentNodeProps) { let cv = nextProps.node.comment_view; this.setState({ my_vote: cv.my_vote, upvotes: cv.counts.upvotes, downvotes: cv.counts.downvotes, score: cv.counts.score, readLoading: false, saveLoading: false, }); } render() { let node = this.props.node; let cv = this.props.node.comment_view; let purgeTypeText = this.state.purgeType == PurgeType.Comment ? i18n.t("purge_comment") : `${i18n.t("purge")} ${cv.creator.name}`; let canMod_ = canMod( cv.creator.id, this.props.moderators, this.props.admins ); let canModOnSelf = canMod( cv.creator.id, this.props.moderators, this.props.admins, UserService.Instance.myUserInfo, true ); let canAdmin_ = canAdmin(cv.creator.id, this.props.admins); let canAdminOnSelf = canAdmin( cv.creator.id, this.props.admins, UserService.Instance.myUserInfo, true ); let isMod_ = isMod(cv.creator.id, this.props.moderators); let isAdmin_ = isAdmin(cv.creator.id, this.props.admins); let amCommunityCreator_ = amCommunityCreator( cv.creator.id, this.props.moderators ); let borderColor = this.props.node.depth ? colorList[(this.props.node.depth - 1) % colorList.length] : colorList[0]; let moreRepliesBorderColor = this.props.node.depth ? colorList[this.props.node.depth % colorList.length] : colorList[0]; let showMoreChildren = this.props.viewType == CommentViewType.Tree && !this.state.collapsed && node.children.length == 0 && node.comment_view.counts.child_count > 0; return (
{cv.comment.distinguished && ( )} {isMod_ && (
{i18n.t("mod")}
)} {isAdmin_ && (
{i18n.t("admin")}
)} {this.isPostCreator && (
{i18n.t("creator")}
)} {cv.creator.bot_account && (
{i18n.t("bot_account").toLowerCase()}
)} {(cv.creator_banned_from_community || isBanned(cv.creator)) && (
{i18n.t("banned")}
)} {this.props.showCommunity && ( <> {i18n.t("to")} {cv.post.name} )} {this.linkBtn(true)} {/* This is an expanding spacer for mobile */}
{showScores() && ( <> {numToSI(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.myUserInfo && !this.props.viewOnly && ( <> {this.props.enableDownvotes && ( )} {!this.state.showAdvanced ? ( ) : ( <> {!this.myComment && ( <> )} {this.myComment && ( <> {(canModOnSelf || canAdminOnSelf) && ( )} )} {/* Admins and mods can remove comments */} {(canMod_ || canAdmin_) && ( <> {!cv.comment.removed ? ( ) : ( )} )} {/* Mods can ban from community, and appoint as mods to community */} {canMod_ && ( <> {!isMod_ && (!cv.creator_banned_from_community ? ( ) : ( ))} {!cv.creator_banned_from_community && (!this.state.showConfirmAppointAsMod ? ( ) : ( <> ))} )} {/* Community creators and admins can transfer community to another mod */} {(amCommunityCreator_ || canAdmin_) && isMod_ && cv.creator.local && (!this.state.showConfirmTransferCommunity ? ( ) : ( <> ))} {/* Admins can ban from all, and appoint other admins */} {canAdmin_ && ( <> {!isAdmin_ && ( <> {!isBanned(cv.creator) ? ( ) : ( )} )} {!isBanned(cv.creator) && cv.creator.local && (!this.state.showConfirmAppointAsAdmin ? ( ) : ( <> ))} )} )} )}
{/* end of button group */}
)}
{showMoreChildren && (
)} {/* end of details */} {this.state.showRemoveDialog && (
)} {this.state.showReportDialog && (
)} {this.state.showBanDialog && (
{/* TODO hold off on expires until later */} {/*
*/} {/* */} {/* */} {/*
*/}
)} {this.state.showPurgeDialog && (
{this.state.purgeLoading ? ( ) : ( )}
)} {this.state.showReply && ( )} {!this.state.collapsed && node.children.length > 0 && ( )} {/* A collapsed clearfix */} {this.state.collapsed &&
}
); } get commentReplyOrMentionRead(): boolean { let cv = this.props.node.comment_view; if (this.isPersonMentionType(cv)) { return cv.person_mention.read; } else if (this.isCommentReplyType(cv)) { return cv.comment_reply.read; } else { return false; } } linkBtn(small = false) { let cv = this.props.node.comment_view; let classnames = classNames("btn btn-link btn-animate text-muted", { "btn-sm": small, }); let title = this.props.showContext ? i18n.t("show_context") : i18n.t("link"); return ( <> { } ); } get loadingIcon() { return ; } get myComment(): boolean { return ( UserService.Instance.myUserInfo?.local_user_view.person.id == this.props.node.comment_view.creator.id ); } get isPostCreator(): boolean { return ( this.props.node.comment_view.creator.id == this.props.node.comment_view.post.creator_id ); } get commentUnlessRemoved(): string { let comment = this.props.node.comment_view.comment; return comment.removed ? `*${i18n.t("removed")}*` : comment.deleted ? `*${i18n.t("deleted")}*` : comment.content; } handleReplyClick(i: CommentNode) { i.setState({ showReply: true }); } handleEditClick(i: CommentNode) { i.setState({ showEdit: true }); } handleBlockUserClick(i: CommentNode) { let auth = myAuth(); if (auth) { let blockUserForm: BlockPerson = { person_id: i.props.node.comment_view.creator.id, block: true, auth, }; WebSocketService.Instance.send(wsClient.blockPerson(blockUserForm)); } } handleDeleteClick(i: CommentNode) { let comment = i.props.node.comment_view.comment; let auth = myAuth(); if (auth) { let deleteForm: DeleteComment = { comment_id: comment.id, deleted: !comment.deleted, auth, }; WebSocketService.Instance.send(wsClient.deleteComment(deleteForm)); } } handleSaveCommentClick(i: CommentNode) { let cv = i.props.node.comment_view; let save = cv.saved == undefined ? true : !cv.saved; let auth = myAuth(); if (auth) { let form: SaveComment = { comment_id: cv.comment.id, save, auth, }; WebSocketService.Instance.send(wsClient.saveComment(form)); i.setState({ saveLoading: true }); } } handleReplyCancel() { this.setState({ showReply: false, showEdit: false }); } handleCommentUpvote(event: any) { event.preventDefault(); let myVote = this.state.my_vote; let newVote = myVote == 1 ? 0 : 1; if (myVote == 1) { this.setState({ score: this.state.score - 1, upvotes: this.state.upvotes - 1, }); } else if (myVote == -1) { this.setState({ downvotes: this.state.downvotes - 1, upvotes: this.state.upvotes + 1, score: this.state.score + 2, }); } else { this.setState({ score: this.state.score + 1, upvotes: this.state.upvotes + 1, }); } this.setState({ my_vote: newVote }); let auth = myAuth(); if (auth) { let form: CreateCommentLike = { comment_id: this.props.node.comment_view.comment.id, score: newVote, auth, }; WebSocketService.Instance.send(wsClient.likeComment(form)); setupTippy(); } } handleCommentDownvote(event: any) { event.preventDefault(); let myVote = this.state.my_vote; let newVote = myVote == -1 ? 0 : -1; if (myVote == 1) { this.setState({ downvotes: this.state.downvotes + 1, upvotes: this.state.upvotes - 1, score: this.state.score - 2, }); } else if (myVote == -1) { this.setState({ downvotes: this.state.downvotes - 1, score: this.state.score + 1, }); } else { this.setState({ downvotes: this.state.downvotes + 1, score: this.state.score - 1, }); } this.setState({ my_vote: newVote }); let auth = myAuth(); if (auth) { let form: CreateCommentLike = { comment_id: this.props.node.comment_view.comment.id, score: newVote, auth, }; WebSocketService.Instance.send(wsClient.likeComment(form)); setupTippy(); } } handleShowReportDialog(i: CommentNode) { i.setState({ showReportDialog: !i.state.showReportDialog }); } handleReportReasonChange(i: CommentNode, event: any) { i.setState({ reportReason: event.target.value }); } handleReportSubmit(i: CommentNode) { let comment = i.props.node.comment_view.comment; let reason = i.state.reportReason; let auth = myAuth(); if (reason && auth) { let form: CreateCommentReport = { comment_id: comment.id, reason, auth, }; WebSocketService.Instance.send(wsClient.createCommentReport(form)); i.setState({ showReportDialog: false }); } } handleModRemoveShow(i: CommentNode) { i.setState({ showRemoveDialog: !i.state.showRemoveDialog, showBanDialog: false, }); } handleModRemoveReasonChange(i: CommentNode, event: any) { i.setState({ removeReason: event.target.value }); } handleModRemoveDataChange(i: CommentNode, event: any) { i.setState({ removeData: event.target.checked }); } handleModRemoveSubmit(i: CommentNode) { let comment = i.props.node.comment_view.comment; let auth = myAuth(); if (auth) { let form: RemoveComment = { comment_id: comment.id, removed: !comment.removed, reason: i.state.removeReason, auth, }; WebSocketService.Instance.send(wsClient.removeComment(form)); i.setState({ showRemoveDialog: false }); } } handleDistinguishClick(i: CommentNode) { let comment = i.props.node.comment_view.comment; let auth = myAuth(); if (auth) { let form: EditComment = { comment_id: comment.id, distinguished: !comment.distinguished, auth, }; WebSocketService.Instance.send(wsClient.editComment(form)); i.setState(i.state); } } isPersonMentionType( item: CommentView | PersonMentionView | CommentReplyView ): item is PersonMentionView { return (item as PersonMentionView).person_mention?.id !== undefined; } isCommentReplyType( item: CommentView | PersonMentionView | CommentReplyView ): item is CommentReplyView { return (item as CommentReplyView).comment_reply?.id !== undefined; } handleMarkRead(i: CommentNode) { let auth = myAuth(); if (auth) { if (i.isPersonMentionType(i.props.node.comment_view)) { let form: MarkPersonMentionAsRead = { person_mention_id: i.props.node.comment_view.person_mention.id, read: !i.props.node.comment_view.person_mention.read, auth, }; WebSocketService.Instance.send(wsClient.markPersonMentionAsRead(form)); } else if (i.isCommentReplyType(i.props.node.comment_view)) { let form: MarkCommentReplyAsRead = { comment_reply_id: i.props.node.comment_view.comment_reply.id, read: !i.props.node.comment_view.comment_reply.read, auth, }; WebSocketService.Instance.send(wsClient.markCommentReplyAsRead(form)); } i.setState({ readLoading: true }); } } handleModBanFromCommunityShow(i: CommentNode) { i.setState({ showBanDialog: true, banType: BanType.Community, showRemoveDialog: false, }); } handleModBanShow(i: CommentNode) { i.setState({ showBanDialog: true, banType: BanType.Site, showRemoveDialog: false, }); } handleModBanReasonChange(i: CommentNode, event: any) { i.setState({ banReason: event.target.value }); } handleModBanExpireDaysChange(i: CommentNode, event: any) { i.setState({ banExpireDays: event.target.value }); } handleModBanFromCommunitySubmit(i: CommentNode) { i.setState({ banType: BanType.Community }); i.handleModBanBothSubmit(i); } handleModBanSubmit(i: CommentNode) { i.setState({ banType: BanType.Site }); i.handleModBanBothSubmit(i); } handleModBanBothSubmit(i: CommentNode) { let cv = i.props.node.comment_view; let auth = myAuth(); if (auth) { if (i.state.banType == BanType.Community) { // If its an unban, restore all their data let ban = !cv.creator_banned_from_community; if (ban == false) { i.setState({ removeData: false }); } let form: BanFromCommunity = { person_id: cv.creator.id, community_id: cv.community.id, ban, remove_data: i.state.removeData, reason: i.state.banReason, expires: futureDaysToUnixTime(i.state.banExpireDays), auth, }; WebSocketService.Instance.send(wsClient.banFromCommunity(form)); } else { // If its an unban, restore all their data let ban = !cv.creator.banned; if (ban == false) { i.setState({ removeData: false }); } let form: BanPerson = { person_id: cv.creator.id, ban, remove_data: i.state.removeData, reason: i.state.banReason, expires: futureDaysToUnixTime(i.state.banExpireDays), auth, }; WebSocketService.Instance.send(wsClient.banPerson(form)); } i.setState({ showBanDialog: false }); } } handlePurgePersonShow(i: CommentNode) { i.setState({ showPurgeDialog: true, purgeType: PurgeType.Person, showRemoveDialog: false, }); } handlePurgeCommentShow(i: CommentNode) { i.setState({ showPurgeDialog: true, purgeType: PurgeType.Comment, showRemoveDialog: false, }); } handlePurgeReasonChange(i: CommentNode, event: any) { i.setState({ purgeReason: event.target.value }); } handlePurgeSubmit(i: CommentNode, event: any) { event.preventDefault(); let auth = myAuth(); if (auth) { if (i.state.purgeType == PurgeType.Person) { let form: PurgePerson = { person_id: i.props.node.comment_view.creator.id, reason: i.state.purgeReason, auth, }; WebSocketService.Instance.send(wsClient.purgePerson(form)); } else if (i.state.purgeType == PurgeType.Comment) { let form: PurgeComment = { comment_id: i.props.node.comment_view.comment.id, reason: i.state.purgeReason, auth, }; WebSocketService.Instance.send(wsClient.purgeComment(form)); } i.setState({ purgeLoading: true }); } } handleShowConfirmAppointAsMod(i: CommentNode) { i.setState({ showConfirmAppointAsMod: true }); } handleCancelConfirmAppointAsMod(i: CommentNode) { i.setState({ showConfirmAppointAsMod: false }); } handleAddModToCommunity(i: CommentNode) { let cv = i.props.node.comment_view; let auth = myAuth(); if (auth) { let form: AddModToCommunity = { person_id: cv.creator.id, community_id: cv.community.id, added: !isMod(cv.creator.id, i.props.moderators), auth, }; WebSocketService.Instance.send(wsClient.addModToCommunity(form)); i.setState({ showConfirmAppointAsMod: false }); } } handleShowConfirmAppointAsAdmin(i: CommentNode) { i.setState({ showConfirmAppointAsAdmin: true }); } handleCancelConfirmAppointAsAdmin(i: CommentNode) { i.setState({ showConfirmAppointAsAdmin: false }); } handleAddAdmin(i: CommentNode) { let auth = myAuth(); if (auth) { let creatorId = i.props.node.comment_view.creator.id; let form: AddAdmin = { person_id: creatorId, added: !isAdmin(creatorId, i.props.admins), auth, }; WebSocketService.Instance.send(wsClient.addAdmin(form)); i.setState({ showConfirmAppointAsAdmin: false }); } } handleShowConfirmTransferCommunity(i: CommentNode) { i.setState({ showConfirmTransferCommunity: true }); } handleCancelShowConfirmTransferCommunity(i: CommentNode) { i.setState({ showConfirmTransferCommunity: false }); } handleTransferCommunity(i: CommentNode) { let cv = i.props.node.comment_view; let auth = myAuth(); if (auth) { let form: TransferCommunity = { community_id: cv.community.id, person_id: cv.creator.id, auth, }; WebSocketService.Instance.send(wsClient.transferCommunity(form)); i.setState({ showConfirmTransferCommunity: false }); } } handleShowConfirmTransferSite(i: CommentNode) { i.setState({ showConfirmTransferSite: true }); } handleCancelShowConfirmTransferSite(i: CommentNode) { i.setState({ showConfirmTransferSite: false }); } get isCommentNew(): boolean { let now = moment.utc().subtract(10, "minutes"); let then = moment.utc(this.props.node.comment_view.comment.published); return now.isBefore(then); } handleCommentCollapse(i: CommentNode) { i.setState({ collapsed: !i.state.collapsed }); setupTippy(); } handleViewSource(i: CommentNode) { i.setState({ viewSource: !i.state.viewSource }); } handleShowAdvanced(i: CommentNode) { i.setState({ showAdvanced: !i.state.showAdvanced }); setupTippy(); } handleFetchChildren(i: CommentNode) { let form: GetComments = { post_id: i.props.node.comment_view.post.id, parent_id: i.props.node.comment_view.comment.id, max_depth: commentTreeMaxDepth, limit: 999, // TODO type_: ListingType.All, saved_only: false, auth: myAuth(false), }; WebSocketService.Instance.send(wsClient.getComments(form)); } 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, formattedCount: this.state.score, }); let upvotes = i18n.t("number_of_upvotes", { count: this.state.upvotes, formattedCount: this.state.upvotes, }); let downvotes = i18n.t("number_of_downvotes", { count: this.state.downvotes, formattedCount: this.state.downvotes, }); return `${points} • ${upvotes} • ${downvotes}`; } get expandText(): string { return this.state.collapsed ? i18n.t("expand") : i18n.t("collapse"); } }