-import { Component, linkEvent } from 'inferno';
-import { Link } from 'inferno-router';
+import { Component, linkEvent } from "inferno";
+import { Link } from "inferno-router";
import {
CreateCommentLike,
DeleteComment,
TransferSite,
CommentView,
UserMentionView,
-} from 'lemmy-js-client';
-import { CommentNode as CommentNodeI, BanType } from '../interfaces';
-import { WebSocketService, UserService } from '../services';
+} from "lemmy-js-client";
+import { CommentNode as CommentNodeI, BanType } from "../interfaces";
+import { WebSocketService, UserService } from "../services";
import {
mdToHtml,
getUnixTime,
colorList,
wsClient,
authField,
-} from '../utils';
-import moment from 'moment';
-import { MomentTime } from './moment-time';
-import { CommentForm } from './comment-form';
-import { CommentNodes } from './comment-nodes';
-import { UserListing } from './user-listing';
-import { CommunityLink } from './community-link';
-import { Icon, Spinner } from './icon';
-import { i18n } from '../i18next';
+} from "../utils";
+import moment from "moment";
+import { MomentTime } from "./moment-time";
+import { CommentForm } from "./comment-form";
+import { CommentNodes } from "./comment-nodes";
+import { UserListing } from "./user-listing";
+import { CommunityLink } from "./community-link";
+import { Icon, Spinner } from "./icon";
+import { i18n } from "../i18next";
interface CommentNodeState {
showReply: boolean;
return (
<div
className={`comment ${
- cv.comment.parent_id && !this.props.noIndent ? 'ml-1' : ''
+ cv.comment.parent_id && !this.props.noIndent ? "ml-1" : ""
}`}
>
<div
id={`comment-${cv.comment.id}`}
className={`details comment-node py-2 ${
- !this.props.noBorder ? 'border-top border-light' : ''
- } ${this.isCommentNew ? 'mark' : ''}`}
+ !this.props.noBorder ? "border-top border-light" : ""
+ } ${this.isCommentNew ? "mark" : ""}`}
style={
!this.props.noIndent &&
cv.comment.parent_id &&
}
>
<div
- class={`${!this.props.noIndent && cv.comment.parent_id && 'ml-2'}`}
+ class={`${!this.props.noIndent && cv.comment.parent_id && "ml-2"}`}
>
<div class="d-flex flex-wrap align-items-center text-muted small">
<span class="mr-2">
{this.isMod && (
<div className="badge badge-light d-none d-sm-inline mr-2">
- {i18n.t('mod')}
+ {i18n.t("mod")}
</div>
)}
{this.isAdmin && (
<div className="badge badge-light d-none d-sm-inline mr-2">
- {i18n.t('admin')}
+ {i18n.t("admin")}
</div>
)}
{this.isPostCreator && (
<div className="badge badge-light d-none d-sm-inline mr-2">
- {i18n.t('creator')}
+ {i18n.t("creator")}
</div>
)}
{(cv.creator_banned_from_community || cv.creator.banned) && (
<div className="badge badge-danger mr-2">
- {i18n.t('banned')}
+ {i18n.t("banned")}
</div>
)}
{this.props.showCommunity && (
<>
- <span class="mx-1">{i18n.t('to')}</span>
+ <span class="mx-1">{i18n.t("to")}</span>
<CommunityLink community={cv.community} />
<span class="mx-2">•</span>
<Link className="mr-2" to={`/post/${cv.post.id}`}>
class="btn btn-sm text-muted"
onClick={linkEvent(this, this.handleCommentCollapse)}
aria-label={
- this.state.collapsed ? i18n.t('expand') : i18n.t('collapse')
+ this.state.collapsed ? i18n.t("expand") : i18n.t("collapse")
}
>
- {this.state.collapsed ? '+' : '—'}
+ {this.state.collapsed ? "+" : "—"}
</button>
{/* This is an expanding spacer for mobile */}
<div className="mr-lg-4 flex-grow-1 flex-lg-grow-0 unselectable pointer mx-2"></div>
>
<span
class="mr-1 font-weight-bold"
- aria-label={i18n.t('number_of_points', {
+ aria-label={i18n.t("number_of_points", {
count: this.state.score,
})}
>
onClick={linkEvent(this, this.handleMarkRead)}
data-tippy-content={
this.commentOrMentionRead
- ? i18n.t('mark_as_unread')
- : i18n.t('mark_as_read')
+ ? i18n.t("mark_as_unread")
+ : i18n.t("mark_as_read")
}
aria-label={
this.commentOrMentionRead
- ? i18n.t('mark_as_unread')
- : i18n.t('mark_as_read')
+ ? i18n.t("mark_as_unread")
+ : i18n.t("mark_as_read")
}
>
{this.state.readLoading ? (
<Icon
icon="check"
classes={`icon-inline ${
- this.commentOrMentionRead && 'text-success'
+ this.commentOrMentionRead && "text-success"
}`}
/>
)}
<>
<button
className={`btn btn-link btn-animate ${
- this.state.my_vote == 1 ? 'text-info' : 'text-muted'
+ this.state.my_vote == 1 ? "text-info" : "text-muted"
}`}
onClick={linkEvent(node, this.handleCommentUpvote)}
- data-tippy-content={i18n.t('upvote')}
- aria-label={i18n.t('upvote')}
+ data-tippy-content={i18n.t("upvote")}
+ aria-label={i18n.t("upvote")}
>
<Icon icon="arrow-up1" classes="icon-inline" />
{this.state.upvotes !== this.state.score && (
<button
className={`btn btn-link btn-animate ${
this.state.my_vote == -1
- ? 'text-danger'
- : 'text-muted'
+ ? "text-danger"
+ : "text-muted"
}`}
onClick={linkEvent(node, this.handleCommentDownvote)}
- data-tippy-content={i18n.t('downvote')}
- aria-label={i18n.t('downvote')}
+ data-tippy-content={i18n.t("downvote")}
+ aria-label={i18n.t("downvote")}
>
<Icon icon="arrow-down1" classes="icon-inline" />
{this.state.upvotes !== this.state.score && (
<button
class="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleReplyClick)}
- data-tippy-content={i18n.t('reply')}
- aria-label={i18n.t('reply')}
+ data-tippy-content={i18n.t("reply")}
+ aria-label={i18n.t("reply")}
>
<Icon icon="reply1" classes="icon-inline" />
</button>
<button
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleShowAdvanced)}
- data-tippy-content={i18n.t('more')}
- aria-label={i18n.t('more')}
+ data-tippy-content={i18n.t("more")}
+ aria-label={i18n.t("more")}
>
<Icon icon="more-vertical" classes="icon-inline" />
</button>
<Link
className="text-muted"
to={`/create_private_message/recipient/${cv.creator.id}`}
- title={i18n.t('message').toLowerCase()}
+ title={i18n.t("message").toLowerCase()}
>
<Icon icon="mail" />
</Link>
this.handleSaveCommentClick
)}
data-tippy-content={
- cv.saved ? i18n.t('unsave') : i18n.t('save')
+ cv.saved ? i18n.t("unsave") : i18n.t("save")
}
aria-label={
- cv.saved ? i18n.t('unsave') : i18n.t('save')
+ cv.saved ? i18n.t("unsave") : i18n.t("save")
}
>
{this.state.saveLoading ? (
<Icon
icon="star"
classes={`icon-inline ${
- cv.saved && 'text-warning'
+ cv.saved && "text-warning"
}`}
/>
)}
<button
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleViewSource)}
- data-tippy-content={i18n.t('view_source')}
- aria-label={i18n.t('view_source')}
+ data-tippy-content={i18n.t("view_source")}
+ aria-label={i18n.t("view_source")}
>
<Icon
icon="file-text"
classes={`icon-inline ${
- this.state.viewSource && 'text-success'
+ this.state.viewSource && "text-success"
}`}
/>
</button>
<button
class="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleEditClick)}
- data-tippy-content={i18n.t('edit')}
- aria-label={i18n.t('edit')}
+ data-tippy-content={i18n.t("edit")}
+ aria-label={i18n.t("edit")}
>
<Icon icon="edit" classes="icon-inline" />
</button>
)}
data-tippy-content={
!cv.comment.deleted
- ? i18n.t('delete')
- : i18n.t('restore')
+ ? i18n.t("delete")
+ : i18n.t("restore")
}
aria-label={
!cv.comment.deleted
- ? i18n.t('delete')
- : i18n.t('restore')
+ ? i18n.t("delete")
+ : i18n.t("restore")
}
>
<Icon
icon="trash"
classes={`icon-inline ${
- cv.comment.deleted && 'text-danger'
+ cv.comment.deleted && "text-danger"
}`}
/>
</button>
this,
this.handleModRemoveShow
)}
- aria-label={i18n.t('remove')}
+ aria-label={i18n.t("remove")}
>
- {i18n.t('remove')}
+ {i18n.t("remove")}
</button>
) : (
<button
this,
this.handleModRemoveSubmit
)}
- aria-label={i18n.t('restore')}
+ aria-label={i18n.t("restore")}
>
- {i18n.t('restore')}
+ {i18n.t("restore")}
</button>
)}
</>
this,
this.handleModBanFromCommunityShow
)}
- aria-label={i18n.t('ban')}
+ aria-label={i18n.t("ban")}
>
- {i18n.t('ban')}
+ {i18n.t("ban")}
</button>
) : (
<button
this,
this.handleModBanFromCommunitySubmit
)}
- aria-label={i18n.t('unban')}
+ aria-label={i18n.t("unban")}
>
- {i18n.t('unban')}
+ {i18n.t("unban")}
</button>
))}
{!cv.creator_banned_from_community &&
)}
aria-label={
this.isMod
- ? i18n.t('remove_as_mod')
- : i18n.t('appoint_as_mod')
+ ? i18n.t("remove_as_mod")
+ : i18n.t("appoint_as_mod")
}
>
{this.isMod
- ? i18n.t('remove_as_mod')
- : i18n.t('appoint_as_mod')}
+ ? i18n.t("remove_as_mod")
+ : i18n.t("appoint_as_mod")}
</button>
) : (
<>
<button
class="btn btn-link btn-animate text-muted"
- aria-label={i18n.t('are_you_sure')}
+ aria-label={i18n.t("are_you_sure")}
>
- {i18n.t('are_you_sure')}
+ {i18n.t("are_you_sure")}
</button>
<button
class="btn btn-link btn-animate text-muted"
this,
this.handleAddModToCommunity
)}
- aria-label={i18n.t('yes')}
+ aria-label={i18n.t("yes")}
>
- {i18n.t('yes')}
+ {i18n.t("yes")}
</button>
<button
class="btn btn-link btn-animate text-muted"
this,
this.handleCancelConfirmAppointAsMod
)}
- aria-label={i18n.t('no')}
+ aria-label={i18n.t("no")}
>
- {i18n.t('no')}
+ {i18n.t("no")}
</button>
</>
))}
this,
this.handleShowConfirmTransferCommunity
)}
- aria-label={i18n.t('transfer_community')}
+ aria-label={i18n.t("transfer_community")}
>
- {i18n.t('transfer_community')}
+ {i18n.t("transfer_community")}
</button>
) : (
<>
<button
class="btn btn-link btn-animate text-muted"
- aria-label={i18n.t('are_you_sure')}
+ aria-label={i18n.t("are_you_sure")}
>
- {i18n.t('are_you_sure')}
+ {i18n.t("are_you_sure")}
</button>
<button
class="btn btn-link btn-animate text-muted"
this,
this.handleTransferCommunity
)}
- aria-label={i18n.t('yes')}
+ aria-label={i18n.t("yes")}
>
- {i18n.t('yes')}
+ {i18n.t("yes")}
</button>
<button
class="btn btn-link btn-animate text-muted"
this
.handleCancelShowConfirmTransferCommunity
)}
- aria-label={i18n.t('no')}
+ aria-label={i18n.t("no")}
>
- {i18n.t('no')}
+ {i18n.t("no")}
</button>
</>
))}
this,
this.handleModBanShow
)}
- aria-label={i18n.t('ban_from_site')}
+ aria-label={i18n.t("ban_from_site")}
>
- {i18n.t('ban_from_site')}
+ {i18n.t("ban_from_site")}
</button>
) : (
<button
this,
this.handleModBanSubmit
)}
- aria-label={i18n.t('unban_from_site')}
+ aria-label={i18n.t("unban_from_site")}
>
- {i18n.t('unban_from_site')}
+ {i18n.t("unban_from_site")}
</button>
))}
{!cv.creator.banned &&
)}
aria-label={
this.isAdmin
- ? i18n.t('remove_as_admin')
- : i18n.t('appoint_as_admin')
+ ? i18n.t("remove_as_admin")
+ : i18n.t("appoint_as_admin")
}
>
{this.isAdmin
- ? i18n.t('remove_as_admin')
- : i18n.t('appoint_as_admin')}
+ ? i18n.t("remove_as_admin")
+ : i18n.t("appoint_as_admin")}
</button>
) : (
<>
<button class="btn btn-link btn-animate text-muted">
- {i18n.t('are_you_sure')}
+ {i18n.t("are_you_sure")}
</button>
<button
class="btn btn-link btn-animate text-muted"
this,
this.handleAddAdmin
)}
- aria-label={i18n.t('yes')}
+ aria-label={i18n.t("yes")}
>
- {i18n.t('yes')}
+ {i18n.t("yes")}
</button>
<button
class="btn btn-link btn-animate text-muted"
this,
this.handleCancelConfirmAppointAsAdmin
)}
- aria-label={i18n.t('no')}
+ aria-label={i18n.t("no")}
>
- {i18n.t('no')}
+ {i18n.t("no")}
</button>
</>
))}
this,
this.handleShowConfirmTransferSite
)}
- aria-label={i18n.t('transfer_site')}
+ aria-label={i18n.t("transfer_site")}
>
- {i18n.t('transfer_site')}
+ {i18n.t("transfer_site")}
</button>
) : (
<>
<button
class="btn btn-link btn-animate text-muted"
- aria-label={i18n.t('are_you_sure')}
+ aria-label={i18n.t("are_you_sure")}
>
- {i18n.t('are_you_sure')}
+ {i18n.t("are_you_sure")}
</button>
<button
class="btn btn-link btn-animate text-muted"
this,
this.handleTransferSite
)}
- aria-label={i18n.t('yes')}
+ aria-label={i18n.t("yes")}
>
- {i18n.t('yes')}
+ {i18n.t("yes")}
</button>
<button
class="btn btn-link btn-animate text-muted"
this,
this.handleCancelShowConfirmTransferSite
)}
- aria-label={i18n.t('no')}
+ aria-label={i18n.t("no")}
>
- {i18n.t('no')}
+ {i18n.t("no")}
</button>
</>
))}
class="sr-only"
htmlFor={`mod-remove-reason-${cv.comment.id}`}
>
- {i18n.t('reason')}
+ {i18n.t("reason")}
</label>
<input
type="text"
id={`mod-remove-reason-${cv.comment.id}`}
class="form-control mr-2"
- placeholder={i18n.t('reason')}
+ placeholder={i18n.t("reason")}
value={this.state.removeReason}
onInput={linkEvent(this, this.handleModRemoveReasonChange)}
/>
<button
type="submit"
class="btn btn-secondary"
- aria-label={i18n.t('remove_comment')}
+ aria-label={i18n.t("remove_comment")}
>
- {i18n.t('remove_comment')}
+ {i18n.t("remove_comment")}
</button>
</form>
)}
class="col-form-label"
htmlFor={`mod-ban-reason-${cv.comment.id}`}
>
- {i18n.t('reason')}
+ {i18n.t("reason")}
</label>
<input
type="text"
id={`mod-ban-reason-${cv.comment.id}`}
class="form-control mr-2"
- placeholder={i18n.t('reason')}
+ placeholder={i18n.t("reason")}
value={this.state.banReason}
onInput={linkEvent(this, this.handleModBanReasonChange)}
/>
onChange={linkEvent(this, this.handleModRemoveDataChange)}
/>
<label class="form-check-label" htmlFor="mod-ban-remove-data">
- {i18n.t('remove_posts_comments')}
+ {i18n.t("remove_posts_comments")}
</label>
</div>
</div>
<button
type="submit"
class="btn btn-secondary"
- aria-label={i18n.t('ban')}
+ aria-label={i18n.t("ban")}
>
- {i18n.t('ban')} {cv.creator.name}
+ {i18n.t("ban")} {cv.creator.name}
</button>
</div>
</form>
<Link
className="btn btn-link btn-animate text-muted"
to={`/post/${cv.post.id}/comment/${cv.comment.id}`}
- title={this.props.showContext ? i18n.t('show_context') : i18n.t('link')}
+ title={this.props.showContext ? i18n.t("show_context") : i18n.t("link")}
>
<Icon icon="link" classes="icon-inline" />
</Link>
get commentUnlessRemoved(): string {
let comment = this.props.node.comment_view.comment;
return comment.removed
- ? `*${i18n.t('removed')}*`
+ ? `*${i18n.t("removed")}*`
: comment.deleted
- ? `*${i18n.t('deleted')}*`
+ ? `*${i18n.t("deleted")}*`
: comment.content;
}
}
get isCommentNew(): boolean {
- let now = moment.utc().subtract(10, 'minutes');
+ let now = moment.utc().subtract(10, "minutes");
let then = moment.utc(this.props.node.comment_view.comment.published);
return now.isBefore(then);
}
get scoreColor() {
if (this.state.my_vote == 1) {
- return 'text-info';
+ return "text-info";
} else if (this.state.my_vote == -1) {
- return 'text-danger';
+ return "text-danger";
} else {
- return 'text-muted';
+ return "text-muted";
}
}
get pointsTippy(): string {
- let points = i18n.t('number_of_points', {
+ let points = i18n.t("number_of_points", {
count: this.state.score,
});
- let upvotes = i18n.t('number_of_upvotes', {
+ let upvotes = i18n.t("number_of_upvotes", {
count: this.state.upvotes,
});
- let downvotes = i18n.t('number_of_downvotes', {
+ let downvotes = i18n.t("number_of_downvotes", {
count: this.state.downvotes,
});