1 import { Component, linkEvent } from "inferno";
2 import { Link } from "inferno-router";
6 CommunityModeratorView,
14 } from "lemmy-js-client";
15 import { i18n } from "../../i18next";
16 import { UserService, WebSocketService } from "../../services";
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[];
47 interface SidebarState {
48 removeReason?: string;
49 removeExpires?: string;
51 showRemoveDialog: boolean;
52 showPurgeDialog: boolean;
54 purgeLoading: boolean;
55 showConfirmLeaveModTeam: boolean;
58 export class Sidebar extends Component<SidebarProps, SidebarState> {
59 state: SidebarState = {
61 showRemoveDialog: false,
62 showPurgeDialog: false,
64 showConfirmLeaveModTeam: false,
67 constructor(props: any, context: any) {
68 super(props, context);
69 this.handleEditCommunity = this.handleEditCommunity.bind(this);
70 this.handleEditCancel = this.handleEditCancel.bind(this);
76 {!this.state.showEdit ? (
80 community_view={this.props.community_view}
81 allLanguages={this.props.allLanguages}
82 siteLanguages={this.props.siteLanguages}
83 communityLanguages={this.props.communityLanguages}
84 onEdit={this.handleEditCommunity}
85 onCancel={this.handleEditCancel}
86 enableNsfw={this.props.enableNsfw}
94 const myUSerInfo = UserService.Instance.myUserInfo;
95 const { name, actor_id } = this.props.community_view.community;
98 <div className="card border-secondary mb-3">
99 <div className="card-body">
100 {this.communityTitle()}
101 {this.props.editable && this.adminButtons()}
102 {myUSerInfo && this.subscribe()}
103 {this.canPost && this.createPost()}
104 {myUSerInfo && this.blockCommunity()}
106 <div className="alert alert-info" role="alert">
107 {i18n.t("community_not_logged_in_alert", {
109 instance: hostname(actor_id),
115 <div className="card border-secondary mb-3">
116 <div className="card-body">
127 const community = this.props.community_view.community;
128 const subscribed = this.props.community_view.subscribed;
131 <h5 className="mb-0">
132 {this.props.showIcon && !community.removed && (
133 <BannerIconHeader icon={community.icon} banner={community.banner} />
135 <span className="mr-2">{community.title}</span>
136 {subscribed === "Subscribed" && (
138 className="btn btn-secondary btn-sm mr-2"
139 onClick={linkEvent(this, this.handleUnsubscribe)}
141 <Icon icon="check" classes="icon-inline text-success mr-1" />
145 {subscribed === "Pending" && (
147 className="btn btn-warning mr-2"
148 onClick={linkEvent(this, this.handleUnsubscribe)}
150 {i18n.t("subscribe_pending")}
153 {community.removed && (
154 <small className="mr-2 text-muted font-italic">
158 {community.deleted && (
159 <small className="mr-2 text-muted font-italic">
164 <small className="mr-2 text-muted font-italic">
170 community={community}
181 const community_view = this.props.community_view;
182 const counts = community_view.counts;
184 <ul className="my-1 list-inline">
185 <li className="list-inline-item badge badge-secondary">
186 {i18n.t("number_online", {
187 count: this.props.online,
188 formattedCount: numToSI(this.props.online),
192 className="list-inline-item badge badge-secondary pointer"
193 data-tippy-content={i18n.t("active_users_in_the_last_day", {
194 count: Number(counts.users_active_day),
195 formattedCount: numToSI(counts.users_active_day),
198 {i18n.t("number_of_users", {
199 count: Number(counts.users_active_day),
200 formattedCount: numToSI(counts.users_active_day),
205 className="list-inline-item badge badge-secondary pointer"
206 data-tippy-content={i18n.t("active_users_in_the_last_week", {
207 count: Number(counts.users_active_week),
208 formattedCount: numToSI(counts.users_active_week),
211 {i18n.t("number_of_users", {
212 count: Number(counts.users_active_week),
213 formattedCount: numToSI(counts.users_active_week),
218 className="list-inline-item badge badge-secondary pointer"
219 data-tippy-content={i18n.t("active_users_in_the_last_month", {
220 count: Number(counts.users_active_month),
221 formattedCount: numToSI(counts.users_active_month),
224 {i18n.t("number_of_users", {
225 count: Number(counts.users_active_month),
226 formattedCount: numToSI(counts.users_active_month),
231 className="list-inline-item badge badge-secondary pointer"
232 data-tippy-content={i18n.t("active_users_in_the_last_six_months", {
233 count: Number(counts.users_active_half_year),
234 formattedCount: numToSI(counts.users_active_half_year),
237 {i18n.t("number_of_users", {
238 count: Number(counts.users_active_half_year),
239 formattedCount: numToSI(counts.users_active_half_year),
241 / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
243 <li className="list-inline-item badge badge-secondary">
244 {i18n.t("number_of_subscribers", {
245 count: Number(counts.subscribers),
246 formattedCount: numToSI(counts.subscribers),
249 <li className="list-inline-item badge badge-secondary">
250 {i18n.t("number_of_posts", {
251 count: Number(counts.posts),
252 formattedCount: numToSI(counts.posts),
255 <li className="list-inline-item badge badge-secondary">
256 {i18n.t("number_of_comments", {
257 count: Number(counts.comments),
258 formattedCount: numToSI(counts.comments),
261 <li className="list-inline-item">
263 className="badge badge-primary"
264 to={`/modlog/${this.props.community_view.community.id}`}
275 <ul className="list-inline small">
276 <li className="list-inline-item">{i18n.t("mods")}: </li>
277 {this.props.moderators.map(mod => (
278 <li key={mod.moderator.id} className="list-inline-item">
279 <PersonListing person={mod.moderator} />
287 const cv = this.props.community_view;
290 className={`btn btn-secondary btn-block mb-2 ${
291 cv.community.deleted || cv.community.removed ? "no-click" : ""
293 to={`/create_post?communityId=${cv.community.id}`}
295 {i18n.t("create_a_post")}
301 const community_view = this.props.community_view;
303 <div className="mb-2">
304 {community_view.subscribed == "NotSubscribed" && (
306 className="btn btn-secondary btn-block"
307 onClick={linkEvent(this, this.handleSubscribe)}
309 {i18n.t("subscribe")}
317 const community_view = this.props.community_view;
318 const blocked = this.props.community_view.blocked;
321 <div className="mb-2">
322 {community_view.subscribed == "NotSubscribed" &&
325 className="btn btn-danger btn-block"
326 onClick={linkEvent(this, this.handleUnblock)}
328 {i18n.t("unblock_community")}
332 className="btn btn-danger btn-block"
333 onClick={linkEvent(this, this.handleBlock)}
335 {i18n.t("block_community")}
343 const desc = this.props.community_view.community.description;
346 <div className="md-div" dangerouslySetInnerHTML={mdToHtml(desc)} />
352 const community_view = this.props.community_view;
355 <ul className="list-inline mb-1 text-muted font-weight-bold">
356 {amMod(this.props.moderators) && (
358 <li className="list-inline-item-action">
360 className="btn btn-link text-muted d-inline-block"
361 onClick={linkEvent(this, this.handleEditClick)}
362 data-tippy-content={i18n.t("edit")}
363 aria-label={i18n.t("edit")}
365 <Icon icon="edit" classes="icon-inline" />
368 {!amTopMod(this.props.moderators) &&
369 (!this.state.showConfirmLeaveModTeam ? (
370 <li className="list-inline-item-action">
372 className="btn btn-link text-muted d-inline-block"
375 this.handleShowConfirmLeaveModTeamClick
378 {i18n.t("leave_mod_team")}
383 <li className="list-inline-item-action">
384 {i18n.t("are_you_sure")}
386 <li className="list-inline-item-action">
388 className="btn btn-link text-muted d-inline-block"
389 onClick={linkEvent(this, this.handleLeaveModTeamClick)}
394 <li className="list-inline-item-action">
396 className="btn btn-link text-muted d-inline-block"
399 this.handleCancelLeaveModTeamClick
407 {amTopMod(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.handleDeleteClick)}
413 !community_view.community.deleted
418 !community_view.community.deleted
425 classes={`icon-inline ${
426 community_view.community.deleted && "text-danger"
435 <li className="list-inline-item">
436 {!this.props.community_view.community.removed ? (
438 className="btn btn-link text-muted d-inline-block"
439 onClick={linkEvent(this, this.handleModRemoveShow)}
445 className="btn btn-link text-muted d-inline-block"
446 onClick={linkEvent(this, this.handleModRemoveSubmit)}
452 className="btn btn-link text-muted d-inline-block"
453 onClick={linkEvent(this, this.handlePurgeCommunityShow)}
454 aria-label={i18n.t("purge_community")}
456 {i18n.t("purge_community")}
461 {this.state.showRemoveDialog && (
462 <form onSubmit={linkEvent(this, this.handleModRemoveSubmit)}>
463 <div className="form-group">
464 <label className="col-form-label" htmlFor="remove-reason">
470 className="form-control mr-2"
471 placeholder={i18n.t("optional")}
472 value={this.state.removeReason}
473 onInput={linkEvent(this, this.handleModRemoveReasonChange)}
476 {/* TODO hold off on expires for now */}
477 {/* <div class="form-group row"> */}
478 {/* <label class="col-form-label">Expires</label> */}
479 {/* <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.removeExpires} onInput={linkEvent(this, this.handleModRemoveExpiresChange)} /> */}
481 <div className="form-group">
482 <button type="submit" className="btn btn-secondary">
483 {i18n.t("remove_community")}
488 {this.state.showPurgeDialog && (
489 <form onSubmit={linkEvent(this, this.handlePurgeSubmit)}>
490 <div className="form-group">
493 <div className="form-group">
494 <label className="sr-only" htmlFor="purge-reason">
500 className="form-control mr-2"
501 placeholder={i18n.t("reason")}
502 value={this.state.purgeReason}
503 onInput={linkEvent(this, this.handlePurgeReasonChange)}
506 <div className="form-group">
507 {this.state.purgeLoading ? (
512 className="btn btn-secondary"
513 aria-label={i18n.t("purge_community")}
515 {i18n.t("purge_community")}
525 handleEditClick(i: Sidebar) {
526 i.setState({ showEdit: true });
529 handleEditCommunity() {
530 this.setState({ showEdit: false });
534 this.setState({ showEdit: false });
537 handleDeleteClick(i: Sidebar, event: any) {
538 event.preventDefault();
539 const auth = myAuth();
541 const deleteForm: DeleteCommunity = {
542 community_id: i.props.community_view.community.id,
543 deleted: !i.props.community_view.community.deleted,
546 WebSocketService.Instance.send(wsClient.deleteCommunity(deleteForm));
550 handleShowConfirmLeaveModTeamClick(i: Sidebar) {
551 i.setState({ showConfirmLeaveModTeam: true });
554 handleLeaveModTeamClick(i: Sidebar) {
555 const mui = UserService.Instance.myUserInfo;
556 const auth = myAuth();
558 const form: AddModToCommunity = {
559 person_id: mui.local_user_view.person.id,
560 community_id: i.props.community_view.community.id,
564 WebSocketService.Instance.send(wsClient.addModToCommunity(form));
565 i.setState({ showConfirmLeaveModTeam: false });
569 handleCancelLeaveModTeamClick(i: Sidebar) {
570 i.setState({ showConfirmLeaveModTeam: false });
573 handleUnsubscribe(i: Sidebar, event: any) {
574 event.preventDefault();
575 const community_id = i.props.community_view.community.id;
576 const auth = myAuth();
578 const form: FollowCommunity = {
583 WebSocketService.Instance.send(wsClient.followCommunity(form));
587 const mui = UserService.Instance.myUserInfo;
589 mui.follows = mui.follows.filter(i => i.community.id != community_id);
593 handleSubscribe(i: Sidebar, event: any) {
594 event.preventDefault();
595 const community_id = i.props.community_view.community.id;
596 const auth = myAuth();
598 const form: FollowCommunity = {
603 WebSocketService.Instance.send(wsClient.followCommunity(form));
607 const mui = UserService.Instance.myUserInfo;
610 community: i.props.community_view.community,
611 follower: mui.local_user_view.person,
616 get canPost(): boolean {
618 !this.props.community_view.community.posting_restricted_to_mods ||
619 amMod(this.props.moderators) ||
624 handleModRemoveShow(i: Sidebar) {
625 i.setState({ showRemoveDialog: true });
628 handleModRemoveReasonChange(i: Sidebar, event: any) {
629 i.setState({ removeReason: event.target.value });
632 handleModRemoveExpiresChange(i: Sidebar, event: any) {
633 i.setState({ removeExpires: event.target.value });
636 handleModRemoveSubmit(i: Sidebar, event: any) {
637 event.preventDefault();
638 const auth = myAuth();
640 const removeForm: RemoveCommunity = {
641 community_id: i.props.community_view.community.id,
642 removed: !i.props.community_view.community.removed,
643 reason: i.state.removeReason,
644 expires: getUnixTime(i.state.removeExpires),
647 WebSocketService.Instance.send(wsClient.removeCommunity(removeForm));
649 i.setState({ showRemoveDialog: false });
653 handlePurgeCommunityShow(i: Sidebar) {
654 i.setState({ showPurgeDialog: true, showRemoveDialog: false });
657 handlePurgeReasonChange(i: Sidebar, event: any) {
658 i.setState({ purgeReason: event.target.value });
661 handlePurgeSubmit(i: Sidebar, event: any) {
662 event.preventDefault();
664 const auth = myAuth();
666 const form: PurgeCommunity = {
667 community_id: i.props.community_view.community.id,
668 reason: i.state.purgeReason,
671 WebSocketService.Instance.send(wsClient.purgeCommunity(form));
672 i.setState({ purgeLoading: true });
676 handleBlock(i: Sidebar, event: any) {
677 event.preventDefault();
678 const auth = myAuth();
680 const blockCommunityForm: BlockCommunity = {
681 community_id: i.props.community_view.community.id,
685 WebSocketService.Instance.send(
686 wsClient.blockCommunity(blockCommunityForm)
691 handleUnblock(i: Sidebar, event: any) {
692 event.preventDefault();
693 const auth = myAuth();
695 const blockCommunityForm: BlockCommunity = {
696 community_id: i.props.community_view.community.id,
700 WebSocketService.Instance.send(
701 wsClient.blockCommunity(blockCommunityForm)