1 import { Component, InfernoNode, linkEvent } from "inferno";
2 import { Link } from "inferno-router";
6 CommunityModeratorView,
15 } from "lemmy-js-client";
16 import { i18n } from "../../i18next";
17 import { UserService } from "../../services";
25 import { amAdmin } from "../../utils/roles/am-admin";
26 import { amMod } from "../../utils/roles/am-mod";
27 import { amTopMod } from "../../utils/roles/am-top-mod";
28 import { BannerIconHeader } from "../common/banner-icon-header";
29 import { Icon, PurgeWarning, Spinner } from "../common/icon";
30 import { CommunityForm } from "../community/community-form";
31 import { CommunityLink } from "../community/community-link";
32 import { PersonListing } from "../person/person-listing";
34 interface SidebarProps {
35 community_view: CommunityView;
36 moderators: CommunityModeratorView[];
38 allLanguages: Language[];
39 siteLanguages: number[];
40 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 blockCommunityLoading: 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 blockCommunityLoading: false,
81 purgeCommunityLoading: false,
84 constructor(props: any, context: any) {
85 super(props, context);
86 this.handleEditCancel = this.handleEditCancel.bind(this);
89 componentWillReceiveProps(
90 nextProps: Readonly<{ children?: InfernoNode } & SidebarProps>
92 if (this.props.moderators != nextProps.moderators) {
94 showConfirmLeaveModTeam: false,
98 if (this.props.community_view != nextProps.community_view) {
101 showPurgeDialog: false,
102 showRemoveDialog: false,
103 deleteCommunityLoading: false,
104 removeCommunityLoading: false,
105 leaveModTeamLoading: false,
106 followCommunityLoading: false,
107 blockCommunityLoading: false,
108 purgeCommunityLoading: false,
116 {!this.state.showEdit ? (
120 community_view={this.props.community_view}
121 allLanguages={this.props.allLanguages}
122 siteLanguages={this.props.siteLanguages}
123 communityLanguages={this.props.communityLanguages}
124 onUpsertCommunity={this.props.onEditCommunity}
125 onCancel={this.handleEditCancel}
126 enableNsfw={this.props.enableNsfw}
134 const myUSerInfo = UserService.Instance.myUserInfo;
135 const { name, actor_id } = this.props.community_view.community;
138 <div className="card border-secondary mb-3">
139 <div className="card-body">
140 {this.communityTitle()}
141 {this.props.editable && this.adminButtons()}
142 {myUSerInfo && this.subscribe()}
143 {this.canPost && this.createPost()}
144 {myUSerInfo && this.blockCommunity()}
146 <div className="alert alert-info" role="alert">
147 {i18n.t("community_not_logged_in_alert", {
149 instance: hostname(actor_id),
155 <div className="card border-secondary mb-3">
156 <div className="card-body">
167 const community = this.props.community_view.community;
168 const subscribed = this.props.community_view.subscribed;
171 <h5 className="mb-0">
172 {this.props.showIcon && !community.removed && (
173 <BannerIconHeader icon={community.icon} banner={community.banner} />
175 <span className="mr-2">
176 <CommunityLink community={community} hideAvatar />
178 {subscribed === "Subscribed" && (
180 className="btn btn-secondary btn-sm mr-2"
181 onClick={linkEvent(this, this.handleUnfollowCommunity)}
183 {this.state.followCommunityLoading ? (
187 <Icon icon="check" classes="icon-inline text-success mr-1" />
193 {subscribed === "Pending" && (
195 className="btn btn-warning mr-2"
196 onClick={linkEvent(this, this.handleUnfollowCommunity)}
198 {this.state.followCommunityLoading ? (
201 i18n.t("subscribe_pending")
205 {community.removed && (
206 <small className="mr-2 text-muted font-italic">
210 {community.deleted && (
211 <small className="mr-2 text-muted font-italic">
216 <small className="mr-2 text-muted font-italic">
222 community={community}
233 const community_view = this.props.community_view;
234 const counts = community_view.counts;
236 <ul className="my-1 list-inline">
237 <li className="list-inline-item badge badge-secondary">
238 {i18n.t("number_online", {
239 count: this.props.online,
240 formattedCount: numToSI(this.props.online),
244 className="list-inline-item badge badge-secondary pointer"
245 data-tippy-content={i18n.t("active_users_in_the_last_day", {
246 count: Number(counts.users_active_day),
247 formattedCount: numToSI(counts.users_active_day),
250 {i18n.t("number_of_users", {
251 count: Number(counts.users_active_day),
252 formattedCount: numToSI(counts.users_active_day),
257 className="list-inline-item badge badge-secondary pointer"
258 data-tippy-content={i18n.t("active_users_in_the_last_week", {
259 count: Number(counts.users_active_week),
260 formattedCount: numToSI(counts.users_active_week),
263 {i18n.t("number_of_users", {
264 count: Number(counts.users_active_week),
265 formattedCount: numToSI(counts.users_active_week),
270 className="list-inline-item badge badge-secondary pointer"
271 data-tippy-content={i18n.t("active_users_in_the_last_month", {
272 count: Number(counts.users_active_month),
273 formattedCount: numToSI(counts.users_active_month),
276 {i18n.t("number_of_users", {
277 count: Number(counts.users_active_month),
278 formattedCount: numToSI(counts.users_active_month),
283 className="list-inline-item badge badge-secondary pointer"
284 data-tippy-content={i18n.t("active_users_in_the_last_six_months", {
285 count: Number(counts.users_active_half_year),
286 formattedCount: numToSI(counts.users_active_half_year),
289 {i18n.t("number_of_users", {
290 count: Number(counts.users_active_half_year),
291 formattedCount: numToSI(counts.users_active_half_year),
293 / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
295 <li className="list-inline-item badge badge-secondary">
296 {i18n.t("number_of_subscribers", {
297 count: Number(counts.subscribers),
298 formattedCount: numToSI(counts.subscribers),
301 <li className="list-inline-item badge badge-secondary">
302 {i18n.t("number_of_posts", {
303 count: Number(counts.posts),
304 formattedCount: numToSI(counts.posts),
307 <li className="list-inline-item badge badge-secondary">
308 {i18n.t("number_of_comments", {
309 count: Number(counts.comments),
310 formattedCount: numToSI(counts.comments),
313 <li className="list-inline-item">
315 className="badge badge-primary"
316 to={`/modlog/${this.props.community_view.community.id}`}
327 <ul className="list-inline small">
328 <li className="list-inline-item">{i18n.t("mods")}: </li>
329 {this.props.moderators.map(mod => (
330 <li key={mod.moderator.id} className="list-inline-item">
331 <PersonListing person={mod.moderator} />
339 const cv = this.props.community_view;
342 className={`btn btn-secondary btn-block mb-2 ${
343 cv.community.deleted || cv.community.removed ? "no-click" : ""
345 to={`/create_post?communityId=${cv.community.id}`}
347 {i18n.t("create_a_post")}
353 const community_view = this.props.community_view;
355 <div className="mb-2">
356 {community_view.subscribed == "NotSubscribed" && (
358 className="btn btn-secondary btn-block"
359 onClick={linkEvent(this, this.handleFollowCommunity)}
361 {this.state.followCommunityLoading ? (
373 const community_view = this.props.community_view;
374 const blocked = this.props.community_view.blocked;
377 <div className="mb-2">
378 {community_view.subscribed == "NotSubscribed" &&
381 className="btn btn-danger btn-block"
382 onClick={linkEvent(this, this.handleBlockCommunity)}
384 {this.state.blockCommunityLoading ? (
387 i18n.t("unblock_community")
392 className="btn btn-danger btn-block"
393 onClick={linkEvent(this, this.handleBlockCommunity)}
395 {this.state.blockCommunityLoading ? (
398 i18n.t("block_community")
407 const desc = this.props.community_view.community.description;
410 <div className="md-div" dangerouslySetInnerHTML={mdToHtml(desc)} />
416 const community_view = this.props.community_view;
419 <ul className="list-inline mb-1 text-muted font-weight-bold">
420 {amMod(this.props.moderators) && (
422 <li className="list-inline-item-action">
424 className="btn btn-link text-muted d-inline-block"
425 onClick={linkEvent(this, this.handleEditClick)}
426 data-tippy-content={i18n.t("edit")}
427 aria-label={i18n.t("edit")}
429 <Icon icon="edit" classes="icon-inline" />
432 {!amTopMod(this.props.moderators) &&
433 (!this.state.showConfirmLeaveModTeam ? (
434 <li className="list-inline-item-action">
436 className="btn btn-link text-muted d-inline-block"
439 this.handleShowConfirmLeaveModTeamClick
442 {i18n.t("leave_mod_team")}
447 <li className="list-inline-item-action">
448 {i18n.t("are_you_sure")}
450 <li className="list-inline-item-action">
452 className="btn btn-link text-muted d-inline-block"
453 onClick={linkEvent(this, this.handleLeaveModTeam)}
458 <li className="list-inline-item-action">
460 className="btn btn-link text-muted d-inline-block"
463 this.handleCancelLeaveModTeamClick
471 {amTopMod(this.props.moderators) && (
472 <li className="list-inline-item-action">
474 className="btn btn-link text-muted d-inline-block"
475 onClick={linkEvent(this, this.handleDeleteCommunity)}
477 !community_view.community.deleted
482 !community_view.community.deleted
487 {this.state.deleteCommunityLoading ? (
492 classes={`icon-inline ${
493 community_view.community.deleted && "text-danger"
503 <li className="list-inline-item">
504 {!this.props.community_view.community.removed ? (
506 className="btn btn-link text-muted d-inline-block"
507 onClick={linkEvent(this, this.handleModRemoveShow)}
513 className="btn btn-link text-muted d-inline-block"
514 onClick={linkEvent(this, this.handleRemoveCommunity)}
516 {this.state.removeCommunityLoading ? (
524 className="btn btn-link text-muted d-inline-block"
525 onClick={linkEvent(this, this.handlePurgeCommunityShow)}
526 aria-label={i18n.t("purge_community")}
528 {i18n.t("purge_community")}
533 {this.state.showRemoveDialog && (
534 <form onSubmit={linkEvent(this, this.handleRemoveCommunity)}>
535 <div className="form-group">
536 <label className="col-form-label" htmlFor="remove-reason">
542 className="form-control mr-2"
543 placeholder={i18n.t("optional")}
544 value={this.state.removeReason}
545 onInput={linkEvent(this, this.handleModRemoveReasonChange)}
548 {/* TODO hold off on expires for now */}
549 {/* <div class="form-group row"> */}
550 {/* <label class="col-form-label">Expires</label> */}
551 {/* <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.removeExpires} onInput={linkEvent(this, this.handleModRemoveExpiresChange)} /> */}
553 <div className="form-group">
554 <button type="submit" className="btn btn-secondary">
555 {this.state.removeCommunityLoading ? (
558 i18n.t("remove_community")
564 {this.state.showPurgeDialog && (
565 <form onSubmit={linkEvent(this, this.handlePurgeCommunity)}>
566 <div className="form-group">
569 <div className="form-group">
570 <label className="sr-only" htmlFor="purge-reason">
576 className="form-control mr-2"
577 placeholder={i18n.t("reason")}
578 value={this.state.purgeReason}
579 onInput={linkEvent(this, this.handlePurgeReasonChange)}
582 <div className="form-group">
583 {this.state.purgeCommunityLoading ? (
588 className="btn btn-secondary"
589 aria-label={i18n.t("purge_community")}
591 {i18n.t("purge_community")}
601 handleEditClick(i: Sidebar) {
602 i.setState({ showEdit: true });
606 this.setState({ showEdit: false });
609 handleShowConfirmLeaveModTeamClick(i: Sidebar) {
610 i.setState({ showConfirmLeaveModTeam: true });
613 handleCancelLeaveModTeamClick(i: Sidebar) {
614 i.setState({ showConfirmLeaveModTeam: false });
617 get canPost(): boolean {
619 !this.props.community_view.community.posting_restricted_to_mods ||
620 amMod(this.props.moderators) ||
625 handleModRemoveShow(i: Sidebar) {
626 i.setState({ showRemoveDialog: true });
629 handleModRemoveReasonChange(i: Sidebar, event: any) {
630 i.setState({ removeReason: event.target.value });
633 handleModRemoveExpiresChange(i: Sidebar, event: any) {
634 i.setState({ removeExpires: event.target.value });
637 handlePurgeCommunityShow(i: Sidebar) {
638 i.setState({ showPurgeDialog: true, showRemoveDialog: false });
641 handlePurgeReasonChange(i: Sidebar, event: any) {
642 i.setState({ purgeReason: event.target.value });
645 // TODO Do we need two of these?
646 handleUnfollowCommunity(i: Sidebar) {
647 i.setState({ followCommunityLoading: true });
648 i.props.onFollowCommunity({
649 community_id: i.props.community_view.community.id,
651 auth: myAuthRequired(),
655 handleFollowCommunity(i: Sidebar) {
656 i.setState({ followCommunityLoading: true });
657 i.props.onFollowCommunity({
658 community_id: i.props.community_view.community.id,
660 auth: myAuthRequired(),
664 handleBlockCommunity(i: Sidebar) {
665 i.setState({ blockCommunityLoading: true });
666 i.props.onBlockCommunity({
668 block: !i.props.community_view.blocked,
669 auth: myAuthRequired(),
673 handleLeaveModTeam(i: Sidebar) {
674 const myId = UserService.Instance.myUserInfo?.local_user_view.person.id;
676 i.setState({ leaveModTeamLoading: true });
677 i.props.onLeaveModTeam({
678 community_id: i.props.community_view.community.id,
681 auth: myAuthRequired(),
686 handleDeleteCommunity(i: Sidebar) {
687 i.setState({ deleteCommunityLoading: true });
688 i.props.onDeleteCommunity({
689 community_id: i.props.community_view.community.id,
690 deleted: !i.props.community_view.community.deleted,
691 auth: myAuthRequired(),
695 handleRemoveCommunity(i: Sidebar, event: any) {
696 event.preventDefault();
697 i.setState({ removeCommunityLoading: true });
698 i.props.onRemoveCommunity({
699 community_id: i.props.community_view.community.id,
700 removed: !i.props.community_view.community.removed,
701 reason: i.state.removeReason,
702 expires: getUnixTime(i.state.removeExpires), // TODO fix this
703 auth: myAuthRequired(),
707 handlePurgeCommunity(i: Sidebar, event: any) {
708 event.preventDefault();
709 i.setState({ purgeCommunityLoading: true });
710 i.props.onPurgeCommunity({
711 community_id: i.props.community_view.community.id,
712 reason: i.state.purgeReason,
713 auth: myAuthRequired(),