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";
26 import { amAdmin } from "../../utils/roles/am-admin";
27 import { amMod } from "../../utils/roles/am-mod";
28 import { amTopMod } from "../../utils/roles/am-top-mod";
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[];
45 onDeleteCommunity(form: DeleteCommunity): void;
46 onRemoveCommunity(form: RemoveCommunity): void;
47 onLeaveModTeam(form: AddModToCommunity): void;
48 onFollowCommunity(form: FollowCommunity): void;
49 onBlockCommunity(form: BlockCommunity): void;
50 onPurgeCommunity(form: PurgeCommunity): void;
51 onEditCommunity(form: EditCommunity): void;
54 interface SidebarState {
55 removeReason?: string;
56 removeExpires?: string;
58 showRemoveDialog: boolean;
59 showPurgeDialog: boolean;
61 showConfirmLeaveModTeam: boolean;
62 deleteCommunityLoading: boolean;
63 removeCommunityLoading: boolean;
64 leaveModTeamLoading: boolean;
65 followCommunityLoading: boolean;
66 purgeCommunityLoading: boolean;
69 export class Sidebar extends Component<SidebarProps, SidebarState> {
70 state: SidebarState = {
72 showRemoveDialog: false,
73 showPurgeDialog: false,
74 showConfirmLeaveModTeam: false,
75 deleteCommunityLoading: false,
76 removeCommunityLoading: false,
77 leaveModTeamLoading: false,
78 followCommunityLoading: false,
79 purgeCommunityLoading: false,
82 constructor(props: any, context: any) {
83 super(props, context);
84 this.handleEditCancel = this.handleEditCancel.bind(this);
87 componentWillReceiveProps(
88 nextProps: Readonly<{ children?: InfernoNode } & SidebarProps>
90 if (this.props.moderators != nextProps.moderators) {
92 showConfirmLeaveModTeam: false,
96 if (this.props.community_view != nextProps.community_view) {
99 showPurgeDialog: false,
100 showRemoveDialog: false,
101 deleteCommunityLoading: false,
102 removeCommunityLoading: false,
103 leaveModTeamLoading: false,
104 followCommunityLoading: false,
105 purgeCommunityLoading: false,
113 {!this.state.showEdit ? (
117 community_view={this.props.community_view}
118 allLanguages={this.props.allLanguages}
119 siteLanguages={this.props.siteLanguages}
120 communityLanguages={this.props.communityLanguages}
121 onUpsertCommunity={this.props.onEditCommunity}
122 onCancel={this.handleEditCancel}
123 enableNsfw={this.props.enableNsfw}
131 const myUSerInfo = UserService.Instance.myUserInfo;
132 const { name, actor_id } = this.props.community_view.community;
134 <aside className="mb-3">
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">
171 const community = this.props.community_view.community;
172 const subscribed = this.props.community_view.subscribed;
175 <h5 className="mb-0">
176 {this.props.showIcon && !community.removed && (
177 <BannerIconHeader icon={community.icon} banner={community.banner} />
179 <span className="mr-2">
180 <CommunityLink community={community} hideAvatar />
182 {subscribed === "Subscribed" && (
184 className="btn btn-secondary btn-sm mr-2"
185 onClick={linkEvent(this, this.handleUnfollowCommunity)}
187 {this.state.followCommunityLoading ? (
191 <Icon icon="check" classes="icon-inline text-success mr-1" />
197 {subscribed === "Pending" && (
199 className="btn btn-warning mr-2"
200 onClick={linkEvent(this, this.handleUnfollowCommunity)}
202 {this.state.followCommunityLoading ? (
205 i18n.t("subscribe_pending")
209 {community.removed && (
210 <small className="mr-2 text-muted font-italic">
214 {community.deleted && (
215 <small className="mr-2 text-muted font-italic">
220 <small className="mr-2 text-muted font-italic">
226 community={community}
237 const community_view = this.props.community_view;
238 const counts = community_view.counts;
240 <ul className="my-1 list-inline">
242 className="list-inline-item badge badge-secondary pointer"
243 data-tippy-content={i18n.t("active_users_in_the_last_day", {
244 count: Number(counts.users_active_day),
245 formattedCount: numToSI(counts.users_active_day),
248 {i18n.t("number_of_users", {
249 count: Number(counts.users_active_day),
250 formattedCount: numToSI(counts.users_active_day),
255 className="list-inline-item badge badge-secondary pointer"
256 data-tippy-content={i18n.t("active_users_in_the_last_week", {
257 count: Number(counts.users_active_week),
258 formattedCount: numToSI(counts.users_active_week),
261 {i18n.t("number_of_users", {
262 count: Number(counts.users_active_week),
263 formattedCount: numToSI(counts.users_active_week),
268 className="list-inline-item badge badge-secondary pointer"
269 data-tippy-content={i18n.t("active_users_in_the_last_month", {
270 count: Number(counts.users_active_month),
271 formattedCount: numToSI(counts.users_active_month),
274 {i18n.t("number_of_users", {
275 count: Number(counts.users_active_month),
276 formattedCount: numToSI(counts.users_active_month),
281 className="list-inline-item badge badge-secondary pointer"
282 data-tippy-content={i18n.t("active_users_in_the_last_six_months", {
283 count: Number(counts.users_active_half_year),
284 formattedCount: numToSI(counts.users_active_half_year),
287 {i18n.t("number_of_users", {
288 count: Number(counts.users_active_half_year),
289 formattedCount: numToSI(counts.users_active_half_year),
291 / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
293 <li className="list-inline-item badge badge-secondary">
294 {i18n.t("number_of_subscribers", {
295 count: Number(counts.subscribers),
296 formattedCount: numToSI(counts.subscribers),
299 <li className="list-inline-item badge badge-secondary">
300 {i18n.t("number_of_posts", {
301 count: Number(counts.posts),
302 formattedCount: numToSI(counts.posts),
305 <li className="list-inline-item badge badge-secondary">
306 {i18n.t("number_of_comments", {
307 count: Number(counts.comments),
308 formattedCount: numToSI(counts.comments),
311 <li className="list-inline-item">
313 className="badge badge-primary"
314 to={`/modlog/${this.props.community_view.community.id}`}
325 <ul className="list-inline small">
326 <li className="list-inline-item">{i18n.t("mods")}: </li>
327 {this.props.moderators.map(mod => (
328 <li key={mod.moderator.id} className="list-inline-item">
329 <PersonListing person={mod.moderator} />
337 const cv = this.props.community_view;
340 className={`btn btn-secondary btn-block mb-2 ${
341 cv.community.deleted || cv.community.removed ? "no-click" : ""
343 to={`/create_post?communityId=${cv.community.id}`}
345 {i18n.t("create_a_post")}
351 const community_view = this.props.community_view;
353 <div className="mb-2">
354 {community_view.subscribed == "NotSubscribed" && (
356 className="btn btn-secondary btn-block"
357 onClick={linkEvent(this, this.handleFollowCommunity)}
359 {this.state.followCommunityLoading ? (
371 const { subscribed, blocked } = this.props.community_view;
374 <div className="mb-2">
375 {subscribed == "NotSubscribed" && (
377 className="btn btn-danger btn-block"
378 onClick={linkEvent(this, this.handleBlockCommunity)}
380 {i18n.t(blocked ? "unblock_community" : "block_community")}
388 const desc = this.props.community_view.community.description;
391 <div className="md-div" dangerouslySetInnerHTML={mdToHtml(desc)} />
397 const community_view = this.props.community_view;
400 <ul className="list-inline mb-1 text-muted font-weight-bold">
401 {amMod(this.props.moderators) && (
403 <li className="list-inline-item-action">
405 className="btn btn-link text-muted d-inline-block"
406 onClick={linkEvent(this, this.handleEditClick)}
407 data-tippy-content={i18n.t("edit")}
408 aria-label={i18n.t("edit")}
410 <Icon icon="edit" classes="icon-inline" />
413 {!amTopMod(this.props.moderators) &&
414 (!this.state.showConfirmLeaveModTeam ? (
415 <li className="list-inline-item-action">
417 className="btn btn-link text-muted d-inline-block"
420 this.handleShowConfirmLeaveModTeamClick
423 {i18n.t("leave_mod_team")}
428 <li className="list-inline-item-action">
429 {i18n.t("are_you_sure")}
431 <li className="list-inline-item-action">
433 className="btn btn-link text-muted d-inline-block"
434 onClick={linkEvent(this, this.handleLeaveModTeam)}
439 <li className="list-inline-item-action">
441 className="btn btn-link text-muted d-inline-block"
444 this.handleCancelLeaveModTeamClick
452 {amTopMod(this.props.moderators) && (
453 <li className="list-inline-item-action">
455 className="btn btn-link text-muted d-inline-block"
456 onClick={linkEvent(this, this.handleDeleteCommunity)}
458 !community_view.community.deleted
463 !community_view.community.deleted
468 {this.state.deleteCommunityLoading ? (
473 classes={`icon-inline ${
474 community_view.community.deleted && "text-danger"
484 <li className="list-inline-item">
485 {!this.props.community_view.community.removed ? (
487 className="btn btn-link text-muted d-inline-block"
488 onClick={linkEvent(this, this.handleModRemoveShow)}
494 className="btn btn-link text-muted d-inline-block"
495 onClick={linkEvent(this, this.handleRemoveCommunity)}
497 {this.state.removeCommunityLoading ? (
505 className="btn btn-link text-muted d-inline-block"
506 onClick={linkEvent(this, this.handlePurgeCommunityShow)}
507 aria-label={i18n.t("purge_community")}
509 {i18n.t("purge_community")}
514 {this.state.showRemoveDialog && (
515 <form onSubmit={linkEvent(this, this.handleRemoveCommunity)}>
516 <div className="form-group">
517 <label className="col-form-label" htmlFor="remove-reason">
523 className="form-control mr-2"
524 placeholder={i18n.t("optional")}
525 value={this.state.removeReason}
526 onInput={linkEvent(this, this.handleModRemoveReasonChange)}
529 {/* TODO hold off on expires for now */}
530 {/* <div class="form-group row"> */}
531 {/* <label class="col-form-label">Expires</label> */}
532 {/* <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.removeExpires} onInput={linkEvent(this, this.handleModRemoveExpiresChange)} /> */}
534 <div className="form-group">
535 <button type="submit" className="btn btn-secondary">
536 {this.state.removeCommunityLoading ? (
539 i18n.t("remove_community")
545 {this.state.showPurgeDialog && (
546 <form onSubmit={linkEvent(this, this.handlePurgeCommunity)}>
547 <div className="form-group">
550 <div className="form-group">
551 <label className="sr-only" htmlFor="purge-reason">
557 className="form-control mr-2"
558 placeholder={i18n.t("reason")}
559 value={this.state.purgeReason}
560 onInput={linkEvent(this, this.handlePurgeReasonChange)}
563 <div className="form-group">
564 {this.state.purgeCommunityLoading ? (
569 className="btn btn-secondary"
570 aria-label={i18n.t("purge_community")}
572 {i18n.t("purge_community")}
582 handleEditClick(i: Sidebar) {
583 i.setState({ showEdit: true });
587 this.setState({ showEdit: false });
590 handleShowConfirmLeaveModTeamClick(i: Sidebar) {
591 i.setState({ showConfirmLeaveModTeam: true });
594 handleCancelLeaveModTeamClick(i: Sidebar) {
595 i.setState({ showConfirmLeaveModTeam: false });
598 get canPost(): boolean {
600 !this.props.community_view.community.posting_restricted_to_mods ||
601 amMod(this.props.moderators) ||
606 handleModRemoveShow(i: Sidebar) {
607 i.setState({ showRemoveDialog: true });
610 handleModRemoveReasonChange(i: Sidebar, event: any) {
611 i.setState({ removeReason: event.target.value });
614 handleModRemoveExpiresChange(i: Sidebar, event: any) {
615 i.setState({ removeExpires: event.target.value });
618 handlePurgeCommunityShow(i: Sidebar) {
619 i.setState({ showPurgeDialog: true, showRemoveDialog: false });
622 handlePurgeReasonChange(i: Sidebar, event: any) {
623 i.setState({ purgeReason: event.target.value });
626 // TODO Do we need two of these?
627 handleUnfollowCommunity(i: Sidebar) {
628 i.setState({ followCommunityLoading: true });
629 i.props.onFollowCommunity({
630 community_id: i.props.community_view.community.id,
632 auth: myAuthRequired(),
636 handleFollowCommunity(i: Sidebar) {
637 i.setState({ followCommunityLoading: true });
638 i.props.onFollowCommunity({
639 community_id: i.props.community_view.community.id,
641 auth: myAuthRequired(),
645 handleBlockCommunity(i: Sidebar) {
646 const { community, blocked } = i.props.community_view;
648 i.props.onBlockCommunity({
649 community_id: community.id,
651 auth: myAuthRequired(),
655 handleLeaveModTeam(i: Sidebar) {
656 const myId = UserService.Instance.myUserInfo?.local_user_view.person.id;
658 i.setState({ leaveModTeamLoading: true });
659 i.props.onLeaveModTeam({
660 community_id: i.props.community_view.community.id,
663 auth: myAuthRequired(),
668 handleDeleteCommunity(i: Sidebar) {
669 i.setState({ deleteCommunityLoading: true });
670 i.props.onDeleteCommunity({
671 community_id: i.props.community_view.community.id,
672 deleted: !i.props.community_view.community.deleted,
673 auth: myAuthRequired(),
677 handleRemoveCommunity(i: Sidebar, event: any) {
678 event.preventDefault();
679 i.setState({ removeCommunityLoading: true });
680 i.props.onRemoveCommunity({
681 community_id: i.props.community_view.community.id,
682 removed: !i.props.community_view.community.removed,
683 reason: i.state.removeReason,
684 expires: getUnixTime(i.state.removeExpires), // TODO fix this
685 auth: myAuthRequired(),
689 handlePurgeCommunity(i: Sidebar, event: any) {
690 event.preventDefault();
691 i.setState({ purgeCommunityLoading: true });
692 i.props.onPurgeCommunity({
693 community_id: i.props.community_view.community.id,
694 reason: i.state.purgeReason,
695 auth: myAuthRequired(),