1 import classNames from "classnames";
2 import { Component, linkEvent } from "inferno";
3 import { Link } from "inferno-router";
12 CommunityModeratorView,
19 MarkCommentReplyAsRead,
20 MarkPersonMentionAsRead,
28 } from "lemmy-js-client";
29 import moment from "moment";
30 import { i18n } from "../../i18next";
36 } from "../../interfaces";
37 import { UserService, WebSocketService } from "../../services";
57 import { Icon, PurgeWarning, Spinner } from "../common/icon";
58 import { MomentTime } from "../common/moment-time";
59 import { CommunityLink } from "../community/community-link";
60 import { PersonListing } from "../person/person-listing";
61 import { CommentForm } from "./comment-form";
62 import { CommentNodes } from "./comment-nodes";
64 interface CommentNodeState {
67 showRemoveDialog: boolean;
68 removeReason?: string;
69 showBanDialog: boolean;
72 banExpireDays?: number;
74 showPurgeDialog: boolean;
77 purgeLoading: boolean;
78 showConfirmTransferSite: boolean;
79 showConfirmTransferCommunity: boolean;
80 showConfirmAppointAsMod: boolean;
81 showConfirmAppointAsAdmin: boolean;
84 showAdvanced: boolean;
85 showReportDialog: boolean;
86 reportReason?: string;
95 interface CommentNodeProps {
97 moderators?: CommunityModeratorView[];
98 admins?: PersonView[];
104 showContext?: boolean;
105 showCommunity?: boolean;
106 enableDownvotes?: boolean;
107 viewType: CommentViewType;
108 allLanguages: Language[];
109 siteLanguages: number[];
110 hideImages?: boolean;
113 export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
114 state: CommentNodeState = {
117 showRemoveDialog: false,
118 showBanDialog: false,
120 banType: BanType.Community,
121 showPurgeDialog: false,
123 purgeType: PurgeType.Person,
127 showConfirmTransferSite: false,
128 showConfirmTransferCommunity: false,
129 showConfirmAppointAsMod: false,
130 showConfirmAppointAsAdmin: false,
131 showReportDialog: false,
132 my_vote: this.props.node.comment_view.my_vote,
133 score: this.props.node.comment_view.counts.score,
134 upvotes: this.props.node.comment_view.counts.upvotes,
135 downvotes: this.props.node.comment_view.counts.downvotes,
140 constructor(props: any, context: any) {
141 super(props, context);
143 this.handleReplyCancel = this.handleReplyCancel.bind(this);
144 this.handleCommentUpvote = this.handleCommentUpvote.bind(this);
145 this.handleCommentDownvote = this.handleCommentDownvote.bind(this);
148 // TODO see if there's a better way to do this, and all willReceiveProps
149 componentWillReceiveProps(nextProps: CommentNodeProps) {
150 let cv = nextProps.node.comment_view;
153 upvotes: cv.counts.upvotes,
154 downvotes: cv.counts.downvotes,
155 score: cv.counts.score,
162 let node = this.props.node;
163 let cv = this.props.node.comment_view;
166 this.state.purgeType == PurgeType.Comment
167 ? i18n.t("purge_comment")
168 : `${i18n.t("purge")} ${cv.creator.name}`;
171 canMod(cv.creator.id, this.props.moderators, this.props.admins) &&
176 this.props.moderators,
178 UserService.Instance.myUserInfo,
180 ) && cv.community.local;
182 canAdmin(cv.creator.id, this.props.admins) && cv.community.local;
187 UserService.Instance.myUserInfo,
189 ) && cv.community.local;
190 let isMod_ = isMod(cv.creator.id, this.props.moderators);
192 isAdmin(cv.creator.id, this.props.admins) && cv.community.local;
193 let amCommunityCreator_ = amCommunityCreator(
195 this.props.moderators
198 let borderColor = this.props.node.depth
199 ? colorList[(this.props.node.depth - 1) % colorList.length]
201 let moreRepliesBorderColor = this.props.node.depth
202 ? colorList[this.props.node.depth % colorList.length]
205 let showMoreChildren =
206 this.props.viewType == CommentViewType.Tree &&
207 !this.state.collapsed &&
208 node.children.length == 0 &&
209 node.comment_view.counts.child_count > 0;
213 className={`comment ${
214 this.props.node.depth && !this.props.noIndent ? "ml-1" : ""
218 id={`comment-${cv.comment.id}`}
219 className={classNames(`details comment-node py-2`, {
220 "border-top border-light": !this.props.noBorder,
223 this.props.node.comment_view.comment.distinguished,
226 !this.props.noIndent && this.props.node.depth
227 ? `border-left: 2px ${borderColor} solid !important`
232 className={classNames({
233 "ml-2": !this.props.noIndent && this.props.node.depth,
236 <div className="d-flex flex-wrap align-items-center text-muted small">
237 <span className="mr-2">
238 <PersonListing person={cv.creator} />
240 {cv.comment.distinguished && (
241 <Icon icon="shield" inline classes={`text-danger mr-2`} />
244 <div className="badge badge-light d-none d-sm-inline mr-2">
249 <div className="badge badge-light d-none d-sm-inline mr-2">
253 {this.isPostCreator && (
254 <div className="badge badge-light d-none d-sm-inline mr-2">
258 {cv.creator.bot_account && (
259 <div className="badge badge-light d-none d-sm-inline mr-2">
260 {i18n.t("bot_account").toLowerCase()}
263 {this.props.showCommunity && (
265 <span className="mx-1">{i18n.t("to")}</span>
266 <CommunityLink community={cv.community} />
267 <span className="mx-2">•</span>
268 <Link className="mr-2" to={`/post/${cv.post.id}`}>
274 className="btn btn-sm text-muted"
275 onClick={linkEvent(this, this.handleCommentCollapse)}
276 aria-label={this.expandText}
277 data-tippy-content={this.expandText}
279 {this.state.collapsed ? (
280 <Icon icon="plus-square" classes="icon-inline" />
282 <Icon icon="minus-square" classes="icon-inline" />
286 {cv.comment.language_id != 0 && (
289 this.props.allLanguages.find(
290 lang => lang.id === cv.comment.language_id
295 {/* This is an expanding spacer for mobile */}
296 <div className="mr-lg-5 flex-grow-1 flex-lg-grow-0 unselectable pointer mx-2" />
300 className={`unselectable pointer ${this.scoreColor}`}
301 onClick={this.handleCommentUpvote}
302 data-tippy-content={this.pointsTippy}
305 className="mr-1 font-weight-bold"
306 aria-label={i18n.t("number_of_points", {
307 count: Number(this.state.score),
308 formattedCount: numToSI(this.state.score),
311 {numToSI(this.state.score)}
314 <span className="mr-1">•</span>
319 published={cv.comment.published}
320 updated={cv.comment.updated}
324 {/* end of user row */}
325 {this.state.showEdit && (
329 onReplyCancel={this.handleReplyCancel}
330 disabled={this.props.locked}
332 allLanguages={this.props.allLanguages}
333 siteLanguages={this.props.siteLanguages}
336 {!this.state.showEdit && !this.state.collapsed && (
338 {this.state.viewSource ? (
339 <pre>{this.commentUnlessRemoved}</pre>
343 dangerouslySetInnerHTML={
344 this.props.hideImages
345 ? mdToHtmlNoImages(this.commentUnlessRemoved)
346 : mdToHtml(this.commentUnlessRemoved)
350 <div className="d-flex justify-content-between justify-content-lg-start flex-wrap text-muted font-weight-bold">
351 {this.props.showContext && this.linkBtn()}
352 {this.props.markable && (
354 className="btn btn-link btn-animate text-muted"
355 onClick={linkEvent(this, this.handleMarkRead)}
357 this.commentReplyOrMentionRead
358 ? i18n.t("mark_as_unread")
359 : i18n.t("mark_as_read")
362 this.commentReplyOrMentionRead
363 ? i18n.t("mark_as_unread")
364 : i18n.t("mark_as_read")
367 {this.state.readLoading ? (
372 classes={`icon-inline ${
373 this.commentReplyOrMentionRead && "text-success"
379 {UserService.Instance.myUserInfo && !this.props.viewOnly && (
382 className={`btn btn-link btn-animate ${
383 this.state.my_vote == 1 ? "text-info" : "text-muted"
385 onClick={this.handleCommentUpvote}
386 data-tippy-content={i18n.t("upvote")}
387 aria-label={i18n.t("upvote")}
389 <Icon icon="arrow-up1" classes="icon-inline" />
391 this.state.upvotes !== this.state.score && (
392 <span className="ml-1">
393 {numToSI(this.state.upvotes)}
397 {this.props.enableDownvotes && (
399 className={`btn btn-link btn-animate ${
400 this.state.my_vote == -1
404 onClick={this.handleCommentDownvote}
405 data-tippy-content={i18n.t("downvote")}
406 aria-label={i18n.t("downvote")}
408 <Icon icon="arrow-down1" classes="icon-inline" />
410 this.state.upvotes !== this.state.score && (
411 <span className="ml-1">
412 {numToSI(this.state.downvotes)}
418 className="btn btn-link btn-animate text-muted"
419 onClick={linkEvent(this, this.handleReplyClick)}
420 data-tippy-content={i18n.t("reply")}
421 aria-label={i18n.t("reply")}
423 <Icon icon="reply1" classes="icon-inline" />
425 {!this.state.showAdvanced ? (
427 className="btn btn-link btn-animate text-muted"
428 onClick={linkEvent(this, this.handleShowAdvanced)}
429 data-tippy-content={i18n.t("more")}
430 aria-label={i18n.t("more")}
432 <Icon icon="more-vertical" classes="icon-inline" />
436 {!this.myComment && (
438 <button className="btn btn-link btn-animate">
440 className="text-muted"
441 to={`/create_private_message/${cv.creator.id}`}
442 title={i18n.t("message").toLowerCase()}
448 className="btn btn-link btn-animate text-muted"
451 this.handleShowReportDialog
453 data-tippy-content={i18n.t(
456 aria-label={i18n.t("show_report_dialog")}
461 className="btn btn-link btn-animate text-muted"
464 this.handleBlockUserClick
466 data-tippy-content={i18n.t("block_user")}
467 aria-label={i18n.t("block_user")}
469 <Icon icon="slash" />
474 className="btn btn-link btn-animate text-muted"
477 this.handleSaveCommentClick
480 cv.saved ? i18n.t("unsave") : i18n.t("save")
483 cv.saved ? i18n.t("unsave") : i18n.t("save")
486 {this.state.saveLoading ? (
491 classes={`icon-inline ${
492 cv.saved && "text-warning"
498 className="btn btn-link btn-animate text-muted"
499 onClick={linkEvent(this, this.handleViewSource)}
500 data-tippy-content={i18n.t("view_source")}
501 aria-label={i18n.t("view_source")}
505 classes={`icon-inline ${
506 this.state.viewSource && "text-success"
513 className="btn btn-link btn-animate text-muted"
514 onClick={linkEvent(this, this.handleEditClick)}
515 data-tippy-content={i18n.t("edit")}
516 aria-label={i18n.t("edit")}
518 <Icon icon="edit" classes="icon-inline" />
521 className="btn btn-link btn-animate text-muted"
524 this.handleDeleteClick
539 classes={`icon-inline ${
540 cv.comment.deleted && "text-danger"
545 {(canModOnSelf || canAdminOnSelf) && (
547 className="btn btn-link btn-animate text-muted"
550 this.handleDistinguishClick
553 !cv.comment.distinguished
554 ? i18n.t("distinguish")
555 : i18n.t("undistinguish")
558 !cv.comment.distinguished
559 ? i18n.t("distinguish")
560 : i18n.t("undistinguish")
565 classes={`icon-inline ${
566 cv.comment.distinguished && "text-danger"
573 {/* Admins and mods can remove comments */}
574 {(canMod_ || canAdmin_) && (
576 {!cv.comment.removed ? (
578 className="btn btn-link btn-animate text-muted"
581 this.handleModRemoveShow
583 aria-label={i18n.t("remove")}
589 className="btn btn-link btn-animate text-muted"
592 this.handleModRemoveSubmit
594 aria-label={i18n.t("restore")}
601 {/* Mods can ban from community, and appoint as mods to community */}
605 (!cv.creator_banned_from_community ? (
607 className="btn btn-link btn-animate text-muted"
610 this.handleModBanFromCommunityShow
612 aria-label={i18n.t("ban_from_community")}
614 {i18n.t("ban_from_community")}
618 className="btn btn-link btn-animate text-muted"
621 this.handleModBanFromCommunitySubmit
623 aria-label={i18n.t("unban")}
628 {!cv.creator_banned_from_community &&
629 (!this.state.showConfirmAppointAsMod ? (
631 className="btn btn-link btn-animate text-muted"
634 this.handleShowConfirmAppointAsMod
638 ? i18n.t("remove_as_mod")
639 : i18n.t("appoint_as_mod")
643 ? i18n.t("remove_as_mod")
644 : i18n.t("appoint_as_mod")}
649 className="btn btn-link btn-animate text-muted"
650 aria-label={i18n.t("are_you_sure")}
652 {i18n.t("are_you_sure")}
655 className="btn btn-link btn-animate text-muted"
658 this.handleAddModToCommunity
660 aria-label={i18n.t("yes")}
665 className="btn btn-link btn-animate text-muted"
668 this.handleCancelConfirmAppointAsMod
670 aria-label={i18n.t("no")}
678 {/* Community creators and admins can transfer community to another mod */}
679 {(amCommunityCreator_ || canAdmin_) &&
682 (!this.state.showConfirmTransferCommunity ? (
684 className="btn btn-link btn-animate text-muted"
687 this.handleShowConfirmTransferCommunity
689 aria-label={i18n.t("transfer_community")}
691 {i18n.t("transfer_community")}
696 className="btn btn-link btn-animate text-muted"
697 aria-label={i18n.t("are_you_sure")}
699 {i18n.t("are_you_sure")}
702 className="btn btn-link btn-animate text-muted"
705 this.handleTransferCommunity
707 aria-label={i18n.t("yes")}
712 className="btn btn-link btn-animate text-muted"
716 .handleCancelShowConfirmTransferCommunity
718 aria-label={i18n.t("no")}
724 {/* Admins can ban from all, and appoint other admins */}
730 className="btn btn-link btn-animate text-muted"
733 this.handlePurgePersonShow
735 aria-label={i18n.t("purge_user")}
737 {i18n.t("purge_user")}
740 className="btn btn-link btn-animate text-muted"
743 this.handlePurgeCommentShow
745 aria-label={i18n.t("purge_comment")}
747 {i18n.t("purge_comment")}
750 {!isBanned(cv.creator) ? (
752 className="btn btn-link btn-animate text-muted"
755 this.handleModBanShow
757 aria-label={i18n.t("ban_from_site")}
759 {i18n.t("ban_from_site")}
763 className="btn btn-link btn-animate text-muted"
766 this.handleModBanSubmit
768 aria-label={i18n.t("unban_from_site")}
770 {i18n.t("unban_from_site")}
775 {!isBanned(cv.creator) &&
777 (!this.state.showConfirmAppointAsAdmin ? (
779 className="btn btn-link btn-animate text-muted"
782 this.handleShowConfirmAppointAsAdmin
786 ? i18n.t("remove_as_admin")
787 : i18n.t("appoint_as_admin")
791 ? i18n.t("remove_as_admin")
792 : i18n.t("appoint_as_admin")}
796 <button className="btn btn-link btn-animate text-muted">
797 {i18n.t("are_you_sure")}
800 className="btn btn-link btn-animate text-muted"
805 aria-label={i18n.t("yes")}
810 className="btn btn-link btn-animate text-muted"
813 this.handleCancelConfirmAppointAsAdmin
815 aria-label={i18n.t("no")}
828 {/* end of button group */}
833 {showMoreChildren && (
835 className={`details ml-1 comment-node py-2 ${
836 !this.props.noBorder ? "border-top border-light" : ""
838 style={`border-left: 2px ${moreRepliesBorderColor} solid !important`}
841 className="btn btn-link text-muted"
842 onClick={linkEvent(this, this.handleFetchChildren)}
844 {i18n.t("x_more_replies", {
845 count: node.comment_view.counts.child_count,
846 formattedCount: numToSI(node.comment_view.counts.child_count),
852 {/* end of details */}
853 {this.state.showRemoveDialog && (
855 className="form-inline"
856 onSubmit={linkEvent(this, this.handleModRemoveSubmit)}
860 htmlFor={`mod-remove-reason-${cv.comment.id}`}
866 id={`mod-remove-reason-${cv.comment.id}`}
867 className="form-control mr-2"
868 placeholder={i18n.t("reason")}
869 value={this.state.removeReason}
870 onInput={linkEvent(this, this.handleModRemoveReasonChange)}
874 className="btn btn-secondary"
875 aria-label={i18n.t("remove_comment")}
877 {i18n.t("remove_comment")}
881 {this.state.showReportDialog && (
883 className="form-inline"
884 onSubmit={linkEvent(this, this.handleReportSubmit)}
888 htmlFor={`report-reason-${cv.comment.id}`}
895 id={`report-reason-${cv.comment.id}`}
896 className="form-control mr-2"
897 placeholder={i18n.t("reason")}
898 value={this.state.reportReason}
899 onInput={linkEvent(this, this.handleReportReasonChange)}
903 className="btn btn-secondary"
904 aria-label={i18n.t("create_report")}
906 {i18n.t("create_report")}
910 {this.state.showBanDialog && (
911 <form onSubmit={linkEvent(this, this.handleModBanBothSubmit)}>
912 <div className="form-group row col-12">
914 className="col-form-label"
915 htmlFor={`mod-ban-reason-${cv.comment.id}`}
921 id={`mod-ban-reason-${cv.comment.id}`}
922 className="form-control mr-2"
923 placeholder={i18n.t("reason")}
924 value={this.state.banReason}
925 onInput={linkEvent(this, this.handleModBanReasonChange)}
928 className="col-form-label"
929 htmlFor={`mod-ban-expires-${cv.comment.id}`}
935 id={`mod-ban-expires-${cv.comment.id}`}
936 className="form-control mr-2"
937 placeholder={i18n.t("number_of_days")}
938 value={this.state.banExpireDays}
939 onInput={linkEvent(this, this.handleModBanExpireDaysChange)}
941 <div className="form-group">
942 <div className="form-check">
944 className="form-check-input"
945 id="mod-ban-remove-data"
947 checked={this.state.removeData}
948 onChange={linkEvent(this, this.handleModRemoveDataChange)}
951 className="form-check-label"
952 htmlFor="mod-ban-remove-data"
953 title={i18n.t("remove_content_more")}
955 {i18n.t("remove_content")}
960 {/* TODO hold off on expires until later */}
961 {/* <div class="form-group row"> */}
962 {/* <label class="col-form-label">Expires</label> */}
963 {/* <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} /> */}
965 <div className="form-group row">
968 className="btn btn-secondary"
969 aria-label={i18n.t("ban")}
971 {i18n.t("ban")} {cv.creator.name}
977 {this.state.showPurgeDialog && (
978 <form onSubmit={linkEvent(this, this.handlePurgeSubmit)}>
980 <label className="sr-only" htmlFor="purge-reason">
986 className="form-control my-3"
987 placeholder={i18n.t("reason")}
988 value={this.state.purgeReason}
989 onInput={linkEvent(this, this.handlePurgeReasonChange)}
991 <div className="form-group row col-12">
992 {this.state.purgeLoading ? (
997 className="btn btn-secondary"
998 aria-label={purgeTypeText}
1006 {this.state.showReply && (
1009 onReplyCancel={this.handleReplyCancel}
1010 disabled={this.props.locked}
1012 allLanguages={this.props.allLanguages}
1013 siteLanguages={this.props.siteLanguages}
1016 {!this.state.collapsed && node.children.length > 0 && (
1018 nodes={node.children}
1019 locked={this.props.locked}
1020 moderators={this.props.moderators}
1021 admins={this.props.admins}
1022 enableDownvotes={this.props.enableDownvotes}
1023 viewType={this.props.viewType}
1024 allLanguages={this.props.allLanguages}
1025 siteLanguages={this.props.siteLanguages}
1026 hideImages={this.props.hideImages}
1029 {/* A collapsed clearfix */}
1030 {this.state.collapsed && <div className="row col-12"></div>}
1035 get commentReplyOrMentionRead(): boolean {
1036 let cv = this.props.node.comment_view;
1038 if (this.isPersonMentionType(cv)) {
1039 return cv.person_mention.read;
1040 } else if (this.isCommentReplyType(cv)) {
1041 return cv.comment_reply.read;
1047 linkBtn(small = false) {
1048 let cv = this.props.node.comment_view;
1049 let classnames = classNames("btn btn-link btn-animate text-muted", {
1053 let title = this.props.showContext
1054 ? i18n.t("show_context")
1057 // The context button should show the parent comment by default
1058 const parentCommentId = getCommentParentId(cv.comment) ?? cv.comment.id;
1063 className={classnames}
1064 to={`/comment/${parentCommentId}`}
1067 <Icon icon="link" classes="icon-inline" />
1070 <a className={classnames} title={title} href={cv.comment.ap_id}>
1071 <Icon icon="fedilink" classes="icon-inline" />
1082 get myComment(): boolean {
1084 UserService.Instance.myUserInfo?.local_user_view.person.id ==
1085 this.props.node.comment_view.creator.id
1089 get isPostCreator(): boolean {
1091 this.props.node.comment_view.creator.id ==
1092 this.props.node.comment_view.post.creator_id
1096 get commentUnlessRemoved(): string {
1097 let comment = this.props.node.comment_view.comment;
1098 return comment.removed
1099 ? `*${i18n.t("removed")}*`
1101 ? `*${i18n.t("deleted")}*`
1105 handleReplyClick(i: CommentNode) {
1106 i.setState({ showReply: true });
1109 handleEditClick(i: CommentNode) {
1110 i.setState({ showEdit: true });
1113 handleBlockUserClick(i: CommentNode) {
1114 let auth = myAuth();
1116 let blockUserForm: BlockPerson = {
1117 person_id: i.props.node.comment_view.creator.id,
1121 WebSocketService.Instance.send(wsClient.blockPerson(blockUserForm));
1125 handleDeleteClick(i: CommentNode) {
1126 let comment = i.props.node.comment_view.comment;
1127 let auth = myAuth();
1129 let deleteForm: DeleteComment = {
1130 comment_id: comment.id,
1131 deleted: !comment.deleted,
1134 WebSocketService.Instance.send(wsClient.deleteComment(deleteForm));
1138 handleSaveCommentClick(i: CommentNode) {
1139 let cv = i.props.node.comment_view;
1140 let save = cv.saved == undefined ? true : !cv.saved;
1141 let auth = myAuth();
1143 let form: SaveComment = {
1144 comment_id: cv.comment.id,
1149 WebSocketService.Instance.send(wsClient.saveComment(form));
1151 i.setState({ saveLoading: true });
1155 handleReplyCancel() {
1156 this.setState({ showReply: false, showEdit: false });
1159 handleCommentUpvote(event: any) {
1160 event.preventDefault();
1161 let myVote = this.state.my_vote;
1162 let newVote = myVote == 1 ? 0 : 1;
1166 score: this.state.score - 1,
1167 upvotes: this.state.upvotes - 1,
1169 } else if (myVote == -1) {
1171 downvotes: this.state.downvotes - 1,
1172 upvotes: this.state.upvotes + 1,
1173 score: this.state.score + 2,
1177 score: this.state.score + 1,
1178 upvotes: this.state.upvotes + 1,
1182 this.setState({ my_vote: newVote });
1184 let auth = myAuth();
1186 let form: CreateCommentLike = {
1187 comment_id: this.props.node.comment_view.comment.id,
1191 WebSocketService.Instance.send(wsClient.likeComment(form));
1196 handleCommentDownvote(event: any) {
1197 event.preventDefault();
1198 let myVote = this.state.my_vote;
1199 let newVote = myVote == -1 ? 0 : -1;
1203 downvotes: this.state.downvotes + 1,
1204 upvotes: this.state.upvotes - 1,
1205 score: this.state.score - 2,
1207 } else if (myVote == -1) {
1209 downvotes: this.state.downvotes - 1,
1210 score: this.state.score + 1,
1214 downvotes: this.state.downvotes + 1,
1215 score: this.state.score - 1,
1219 this.setState({ my_vote: newVote });
1221 let auth = myAuth();
1223 let form: CreateCommentLike = {
1224 comment_id: this.props.node.comment_view.comment.id,
1229 WebSocketService.Instance.send(wsClient.likeComment(form));
1234 handleShowReportDialog(i: CommentNode) {
1235 i.setState({ showReportDialog: !i.state.showReportDialog });
1238 handleReportReasonChange(i: CommentNode, event: any) {
1239 i.setState({ reportReason: event.target.value });
1242 handleReportSubmit(i: CommentNode) {
1243 let comment = i.props.node.comment_view.comment;
1244 let reason = i.state.reportReason;
1245 let auth = myAuth();
1246 if (reason && auth) {
1247 let form: CreateCommentReport = {
1248 comment_id: comment.id,
1252 WebSocketService.Instance.send(wsClient.createCommentReport(form));
1253 i.setState({ showReportDialog: false });
1257 handleModRemoveShow(i: CommentNode) {
1259 showRemoveDialog: !i.state.showRemoveDialog,
1260 showBanDialog: false,
1264 handleModRemoveReasonChange(i: CommentNode, event: any) {
1265 i.setState({ removeReason: event.target.value });
1268 handleModRemoveDataChange(i: CommentNode, event: any) {
1269 i.setState({ removeData: event.target.checked });
1272 handleModRemoveSubmit(i: CommentNode) {
1273 let comment = i.props.node.comment_view.comment;
1274 let auth = myAuth();
1276 let form: RemoveComment = {
1277 comment_id: comment.id,
1278 removed: !comment.removed,
1279 reason: i.state.removeReason,
1282 WebSocketService.Instance.send(wsClient.removeComment(form));
1284 i.setState({ showRemoveDialog: false });
1288 handleDistinguishClick(i: CommentNode) {
1289 let comment = i.props.node.comment_view.comment;
1290 let auth = myAuth();
1292 let form: DistinguishComment = {
1293 comment_id: comment.id,
1294 distinguished: !comment.distinguished,
1297 WebSocketService.Instance.send(wsClient.editComment(form));
1298 i.setState(i.state);
1302 isPersonMentionType(
1303 item: CommentView | PersonMentionView | CommentReplyView
1304 ): item is PersonMentionView {
1305 return (item as PersonMentionView).person_mention?.id !== undefined;
1309 item: CommentView | PersonMentionView | CommentReplyView
1310 ): item is CommentReplyView {
1311 return (item as CommentReplyView).comment_reply?.id !== undefined;
1314 handleMarkRead(i: CommentNode) {
1315 let auth = myAuth();
1317 if (i.isPersonMentionType(i.props.node.comment_view)) {
1318 let form: MarkPersonMentionAsRead = {
1319 person_mention_id: i.props.node.comment_view.person_mention.id,
1320 read: !i.props.node.comment_view.person_mention.read,
1323 WebSocketService.Instance.send(wsClient.markPersonMentionAsRead(form));
1324 } else if (i.isCommentReplyType(i.props.node.comment_view)) {
1325 let form: MarkCommentReplyAsRead = {
1326 comment_reply_id: i.props.node.comment_view.comment_reply.id,
1327 read: !i.props.node.comment_view.comment_reply.read,
1330 WebSocketService.Instance.send(wsClient.markCommentReplyAsRead(form));
1333 i.setState({ readLoading: true });
1337 handleModBanFromCommunityShow(i: CommentNode) {
1339 showBanDialog: true,
1340 banType: BanType.Community,
1341 showRemoveDialog: false,
1345 handleModBanShow(i: CommentNode) {
1347 showBanDialog: true,
1348 banType: BanType.Site,
1349 showRemoveDialog: false,
1353 handleModBanReasonChange(i: CommentNode, event: any) {
1354 i.setState({ banReason: event.target.value });
1357 handleModBanExpireDaysChange(i: CommentNode, event: any) {
1358 i.setState({ banExpireDays: event.target.value });
1361 handleModBanFromCommunitySubmit(i: CommentNode) {
1362 i.setState({ banType: BanType.Community });
1363 i.handleModBanBothSubmit(i);
1366 handleModBanSubmit(i: CommentNode) {
1367 i.setState({ banType: BanType.Site });
1368 i.handleModBanBothSubmit(i);
1371 handleModBanBothSubmit(i: CommentNode) {
1372 let cv = i.props.node.comment_view;
1373 let auth = myAuth();
1375 if (i.state.banType == BanType.Community) {
1376 // If its an unban, restore all their data
1377 let ban = !cv.creator_banned_from_community;
1379 i.setState({ removeData: false });
1381 let form: BanFromCommunity = {
1382 person_id: cv.creator.id,
1383 community_id: cv.community.id,
1385 remove_data: i.state.removeData,
1386 reason: i.state.banReason,
1387 expires: futureDaysToUnixTime(i.state.banExpireDays),
1390 WebSocketService.Instance.send(wsClient.banFromCommunity(form));
1392 // If its an unban, restore all their data
1393 let ban = !cv.creator.banned;
1395 i.setState({ removeData: false });
1397 let form: BanPerson = {
1398 person_id: cv.creator.id,
1400 remove_data: i.state.removeData,
1401 reason: i.state.banReason,
1402 expires: futureDaysToUnixTime(i.state.banExpireDays),
1405 WebSocketService.Instance.send(wsClient.banPerson(form));
1408 i.setState({ showBanDialog: false });
1412 handlePurgePersonShow(i: CommentNode) {
1414 showPurgeDialog: true,
1415 purgeType: PurgeType.Person,
1416 showRemoveDialog: false,
1420 handlePurgeCommentShow(i: CommentNode) {
1422 showPurgeDialog: true,
1423 purgeType: PurgeType.Comment,
1424 showRemoveDialog: false,
1428 handlePurgeReasonChange(i: CommentNode, event: any) {
1429 i.setState({ purgeReason: event.target.value });
1432 handlePurgeSubmit(i: CommentNode, event: any) {
1433 event.preventDefault();
1434 let auth = myAuth();
1436 if (i.state.purgeType == PurgeType.Person) {
1437 let form: PurgePerson = {
1438 person_id: i.props.node.comment_view.creator.id,
1439 reason: i.state.purgeReason,
1442 WebSocketService.Instance.send(wsClient.purgePerson(form));
1443 } else if (i.state.purgeType == PurgeType.Comment) {
1444 let form: PurgeComment = {
1445 comment_id: i.props.node.comment_view.comment.id,
1446 reason: i.state.purgeReason,
1449 WebSocketService.Instance.send(wsClient.purgeComment(form));
1452 i.setState({ purgeLoading: true });
1456 handleShowConfirmAppointAsMod(i: CommentNode) {
1457 i.setState({ showConfirmAppointAsMod: true });
1460 handleCancelConfirmAppointAsMod(i: CommentNode) {
1461 i.setState({ showConfirmAppointAsMod: false });
1464 handleAddModToCommunity(i: CommentNode) {
1465 let cv = i.props.node.comment_view;
1466 let auth = myAuth();
1468 let form: AddModToCommunity = {
1469 person_id: cv.creator.id,
1470 community_id: cv.community.id,
1471 added: !isMod(cv.creator.id, i.props.moderators),
1474 WebSocketService.Instance.send(wsClient.addModToCommunity(form));
1475 i.setState({ showConfirmAppointAsMod: false });
1479 handleShowConfirmAppointAsAdmin(i: CommentNode) {
1480 i.setState({ showConfirmAppointAsAdmin: true });
1483 handleCancelConfirmAppointAsAdmin(i: CommentNode) {
1484 i.setState({ showConfirmAppointAsAdmin: false });
1487 handleAddAdmin(i: CommentNode) {
1488 let auth = myAuth();
1490 let creatorId = i.props.node.comment_view.creator.id;
1491 let form: AddAdmin = {
1492 person_id: creatorId,
1493 added: !isAdmin(creatorId, i.props.admins),
1496 WebSocketService.Instance.send(wsClient.addAdmin(form));
1497 i.setState({ showConfirmAppointAsAdmin: false });
1501 handleShowConfirmTransferCommunity(i: CommentNode) {
1502 i.setState({ showConfirmTransferCommunity: true });
1505 handleCancelShowConfirmTransferCommunity(i: CommentNode) {
1506 i.setState({ showConfirmTransferCommunity: false });
1509 handleTransferCommunity(i: CommentNode) {
1510 let cv = i.props.node.comment_view;
1511 let auth = myAuth();
1513 let form: TransferCommunity = {
1514 community_id: cv.community.id,
1515 person_id: cv.creator.id,
1518 WebSocketService.Instance.send(wsClient.transferCommunity(form));
1519 i.setState({ showConfirmTransferCommunity: false });
1523 handleShowConfirmTransferSite(i: CommentNode) {
1524 i.setState({ showConfirmTransferSite: true });
1527 handleCancelShowConfirmTransferSite(i: CommentNode) {
1528 i.setState({ showConfirmTransferSite: false });
1531 get isCommentNew(): boolean {
1532 let now = moment.utc().subtract(10, "minutes");
1533 let then = moment.utc(this.props.node.comment_view.comment.published);
1534 return now.isBefore(then);
1537 handleCommentCollapse(i: CommentNode) {
1538 i.setState({ collapsed: !i.state.collapsed });
1542 handleViewSource(i: CommentNode) {
1543 i.setState({ viewSource: !i.state.viewSource });
1546 handleShowAdvanced(i: CommentNode) {
1547 i.setState({ showAdvanced: !i.state.showAdvanced });
1551 handleFetchChildren(i: CommentNode) {
1552 let form: GetComments = {
1553 post_id: i.props.node.comment_view.post.id,
1554 parent_id: i.props.node.comment_view.comment.id,
1555 max_depth: commentTreeMaxDepth,
1559 auth: myAuth(false),
1562 WebSocketService.Instance.send(wsClient.getComments(form));
1566 if (this.state.my_vote == 1) {
1568 } else if (this.state.my_vote == -1) {
1569 return "text-danger";
1571 return "text-muted";
1575 get pointsTippy(): string {
1576 let points = i18n.t("number_of_points", {
1577 count: Number(this.state.score),
1578 formattedCount: numToSI(this.state.score),
1581 let upvotes = i18n.t("number_of_upvotes", {
1582 count: Number(this.state.upvotes),
1583 formattedCount: numToSI(this.state.upvotes),
1586 let downvotes = i18n.t("number_of_downvotes", {
1587 count: Number(this.state.downvotes),
1588 formattedCount: numToSI(this.state.downvotes),
1591 return `${points} • ${upvotes} • ${downvotes}`;
1594 get expandText(): string {
1595 return this.state.collapsed ? i18n.t("expand") : i18n.t("collapse");