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">
136 <CommunityLink community={community} hideAvatar />
138 {subscribed === "Subscribed" && (
140 className="btn btn-secondary btn-sm mr-2"
141 onClick={linkEvent(this, this.handleUnsubscribe)}
143 <Icon icon="check" classes="icon-inline text-success mr-1" />
147 {subscribed === "Pending" && (
149 className="btn btn-warning mr-2"
150 onClick={linkEvent(this, this.handleUnsubscribe)}
152 {i18n.t("subscribe_pending")}
155 {community.removed && (
156 <small className="mr-2 text-muted font-italic">
160 {community.deleted && (
161 <small className="mr-2 text-muted font-italic">
166 <small className="mr-2 text-muted font-italic">
172 community={community}
183 const community_view = this.props.community_view;
184 const counts = community_view.counts;
186 <ul className="my-1 list-inline">
187 <li className="list-inline-item badge badge-secondary">
188 {i18n.t("number_online", {
189 count: this.props.online,
190 formattedCount: numToSI(this.props.online),
194 className="list-inline-item badge badge-secondary pointer"
195 data-tippy-content={i18n.t("active_users_in_the_last_day", {
196 count: Number(counts.users_active_day),
197 formattedCount: numToSI(counts.users_active_day),
200 {i18n.t("number_of_users", {
201 count: Number(counts.users_active_day),
202 formattedCount: numToSI(counts.users_active_day),
207 className="list-inline-item badge badge-secondary pointer"
208 data-tippy-content={i18n.t("active_users_in_the_last_week", {
209 count: Number(counts.users_active_week),
210 formattedCount: numToSI(counts.users_active_week),
213 {i18n.t("number_of_users", {
214 count: Number(counts.users_active_week),
215 formattedCount: numToSI(counts.users_active_week),
220 className="list-inline-item badge badge-secondary pointer"
221 data-tippy-content={i18n.t("active_users_in_the_last_month", {
222 count: Number(counts.users_active_month),
223 formattedCount: numToSI(counts.users_active_month),
226 {i18n.t("number_of_users", {
227 count: Number(counts.users_active_month),
228 formattedCount: numToSI(counts.users_active_month),
233 className="list-inline-item badge badge-secondary pointer"
234 data-tippy-content={i18n.t("active_users_in_the_last_six_months", {
235 count: Number(counts.users_active_half_year),
236 formattedCount: numToSI(counts.users_active_half_year),
239 {i18n.t("number_of_users", {
240 count: Number(counts.users_active_half_year),
241 formattedCount: numToSI(counts.users_active_half_year),
243 / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
245 <li className="list-inline-item badge badge-secondary">
246 {i18n.t("number_of_subscribers", {
247 count: Number(counts.subscribers),
248 formattedCount: numToSI(counts.subscribers),
251 <li className="list-inline-item badge badge-secondary">
252 {i18n.t("number_of_posts", {
253 count: Number(counts.posts),
254 formattedCount: numToSI(counts.posts),
257 <li className="list-inline-item badge badge-secondary">
258 {i18n.t("number_of_comments", {
259 count: Number(counts.comments),
260 formattedCount: numToSI(counts.comments),
263 <li className="list-inline-item">
265 className="badge badge-primary"
266 to={`/modlog/${this.props.community_view.community.id}`}
277 <ul className="list-inline small">
278 <li className="list-inline-item">{i18n.t("mods")}: </li>
279 {this.props.moderators.map(mod => (
280 <li key={mod.moderator.id} className="list-inline-item">
281 <PersonListing person={mod.moderator} />
289 const cv = this.props.community_view;
292 className={`btn btn-secondary btn-block mb-2 ${
293 cv.community.deleted || cv.community.removed ? "no-click" : ""
295 to={`/create_post?communityId=${cv.community.id}`}
297 {i18n.t("create_a_post")}
303 const community_view = this.props.community_view;
305 <div className="mb-2">
306 {community_view.subscribed == "NotSubscribed" && (
308 className="btn btn-secondary btn-block"
309 onClick={linkEvent(this, this.handleSubscribe)}
311 {i18n.t("subscribe")}
319 const community_view = this.props.community_view;
320 const blocked = this.props.community_view.blocked;
323 <div className="mb-2">
324 {community_view.subscribed == "NotSubscribed" &&
327 className="btn btn-danger btn-block"
328 onClick={linkEvent(this, this.handleUnblock)}
330 {i18n.t("unblock_community")}
334 className="btn btn-danger btn-block"
335 onClick={linkEvent(this, this.handleBlock)}
337 {i18n.t("block_community")}
345 const desc = this.props.community_view.community.description;
348 <div className="md-div" dangerouslySetInnerHTML={mdToHtml(desc)} />
354 const community_view = this.props.community_view;
357 <ul className="list-inline mb-1 text-muted font-weight-bold">
358 {amMod(this.props.moderators) && (
360 <li className="list-inline-item-action">
362 className="btn btn-link text-muted d-inline-block"
363 onClick={linkEvent(this, this.handleEditClick)}
364 data-tippy-content={i18n.t("edit")}
365 aria-label={i18n.t("edit")}
367 <Icon icon="edit" classes="icon-inline" />
370 {!amTopMod(this.props.moderators) &&
371 (!this.state.showConfirmLeaveModTeam ? (
372 <li className="list-inline-item-action">
374 className="btn btn-link text-muted d-inline-block"
377 this.handleShowConfirmLeaveModTeamClick
380 {i18n.t("leave_mod_team")}
385 <li className="list-inline-item-action">
386 {i18n.t("are_you_sure")}
388 <li className="list-inline-item-action">
390 className="btn btn-link text-muted d-inline-block"
391 onClick={linkEvent(this, this.handleLeaveModTeamClick)}
396 <li className="list-inline-item-action">
398 className="btn btn-link text-muted d-inline-block"
401 this.handleCancelLeaveModTeamClick
409 {amTopMod(this.props.moderators) && (
410 <li className="list-inline-item-action">
412 className="btn btn-link text-muted d-inline-block"
413 onClick={linkEvent(this, this.handleDeleteClick)}
415 !community_view.community.deleted
420 !community_view.community.deleted
427 classes={`icon-inline ${
428 community_view.community.deleted && "text-danger"
437 <li className="list-inline-item">
438 {!this.props.community_view.community.removed ? (
440 className="btn btn-link text-muted d-inline-block"
441 onClick={linkEvent(this, this.handleModRemoveShow)}
447 className="btn btn-link text-muted d-inline-block"
448 onClick={linkEvent(this, this.handleModRemoveSubmit)}
454 className="btn btn-link text-muted d-inline-block"
455 onClick={linkEvent(this, this.handlePurgeCommunityShow)}
456 aria-label={i18n.t("purge_community")}
458 {i18n.t("purge_community")}
463 {this.state.showRemoveDialog && (
464 <form onSubmit={linkEvent(this, this.handleModRemoveSubmit)}>
465 <div className="form-group">
466 <label className="col-form-label" htmlFor="remove-reason">
472 className="form-control mr-2"
473 placeholder={i18n.t("optional")}
474 value={this.state.removeReason}
475 onInput={linkEvent(this, this.handleModRemoveReasonChange)}
478 {/* TODO hold off on expires for now */}
479 {/* <div class="form-group row"> */}
480 {/* <label class="col-form-label">Expires</label> */}
481 {/* <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.removeExpires} onInput={linkEvent(this, this.handleModRemoveExpiresChange)} /> */}
483 <div className="form-group">
484 <button type="submit" className="btn btn-secondary">
485 {i18n.t("remove_community")}
490 {this.state.showPurgeDialog && (
491 <form onSubmit={linkEvent(this, this.handlePurgeSubmit)}>
492 <div className="form-group">
495 <div className="form-group">
496 <label className="sr-only" htmlFor="purge-reason">
502 className="form-control mr-2"
503 placeholder={i18n.t("reason")}
504 value={this.state.purgeReason}
505 onInput={linkEvent(this, this.handlePurgeReasonChange)}
508 <div className="form-group">
509 {this.state.purgeLoading ? (
514 className="btn btn-secondary"
515 aria-label={i18n.t("purge_community")}
517 {i18n.t("purge_community")}
527 handleEditClick(i: Sidebar) {
528 i.setState({ showEdit: true });
531 handleEditCommunity() {
532 this.setState({ showEdit: false });
536 this.setState({ showEdit: false });
539 handleDeleteClick(i: Sidebar, event: any) {
540 event.preventDefault();
541 const auth = myAuth();
543 const deleteForm: DeleteCommunity = {
544 community_id: i.props.community_view.community.id,
545 deleted: !i.props.community_view.community.deleted,
548 WebSocketService.Instance.send(wsClient.deleteCommunity(deleteForm));
552 handleShowConfirmLeaveModTeamClick(i: Sidebar) {
553 i.setState({ showConfirmLeaveModTeam: true });
556 handleLeaveModTeamClick(i: Sidebar) {
557 const mui = UserService.Instance.myUserInfo;
558 const auth = myAuth();
560 const form: AddModToCommunity = {
561 person_id: mui.local_user_view.person.id,
562 community_id: i.props.community_view.community.id,
566 WebSocketService.Instance.send(wsClient.addModToCommunity(form));
567 i.setState({ showConfirmLeaveModTeam: false });
571 handleCancelLeaveModTeamClick(i: Sidebar) {
572 i.setState({ showConfirmLeaveModTeam: false });
575 handleUnsubscribe(i: Sidebar, event: any) {
576 event.preventDefault();
577 const community_id = i.props.community_view.community.id;
578 const auth = myAuth();
580 const form: FollowCommunity = {
585 WebSocketService.Instance.send(wsClient.followCommunity(form));
589 const mui = UserService.Instance.myUserInfo;
591 mui.follows = mui.follows.filter(i => i.community.id != community_id);
595 handleSubscribe(i: Sidebar, event: any) {
596 event.preventDefault();
597 const community_id = i.props.community_view.community.id;
598 const auth = myAuth();
600 const form: FollowCommunity = {
605 WebSocketService.Instance.send(wsClient.followCommunity(form));
609 const mui = UserService.Instance.myUserInfo;
612 community: i.props.community_view.community,
613 follower: mui.local_user_view.person,
618 get canPost(): boolean {
620 !this.props.community_view.community.posting_restricted_to_mods ||
621 amMod(this.props.moderators) ||
626 handleModRemoveShow(i: Sidebar) {
627 i.setState({ showRemoveDialog: true });
630 handleModRemoveReasonChange(i: Sidebar, event: any) {
631 i.setState({ removeReason: event.target.value });
634 handleModRemoveExpiresChange(i: Sidebar, event: any) {
635 i.setState({ removeExpires: event.target.value });
638 handleModRemoveSubmit(i: Sidebar, event: any) {
639 event.preventDefault();
640 const auth = myAuth();
642 const removeForm: RemoveCommunity = {
643 community_id: i.props.community_view.community.id,
644 removed: !i.props.community_view.community.removed,
645 reason: i.state.removeReason,
646 expires: getUnixTime(i.state.removeExpires),
649 WebSocketService.Instance.send(wsClient.removeCommunity(removeForm));
651 i.setState({ showRemoveDialog: false });
655 handlePurgeCommunityShow(i: Sidebar) {
656 i.setState({ showPurgeDialog: true, showRemoveDialog: false });
659 handlePurgeReasonChange(i: Sidebar, event: any) {
660 i.setState({ purgeReason: event.target.value });
663 handlePurgeSubmit(i: Sidebar, event: any) {
664 event.preventDefault();
666 const auth = myAuth();
668 const form: PurgeCommunity = {
669 community_id: i.props.community_view.community.id,
670 reason: i.state.purgeReason,
673 WebSocketService.Instance.send(wsClient.purgeCommunity(form));
674 i.setState({ purgeLoading: true });
678 handleBlock(i: Sidebar, event: any) {
679 event.preventDefault();
680 const auth = myAuth();
682 const blockCommunityForm: BlockCommunity = {
683 community_id: i.props.community_view.community.id,
687 WebSocketService.Instance.send(
688 wsClient.blockCommunity(blockCommunityForm)
693 handleUnblock(i: Sidebar, event: any) {
694 event.preventDefault();
695 const auth = myAuth();
697 const blockCommunityForm: BlockCommunity = {
698 community_id: i.props.community_view.community.id,
702 WebSocketService.Instance.send(
703 wsClient.blockCommunity(blockCommunityForm)