1 import { Option, Some } from "@sniptt/monads";
2 import { Component, linkEvent } from "inferno";
3 import { Link } from "inferno-router";
6 CommunityModeratorView,
13 } from "lemmy-js-client";
14 import { i18n } from "../../i18next";
15 import { UserService, WebSocketService } from "../../services";
26 import { BannerIconHeader } from "../common/banner-icon-header";
27 import { Icon } from "../common/icon";
28 import { CommunityForm } from "../community/community-form";
29 import { CommunityLink } from "../community/community-link";
30 import { PersonListing } from "../person/person-listing";
32 interface SidebarProps {
33 community_view: CommunityView;
34 moderators: CommunityModeratorView[];
35 admins: PersonViewSafe[];
41 interface SidebarState {
42 removeReason: Option<string>;
43 removeExpires: Option<string>;
45 showRemoveDialog: boolean;
46 showConfirmLeaveModTeam: boolean;
49 export class Sidebar extends Component<SidebarProps, SidebarState> {
50 private emptyState: SidebarState = {
52 showRemoveDialog: false,
55 showConfirmLeaveModTeam: false,
58 constructor(props: any, context: any) {
59 super(props, context);
60 this.state = this.emptyState;
61 this.handleEditCommunity = this.handleEditCommunity.bind(this);
62 this.handleEditCancel = this.handleEditCancel.bind(this);
68 {!this.state.showEdit ? (
72 community_view={Some(this.props.community_view)}
73 onEdit={this.handleEditCommunity}
74 onCancel={this.handleEditCancel}
75 enableNsfw={this.props.enableNsfw}
85 <div class="card border-secondary mb-3">
86 <div class="card-body">
87 {this.communityTitle()}
90 {this.canPost && this.createPost()}
93 <div class="card border-secondary mb-3">
94 <div class="card-body">
105 let community = this.props.community_view.community;
106 let subscribed = this.props.community_view.subscribed;
109 <h5 className="mb-0">
110 {this.props.showIcon && (
111 <BannerIconHeader icon={community.icon} banner={community.banner} />
113 <span class="mr-2">{community.title}</span>
116 class="btn btn-secondary btn-sm mr-2"
118 onClick={linkEvent(this, this.handleUnsubscribe)}
120 <Icon icon="check" classes="icon-inline text-success mr-1" />
124 {community.removed && (
125 <small className="mr-2 text-muted font-italic">
129 {community.deleted && (
130 <small className="mr-2 text-muted font-italic">
135 <small className="mr-2 text-muted font-italic">
141 community={community}
152 let community_view = this.props.community_view;
153 let counts = community_view.counts;
155 <ul class="my-1 list-inline">
156 <li className="list-inline-item badge badge-secondary">
157 {i18n.t("number_online", {
158 count: this.props.online,
159 formattedCount: numToSI(this.props.online),
163 className="list-inline-item badge badge-secondary pointer"
164 data-tippy-content={i18n.t("active_users_in_the_last_day", {
165 count: counts.users_active_day,
166 formattedCount: counts.users_active_day,
169 {i18n.t("number_of_users", {
170 count: counts.users_active_day,
171 formattedCount: numToSI(counts.users_active_day),
176 className="list-inline-item badge badge-secondary pointer"
177 data-tippy-content={i18n.t("active_users_in_the_last_week", {
178 count: counts.users_active_week,
179 formattedCount: counts.users_active_week,
182 {i18n.t("number_of_users", {
183 count: counts.users_active_week,
184 formattedCount: numToSI(counts.users_active_week),
189 className="list-inline-item badge badge-secondary pointer"
190 data-tippy-content={i18n.t("active_users_in_the_last_month", {
191 count: counts.users_active_month,
192 formattedCount: counts.users_active_month,
195 {i18n.t("number_of_users", {
196 count: counts.users_active_month,
197 formattedCount: numToSI(counts.users_active_month),
202 className="list-inline-item badge badge-secondary pointer"
203 data-tippy-content={i18n.t("active_users_in_the_last_six_months", {
204 count: counts.users_active_half_year,
205 formattedCount: counts.users_active_half_year,
208 {i18n.t("number_of_users", {
209 count: counts.users_active_half_year,
210 formattedCount: numToSI(counts.users_active_half_year),
212 / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
214 <li className="list-inline-item badge badge-secondary">
215 {i18n.t("number_of_subscribers", {
216 count: counts.subscribers,
217 formattedCount: numToSI(counts.subscribers),
220 <li className="list-inline-item badge badge-secondary">
221 {i18n.t("number_of_posts", {
223 formattedCount: numToSI(counts.posts),
226 <li className="list-inline-item badge badge-secondary">
227 {i18n.t("number_of_comments", {
228 count: counts.comments,
229 formattedCount: numToSI(counts.comments),
232 <li className="list-inline-item">
234 className="badge badge-primary"
235 to={`/modlog/community/${this.props.community_view.community.id}`}
246 <ul class="list-inline small">
247 <li class="list-inline-item">{i18n.t("mods")}: </li>
248 {this.props.moderators.map(mod => (
249 <li class="list-inline-item">
250 <PersonListing person={mod.moderator} />
258 let cv = this.props.community_view;
262 className={`btn btn-secondary btn-block mb-2 ${
263 cv.community.deleted || cv.community.removed ? "no-click" : ""
265 to={`/create_post?community_id=${cv.community.id}`}
267 {i18n.t("create_a_post")}
274 let community_view = this.props.community_view;
277 {!community_view.subscribed && (
279 class="btn btn-secondary btn-block"
281 onClick={linkEvent(this, this.handleSubscribe)}
283 {i18n.t("subscribe")}
291 let description = this.props.community_view.community.description;
292 return description.match({
294 <div className="md-div" dangerouslySetInnerHTML={mdToHtml(desc)} />
301 let community_view = this.props.community_view;
304 <ul class="list-inline mb-1 text-muted font-weight-bold">
305 {amMod(Some(this.props.moderators)) && (
307 <li className="list-inline-item-action">
309 class="btn btn-link text-muted d-inline-block"
310 onClick={linkEvent(this, this.handleEditClick)}
311 data-tippy-content={i18n.t("edit")}
312 aria-label={i18n.t("edit")}
314 <Icon icon="edit" classes="icon-inline" />
317 {!amTopMod(Some(this.props.moderators)) &&
318 (!this.state.showConfirmLeaveModTeam ? (
319 <li className="list-inline-item-action">
321 class="btn btn-link text-muted d-inline-block"
324 this.handleShowConfirmLeaveModTeamClick
327 {i18n.t("leave_mod_team")}
332 <li className="list-inline-item-action">
333 {i18n.t("are_you_sure")}
335 <li className="list-inline-item-action">
337 class="btn btn-link text-muted d-inline-block"
338 onClick={linkEvent(this, this.handleLeaveModTeamClick)}
343 <li className="list-inline-item-action">
345 class="btn btn-link text-muted d-inline-block"
348 this.handleCancelLeaveModTeamClick
356 {amTopMod(Some(this.props.moderators)) && (
357 <li className="list-inline-item-action">
359 class="btn btn-link text-muted d-inline-block"
360 onClick={linkEvent(this, this.handleDeleteClick)}
362 !community_view.community.deleted
367 !community_view.community.deleted
374 classes={`icon-inline ${
375 community_view.community.deleted && "text-danger"
383 {amAdmin(Some(this.props.admins)) && (
384 <li className="list-inline-item">
385 {!this.props.community_view.community.removed ? (
387 class="btn btn-link text-muted d-inline-block"
388 onClick={linkEvent(this, this.handleModRemoveShow)}
394 class="btn btn-link text-muted d-inline-block"
395 onClick={linkEvent(this, this.handleModRemoveSubmit)}
403 {this.state.showRemoveDialog && (
404 <form onSubmit={linkEvent(this, this.handleModRemoveSubmit)}>
405 <div class="form-group row">
406 <label class="col-form-label" htmlFor="remove-reason">
412 class="form-control mr-2"
413 placeholder={i18n.t("optional")}
414 value={toUndefined(this.state.removeReason)}
415 onInput={linkEvent(this, this.handleModRemoveReasonChange)}
418 {/* TODO hold off on expires for now */}
419 {/* <div class="form-group row"> */}
420 {/* <label class="col-form-label">Expires</label> */}
421 {/* <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.removeExpires} onInput={linkEvent(this, this.handleModRemoveExpiresChange)} /> */}
423 <div class="form-group row">
424 <button type="submit" class="btn btn-secondary">
425 {i18n.t("remove_community")}
434 handleEditClick(i: Sidebar) {
435 i.state.showEdit = true;
439 handleEditCommunity() {
440 this.state.showEdit = false;
441 this.setState(this.state);
445 this.state.showEdit = false;
446 this.setState(this.state);
449 handleDeleteClick(i: Sidebar, event: any) {
450 event.preventDefault();
451 let deleteForm = new DeleteCommunity({
452 community_id: i.props.community_view.community.id,
453 deleted: !i.props.community_view.community.deleted,
454 auth: auth().unwrap(),
456 WebSocketService.Instance.send(wsClient.deleteCommunity(deleteForm));
459 handleShowConfirmLeaveModTeamClick(i: Sidebar) {
460 i.state.showConfirmLeaveModTeam = true;
464 handleLeaveModTeamClick(i: Sidebar) {
465 UserService.Instance.myUserInfo.match({
467 let form = new AddModToCommunity({
468 person_id: mui.local_user_view.person.id,
469 community_id: i.props.community_view.community.id,
471 auth: auth().unwrap(),
473 WebSocketService.Instance.send(wsClient.addModToCommunity(form));
474 i.state.showConfirmLeaveModTeam = false;
481 handleCancelLeaveModTeamClick(i: Sidebar) {
482 i.state.showConfirmLeaveModTeam = false;
486 handleUnsubscribe(i: Sidebar, event: any) {
487 event.preventDefault();
488 let community_id = i.props.community_view.community.id;
489 let form = new FollowCommunity({
492 auth: auth().unwrap(),
494 WebSocketService.Instance.send(wsClient.followCommunity(form));
497 UserService.Instance.myUserInfo.match({
499 (mui.follows = mui.follows.filter(i => i.community.id != community_id)),
504 handleSubscribe(i: Sidebar, event: any) {
505 event.preventDefault();
506 let community_id = i.props.community_view.community.id;
507 let form = new FollowCommunity({
510 auth: auth().unwrap(),
512 WebSocketService.Instance.send(wsClient.followCommunity(form));
515 UserService.Instance.myUserInfo.match({
518 community: i.props.community_view.community,
519 follower: mui.local_user_view.person,
525 get canPost(): boolean {
527 !this.props.community_view.community.posting_restricted_to_mods ||
528 amMod(Some(this.props.moderators)) ||
529 amAdmin(Some(this.props.admins))
533 handleModRemoveShow(i: Sidebar) {
534 i.state.showRemoveDialog = true;
538 handleModRemoveReasonChange(i: Sidebar, event: any) {
539 i.state.removeReason = event.target.value;
543 handleModRemoveExpiresChange(i: Sidebar, event: any) {
544 console.log(event.target.value);
545 i.state.removeExpires = event.target.value;
549 handleModRemoveSubmit(i: Sidebar, event: any) {
550 event.preventDefault();
551 let removeForm = new RemoveCommunity({
552 community_id: i.props.community_view.community.id,
553 removed: !i.props.community_view.community.removed,
554 reason: i.state.removeReason,
555 expires: i.state.removeExpires.map(getUnixTime),
556 auth: auth().unwrap(),
558 WebSocketService.Instance.send(wsClient.removeCommunity(removeForm));
560 i.state.showRemoveDialog = false;