X-Git-Url: http://these/git/?a=blobdiff_plain;f=src%2Fshared%2Fcomponents%2Fcomment%2Fcomment-node.tsx;h=7b7f29e5cbc5fda864a6df18f9dfb201150d597f;hb=2911cd8cdb348629a97d60239723b1925210df0a;hp=f6cb4b221f77f16b0eb4a65d655883f88befd923;hpb=51091185252f8796ed8adb6b77a032d8d1cc6961;p=lemmy-ui.git diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx index f6cb4b2..7b7f29e 100644 --- a/src/shared/components/comment/comment-node.tsx +++ b/src/shared/components/comment/comment-node.tsx @@ -3,7 +3,6 @@ import { getCommentParentId, myAuth, myAuthRequired, - newVote, showScores, } from "@utils/app"; import { futureDaysToUnixTime, numToSI } from "@utils/helpers"; @@ -16,6 +15,9 @@ import { isMod, } from "@utils/roles"; import classNames from "classnames"; +import isBefore from "date-fns/isBefore"; +import parseISO from "date-fns/parseISO"; +import subMinutes from "date-fns/subMinutes"; import { Component, InfernoNode, linkEvent } from "inferno"; import { Link } from "inferno-router"; import { @@ -46,21 +48,22 @@ import { SaveComment, TransferCommunity, } from "lemmy-js-client"; -import moment from "moment"; +import deepEqual from "lodash.isequal"; import { commentTreeMaxDepth } from "../../config"; -import { i18n } from "../../i18next"; import { BanType, CommentNodeI, CommentViewType, PurgeType, - VoteType, + VoteContentType, } from "../../interfaces"; import { mdToHtml, mdToHtmlNoImages } from "../../markdown"; -import { UserService } from "../../services"; +import { I18NextService, UserService } from "../../services"; import { setupTippy } from "../../tippy"; import { Icon, PurgeWarning, Spinner } from "../common/icon"; import { MomentTime } from "../common/moment-time"; +import { UserBadges } from "../common/user-badges"; +import { VoteButtonsCompact } from "../common/vote-buttons"; import { CommunityLink } from "../community/community-link"; import { PersonListing } from "../person/person-listing"; import { CommentForm } from "./comment-form"; @@ -111,7 +114,7 @@ interface CommentNodeProps { moderators?: CommunityModeratorView[]; admins?: PersonView[]; noBorder?: boolean; - noIndent?: boolean; + isTopLevel?: boolean; viewOnly?: boolean; locked?: boolean; markable?: boolean; @@ -197,7 +200,7 @@ export class CommentNode extends Component { componentWillReceiveProps( nextProps: Readonly<{ children?: InfernoNode } & CommentNodeProps> ): void { - if (this.props != nextProps) { + if (!deepEqual(this.props, nextProps)) { this.setState({ showReply: false, showEdit: false, @@ -241,8 +244,8 @@ export class CommentNode extends Component { const purgeTypeText = this.state.purgeType == PurgeType.Comment - ? i18n.t("purge_comment") - : `${i18n.t("purge")} ${cv.creator.name}`; + ? I18NextService.i18n.t("purge_comment") + : `${I18NextService.i18n.t("purge")} ${cv.creator.name}`; const canMod_ = canMod( cv.creator.id, @@ -281,7 +284,7 @@ export class CommentNode extends Component { node.comment_view.counts.child_count > 0; return ( -
  • +
  • { mark: this.isCommentNew || this.commentView.comment.distinguished, })} > -
    +
    - - - + + + {cv.comment.distinguished && ( - - )} - {this.isPostCreator && ( -
    - {i18n.t("creator")} -
    - )} - {isMod_ && ( -
    - {i18n.t("mod")} -
    - )} - {isAdmin_ && ( -
    - {i18n.t("admin")} -
    - )} - {cv.creator.bot_account && ( -
    - {i18n.t("bot_account").toLowerCase()} -
    + )} + + + {this.props.showCommunity && ( <> - {i18n.t("to")} + {I18NextService.i18n.t("to")} • @@ -342,7 +330,9 @@ export class CommentNode extends Component { )} - {this.linkBtn(true)} + + {this.getLinkButton(true)} + {cv.comment.language_id !== 0 && ( { @@ -354,29 +344,18 @@ export class CommentNode extends Component { )} {/* This is an expanding spacer for mobile */}
    + {showScores() && ( <> - - {this.state.upvoteLoading ? ( - - ) : ( - - {numToSI(this.commentView.counts.score)} - - )} - + {numToSI(this.commentView.counts.score)} + • )} @@ -418,21 +397,21 @@ export class CommentNode extends Component { } /> )} -
    - {this.props.showContext && this.linkBtn()} +
    + {this.props.showContext && this.getLinkButton()} {this.props.markable && ( - {this.props.enableDownvotes && ( - - )} + @@ -515,8 +448,8 @@ export class CommentNode extends Component { @@ -527,7 +460,9 @@ export class CommentNode extends Component { @@ -537,10 +472,12 @@ export class CommentNode extends Component { this, this.handleShowReportDialog )} - data-tippy-content={i18n.t( + data-tippy-content={I18NextService.i18n.t( + "show_report_dialog" + )} + aria-label={I18NextService.i18n.t( "show_report_dialog" )} - aria-label={i18n.t("show_report_dialog")} > @@ -550,8 +487,10 @@ export class CommentNode extends Component { this, this.handleBlockPerson )} - data-tippy-content={i18n.t("block_user")} - aria-label={i18n.t("block_user")} + data-tippy-content={I18NextService.i18n.t( + "block_user" + )} + aria-label={I18NextService.i18n.t("block_user")} > {this.state.blockPersonLoading ? ( @@ -565,10 +504,14 @@ export class CommentNode extends Component { className="btn btn-link btn-animate text-muted" onClick={linkEvent(this, this.handleSaveComment)} data-tippy-content={ - cv.saved ? i18n.t("unsave") : i18n.t("save") + cv.saved + ? I18NextService.i18n.t("unsave") + : I18NextService.i18n.t("save") } aria-label={ - cv.saved ? i18n.t("unsave") : i18n.t("save") + cv.saved + ? I18NextService.i18n.t("unsave") + : I18NextService.i18n.t("save") } > {this.state.saveLoading ? ( @@ -585,8 +528,10 @@ export class CommentNode extends Component { @@ -613,13 +560,13 @@ export class CommentNode extends Component { )} data-tippy-content={ !cv.comment.deleted - ? i18n.t("delete") - : i18n.t("restore") + ? I18NextService.i18n.t("delete") + : I18NextService.i18n.t("restore") } aria-label={ !cv.comment.deleted - ? i18n.t("delete") - : i18n.t("restore") + ? I18NextService.i18n.t("delete") + : I18NextService.i18n.t("restore") } > {this.state.deleteLoading ? ( @@ -643,13 +590,13 @@ export class CommentNode extends Component { )} data-tippy-content={ !cv.comment.distinguished - ? i18n.t("distinguish") - : i18n.t("undistinguish") + ? I18NextService.i18n.t("distinguish") + : I18NextService.i18n.t("undistinguish") } aria-label={ !cv.comment.distinguished - ? i18n.t("distinguish") - : i18n.t("undistinguish") + ? I18NextService.i18n.t("distinguish") + : I18NextService.i18n.t("undistinguish") } > { this, this.handleModRemoveShow )} - aria-label={i18n.t("remove")} + aria-label={I18NextService.i18n.t("remove")} > - {i18n.t("remove")} + {I18NextService.i18n.t("remove")} ) : ( )} @@ -705,9 +652,13 @@ export class CommentNode extends Component { this, this.handleModBanFromCommunityShow )} - aria-label={i18n.t("ban_from_community")} + aria-label={I18NextService.i18n.t( + "ban_from_community" + )} > - {i18n.t("ban_from_community")} + {I18NextService.i18n.t( + "ban_from_community" + )} ) : ( ))} @@ -735,21 +686,25 @@ export class CommentNode extends Component { )} aria-label={ isMod_ - ? i18n.t("remove_as_mod") - : i18n.t("appoint_as_mod") + ? I18NextService.i18n.t("remove_as_mod") + : I18NextService.i18n.t( + "appoint_as_mod" + ) } > {isMod_ - ? i18n.t("remove_as_mod") - : i18n.t("appoint_as_mod")} + ? I18NextService.i18n.t("remove_as_mod") + : I18NextService.i18n.t("appoint_as_mod")} ) : ( <> ))} @@ -790,17 +745,21 @@ export class CommentNode extends Component { this, this.handleShowConfirmTransferCommunity )} - aria-label={i18n.t("transfer_community")} + aria-label={I18NextService.i18n.t( + "transfer_community" + )} > - {i18n.t("transfer_community")} + {I18NextService.i18n.t("transfer_community")} ) : ( <> ))} @@ -840,9 +799,11 @@ export class CommentNode extends Component { this, this.handlePurgePersonShow )} - aria-label={i18n.t("purge_user")} + aria-label={I18NextService.i18n.t( + "purge_user" + )} > - {i18n.t("purge_user")} + {I18NextService.i18n.t("purge_user")} {!isBanned(cv.creator) ? ( @@ -862,9 +825,11 @@ export class CommentNode extends Component { this, this.handleModBanShow )} - aria-label={i18n.t("ban_from_site")} + aria-label={I18NextService.i18n.t( + "ban_from_site" + )} > - {i18n.t("ban_from_site")} + {I18NextService.i18n.t("ban_from_site")} ) : ( )} @@ -895,18 +862,24 @@ export class CommentNode extends Component { )} aria-label={ isAdmin_ - ? i18n.t("remove_as_admin") - : i18n.t("appoint_as_admin") + ? I18NextService.i18n.t( + "remove_as_admin" + ) + : I18NextService.i18n.t( + "appoint_as_admin" + ) } > {isAdmin_ - ? i18n.t("remove_as_admin") - : i18n.t("appoint_as_admin")} + ? I18NextService.i18n.t("remove_as_admin") + : I18NextService.i18n.t( + "appoint_as_admin" + )} ) : ( <> ))} @@ -961,7 +934,7 @@ export class CommentNode extends Component { ) : ( <> - {i18n.t("x_more_replies", { + {I18NextService.i18n.t("x_more_replies", { count: node.comment_view.counts.child_count, formattedCount: numToSI( node.comment_view.counts.child_count @@ -983,22 +956,22 @@ export class CommentNode extends Component { className="visually-hidden" htmlFor={`mod-remove-reason-${cv.comment.id}`} > - {i18n.t("reason")} + {I18NextService.i18n.t("reason")} )} @@ -1011,23 +984,23 @@ export class CommentNode extends Component { className="visually-hidden" htmlFor={`report-reason-${cv.comment.id}`} > - {i18n.t("reason")} + {I18NextService.i18n.t("reason")} )} @@ -1038,13 +1011,13 @@ export class CommentNode extends Component { className="col-form-label" htmlFor={`mod-ban-reason-${cv.comment.id}`} > - {i18n.t("reason")} + {I18NextService.i18n.t("reason")} @@ -1052,13 +1025,13 @@ export class CommentNode extends Component { className="col-form-label" htmlFor={`mod-ban-expires-${cv.comment.id}`} > - {i18n.t("expires")} + {I18NextService.i18n.t("expires")} @@ -1074,9 +1047,9 @@ export class CommentNode extends Component {
    @@ -1084,19 +1057,19 @@ export class CommentNode extends Component { {/* TODO hold off on expires until later */} {/*
    */} {/* */} - {/* */} + {/* */} {/*
    */}
    @@ -1108,13 +1081,13 @@ export class CommentNode extends Component {
    @@ -1159,7 +1132,7 @@ export class CommentNode extends Component { allLanguages={this.props.allLanguages} siteLanguages={this.props.siteLanguages} hideImages={this.props.hideImages} - isChild={!this.props.noIndent} + isChild={!this.props.isTopLevel} depth={this.props.node.depth + 1} finished={this.props.finished} onCommentReplyRead={this.props.onCommentReplyRead} @@ -1201,7 +1174,7 @@ export class CommentNode extends Component { } } - linkBtn(small = false) { + getLinkButton(small = false) { const cv = this.commentView; const classnames = classNames("btn btn-link btn-animate text-muted", { @@ -1209,8 +1182,8 @@ export class CommentNode extends Component { }); const title = this.props.showContext - ? i18n.t("show_context") - : i18n.t("link"); + ? I18NextService.i18n.t("show_context") + : I18NextService.i18n.t("link"); // The context button should show the parent comment by default const parentCommentId = getCommentParentId(cv.comment) ?? cv.comment.id; @@ -1255,17 +1228,17 @@ export class CommentNode extends Component { } get pointsTippy(): string { - const points = i18n.t("number_of_points", { + const points = I18NextService.i18n.t("number_of_points", { count: Number(this.commentView.counts.score), formattedCount: numToSI(this.commentView.counts.score), }); - const upvotes = i18n.t("number_of_upvotes", { + const upvotes = I18NextService.i18n.t("number_of_upvotes", { count: Number(this.commentView.counts.upvotes), formattedCount: numToSI(this.commentView.counts.upvotes), }); - const downvotes = i18n.t("number_of_downvotes", { + const downvotes = I18NextService.i18n.t("number_of_downvotes", { count: Number(this.commentView.counts.downvotes), formattedCount: numToSI(this.commentView.counts.downvotes), }); @@ -1274,15 +1247,17 @@ export class CommentNode extends Component { } get expandText(): string { - return this.state.collapsed ? i18n.t("expand") : i18n.t("collapse"); + return this.state.collapsed + ? I18NextService.i18n.t("expand") + : I18NextService.i18n.t("collapse"); } get commentUnlessRemoved(): string { const comment = this.commentView.comment; return comment.removed - ? `*${i18n.t("removed")}*` + ? `*${I18NextService.i18n.t("removed")}*` : comment.deleted - ? `*${i18n.t("deleted")}*` + ? `*${I18NextService.i18n.t("deleted")}*` : comment.content; } @@ -1410,9 +1385,9 @@ export class CommentNode extends Component { } get isCommentNew(): boolean { - const now = moment.utc().subtract(10, "minutes"); - const then = moment.utc(this.commentView.comment.published); - return now.isBefore(then); + const now = subMinutes(new Date(), 10); + const then = parseISO(this.commentView.comment.published); + return isBefore(now, then); } handleCommentCollapse(i: CommentNode) { @@ -1439,24 +1414,6 @@ export class CommentNode extends Component { }); } - handleUpvote(i: CommentNode) { - i.setState({ upvoteLoading: true }); - i.props.onCommentVote({ - comment_id: i.commentId, - score: newVote(VoteType.Upvote, i.commentView.my_vote), - auth: myAuthRequired(), - }); - } - - handleDownvote(i: CommentNode) { - i.setState({ downvoteLoading: true }); - i.props.onCommentVote({ - comment_id: i.commentId, - score: newVote(VoteType.Downvote, i.commentView.my_vote), - auth: myAuthRequired(), - }); - } - handleBlockPerson(i: CommentNode) { i.setState({ blockPersonLoading: true }); i.props.onBlockPerson({ @@ -1500,6 +1457,7 @@ export class CommentNode extends Component { comment_id: i.commentId, removed: !i.commentView.comment.removed, auth: myAuthRequired(), + reason: i.state.removeReason, }); }