} from "lemmy-js-client";
import { relTags } from "../../config";
import { getExternalHost, getHttpBase } from "../../env";
-import { i18n } from "../../i18next";
import { BanType, PostFormParams, PurgeType, VoteType } from "../../interfaces";
import { mdNoImages, mdToHtml, mdToHtmlInline } 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";
<a
href={this.imageSrc}
className="text-body d-inline-block position-relative mb-2"
- data-tippy-content={i18n.t("expand_here")}
+ data-tippy-content={I18NextService.i18n.t("expand_here")}
onClick={linkEvent(this, this.handleImageExpandClick)}
- aria-label={i18n.t("expand_here")}
+ aria-label={I18NextService.i18n.t("expand_here")}
>
{this.imgThumb(this.imageSrc)}
<Icon icon="image" classes="mini-overlay" />
<Link
className="text-body"
to={`/post/${post.id}`}
- title={i18n.t("comments")}
+ title={I18NextService.i18n.t("comments")}
>
<div className="thumbnail rounded bg-light d-flex justify-content-center">
<Icon icon="message-square" classes="d-flex align-items-center" />
<PersonListing person={post_view.creator} />
{this.creatorIsMod_ && (
- <span className="mx-1 badge text-bg-light">{i18n.t("mod")}</span>
+ <span className="mx-1 badge text-bg-light">
+ {I18NextService.i18n.t("mod")}
+ </span>
)}
{this.creatorIsAdmin_ && (
- <span className="mx-1 badge text-bg-light">{i18n.t("admin")}</span>
+ <span className="mx-1 badge text-bg-light">
+ {I18NextService.i18n.t("admin")}
+ </span>
)}
{post_view.creator.bot_account && (
<span className="mx-1 badge text-bg-light">
- {i18n.t("bot_account").toLowerCase()}
+ {I18NextService.i18n.t("bot_account").toLowerCase()}
</span>
)}
{this.props.showCommunity && (
<>
{" "}
- {i18n.t("to")} <CommunityLink community={post_view.community} />
+ {I18NextService.i18n.t("to")}{" "}
+ <CommunityLink community={post_view.community} />
</>
)}
</li>
this.postView.my_vote == 1 ? "text-info" : "text-muted"
}`}
onClick={linkEvent(this, this.handleUpvote)}
- data-tippy-content={i18n.t("upvote")}
- aria-label={i18n.t("upvote")}
+ data-tippy-content={I18NextService.i18n.t("upvote")}
+ aria-label={I18NextService.i18n.t("upvote")}
aria-pressed={this.postView.my_vote === 1}
>
{this.state.upvoteLoading ? (
this.postView.my_vote == -1 ? "text-danger" : "text-muted"
}`}
onClick={linkEvent(this, this.handleDownvote)}
- data-tippy-content={i18n.t("downvote")}
- aria-label={i18n.t("downvote")}
+ data-tippy-content={I18NextService.i18n.t("downvote")}
+ aria-label={I18NextService.i18n.t("downvote")}
aria-pressed={this.postView.my_vote === -1}
>
{this.state.downvoteLoading ? (
: "text-primary"
}`}
to={`/post/${post.id}`}
- title={i18n.t("comments")}
+ title={I18NextService.i18n.t("comments")}
>
<span
className="d-inline"
(post.thumbnail_url && (
<button
className="btn btn-sm text-monospace text-muted d-inline-block"
- data-tippy-content={i18n.t("expand_here")}
+ data-tippy-content={I18NextService.i18n.t("expand_here")}
onClick={linkEvent(this, this.handleImageExpandClick)}
>
<Icon
))}
{post.removed && (
<small className="ms-2 badge text-bg-secondary">
- {i18n.t("removed")}
+ {I18NextService.i18n.t("removed")}
</small>
)}
{post.deleted && (
<small
className="unselectable pointer ms-2 text-muted font-italic"
- data-tippy-content={i18n.t("deleted")}
+ data-tippy-content={I18NextService.i18n.t("deleted")}
>
<Icon icon="trash" classes="icon-inline text-danger" />
</small>
{post.locked && (
<small
className="unselectable pointer ms-2 text-muted font-italic"
- data-tippy-content={i18n.t("locked")}
+ data-tippy-content={I18NextService.i18n.t("locked")}
>
<Icon icon="lock" classes="icon-inline text-danger" />
</small>
{post.featured_community && (
<small
className="unselectable pointer ms-2 text-muted font-italic"
- data-tippy-content={i18n.t("featured_in_community")}
- aria-label={i18n.t("featured_in_community")}
+ data-tippy-content={I18NextService.i18n.t(
+ "featured_in_community"
+ )}
+ aria-label={I18NextService.i18n.t("featured_in_community")}
>
<Icon icon="pin" classes="icon-inline text-primary" />
</small>
{post.featured_local && (
<small
className="unselectable pointer ms-2 text-muted font-italic"
- data-tippy-content={i18n.t("featured_in_local")}
- aria-label={i18n.t("featured_in_local")}
+ data-tippy-content={I18NextService.i18n.t("featured_in_local")}
+ aria-label={I18NextService.i18n.t("featured_in_local")}
>
<Icon icon="pin" classes="icon-inline text-secondary" />
</small>
)}
{post.nsfw && (
<small className="ms-2 badge text-bg-danger">
- {i18n.t("nsfw")}
+ {I18NextService.i18n.t("nsfw")}
</small>
)}
</div>
return dupes && dupes.length > 0 ? (
<ul className="list-inline mb-1 small text-muted">
<>
- <li className="list-inline-item me-2">{i18n.t("cross_posted_to")}</li>
+ <li className="list-inline-item me-2">
+ {I18NextService.i18n.t("cross_posted_to")}
+ </li>
{dupes.map(pv => (
<li key={pv.post.id} className="list-inline-item me-2">
<Link to={`/post/${pv.post.id}`}>
{!post.local && (
<a
className="btn btn-sm btn-animate text-muted py-0"
- title={i18n.t("link")}
+ title={I18NextService.i18n.t("link")}
href={post.ap_id}
>
<Icon icon="fedilink" inline />
<button
className="btn btn-sm btn-animate text-muted py-0 dropdown-toggle"
onClick={linkEvent(this, this.handleShowAdvanced)}
- data-tippy-content={i18n.t("more")}
+ data-tippy-content={I18NextService.i18n.t("more")}
data-bs-toggle="dropdown"
aria-expanded="false"
aria-controls="advancedButtonsDropdown"
- aria-label={i18n.t("more")}
+ aria-label={I18NextService.i18n.t("more")}
>
<Icon icon="more-vertical" inline />
</button>
get commentsButton() {
const post_view = this.postView;
- const title = i18n.t("number_of_comments", {
+ const title = I18NextService.i18n.t("number_of_comments", {
count: Number(post_view.counts.comments),
formattedCount: Number(post_view.counts.comments),
});
</span>
{this.unreadCount && (
<span className="text-muted fst-italic">
- ({this.unreadCount} {i18n.t("new")})
+ ({this.unreadCount} {I18NextService.i18n.t("new")})
</span>
)}
</Link>
}`}
{...tippy}
onClick={linkEvent(this, this.handleUpvote)}
- aria-label={i18n.t("upvote")}
+ aria-label={I18NextService.i18n.t("upvote")}
aria-pressed={this.postView.my_vote === 1}
>
{this.state.upvoteLoading ? (
}`}
onClick={linkEvent(this, this.handleDownvote)}
{...tippy}
- aria-label={i18n.t("downvote")}
+ aria-label={I18NextService.i18n.t("downvote")}
aria-pressed={this.postView.my_vote === -1}
>
{this.state.downvoteLoading ? (
get saveButton() {
const saved = this.postView.saved;
- const label = saved ? i18n.t("unsave") : i18n.t("save");
+ const label = saved
+ ? I18NextService.i18n.t("unsave")
+ : I18NextService.i18n.t("save");
return (
<button
className="btn btn-sm btn-animate text-muted py-0"
key: "",
search: "",
}}
- title={i18n.t("cross_post")}
- data-tippy-content={i18n.t("cross_post")}
- aria-label={i18n.t("cross_post")}
+ title={I18NextService.i18n.t("cross_post")}
+ data-tippy-content={I18NextService.i18n.t("cross_post")}
+ aria-label={I18NextService.i18n.t("cross_post")}
>
<Icon icon="copy" inline />
</Link>
<button
className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
onClick={linkEvent(this, this.handleShowReportDialog)}
- aria-label={i18n.t("show_report_dialog")}
+ aria-label={I18NextService.i18n.t("show_report_dialog")}
>
<Icon classes="me-1" icon="flag" inline />
- {i18n.t("create_report")}
+ {I18NextService.i18n.t("create_report")}
</button>
);
}
<button
className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
onClick={linkEvent(this, this.handleBlockPersonClick)}
- aria-label={i18n.t("block_user")}
+ aria-label={I18NextService.i18n.t("block_user")}
>
{this.state.blockLoading ? (
<Spinner />
) : (
<Icon classes="me-1" icon="slash" inline />
)}
- {i18n.t("block_user")}
+ {I18NextService.i18n.t("block_user")}
</button>
);
}
<button
className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
onClick={linkEvent(this, this.handleEditClick)}
- aria-label={i18n.t("edit")}
+ aria-label={I18NextService.i18n.t("edit")}
>
<Icon classes="me-1" icon="edit" inline />
- {i18n.t("edit")}
+ {I18NextService.i18n.t("edit")}
</button>
);
}
get deleteButton() {
const deleted = this.postView.post.deleted;
- const label = !deleted ? i18n.t("delete") : i18n.t("restore");
+ const label = !deleted
+ ? I18NextService.i18n.t("delete")
+ : I18NextService.i18n.t("restore");
return (
<button
className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
<button
className="btn btn-sm btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleViewSource)}
- data-tippy-content={i18n.t("view_source")}
- aria-label={i18n.t("view_source")}
+ data-tippy-content={I18NextService.i18n.t("view_source")}
+ aria-label={I18NextService.i18n.t("view_source")}
>
<Icon
icon="file-text"
get lockButton() {
const locked = this.postView.post.locked;
- const label = locked ? i18n.t("unlock") : i18n.t("lock");
+ const label = locked
+ ? I18NextService.i18n.t("unlock")
+ : I18NextService.i18n.t("lock");
return (
<button
className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
get featureButtons() {
const featuredCommunity = this.postView.post.featured_community;
const labelCommunity = featuredCommunity
- ? i18n.t("unfeature_from_community")
- : i18n.t("feature_in_community");
+ ? I18NextService.i18n.t("unfeature_from_community")
+ : I18NextService.i18n.t("feature_in_community");
const featuredLocal = this.postView.post.featured_local;
const labelLocal = featuredLocal
- ? i18n.t("unfeature_from_local")
- : i18n.t("feature_in_local");
+ ? I18NextService.i18n.t("unfeature_from_local")
+ : I18NextService.i18n.t("feature_in_local");
return (
<>
<li>
})}
inline
/>
- {i18n.t("community")}
+ {I18NextService.i18n.t("community")}
</>
)}
</button>
})}
inline
/>
- {i18n.t("local")}
+ {I18NextService.i18n.t("local")}
</>
)}
</button>
{this.state.removeLoading ? (
<Spinner />
) : !removed ? (
- i18n.t("remove")
+ I18NextService.i18n.t("remove")
) : (
- i18n.t("restore")
+ I18NextService.i18n.t("restore")
)}
</button>
);
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")}
</button>
) : (
<button
this,
this.handleModBanFromCommunitySubmit
)}
- aria-label={i18n.t("unban")}
+ aria-label={I18NextService.i18n.t("unban")}
>
- {this.state.banLoading ? <Spinner /> : i18n.t("unban")}
+ {this.state.banLoading ? (
+ <Spinner />
+ ) : (
+ I18NextService.i18n.t("unban")
+ )}
</button>
))}
{!post_view.creator_banned_from_community && (
onClick={linkEvent(this, this.handleAddModToCommunity)}
aria-label={
this.creatorIsMod_
- ? i18n.t("remove_as_mod")
- : i18n.t("appoint_as_mod")
+ ? I18NextService.i18n.t("remove_as_mod")
+ : I18NextService.i18n.t("appoint_as_mod")
}
>
{this.state.addModLoading ? (
<Spinner />
) : this.creatorIsMod_ ? (
- i18n.t("remove_as_mod")
+ I18NextService.i18n.t("remove_as_mod")
) : (
- i18n.t("appoint_as_mod")
+ I18NextService.i18n.t("appoint_as_mod")
)}
</button>
)}
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")}
</button>
) : (
<>
<button
className="d-inline-block me-1 btn btn-link btn-animate text-muted py-0"
- aria-label={i18n.t("are_you_sure")}
+ aria-label={I18NextService.i18n.t("are_you_sure")}
>
- {i18n.t("are_you_sure")}
+ {I18NextService.i18n.t("are_you_sure")}
</button>
<button
className="btn btn-link btn-animate text-muted py-0 d-inline-block me-1"
- aria-label={i18n.t("yes")}
+ aria-label={I18NextService.i18n.t("yes")}
onClick={linkEvent(this, this.handleTransferCommunity)}
>
- {this.state.transferLoading ? <Spinner /> : i18n.t("yes")}
+ {this.state.transferLoading ? (
+ <Spinner />
+ ) : (
+ I18NextService.i18n.t("yes")
+ )}
</button>
<button
className="btn btn-link btn-animate text-muted py-0 d-inline-block"
this,
this.handleCancelShowConfirmTransferCommunity
)}
- aria-label={i18n.t("no")}
+ aria-label={I18NextService.i18n.t("no")}
>
- {i18n.t("no")}
+ {I18NextService.i18n.t("no")}
</button>
</>
))}
<button
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(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")}
</button>
) : (
<button
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleModBanSubmit)}
- aria-label={i18n.t("unban_from_site")}
+ aria-label={I18NextService.i18n.t("unban_from_site")}
>
{this.state.banLoading ? (
<Spinner />
) : (
- i18n.t("unban_from_site")
+ I18NextService.i18n.t("unban_from_site")
)}
</button>
)}
<button
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(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")}
</button>
<button
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handlePurgePostShow)}
- aria-label={i18n.t("purge_post")}
+ aria-label={I18NextService.i18n.t("purge_post")}
>
- {i18n.t("purge_post")}
+ {I18NextService.i18n.t("purge_post")}
</button>
</>
)}
onClick={linkEvent(this, this.handleAddAdmin)}
aria-label={
this.creatorIsAdmin_
- ? i18n.t("remove_as_admin")
- : i18n.t("appoint_as_admin")
+ ? I18NextService.i18n.t("remove_as_admin")
+ : I18NextService.i18n.t("appoint_as_admin")
}
>
{this.state.addAdminLoading ? (
<Spinner />
) : this.creatorIsAdmin_ ? (
- i18n.t("remove_as_admin")
+ I18NextService.i18n.t("remove_as_admin")
) : (
- i18n.t("appoint_as_admin")
+ I18NextService.i18n.t("appoint_as_admin")
)}
</button>
)}
const post = this.postView;
const purgeTypeText =
this.state.purgeType == PurgeType.Post
- ? i18n.t("purge_post")
- : `${i18n.t("purge")} ${post.creator.name}`;
+ ? I18NextService.i18n.t("purge_post")
+ : `${I18NextService.i18n.t("purge")} ${post.creator.name}`;
return (
<>
{this.state.showRemoveDialog && (
className="visually-hidden"
htmlFor="post-listing-remove-reason"
>
- {i18n.t("reason")}
+ {I18NextService.i18n.t("reason")}
</label>
<input
type="text"
id="post-listing-remove-reason"
className="form-control me-2"
- placeholder={i18n.t("reason")}
+ placeholder={I18NextService.i18n.t("reason")}
value={this.state.removeReason}
onInput={linkEvent(this, this.handleModRemoveReasonChange)}
/>
<button
type="submit"
className="btn btn-secondary"
- aria-label={i18n.t("remove_post")}
+ aria-label={I18NextService.i18n.t("remove_post")}
>
- {this.state.removeLoading ? <Spinner /> : i18n.t("remove_post")}
+ {this.state.removeLoading ? (
+ <Spinner />
+ ) : (
+ I18NextService.i18n.t("remove_post")
+ )}
</button>
</form>
)}
className="col-form-label"
htmlFor="post-listing-ban-reason"
>
- {i18n.t("reason")}
+ {I18NextService.i18n.t("reason")}
</label>
<input
type="text"
id="post-listing-ban-reason"
className="form-control me-2"
- placeholder={i18n.t("reason")}
+ placeholder={I18NextService.i18n.t("reason")}
value={this.state.banReason}
onInput={linkEvent(this, this.handleModBanReasonChange)}
/>
<label className="col-form-label" htmlFor={`mod-ban-expires`}>
- {i18n.t("expires")}
+ {I18NextService.i18n.t("expires")}
</label>
<input
type="number"
id={`mod-ban-expires`}
className="form-control me-2"
- placeholder={i18n.t("number_of_days")}
+ placeholder={I18NextService.i18n.t("number_of_days")}
value={this.state.banExpireDays}
onInput={linkEvent(this, this.handleModBanExpireDaysChange)}
/>
<label
className="form-check-label"
htmlFor="mod-ban-remove-data"
- title={i18n.t("remove_content_more")}
+ title={I18NextService.i18n.t("remove_content_more")}
>
- {i18n.t("remove_content")}
+ {I18NextService.i18n.t("remove_content")}
</label>
</div>
</div>
{/* TODO hold off on expires until later */}
{/* <div class="mb-3 row"> */}
{/* <label class="col-form-label">Expires</label> */}
- {/* <input type="date" class="form-control me-2" placeholder={i18n.t('expires')} value={this.state.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} /> */}
+ {/* <input type="date" class="form-control me-2" placeholder={I18NextService.i18n.t('expires')} value={this.state.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} /> */}
{/* </div> */}
<div className="mb-3 row">
<button
type="submit"
className="btn btn-secondary"
- aria-label={i18n.t("ban")}
+ aria-label={I18NextService.i18n.t("ban")}
>
{this.state.banLoading ? (
<Spinner />
) : (
<span>
- {i18n.t("ban")} {post.creator.name}
+ {I18NextService.i18n.t("ban")} {post.creator.name}
</span>
)}
</button>
onSubmit={linkEvent(this, this.handleReportSubmit)}
>
<label className="visually-hidden" htmlFor="post-report-reason">
- {i18n.t("reason")}
+ {I18NextService.i18n.t("reason")}
</label>
<input
type="text"
id="post-report-reason"
className="form-control me-2"
- placeholder={i18n.t("reason")}
+ placeholder={I18NextService.i18n.t("reason")}
required
value={this.state.reportReason}
onInput={linkEvent(this, this.handleReportReasonChange)}
<button
type="submit"
className="btn btn-secondary"
- aria-label={i18n.t("create_report")}
+ aria-label={I18NextService.i18n.t("create_report")}
>
- {this.state.reportLoading ? <Spinner /> : i18n.t("create_report")}
+ {this.state.reportLoading ? (
+ <Spinner />
+ ) : (
+ I18NextService.i18n.t("create_report")
+ )}
</button>
</form>
)}
>
<PurgeWarning />
<label className="visually-hidden" htmlFor="purge-reason">
- {i18n.t("reason")}
+ {I18NextService.i18n.t("reason")}
</label>
<input
type="text"
id="purge-reason"
className="form-control me-2"
- placeholder={i18n.t("reason")}
+ placeholder={I18NextService.i18n.t("reason")}
value={this.state.purgeReason}
onInput={linkEvent(this, this.handlePurgeReasonChange)}
/>
const body = post.body;
return body
- ? `${i18n.t("cross_posted_from")} ${post.ap_id}\n\n${body.replace(
- /^/gm,
- "> "
- )}`
+ ? `${I18NextService.i18n.t("cross_posted_from")} ${
+ post.ap_id
+ }\n\n${body.replace(/^/gm, "> ")}`
: undefined;
}
}
get pointsTippy(): string {
- const points = i18n.t("number_of_points", {
+ const points = I18NextService.i18n.t("number_of_points", {
count: Number(this.postView.counts.score),
formattedCount: Number(this.postView.counts.score),
});
- const upvotes = i18n.t("number_of_upvotes", {
+ const upvotes = I18NextService.i18n.t("number_of_upvotes", {
count: Number(this.postView.counts.upvotes),
formattedCount: Number(this.postView.counts.upvotes),
});
- const downvotes = i18n.t("number_of_downvotes", {
+ const downvotes = I18NextService.i18n.t("number_of_downvotes", {
count: Number(this.postView.counts.downvotes),
formattedCount: Number(this.postView.counts.downvotes),
});