1 import { Component, linkEvent } from "inferno";
2 import { Link } from "inferno-router";
6 CommunityModeratorView,
15 } from "lemmy-js-client";
16 import { i18n } from "../../i18next";
17 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[];
37 admins: PersonViewSafe[];
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}
96 <div className="card border-secondary mb-3">
97 <div className="card-body">
98 {this.communityTitle()}
99 {this.props.editable && this.adminButtons()}
101 {this.canPost && this.createPost()}
102 {this.blockCommunity()}
105 <div className="card border-secondary mb-3">
106 <div className="card-body">
117 let community = this.props.community_view.community;
118 let subscribed = this.props.community_view.subscribed;
121 <h5 className="mb-0">
122 {this.props.showIcon && !community.removed && (
123 <BannerIconHeader icon={community.icon} banner={community.banner} />
125 <span className="mr-2">{community.title}</span>
126 {subscribed == SubscribedType.Subscribed && (
128 className="btn btn-secondary btn-sm mr-2"
129 onClick={linkEvent(this, this.handleUnsubscribe)}
131 <Icon icon="check" classes="icon-inline text-success mr-1" />
135 {subscribed == SubscribedType.Pending && (
137 className="btn btn-warning mr-2"
138 onClick={linkEvent(this, this.handleUnsubscribe)}
140 {i18n.t("subscribe_pending")}
143 {community.removed && (
144 <small className="mr-2 text-muted font-italic">
148 {community.deleted && (
149 <small className="mr-2 text-muted font-italic">
154 <small className="mr-2 text-muted font-italic">
160 community={community}
171 let community_view = this.props.community_view;
172 let counts = community_view.counts;
174 <ul className="my-1 list-inline">
175 <li className="list-inline-item badge badge-secondary">
176 {i18n.t("number_online", {
177 count: this.props.online,
178 formattedCount: numToSI(this.props.online),
182 className="list-inline-item badge badge-secondary pointer"
183 data-tippy-content={i18n.t("active_users_in_the_last_day", {
184 count: counts.users_active_day,
185 formattedCount: counts.users_active_day,
188 {i18n.t("number_of_users", {
189 count: counts.users_active_day,
190 formattedCount: numToSI(counts.users_active_day),
195 className="list-inline-item badge badge-secondary pointer"
196 data-tippy-content={i18n.t("active_users_in_the_last_week", {
197 count: counts.users_active_week,
198 formattedCount: counts.users_active_week,
201 {i18n.t("number_of_users", {
202 count: counts.users_active_week,
203 formattedCount: numToSI(counts.users_active_week),
208 className="list-inline-item badge badge-secondary pointer"
209 data-tippy-content={i18n.t("active_users_in_the_last_month", {
210 count: counts.users_active_month,
211 formattedCount: counts.users_active_month,
214 {i18n.t("number_of_users", {
215 count: counts.users_active_month,
216 formattedCount: numToSI(counts.users_active_month),
221 className="list-inline-item badge badge-secondary pointer"
222 data-tippy-content={i18n.t("active_users_in_the_last_six_months", {
223 count: counts.users_active_half_year,
224 formattedCount: counts.users_active_half_year,
227 {i18n.t("number_of_users", {
228 count: counts.users_active_half_year,
229 formattedCount: numToSI(counts.users_active_half_year),
231 / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
233 <li className="list-inline-item badge badge-secondary">
234 {i18n.t("number_of_subscribers", {
235 count: counts.subscribers,
236 formattedCount: numToSI(counts.subscribers),
239 <li className="list-inline-item badge badge-secondary">
240 {i18n.t("number_of_posts", {
242 formattedCount: numToSI(counts.posts),
245 <li className="list-inline-item badge badge-secondary">
246 {i18n.t("number_of_comments", {
247 count: counts.comments,
248 formattedCount: numToSI(counts.comments),
251 <li className="list-inline-item">
253 className="badge badge-primary"
254 to={`/modlog/community/${this.props.community_view.community.id}`}
265 <ul className="list-inline small">
266 <li className="list-inline-item">{i18n.t("mods")}: </li>
267 {this.props.moderators.map(mod => (
268 <li key={mod.moderator.id} className="list-inline-item">
269 <PersonListing person={mod.moderator} />
277 let cv = this.props.community_view;
280 className={`btn btn-secondary btn-block mb-2 ${
281 cv.community.deleted || cv.community.removed ? "no-click" : ""
283 to={`/create_post?communityId=${cv.community.id}`}
285 {i18n.t("create_a_post")}
291 let community_view = this.props.community_view;
293 <div className="mb-2">
294 {community_view.subscribed == SubscribedType.NotSubscribed && (
296 className="btn btn-secondary btn-block"
297 onClick={linkEvent(this, this.handleSubscribe)}
299 {i18n.t("subscribe")}
307 let community_view = this.props.community_view;
308 let blocked = this.props.community_view.blocked;
311 <div className="mb-2">
312 {community_view.subscribed == SubscribedType.NotSubscribed &&
315 className="btn btn-danger btn-block"
316 onClick={linkEvent(this, this.handleUnblock)}
318 {i18n.t("unblock_community")}
322 className="btn btn-danger btn-block"
323 onClick={linkEvent(this, this.handleBlock)}
325 {i18n.t("block_community")}
333 let desc = this.props.community_view.community.description;
336 <div className="md-div" dangerouslySetInnerHTML={mdToHtml(desc)} />
342 let community_view = this.props.community_view;
345 <ul className="list-inline mb-1 text-muted font-weight-bold">
346 {amMod(this.props.moderators) && (
348 <li className="list-inline-item-action">
350 className="btn btn-link text-muted d-inline-block"
351 onClick={linkEvent(this, this.handleEditClick)}
352 data-tippy-content={i18n.t("edit")}
353 aria-label={i18n.t("edit")}
355 <Icon icon="edit" classes="icon-inline" />
358 {!amTopMod(this.props.moderators) &&
359 (!this.state.showConfirmLeaveModTeam ? (
360 <li className="list-inline-item-action">
362 className="btn btn-link text-muted d-inline-block"
365 this.handleShowConfirmLeaveModTeamClick
368 {i18n.t("leave_mod_team")}
373 <li className="list-inline-item-action">
374 {i18n.t("are_you_sure")}
376 <li className="list-inline-item-action">
378 className="btn btn-link text-muted d-inline-block"
379 onClick={linkEvent(this, this.handleLeaveModTeamClick)}
384 <li className="list-inline-item-action">
386 className="btn btn-link text-muted d-inline-block"
389 this.handleCancelLeaveModTeamClick
397 {amTopMod(this.props.moderators) && (
398 <li className="list-inline-item-action">
400 className="btn btn-link text-muted d-inline-block"
401 onClick={linkEvent(this, this.handleDeleteClick)}
403 !community_view.community.deleted
408 !community_view.community.deleted
415 classes={`icon-inline ${
416 community_view.community.deleted && "text-danger"
425 <li className="list-inline-item">
426 {!this.props.community_view.community.removed ? (
428 className="btn btn-link text-muted d-inline-block"
429 onClick={linkEvent(this, this.handleModRemoveShow)}
435 className="btn btn-link text-muted d-inline-block"
436 onClick={linkEvent(this, this.handleModRemoveSubmit)}
442 className="btn btn-link text-muted d-inline-block"
443 onClick={linkEvent(this, this.handlePurgeCommunityShow)}
444 aria-label={i18n.t("purge_community")}
446 {i18n.t("purge_community")}
451 {this.state.showRemoveDialog && (
452 <form onSubmit={linkEvent(this, this.handleModRemoveSubmit)}>
453 <div className="form-group">
454 <label className="col-form-label" htmlFor="remove-reason">
460 className="form-control mr-2"
461 placeholder={i18n.t("optional")}
462 value={this.state.removeReason}
463 onInput={linkEvent(this, this.handleModRemoveReasonChange)}
466 {/* TODO hold off on expires for now */}
467 {/* <div class="form-group row"> */}
468 {/* <label class="col-form-label">Expires</label> */}
469 {/* <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.removeExpires} onInput={linkEvent(this, this.handleModRemoveExpiresChange)} /> */}
471 <div className="form-group">
472 <button type="submit" className="btn btn-secondary">
473 {i18n.t("remove_community")}
478 {this.state.showPurgeDialog && (
479 <form onSubmit={linkEvent(this, this.handlePurgeSubmit)}>
480 <div className="form-group">
483 <div className="form-group">
484 <label className="sr-only" htmlFor="purge-reason">
490 className="form-control mr-2"
491 placeholder={i18n.t("reason")}
492 value={this.state.purgeReason}
493 onInput={linkEvent(this, this.handlePurgeReasonChange)}
496 <div className="form-group">
497 {this.state.purgeLoading ? (
502 className="btn btn-secondary"
503 aria-label={i18n.t("purge_community")}
505 {i18n.t("purge_community")}
515 handleEditClick(i: Sidebar) {
516 i.setState({ showEdit: true });
519 handleEditCommunity() {
520 this.setState({ showEdit: false });
524 this.setState({ showEdit: false });
527 handleDeleteClick(i: Sidebar, event: any) {
528 event.preventDefault();
531 let deleteForm: DeleteCommunity = {
532 community_id: i.props.community_view.community.id,
533 deleted: !i.props.community_view.community.deleted,
536 WebSocketService.Instance.send(wsClient.deleteCommunity(deleteForm));
540 handleShowConfirmLeaveModTeamClick(i: Sidebar) {
541 i.setState({ showConfirmLeaveModTeam: true });
544 handleLeaveModTeamClick(i: Sidebar) {
545 let mui = UserService.Instance.myUserInfo;
548 let form: AddModToCommunity = {
549 person_id: mui.local_user_view.person.id,
550 community_id: i.props.community_view.community.id,
554 WebSocketService.Instance.send(wsClient.addModToCommunity(form));
555 i.setState({ showConfirmLeaveModTeam: false });
559 handleCancelLeaveModTeamClick(i: Sidebar) {
560 i.setState({ showConfirmLeaveModTeam: false });
563 handleUnsubscribe(i: Sidebar, event: any) {
564 event.preventDefault();
565 let community_id = i.props.community_view.community.id;
568 let form: FollowCommunity = {
573 WebSocketService.Instance.send(wsClient.followCommunity(form));
577 let mui = UserService.Instance.myUserInfo;
579 mui.follows = mui.follows.filter(i => i.community.id != community_id);
583 handleSubscribe(i: Sidebar, event: any) {
584 event.preventDefault();
585 let community_id = i.props.community_view.community.id;
588 let form: FollowCommunity = {
593 WebSocketService.Instance.send(wsClient.followCommunity(form));
597 let mui = UserService.Instance.myUserInfo;
600 community: i.props.community_view.community,
601 follower: mui.local_user_view.person,
606 get canPost(): boolean {
608 !this.props.community_view.community.posting_restricted_to_mods ||
609 amMod(this.props.moderators) ||
614 handleModRemoveShow(i: Sidebar) {
615 i.setState({ showRemoveDialog: true });
618 handleModRemoveReasonChange(i: Sidebar, event: any) {
619 i.setState({ removeReason: event.target.value });
622 handleModRemoveExpiresChange(i: Sidebar, event: any) {
623 i.setState({ removeExpires: event.target.value });
626 handleModRemoveSubmit(i: Sidebar, event: any) {
627 event.preventDefault();
630 let removeForm: RemoveCommunity = {
631 community_id: i.props.community_view.community.id,
632 removed: !i.props.community_view.community.removed,
633 reason: i.state.removeReason,
634 expires: getUnixTime(i.state.removeExpires),
637 WebSocketService.Instance.send(wsClient.removeCommunity(removeForm));
639 i.setState({ showRemoveDialog: false });
643 handlePurgeCommunityShow(i: Sidebar) {
644 i.setState({ showPurgeDialog: true, showRemoveDialog: false });
647 handlePurgeReasonChange(i: Sidebar, event: any) {
648 i.setState({ purgeReason: event.target.value });
651 handlePurgeSubmit(i: Sidebar, event: any) {
652 event.preventDefault();
656 let form: PurgeCommunity = {
657 community_id: i.props.community_view.community.id,
658 reason: i.state.purgeReason,
661 WebSocketService.Instance.send(wsClient.purgeCommunity(form));
662 i.setState({ purgeLoading: true });
666 handleBlock(i: Sidebar, event: any) {
667 event.preventDefault();
670 let blockCommunityForm: BlockCommunity = {
671 community_id: i.props.community_view.community.id,
675 WebSocketService.Instance.send(
676 wsClient.blockCommunity(blockCommunityForm)
681 handleUnblock(i: Sidebar, event: any) {
682 event.preventDefault();
685 let blockCommunityForm: BlockCommunity = {
686 community_id: i.props.community_view.community.id,
690 WebSocketService.Instance.send(
691 wsClient.blockCommunity(blockCommunityForm)