1 import { Component, linkEvent } from "inferno";
2 import { Link } from "inferno-router";
5 CommunityModeratorView,
11 } from "lemmy-js-client";
12 import { i18n } from "../../i18next";
13 import { UserService, WebSocketService } from "../../services";
21 import { BannerIconHeader } from "../common/banner-icon-header";
22 import { Icon } from "../common/icon";
23 import { CommunityForm } from "../community/community-form";
24 import { CommunityLink } from "../community/community-link";
25 import { PersonListing } from "../person/person-listing";
27 interface SidebarProps {
28 community_view: CommunityView;
29 moderators: CommunityModeratorView[];
30 admins: PersonViewSafe[];
36 interface SidebarState {
38 showRemoveDialog: boolean;
40 removeExpires: string;
41 showConfirmLeaveModTeam: boolean;
44 export class Sidebar extends Component<SidebarProps, SidebarState> {
45 private emptyState: SidebarState = {
47 showRemoveDialog: false,
50 showConfirmLeaveModTeam: false,
53 constructor(props: any, context: any) {
54 super(props, context);
55 this.state = this.emptyState;
56 this.handleEditCommunity = this.handleEditCommunity.bind(this);
57 this.handleEditCancel = this.handleEditCancel.bind(this);
63 {!this.state.showEdit ? (
67 community_view={this.props.community_view}
68 onEdit={this.handleEditCommunity}
69 onCancel={this.handleEditCancel}
70 enableNsfw={this.props.enableNsfw}
80 <div class="card border-secondary mb-3">
81 <div class="card-body">
82 {this.communityTitle()}
85 {this.canPost && this.createPost()}
88 <div class="card border-secondary mb-3">
89 <div class="card-body">
100 let community = this.props.community_view.community;
101 let subscribed = this.props.community_view.subscribed;
104 <h5 className="mb-0">
105 {this.props.showIcon && (
106 <BannerIconHeader icon={community.icon} banner={community.banner} />
108 <span class="mr-2">{community.title}</span>
111 class="btn btn-secondary btn-sm mr-2"
113 onClick={linkEvent(this, this.handleUnsubscribe)}
115 <Icon icon="check" classes="icon-inline text-success mr-1" />
119 {community.removed && (
120 <small className="mr-2 text-muted font-italic">
124 {community.deleted && (
125 <small className="mr-2 text-muted font-italic">
130 <small className="mr-2 text-muted font-italic">
136 community={community}
147 let community_view = this.props.community_view;
148 let counts = community_view.counts;
150 <ul class="my-1 list-inline">
151 <li className="list-inline-item badge badge-secondary">
152 {i18n.t("number_online", {
153 count: this.props.online,
154 formattedCount: numToSI(this.props.online),
158 className="list-inline-item badge badge-secondary pointer"
159 data-tippy-content={i18n.t("active_users_in_the_last_day", {
160 count: counts.users_active_day,
161 formattedCount: counts.users_active_day,
164 {i18n.t("number_of_users", {
165 count: counts.users_active_day,
166 formattedCount: numToSI(counts.users_active_day),
171 className="list-inline-item badge badge-secondary pointer"
172 data-tippy-content={i18n.t("active_users_in_the_last_week", {
173 count: counts.users_active_week,
174 formattedCount: counts.users_active_week,
177 {i18n.t("number_of_users", {
178 count: counts.users_active_week,
179 formattedCount: numToSI(counts.users_active_week),
184 className="list-inline-item badge badge-secondary pointer"
185 data-tippy-content={i18n.t("active_users_in_the_last_month", {
186 count: counts.users_active_month,
187 formattedCount: counts.users_active_month,
190 {i18n.t("number_of_users", {
191 count: counts.users_active_month,
192 formattedCount: numToSI(counts.users_active_month),
197 className="list-inline-item badge badge-secondary pointer"
198 data-tippy-content={i18n.t("active_users_in_the_last_six_months", {
199 count: counts.users_active_half_year,
200 formattedCount: counts.users_active_half_year,
203 {i18n.t("number_of_users", {
204 count: counts.users_active_half_year,
205 formattedCount: numToSI(counts.users_active_half_year),
207 / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
209 <li className="list-inline-item badge badge-secondary">
210 {i18n.t("number_of_subscribers", {
211 count: counts.subscribers,
212 formattedCount: numToSI(counts.subscribers),
215 <li className="list-inline-item badge badge-secondary">
216 {i18n.t("number_of_posts", {
218 formattedCount: numToSI(counts.posts),
221 <li className="list-inline-item badge badge-secondary">
222 {i18n.t("number_of_comments", {
223 count: counts.comments,
224 formattedCount: numToSI(counts.comments),
227 <li className="list-inline-item">
229 className="badge badge-primary"
230 to={`/modlog/community/${this.props.community_view.community.id}`}
241 <ul class="list-inline small">
242 <li class="list-inline-item">{i18n.t("mods")}: </li>
243 {this.props.moderators.map(mod => (
244 <li class="list-inline-item">
245 <PersonListing person={mod.moderator} />
253 let cv = this.props.community_view;
257 className={`btn btn-secondary btn-block mb-2 ${
258 cv.community.deleted || cv.community.removed ? "no-click" : ""
260 to={`/create_post?community_id=${cv.community.id}`}
262 {i18n.t("create_a_post")}
269 let community_view = this.props.community_view;
272 {!community_view.subscribed && (
274 class="btn btn-secondary btn-block"
276 onClick={linkEvent(this, this.handleSubscribe)}
278 {i18n.t("subscribe")}
286 let description = this.props.community_view.community.description;
291 dangerouslySetInnerHTML={mdToHtml(description)}
298 let community_view = this.props.community_view;
301 <ul class="list-inline mb-1 text-muted font-weight-bold">
304 <li className="list-inline-item-action">
306 class="btn btn-link text-muted d-inline-block"
307 onClick={linkEvent(this, this.handleEditClick)}
308 data-tippy-content={i18n.t("edit")}
309 aria-label={i18n.t("edit")}
311 <Icon icon="edit" classes="icon-inline" />
315 (!this.state.showConfirmLeaveModTeam ? (
316 <li className="list-inline-item-action">
318 class="btn btn-link text-muted d-inline-block"
321 this.handleShowConfirmLeaveModTeamClick
324 {i18n.t("leave_mod_team")}
329 <li className="list-inline-item-action">
330 {i18n.t("are_you_sure")}
332 <li className="list-inline-item-action">
334 class="btn btn-link text-muted d-inline-block"
335 onClick={linkEvent(this, this.handleLeaveModTeamClick)}
340 <li className="list-inline-item-action">
342 class="btn btn-link text-muted d-inline-block"
345 this.handleCancelLeaveModTeamClick
354 <li className="list-inline-item-action">
356 class="btn btn-link text-muted d-inline-block"
357 onClick={linkEvent(this, this.handleDeleteClick)}
359 !community_view.community.deleted
364 !community_view.community.deleted
371 classes={`icon-inline ${
372 community_view.community.deleted && "text-danger"
381 <li className="list-inline-item">
382 {!this.props.community_view.community.removed ? (
384 class="btn btn-link text-muted d-inline-block"
385 onClick={linkEvent(this, this.handleModRemoveShow)}
391 class="btn btn-link text-muted d-inline-block"
392 onClick={linkEvent(this, this.handleModRemoveSubmit)}
400 {this.state.showRemoveDialog && (
401 <form onSubmit={linkEvent(this, this.handleModRemoveSubmit)}>
402 <div class="form-group row">
403 <label class="col-form-label" htmlFor="remove-reason">
409 class="form-control mr-2"
410 placeholder={i18n.t("optional")}
411 value={this.state.removeReason}
412 onInput={linkEvent(this, this.handleModRemoveReasonChange)}
415 {/* TODO hold off on expires for now */}
416 {/* <div class="form-group row"> */}
417 {/* <label class="col-form-label">Expires</label> */}
418 {/* <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.removeExpires} onInput={linkEvent(this, this.handleModRemoveExpiresChange)} /> */}
420 <div class="form-group row">
421 <button type="submit" class="btn btn-secondary">
422 {i18n.t("remove_community")}
431 handleEditClick(i: Sidebar) {
432 i.state.showEdit = true;
436 handleEditCommunity() {
437 this.state.showEdit = false;
438 this.setState(this.state);
442 this.state.showEdit = false;
443 this.setState(this.state);
446 handleDeleteClick(i: Sidebar, event: any) {
447 event.preventDefault();
448 let deleteForm: DeleteCommunity = {
449 community_id: i.props.community_view.community.id,
450 deleted: !i.props.community_view.community.deleted,
453 WebSocketService.Instance.send(wsClient.deleteCommunity(deleteForm));
456 handleShowConfirmLeaveModTeamClick(i: Sidebar) {
457 i.state.showConfirmLeaveModTeam = true;
461 handleLeaveModTeamClick(i: Sidebar) {
462 let form: AddModToCommunity = {
463 person_id: UserService.Instance.myUserInfo.local_user_view.person.id,
464 community_id: i.props.community_view.community.id,
468 WebSocketService.Instance.send(wsClient.addModToCommunity(form));
469 i.state.showConfirmLeaveModTeam = false;
473 handleCancelLeaveModTeamClick(i: Sidebar) {
474 i.state.showConfirmLeaveModTeam = false;
478 handleUnsubscribe(i: Sidebar, event: any) {
479 event.preventDefault();
480 let community_id = i.props.community_view.community.id;
481 let form: FollowCommunity = {
486 WebSocketService.Instance.send(wsClient.followCommunity(form));
489 UserService.Instance.myUserInfo.follows =
490 UserService.Instance.myUserInfo.follows.filter(
491 i => i.community.id != community_id
495 handleSubscribe(i: Sidebar, event: any) {
496 event.preventDefault();
497 let community_id = i.props.community_view.community.id;
498 let form: FollowCommunity = {
503 WebSocketService.Instance.send(wsClient.followCommunity(form));
506 UserService.Instance.myUserInfo.follows.push({
507 community: i.props.community_view.community,
508 follower: UserService.Instance.myUserInfo.local_user_view.person,
513 private get amTopMod(): boolean {
515 this.props.moderators[0].moderator.id ==
516 UserService.Instance.myUserInfo.local_user_view.person.id
520 get canMod(): boolean {
522 UserService.Instance.myUserInfo &&
523 this.props.moderators
524 .map(m => m.moderator.id)
525 .includes(UserService.Instance.myUserInfo.local_user_view.person.id)
529 get canAdmin(): boolean {
531 UserService.Instance.myUserInfo &&
533 .map(a => a.person.id)
534 .includes(UserService.Instance.myUserInfo.local_user_view.person.id)
538 get canPost(): boolean {
540 !this.props.community_view.community.posting_restricted_to_mods ||
546 handleModRemoveShow(i: Sidebar) {
547 i.state.showRemoveDialog = true;
551 handleModRemoveReasonChange(i: Sidebar, event: any) {
552 i.state.removeReason = event.target.value;
556 handleModRemoveExpiresChange(i: Sidebar, event: any) {
557 console.log(event.target.value);
558 i.state.removeExpires = event.target.value;
562 handleModRemoveSubmit(i: Sidebar, event: any) {
563 event.preventDefault();
564 let removeForm: RemoveCommunity = {
565 community_id: i.props.community_view.community.id,
566 removed: !i.props.community_view.community.removed,
567 reason: i.state.removeReason,
568 expires: getUnixTime(i.state.removeExpires),
571 WebSocketService.Instance.send(wsClient.removeCommunity(removeForm));
573 i.state.showRemoveDialog = false;