+import { myAuthRequired } from "@utils/app";
+import { getUnixTime, hostname } from "@utils/helpers";
import { amAdmin, amMod, amTopMod } from "@utils/roles";
import { Component, InfernoNode, linkEvent } from "inferno";
import { T } from "inferno-i18next-dess";
PurgeCommunity,
RemoveCommunity,
} from "lemmy-js-client";
-import { i18n } from "../../i18next";
-import { UserService } from "../../services";
-import { getUnixTime, hostname, mdToHtml, myAuthRequired } from "../../utils";
+import { mdToHtml } from "../../markdown";
+import { I18NextService, UserService } from "../../services";
import { Badges } from "../common/badges";
import { BannerIconHeader } from "../common/banner-icon-header";
import { Icon, PurgeWarning, Spinner } from "../common/icon";
render() {
return (
- <div>
+ <div className="community-sidebar">
{!this.state.showEdit ? (
this.sidebar()
) : (
communityTitle() {
const community = this.props.community_view.community;
- const subscribed = this.props.community_view.subscribed;
+
return (
<div>
- <h5 className="mb-0">
+ <h2 className="h5 mb-0">
{this.props.showIcon && !community.removed && (
<BannerIconHeader icon={community.icon} banner={community.banner} />
)}
- <span className="mr-2">
+ <span className="me-2">
<CommunityLink community={community} hideAvatar />
</span>
- {subscribed === "Subscribed" && (
- <button
- className="btn btn-secondary btn-sm mr-2"
- onClick={linkEvent(this, this.handleUnfollowCommunity)}
- >
- {this.state.followCommunityLoading ? (
- <Spinner />
- ) : (
- <>
- <Icon icon="check" classes="icon-inline text-success mr-1" />
- {i18n.t("joined")}
- </>
- )}
- </button>
- )}
- {subscribed === "Pending" && (
- <button
- className="btn btn-warning mr-2"
- onClick={linkEvent(this, this.handleUnfollowCommunity)}
- >
- {this.state.followCommunityLoading ? (
- <Spinner />
- ) : (
- i18n.t("subscribe_pending")
- )}
- </button>
- )}
{community.removed && (
- <small className="mr-2 text-muted font-italic">
- {i18n.t("removed")}
+ <small className="me-2 text-muted fst-italic">
+ {I18NextService.i18n.t("removed")}
</small>
)}
{community.deleted && (
- <small className="mr-2 text-muted font-italic">
- {i18n.t("deleted")}
+ <small className="me-2 text-muted fst-italic">
+ {I18NextService.i18n.t("deleted")}
</small>
)}
{community.nsfw && (
- <small className="mr-2 text-muted font-italic">
- {i18n.t("nsfw")}
+ <small className="me-2 text-muted fst-italic">
+ {I18NextService.i18n.t("nsfw")}
</small>
)}
- </h5>
+ </h2>
<CommunityLink
community={community}
realLink
mods() {
return (
<ul className="list-inline small">
- <li className="list-inline-item">{i18n.t("mods")}: </li>
+ <li className="list-inline-item">{I18NextService.i18n.t("mods")}: </li>
{this.props.moderators.map(mod => (
<li key={mod.moderator.id} className="list-inline-item">
<PersonListing person={mod.moderator} />
const cv = this.props.community_view;
return (
<Link
- className={`btn btn-secondary btn-block mb-2 ${
+ className={`btn btn-secondary d-block mb-2 w-100 ${
cv.community.deleted || cv.community.removed ? "no-click" : ""
}`}
to={`/create_post?communityId=${cv.community.id}`}
>
- {i18n.t("create_a_post")}
+ {I18NextService.i18n.t("create_a_post")}
</Link>
);
}
subscribe() {
const community_view = this.props.community_view;
- return (
- <div className="mb-2">
- {community_view.subscribed == "NotSubscribed" && (
- <button
- className="btn btn-secondary btn-block"
- onClick={linkEvent(this, this.handleFollowCommunity)}
- >
- {this.state.followCommunityLoading ? (
- <Spinner />
- ) : (
- i18n.t("subscribe")
- )}
- </button>
- )}
- </div>
- );
+
+ if (community_view.subscribed === "NotSubscribed") {
+ return (
+ <button
+ className="btn btn-secondary d-block mb-2 w-100"
+ onClick={linkEvent(this, this.handleFollowCommunity)}
+ >
+ {this.state.followCommunityLoading ? (
+ <Spinner />
+ ) : (
+ I18NextService.i18n.t("subscribe")
+ )}
+ </button>
+ );
+ }
+
+ if (community_view.subscribed === "Subscribed") {
+ return (
+ <button
+ className="btn btn-secondary d-block mb-2 w-100"
+ onClick={linkEvent(this, this.handleUnfollowCommunity)}
+ >
+ {this.state.followCommunityLoading ? (
+ <Spinner />
+ ) : (
+ <>
+ <Icon icon="check" classes="icon-inline me-1" />
+ {I18NextService.i18n.t("joined")}
+ </>
+ )}
+ </button>
+ );
+ }
+
+ if (community_view.subscribed === "Pending") {
+ return (
+ <button
+ className="btn btn-warning d-block mb-2 w-100"
+ onClick={linkEvent(this, this.handleUnfollowCommunity)}
+ >
+ {this.state.followCommunityLoading ? (
+ <Spinner />
+ ) : (
+ I18NextService.i18n.t("subscribe_pending")
+ )}
+ </button>
+ );
+ }
}
blockCommunity() {
const { subscribed, blocked } = this.props.community_view;
return (
- <div className="mb-2">
- {subscribed == "NotSubscribed" && (
- <button
- className="btn btn-danger btn-block"
- onClick={linkEvent(this, this.handleBlockCommunity)}
- >
- {i18n.t(blocked ? "unblock_community" : "block_community")}
- </button>
- )}
- </div>
+ subscribed === "NotSubscribed" && (
+ <button
+ className="btn btn-danger d-block mb-2 w-100"
+ onClick={linkEvent(this, this.handleBlockCommunity)}
+ >
+ {I18NextService.i18n.t(
+ blocked ? "unblock_community" : "block_community"
+ )}
+ </button>
+ )
);
}
const community_view = this.props.community_view;
return (
<>
- <ul className="list-inline mb-1 text-muted font-weight-bold">
+ <ul className="list-inline mb-1 text-muted fw-bold">
{amMod(this.props.moderators) && (
<>
<li className="list-inline-item-action">
<button
className="btn btn-link text-muted d-inline-block"
onClick={linkEvent(this, this.handleEditClick)}
- data-tippy-content={i18n.t("edit")}
- aria-label={i18n.t("edit")}
+ data-tippy-content={I18NextService.i18n.t("edit")}
+ aria-label={I18NextService.i18n.t("edit")}
>
<Icon icon="edit" classes="icon-inline" />
</button>
this.handleShowConfirmLeaveModTeamClick
)}
>
- {i18n.t("leave_mod_team")}
+ {I18NextService.i18n.t("leave_mod_team")}
</button>
</li>
) : (
<>
<li className="list-inline-item-action">
- {i18n.t("are_you_sure")}
+ {I18NextService.i18n.t("are_you_sure")}
</li>
<li className="list-inline-item-action">
<button
className="btn btn-link text-muted d-inline-block"
onClick={linkEvent(this, this.handleLeaveModTeam)}
>
- {i18n.t("yes")}
+ {I18NextService.i18n.t("yes")}
</button>
</li>
<li className="list-inline-item-action">
this.handleCancelLeaveModTeamClick
)}
>
- {i18n.t("no")}
+ {I18NextService.i18n.t("no")}
</button>
</li>
</>
onClick={linkEvent(this, this.handleDeleteCommunity)}
data-tippy-content={
!community_view.community.deleted
- ? i18n.t("delete")
- : i18n.t("restore")
+ ? I18NextService.i18n.t("delete")
+ : I18NextService.i18n.t("restore")
}
aria-label={
!community_view.community.deleted
- ? i18n.t("delete")
- : i18n.t("restore")
+ ? I18NextService.i18n.t("delete")
+ : I18NextService.i18n.t("restore")
}
>
{this.state.deleteCommunityLoading ? (
className="btn btn-link text-muted d-inline-block"
onClick={linkEvent(this, this.handleModRemoveShow)}
>
- {i18n.t("remove")}
+ {I18NextService.i18n.t("remove")}
</button>
) : (
<button
{this.state.removeCommunityLoading ? (
<Spinner />
) : (
- i18n.t("restore")
+ I18NextService.i18n.t("restore")
)}
</button>
)}
<button
className="btn btn-link text-muted d-inline-block"
onClick={linkEvent(this, this.handlePurgeCommunityShow)}
- aria-label={i18n.t("purge_community")}
+ aria-label={I18NextService.i18n.t("purge_community")}
>
- {i18n.t("purge_community")}
+ {I18NextService.i18n.t("purge_community")}
</button>
</li>
)}
</ul>
{this.state.showRemoveDialog && (
<form onSubmit={linkEvent(this, this.handleRemoveCommunity)}>
- <div className="form-group">
+ <div className="input-group mb-3">
<label className="col-form-label" htmlFor="remove-reason">
- {i18n.t("reason")}
+ {I18NextService.i18n.t("reason")}
</label>
<input
type="text"
id="remove-reason"
- className="form-control mr-2"
- placeholder={i18n.t("optional")}
+ className="form-control me-2"
+ placeholder={I18NextService.i18n.t("optional")}
value={this.state.removeReason}
onInput={linkEvent(this, this.handleModRemoveReasonChange)}
/>
</div>
{/* TODO hold off on expires for now */}
- {/* <div class="form-group row"> */}
+ {/* <div class="mb-3 row"> */}
{/* <label class="col-form-label">Expires</label> */}
- {/* <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.removeExpires} onInput={linkEvent(this, this.handleModRemoveExpiresChange)} /> */}
+ {/* <input type="date" class="form-control me-2" placeholder={I18NextService.i18n.t('expires')} value={this.state.removeExpires} onInput={linkEvent(this, this.handleModRemoveExpiresChange)} /> */}
{/* </div> */}
- <div className="form-group">
+ <div className="input-group mb-3">
<button type="submit" className="btn btn-secondary">
{this.state.removeCommunityLoading ? (
<Spinner />
) : (
- i18n.t("remove_community")
+ I18NextService.i18n.t("remove_community")
)}
</button>
</div>
)}
{this.state.showPurgeDialog && (
<form onSubmit={linkEvent(this, this.handlePurgeCommunity)}>
- <div className="form-group">
+ <div className="input-group mb-3">
<PurgeWarning />
</div>
- <div className="form-group">
- <label className="sr-only" htmlFor="purge-reason">
- {i18n.t("reason")}
+ <div className="input-group mb-3">
+ <label className="visually-hidden" htmlFor="purge-reason">
+ {I18NextService.i18n.t("reason")}
</label>
<input
type="text"
id="purge-reason"
- className="form-control mr-2"
- placeholder={i18n.t("reason")}
+ className="form-control me-2"
+ placeholder={I18NextService.i18n.t("reason")}
value={this.state.purgeReason}
onInput={linkEvent(this, this.handlePurgeReasonChange)}
/>
</div>
- <div className="form-group">
+ <div className="input-group mb-3">
{this.state.purgeCommunityLoading ? (
<Spinner />
) : (
<button
type="submit"
className="btn btn-secondary"
- aria-label={i18n.t("purge_community")}
+ aria-label={I18NextService.i18n.t("purge_community")}
>
- {i18n.t("purge_community")}
+ {I18NextService.i18n.t("purge_community")}
</button>
)}
</div>
projects / lemmy-ui.git / blobdiff