-import { Component, linkEvent } from "inferno";
+import { Component, InfernoNode, linkEvent } from "inferno";
+import { T } from "inferno-i18next-dess";
import { Link } from "inferno-router";
import {
AddModToCommunity,
CommunityModeratorView,
CommunityView,
DeleteCommunity,
+ EditCommunity,
FollowCommunity,
Language,
- PersonViewSafe,
+ PersonView,
PurgeCommunity,
RemoveCommunity,
- SubscribedType,
} from "lemmy-js-client";
import { i18n } from "../../i18next";
-import { UserService, WebSocketService } from "../../services";
+import { UserService } from "../../services";
import {
amAdmin,
amMod,
amTopMod,
getUnixTime,
+ hostname,
mdToHtml,
- myAuth,
- numToSI,
- wsClient,
+ myAuthRequired,
} from "../../utils";
+import { Badges } from "../common/badges";
import { BannerIconHeader } from "../common/banner-icon-header";
import { Icon, PurgeWarning, Spinner } from "../common/icon";
import { CommunityForm } from "../community/community-form";
interface SidebarProps {
community_view: CommunityView;
moderators: CommunityModeratorView[];
- admins: PersonViewSafe[];
+ admins: PersonView[];
allLanguages: Language[];
siteLanguages: number[];
communityLanguages?: number[];
- online: number;
enableNsfw?: boolean;
showIcon?: boolean;
editable?: boolean;
+ onDeleteCommunity(form: DeleteCommunity): void;
+ onRemoveCommunity(form: RemoveCommunity): void;
+ onLeaveModTeam(form: AddModToCommunity): void;
+ onFollowCommunity(form: FollowCommunity): void;
+ onBlockCommunity(form: BlockCommunity): void;
+ onPurgeCommunity(form: PurgeCommunity): void;
+ onEditCommunity(form: EditCommunity): void;
}
interface SidebarState {
showRemoveDialog: boolean;
showPurgeDialog: boolean;
purgeReason?: string;
- purgeLoading: boolean;
showConfirmLeaveModTeam: boolean;
+ deleteCommunityLoading: boolean;
+ removeCommunityLoading: boolean;
+ leaveModTeamLoading: boolean;
+ followCommunityLoading: boolean;
+ purgeCommunityLoading: boolean;
}
export class Sidebar extends Component<SidebarProps, SidebarState> {
showEdit: false,
showRemoveDialog: false,
showPurgeDialog: false,
- purgeLoading: false,
showConfirmLeaveModTeam: false,
+ deleteCommunityLoading: false,
+ removeCommunityLoading: false,
+ leaveModTeamLoading: false,
+ followCommunityLoading: false,
+ purgeCommunityLoading: false,
};
constructor(props: any, context: any) {
super(props, context);
- this.handleEditCommunity = this.handleEditCommunity.bind(this);
this.handleEditCancel = this.handleEditCancel.bind(this);
}
+ componentWillReceiveProps(
+ nextProps: Readonly<{ children?: InfernoNode } & SidebarProps>
+ ): void {
+ if (this.props.moderators != nextProps.moderators) {
+ this.setState({
+ showConfirmLeaveModTeam: false,
+ });
+ }
+
+ if (this.props.community_view != nextProps.community_view) {
+ this.setState({
+ showEdit: false,
+ showPurgeDialog: false,
+ showRemoveDialog: false,
+ deleteCommunityLoading: false,
+ removeCommunityLoading: false,
+ leaveModTeamLoading: false,
+ followCommunityLoading: false,
+ purgeCommunityLoading: false,
+ });
+ }
+ }
+
render() {
return (
<div>
allLanguages={this.props.allLanguages}
siteLanguages={this.props.siteLanguages}
communityLanguages={this.props.communityLanguages}
- onEdit={this.handleEditCommunity}
+ onUpsertCommunity={this.props.onEditCommunity}
onCancel={this.handleEditCancel}
enableNsfw={this.props.enableNsfw}
/>
}
sidebar() {
+ const myUSerInfo = UserService.Instance.myUserInfo;
+ const { name, actor_id } = this.props.community_view.community;
return (
- <div>
- <div className="card border-secondary mb-3">
- <div className="card-body">
- {this.communityTitle()}
- {this.props.editable && this.adminButtons()}
- {this.subscribe()}
- {this.canPost && this.createPost()}
- {this.blockCommunity()}
- </div>
- </div>
- <div className="card border-secondary mb-3">
- <div className="card-body">
- {this.description()}
- {this.badges()}
- {this.mods()}
- </div>
+ <aside className="mb-3">
+ <div id="sidebarContainer">
+ <section id="sidebarMain" className="card border-secondary mb-3">
+ <div className="card-body">
+ {this.communityTitle()}
+ {this.props.editable && this.adminButtons()}
+ {myUSerInfo && this.subscribe()}
+ {this.canPost && this.createPost()}
+ {myUSerInfo && this.blockCommunity()}
+ {!myUSerInfo && (
+ <div className="alert alert-info" role="alert">
+ <T
+ i18nKey="community_not_logged_in_alert"
+ interpolation={{
+ community: name,
+ instance: hostname(actor_id),
+ }}
+ >
+ #<code className="user-select-all">#</code>#
+ </T>
+ </div>
+ )}
+ </div>
+ </section>
+ <section id="sidebarInfo" className="card border-secondary mb-3">
+ <div className="card-body">
+ {this.description()}
+ <Badges
+ community_view={this.props.community_view}
+ counts={this.props.community_view.counts}
+ />
+ {this.mods()}
+ </div>
+ </section>
</div>
- </div>
+ </aside>
);
}
communityTitle() {
- let community = this.props.community_view.community;
- let subscribed = this.props.community_view.subscribed;
+ const community = this.props.community_view.community;
+ const subscribed = this.props.community_view.subscribed;
return (
<div>
<h5 className="mb-0">
{this.props.showIcon && !community.removed && (
<BannerIconHeader icon={community.icon} banner={community.banner} />
)}
- <span className="mr-2">{community.title}</span>
- {subscribed == SubscribedType.Subscribed && (
+ <span className="mr-2">
+ <CommunityLink community={community} hideAvatar />
+ </span>
+ {subscribed === "Subscribed" && (
<button
className="btn btn-secondary btn-sm mr-2"
- onClick={linkEvent(this, this.handleUnsubscribe)}
+ onClick={linkEvent(this, this.handleUnfollowCommunity)}
>
- <Icon icon="check" classes="icon-inline text-success mr-1" />
- {i18n.t("joined")}
+ {this.state.followCommunityLoading ? (
+ <Spinner />
+ ) : (
+ <>
+ <Icon icon="check" classes="icon-inline text-success mr-1" />
+ {i18n.t("joined")}
+ </>
+ )}
</button>
)}
- {subscribed == SubscribedType.Pending && (
+ {subscribed === "Pending" && (
<button
className="btn btn-warning mr-2"
- onClick={linkEvent(this, this.handleUnsubscribe)}
+ onClick={linkEvent(this, this.handleUnfollowCommunity)}
>
- {i18n.t("subscribe_pending")}
+ {this.state.followCommunityLoading ? (
+ <Spinner />
+ ) : (
+ i18n.t("subscribe_pending")
+ )}
</button>
)}
{community.removed && (
);
}
- badges() {
- let community_view = this.props.community_view;
- let counts = community_view.counts;
- return (
- <ul className="my-1 list-inline">
- <li className="list-inline-item badge badge-secondary">
- {i18n.t("number_online", {
- count: this.props.online,
- formattedCount: numToSI(this.props.online),
- })}
- </li>
- <li
- className="list-inline-item badge badge-secondary pointer"
- data-tippy-content={i18n.t("active_users_in_the_last_day", {
- count: counts.users_active_day,
- formattedCount: counts.users_active_day,
- })}
- >
- {i18n.t("number_of_users", {
- count: counts.users_active_day,
- formattedCount: numToSI(counts.users_active_day),
- })}{" "}
- / {i18n.t("day")}
- </li>
- <li
- className="list-inline-item badge badge-secondary pointer"
- data-tippy-content={i18n.t("active_users_in_the_last_week", {
- count: counts.users_active_week,
- formattedCount: counts.users_active_week,
- })}
- >
- {i18n.t("number_of_users", {
- count: counts.users_active_week,
- formattedCount: numToSI(counts.users_active_week),
- })}{" "}
- / {i18n.t("week")}
- </li>
- <li
- className="list-inline-item badge badge-secondary pointer"
- data-tippy-content={i18n.t("active_users_in_the_last_month", {
- count: counts.users_active_month,
- formattedCount: counts.users_active_month,
- })}
- >
- {i18n.t("number_of_users", {
- count: counts.users_active_month,
- formattedCount: numToSI(counts.users_active_month),
- })}{" "}
- / {i18n.t("month")}
- </li>
- <li
- className="list-inline-item badge badge-secondary pointer"
- data-tippy-content={i18n.t("active_users_in_the_last_six_months", {
- count: counts.users_active_half_year,
- formattedCount: counts.users_active_half_year,
- })}
- >
- {i18n.t("number_of_users", {
- count: counts.users_active_half_year,
- formattedCount: numToSI(counts.users_active_half_year),
- })}{" "}
- / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
- </li>
- <li className="list-inline-item badge badge-secondary">
- {i18n.t("number_of_subscribers", {
- count: counts.subscribers,
- formattedCount: numToSI(counts.subscribers),
- })}
- </li>
- <li className="list-inline-item badge badge-secondary">
- {i18n.t("number_of_posts", {
- count: counts.posts,
- formattedCount: numToSI(counts.posts),
- })}
- </li>
- <li className="list-inline-item badge badge-secondary">
- {i18n.t("number_of_comments", {
- count: counts.comments,
- formattedCount: numToSI(counts.comments),
- })}
- </li>
- <li className="list-inline-item">
- <Link
- className="badge badge-primary"
- to={`/modlog/community/${this.props.community_view.community.id}`}
- >
- {i18n.t("modlog")}
- </Link>
- </li>
- </ul>
- );
- }
-
mods() {
return (
<ul className="list-inline small">
}
createPost() {
- let cv = this.props.community_view;
+ const cv = this.props.community_view;
return (
<Link
className={`btn btn-secondary btn-block mb-2 ${
cv.community.deleted || cv.community.removed ? "no-click" : ""
}`}
- to={`/create_post?community_id=${cv.community.id}`}
+ to={`/create_post?communityId=${cv.community.id}`}
>
{i18n.t("create_a_post")}
</Link>
}
subscribe() {
- let community_view = this.props.community_view;
+ const community_view = this.props.community_view;
return (
<div className="mb-2">
- {community_view.subscribed == SubscribedType.NotSubscribed && (
+ {community_view.subscribed == "NotSubscribed" && (
<button
className="btn btn-secondary btn-block"
- onClick={linkEvent(this, this.handleSubscribe)}
+ onClick={linkEvent(this, this.handleFollowCommunity)}
>
- {i18n.t("subscribe")}
+ {this.state.followCommunityLoading ? (
+ <Spinner />
+ ) : (
+ i18n.t("subscribe")
+ )}
</button>
)}
</div>
}
blockCommunity() {
- let community_view = this.props.community_view;
- let blocked = this.props.community_view.blocked;
+ const { subscribed, blocked } = this.props.community_view;
return (
<div className="mb-2">
- {community_view.subscribed == SubscribedType.NotSubscribed &&
- (blocked ? (
- <button
- className="btn btn-danger btn-block"
- onClick={linkEvent(this, this.handleUnblock)}
- >
- {i18n.t("unblock_community")}
- </button>
- ) : (
- <button
- className="btn btn-danger btn-block"
- onClick={linkEvent(this, this.handleBlock)}
- >
- {i18n.t("block_community")}
- </button>
- ))}
+ {subscribed == "NotSubscribed" && (
+ <button
+ className="btn btn-danger btn-block"
+ onClick={linkEvent(this, this.handleBlockCommunity)}
+ >
+ {i18n.t(blocked ? "unblock_community" : "block_community")}
+ </button>
+ )}
</div>
);
}
description() {
- let desc = this.props.community_view.community.description;
+ const desc = this.props.community_view.community.description;
return (
desc && (
<div className="md-div" dangerouslySetInnerHTML={mdToHtml(desc)} />
}
adminButtons() {
- let community_view = this.props.community_view;
+ const community_view = this.props.community_view;
return (
<>
<ul className="list-inline mb-1 text-muted font-weight-bold">
<li className="list-inline-item-action">
<button
className="btn btn-link text-muted d-inline-block"
- onClick={linkEvent(this, this.handleLeaveModTeamClick)}
+ onClick={linkEvent(this, this.handleLeaveModTeam)}
>
{i18n.t("yes")}
</button>
<li className="list-inline-item-action">
<button
className="btn btn-link text-muted d-inline-block"
- onClick={linkEvent(this, this.handleDeleteClick)}
+ onClick={linkEvent(this, this.handleDeleteCommunity)}
data-tippy-content={
!community_view.community.deleted
? i18n.t("delete")
: i18n.t("restore")
}
>
- <Icon
- icon="trash"
- classes={`icon-inline ${
- community_view.community.deleted && "text-danger"
- }`}
- />
+ {this.state.deleteCommunityLoading ? (
+ <Spinner />
+ ) : (
+ <Icon
+ icon="trash"
+ classes={`icon-inline ${
+ community_view.community.deleted && "text-danger"
+ }`}
+ />
+ )}{" "}
</button>
</li>
)}
) : (
<button
className="btn btn-link text-muted d-inline-block"
- onClick={linkEvent(this, this.handleModRemoveSubmit)}
+ onClick={linkEvent(this, this.handleRemoveCommunity)}
>
- {i18n.t("restore")}
+ {this.state.removeCommunityLoading ? (
+ <Spinner />
+ ) : (
+ i18n.t("restore")
+ )}
</button>
)}
<button
)}
</ul>
{this.state.showRemoveDialog && (
- <form onSubmit={linkEvent(this, this.handleModRemoveSubmit)}>
+ <form onSubmit={linkEvent(this, this.handleRemoveCommunity)}>
<div className="form-group">
<label className="col-form-label" htmlFor="remove-reason">
{i18n.t("reason")}
{/* </div> */}
<div className="form-group">
<button type="submit" className="btn btn-secondary">
- {i18n.t("remove_community")}
+ {this.state.removeCommunityLoading ? (
+ <Spinner />
+ ) : (
+ i18n.t("remove_community")
+ )}
</button>
</div>
</form>
)}
{this.state.showPurgeDialog && (
- <form onSubmit={linkEvent(this, this.handlePurgeSubmit)}>
+ <form onSubmit={linkEvent(this, this.handlePurgeCommunity)}>
<div className="form-group">
<PurgeWarning />
</div>
/>
</div>
<div className="form-group">
- {this.state.purgeLoading ? (
+ {this.state.purgeCommunityLoading ? (
<Spinner />
) : (
<button
i.setState({ showEdit: true });
}
- handleEditCommunity() {
- this.setState({ showEdit: false });
- }
-
handleEditCancel() {
this.setState({ showEdit: false });
}
- handleDeleteClick(i: Sidebar, event: any) {
- event.preventDefault();
- let auth = myAuth();
- if (auth) {
- let deleteForm: DeleteCommunity = {
- community_id: i.props.community_view.community.id,
- deleted: !i.props.community_view.community.deleted,
- auth,
- };
- WebSocketService.Instance.send(wsClient.deleteCommunity(deleteForm));
- }
- }
-
handleShowConfirmLeaveModTeamClick(i: Sidebar) {
i.setState({ showConfirmLeaveModTeam: true });
}
- handleLeaveModTeamClick(i: Sidebar) {
- let mui = UserService.Instance.myUserInfo;
- let auth = myAuth();
- if (auth && mui) {
- let form: AddModToCommunity = {
- person_id: mui.local_user_view.person.id,
- community_id: i.props.community_view.community.id,
- added: false,
- auth,
- };
- WebSocketService.Instance.send(wsClient.addModToCommunity(form));
- i.setState({ showConfirmLeaveModTeam: false });
- }
- }
-
handleCancelLeaveModTeamClick(i: Sidebar) {
i.setState({ showConfirmLeaveModTeam: false });
}
- handleUnsubscribe(i: Sidebar, event: any) {
- event.preventDefault();
- let community_id = i.props.community_view.community.id;
- let auth = myAuth();
- if (auth) {
- let form: FollowCommunity = {
- community_id,
- follow: false,
- auth,
- };
- WebSocketService.Instance.send(wsClient.followCommunity(form));
- }
-
- // Update myUserInfo
- let mui = UserService.Instance.myUserInfo;
- if (mui) {
- mui.follows = mui.follows.filter(i => i.community.id != community_id);
- }
- }
-
- handleSubscribe(i: Sidebar, event: any) {
- event.preventDefault();
- let community_id = i.props.community_view.community.id;
- let auth = myAuth();
- if (auth) {
- let form: FollowCommunity = {
- community_id,
- follow: true,
- auth,
- };
- WebSocketService.Instance.send(wsClient.followCommunity(form));
- }
-
- // Update myUserInfo
- let mui = UserService.Instance.myUserInfo;
- if (mui) {
- mui.follows.push({
- community: i.props.community_view.community,
- follower: mui.local_user_view.person,
- });
- }
- }
-
get canPost(): boolean {
return (
!this.props.community_view.community.posting_restricted_to_mods ||
i.setState({ removeExpires: event.target.value });
}
- handleModRemoveSubmit(i: Sidebar, event: any) {
- event.preventDefault();
- let auth = myAuth();
- if (auth) {
- let removeForm: RemoveCommunity = {
- community_id: i.props.community_view.community.id,
- removed: !i.props.community_view.community.removed,
- reason: i.state.removeReason,
- expires: getUnixTime(i.state.removeExpires),
- auth,
- };
- WebSocketService.Instance.send(wsClient.removeCommunity(removeForm));
-
- i.setState({ showRemoveDialog: false });
- }
- }
-
handlePurgeCommunityShow(i: Sidebar) {
i.setState({ showPurgeDialog: true, showRemoveDialog: false });
}
i.setState({ purgeReason: event.target.value });
}
- handlePurgeSubmit(i: Sidebar, event: any) {
- event.preventDefault();
+ // TODO Do we need two of these?
+ handleUnfollowCommunity(i: Sidebar) {
+ i.setState({ followCommunityLoading: true });
+ i.props.onFollowCommunity({
+ community_id: i.props.community_view.community.id,
+ follow: false,
+ auth: myAuthRequired(),
+ });
+ }
+
+ handleFollowCommunity(i: Sidebar) {
+ i.setState({ followCommunityLoading: true });
+ i.props.onFollowCommunity({
+ community_id: i.props.community_view.community.id,
+ follow: true,
+ auth: myAuthRequired(),
+ });
+ }
+
+ handleBlockCommunity(i: Sidebar) {
+ const { community, blocked } = i.props.community_view;
- let auth = myAuth();
- if (auth) {
- let form: PurgeCommunity = {
+ i.props.onBlockCommunity({
+ community_id: community.id,
+ block: !blocked,
+ auth: myAuthRequired(),
+ });
+ }
+
+ handleLeaveModTeam(i: Sidebar) {
+ const myId = UserService.Instance.myUserInfo?.local_user_view.person.id;
+ if (myId) {
+ i.setState({ leaveModTeamLoading: true });
+ i.props.onLeaveModTeam({
community_id: i.props.community_view.community.id,
- reason: i.state.purgeReason,
- auth,
- };
- WebSocketService.Instance.send(wsClient.purgeCommunity(form));
- i.setState({ purgeLoading: true });
+ person_id: 92,
+ added: false,
+ auth: myAuthRequired(),
+ });
}
}
- handleBlock(i: Sidebar, event: any) {
+ handleDeleteCommunity(i: Sidebar) {
+ i.setState({ deleteCommunityLoading: true });
+ i.props.onDeleteCommunity({
+ community_id: i.props.community_view.community.id,
+ deleted: !i.props.community_view.community.deleted,
+ auth: myAuthRequired(),
+ });
+ }
+
+ handleRemoveCommunity(i: Sidebar, event: any) {
event.preventDefault();
- let auth = myAuth();
- if (auth) {
- let blockCommunityForm: BlockCommunity = {
- community_id: i.props.community_view.community.id,
- block: true,
- auth,
- };
- WebSocketService.Instance.send(
- wsClient.blockCommunity(blockCommunityForm)
- );
- }
+ i.setState({ removeCommunityLoading: true });
+ i.props.onRemoveCommunity({
+ community_id: i.props.community_view.community.id,
+ removed: !i.props.community_view.community.removed,
+ reason: i.state.removeReason,
+ expires: getUnixTime(i.state.removeExpires), // TODO fix this
+ auth: myAuthRequired(),
+ });
}
- handleUnblock(i: Sidebar, event: any) {
+ handlePurgeCommunity(i: Sidebar, event: any) {
event.preventDefault();
- let auth = myAuth();
- if (auth) {
- let blockCommunityForm: BlockCommunity = {
- community_id: i.props.community_view.community.id,
- block: false,
- auth,
- };
- WebSocketService.Instance.send(
- wsClient.blockCommunity(blockCommunityForm)
- );
- }
+ i.setState({ purgeCommunityLoading: true });
+ i.props.onPurgeCommunity({
+ community_id: i.props.community_view.community.id,
+ reason: i.state.purgeReason,
+ auth: myAuthRequired(),
+ });
}
}