1 import { Component, InfernoNode, linkEvent } from "inferno";
2 import { T } from "inferno-i18next-dess";
3 import { Link } from "inferno-router";
7 CommunityModeratorView,
16 } from "lemmy-js-client";
17 import { i18n } from "../../i18next";
18 import { UserService } from "../../services";
29 import { BannerIconHeader } from "../common/banner-icon-header";
30 import { Icon, PurgeWarning, Spinner } from "../common/icon";
31 import { CommunityForm } from "../community/community-form";
32 import { CommunityLink } from "../community/community-link";
33 import { PersonListing } from "../person/person-listing";
35 interface SidebarProps {
36 community_view: CommunityView;
37 moderators: CommunityModeratorView[];
39 allLanguages: Language[];
40 siteLanguages: number[];
41 communityLanguages?: number[];
46 onDeleteCommunity(form: DeleteCommunity): void;
47 onRemoveCommunity(form: RemoveCommunity): void;
48 onLeaveModTeam(form: AddModToCommunity): void;
49 onFollowCommunity(form: FollowCommunity): void;
50 onBlockCommunity(form: BlockCommunity): void;
51 onPurgeCommunity(form: PurgeCommunity): void;
52 onEditCommunity(form: EditCommunity): void;
55 interface SidebarState {
56 removeReason?: string;
57 removeExpires?: string;
59 showRemoveDialog: boolean;
60 showPurgeDialog: boolean;
62 showConfirmLeaveModTeam: boolean;
63 deleteCommunityLoading: boolean;
64 removeCommunityLoading: boolean;
65 leaveModTeamLoading: boolean;
66 followCommunityLoading: boolean;
67 purgeCommunityLoading: boolean;
70 export class Sidebar extends Component<SidebarProps, SidebarState> {
71 state: SidebarState = {
73 showRemoveDialog: false,
74 showPurgeDialog: false,
75 showConfirmLeaveModTeam: false,
76 deleteCommunityLoading: false,
77 removeCommunityLoading: false,
78 leaveModTeamLoading: false,
79 followCommunityLoading: false,
80 purgeCommunityLoading: false,
83 constructor(props: any, context: any) {
84 super(props, context);
85 this.handleEditCancel = this.handleEditCancel.bind(this);
88 componentWillReceiveProps(
89 nextProps: Readonly<{ children?: InfernoNode } & SidebarProps>
91 if (this.props.moderators != nextProps.moderators) {
93 showConfirmLeaveModTeam: false,
97 if (this.props.community_view != nextProps.community_view) {
100 showPurgeDialog: false,
101 showRemoveDialog: false,
102 deleteCommunityLoading: false,
103 removeCommunityLoading: false,
104 leaveModTeamLoading: false,
105 followCommunityLoading: false,
106 purgeCommunityLoading: false,
114 {!this.state.showEdit ? (
118 community_view={this.props.community_view}
119 allLanguages={this.props.allLanguages}
120 siteLanguages={this.props.siteLanguages}
121 communityLanguages={this.props.communityLanguages}
122 onUpsertCommunity={this.props.onEditCommunity}
123 onCancel={this.handleEditCancel}
124 enableNsfw={this.props.enableNsfw}
132 const myUSerInfo = UserService.Instance.myUserInfo;
133 const { name, actor_id } = this.props.community_view.community;
135 <div id="sidebarContainer">
136 <section id="sidebarMain" className="card border-secondary mb-3">
137 <div className="card-body">
138 {this.communityTitle()}
139 {this.props.editable && this.adminButtons()}
140 {myUSerInfo && this.subscribe()}
141 {this.canPost && this.createPost()}
142 {myUSerInfo && this.blockCommunity()}
144 <div className="alert alert-info" role="alert">
146 i18nKey="community_not_logged_in_alert"
149 instance: hostname(actor_id),
152 #<code className="user-select-all">#</code>#
158 <section id="sidebarInfo" className="card border-secondary mb-3">
159 <div className="card-body">
170 const community = this.props.community_view.community;
171 const subscribed = this.props.community_view.subscribed;
174 <h5 className="mb-0">
175 {this.props.showIcon && !community.removed && (
176 <BannerIconHeader icon={community.icon} banner={community.banner} />
178 <span className="mr-2">
179 <CommunityLink community={community} hideAvatar />
181 {subscribed === "Subscribed" && (
183 className="btn btn-secondary btn-sm mr-2"
184 onClick={linkEvent(this, this.handleUnfollowCommunity)}
186 {this.state.followCommunityLoading ? (
190 <Icon icon="check" classes="icon-inline text-success mr-1" />
196 {subscribed === "Pending" && (
198 className="btn btn-warning mr-2"
199 onClick={linkEvent(this, this.handleUnfollowCommunity)}
201 {this.state.followCommunityLoading ? (
204 i18n.t("subscribe_pending")
208 {community.removed && (
209 <small className="mr-2 text-muted font-italic">
213 {community.deleted && (
214 <small className="mr-2 text-muted font-italic">
219 <small className="mr-2 text-muted font-italic">
225 community={community}
236 const community_view = this.props.community_view;
237 const counts = community_view.counts;
239 <ul className="my-1 list-inline">
240 <li className="list-inline-item badge badge-secondary">
241 {i18n.t("number_online", {
242 count: this.props.online,
243 formattedCount: numToSI(this.props.online),
247 className="list-inline-item badge badge-secondary pointer"
248 data-tippy-content={i18n.t("active_users_in_the_last_day", {
249 count: Number(counts.users_active_day),
250 formattedCount: numToSI(counts.users_active_day),
253 {i18n.t("number_of_users", {
254 count: Number(counts.users_active_day),
255 formattedCount: numToSI(counts.users_active_day),
260 className="list-inline-item badge badge-secondary pointer"
261 data-tippy-content={i18n.t("active_users_in_the_last_week", {
262 count: Number(counts.users_active_week),
263 formattedCount: numToSI(counts.users_active_week),
266 {i18n.t("number_of_users", {
267 count: Number(counts.users_active_week),
268 formattedCount: numToSI(counts.users_active_week),
273 className="list-inline-item badge badge-secondary pointer"
274 data-tippy-content={i18n.t("active_users_in_the_last_month", {
275 count: Number(counts.users_active_month),
276 formattedCount: numToSI(counts.users_active_month),
279 {i18n.t("number_of_users", {
280 count: Number(counts.users_active_month),
281 formattedCount: numToSI(counts.users_active_month),
286 className="list-inline-item badge badge-secondary pointer"
287 data-tippy-content={i18n.t("active_users_in_the_last_six_months", {
288 count: Number(counts.users_active_half_year),
289 formattedCount: numToSI(counts.users_active_half_year),
292 {i18n.t("number_of_users", {
293 count: Number(counts.users_active_half_year),
294 formattedCount: numToSI(counts.users_active_half_year),
296 / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
298 <li className="list-inline-item badge badge-secondary">
299 {i18n.t("number_of_subscribers", {
300 count: Number(counts.subscribers),
301 formattedCount: numToSI(counts.subscribers),
304 <li className="list-inline-item badge badge-secondary">
305 {i18n.t("number_of_posts", {
306 count: Number(counts.posts),
307 formattedCount: numToSI(counts.posts),
310 <li className="list-inline-item badge badge-secondary">
311 {i18n.t("number_of_comments", {
312 count: Number(counts.comments),
313 formattedCount: numToSI(counts.comments),
316 <li className="list-inline-item">
318 className="badge badge-primary"
319 to={`/modlog/${this.props.community_view.community.id}`}
330 <ul className="list-inline small">
331 <li className="list-inline-item">{i18n.t("mods")}: </li>
332 {this.props.moderators.map(mod => (
333 <li key={mod.moderator.id} className="list-inline-item">
334 <PersonListing person={mod.moderator} />
342 const cv = this.props.community_view;
345 className={`btn btn-secondary btn-block mb-2 ${
346 cv.community.deleted || cv.community.removed ? "no-click" : ""
348 to={`/create_post?communityId=${cv.community.id}`}
350 {i18n.t("create_a_post")}
356 const community_view = this.props.community_view;
358 <div className="mb-2">
359 {community_view.subscribed == "NotSubscribed" && (
361 className="btn btn-secondary btn-block"
362 onClick={linkEvent(this, this.handleFollowCommunity)}
364 {this.state.followCommunityLoading ? (
376 const { subscribed, blocked } = this.props.community_view;
379 <div className="mb-2">
380 {subscribed == "NotSubscribed" && (
382 className="btn btn-danger btn-block"
383 onClick={linkEvent(this, this.handleBlockCommunity)}
385 {i18n.t(blocked ? "unblock_community" : "block_community")}
393 const desc = this.props.community_view.community.description;
396 <div className="md-div" dangerouslySetInnerHTML={mdToHtml(desc)} />
402 const community_view = this.props.community_view;
405 <ul className="list-inline mb-1 text-muted font-weight-bold">
406 {amMod(this.props.moderators) && (
408 <li className="list-inline-item-action">
410 className="btn btn-link text-muted d-inline-block"
411 onClick={linkEvent(this, this.handleEditClick)}
412 data-tippy-content={i18n.t("edit")}
413 aria-label={i18n.t("edit")}
415 <Icon icon="edit" classes="icon-inline" />
418 {!amTopMod(this.props.moderators) &&
419 (!this.state.showConfirmLeaveModTeam ? (
420 <li className="list-inline-item-action">
422 className="btn btn-link text-muted d-inline-block"
425 this.handleShowConfirmLeaveModTeamClick
428 {i18n.t("leave_mod_team")}
433 <li className="list-inline-item-action">
434 {i18n.t("are_you_sure")}
436 <li className="list-inline-item-action">
438 className="btn btn-link text-muted d-inline-block"
439 onClick={linkEvent(this, this.handleLeaveModTeam)}
444 <li className="list-inline-item-action">
446 className="btn btn-link text-muted d-inline-block"
449 this.handleCancelLeaveModTeamClick
457 {amTopMod(this.props.moderators) && (
458 <li className="list-inline-item-action">
460 className="btn btn-link text-muted d-inline-block"
461 onClick={linkEvent(this, this.handleDeleteCommunity)}
463 !community_view.community.deleted
468 !community_view.community.deleted
473 {this.state.deleteCommunityLoading ? (
478 classes={`icon-inline ${
479 community_view.community.deleted && "text-danger"
489 <li className="list-inline-item">
490 {!this.props.community_view.community.removed ? (
492 className="btn btn-link text-muted d-inline-block"
493 onClick={linkEvent(this, this.handleModRemoveShow)}
499 className="btn btn-link text-muted d-inline-block"
500 onClick={linkEvent(this, this.handleRemoveCommunity)}
502 {this.state.removeCommunityLoading ? (
510 className="btn btn-link text-muted d-inline-block"
511 onClick={linkEvent(this, this.handlePurgeCommunityShow)}
512 aria-label={i18n.t("purge_community")}
514 {i18n.t("purge_community")}
519 {this.state.showRemoveDialog && (
520 <form onSubmit={linkEvent(this, this.handleRemoveCommunity)}>
521 <div className="form-group">
522 <label className="col-form-label" htmlFor="remove-reason">
528 className="form-control mr-2"
529 placeholder={i18n.t("optional")}
530 value={this.state.removeReason}
531 onInput={linkEvent(this, this.handleModRemoveReasonChange)}
534 {/* TODO hold off on expires for now */}
535 {/* <div class="form-group row"> */}
536 {/* <label class="col-form-label">Expires</label> */}
537 {/* <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.removeExpires} onInput={linkEvent(this, this.handleModRemoveExpiresChange)} /> */}
539 <div className="form-group">
540 <button type="submit" className="btn btn-secondary">
541 {this.state.removeCommunityLoading ? (
544 i18n.t("remove_community")
550 {this.state.showPurgeDialog && (
551 <form onSubmit={linkEvent(this, this.handlePurgeCommunity)}>
552 <div className="form-group">
555 <div className="form-group">
556 <label className="sr-only" htmlFor="purge-reason">
562 className="form-control mr-2"
563 placeholder={i18n.t("reason")}
564 value={this.state.purgeReason}
565 onInput={linkEvent(this, this.handlePurgeReasonChange)}
568 <div className="form-group">
569 {this.state.purgeCommunityLoading ? (
574 className="btn btn-secondary"
575 aria-label={i18n.t("purge_community")}
577 {i18n.t("purge_community")}
587 handleEditClick(i: Sidebar) {
588 i.setState({ showEdit: true });
592 this.setState({ showEdit: false });
595 handleShowConfirmLeaveModTeamClick(i: Sidebar) {
596 i.setState({ showConfirmLeaveModTeam: true });
599 handleCancelLeaveModTeamClick(i: Sidebar) {
600 i.setState({ showConfirmLeaveModTeam: false });
603 get canPost(): boolean {
605 !this.props.community_view.community.posting_restricted_to_mods ||
606 amMod(this.props.moderators) ||
611 handleModRemoveShow(i: Sidebar) {
612 i.setState({ showRemoveDialog: true });
615 handleModRemoveReasonChange(i: Sidebar, event: any) {
616 i.setState({ removeReason: event.target.value });
619 handleModRemoveExpiresChange(i: Sidebar, event: any) {
620 i.setState({ removeExpires: event.target.value });
623 handlePurgeCommunityShow(i: Sidebar) {
624 i.setState({ showPurgeDialog: true, showRemoveDialog: false });
627 handlePurgeReasonChange(i: Sidebar, event: any) {
628 i.setState({ purgeReason: event.target.value });
631 // TODO Do we need two of these?
632 handleUnfollowCommunity(i: Sidebar) {
633 i.setState({ followCommunityLoading: true });
634 i.props.onFollowCommunity({
635 community_id: i.props.community_view.community.id,
637 auth: myAuthRequired(),
641 handleFollowCommunity(i: Sidebar) {
642 i.setState({ followCommunityLoading: true });
643 i.props.onFollowCommunity({
644 community_id: i.props.community_view.community.id,
646 auth: myAuthRequired(),
650 handleBlockCommunity(i: Sidebar) {
651 const { community, blocked } = i.props.community_view;
653 i.props.onBlockCommunity({
654 community_id: community.id,
656 auth: myAuthRequired(),
660 handleLeaveModTeam(i: Sidebar) {
661 const myId = UserService.Instance.myUserInfo?.local_user_view.person.id;
663 i.setState({ leaveModTeamLoading: true });
664 i.props.onLeaveModTeam({
665 community_id: i.props.community_view.community.id,
668 auth: myAuthRequired(),
673 handleDeleteCommunity(i: Sidebar) {
674 i.setState({ deleteCommunityLoading: true });
675 i.props.onDeleteCommunity({
676 community_id: i.props.community_view.community.id,
677 deleted: !i.props.community_view.community.deleted,
678 auth: myAuthRequired(),
682 handleRemoveCommunity(i: Sidebar, event: any) {
683 event.preventDefault();
684 i.setState({ removeCommunityLoading: true });
685 i.props.onRemoveCommunity({
686 community_id: i.props.community_view.community.id,
687 removed: !i.props.community_view.community.removed,
688 reason: i.state.removeReason,
689 expires: getUnixTime(i.state.removeExpires), // TODO fix this
690 auth: myAuthRequired(),
694 handlePurgeCommunity(i: Sidebar, event: any) {
695 event.preventDefault();
696 i.setState({ purgeCommunityLoading: true });
697 i.props.onPurgeCommunity({
698 community_id: i.props.community_view.community.id,
699 reason: i.state.purgeReason,
700 auth: myAuthRequired(),