1 import { Option, Some } from "@sniptt/monads";
2 import { Component, linkEvent } from "inferno";
3 import { Link } from "inferno-router";
6 CommunityModeratorView,
14 } from "lemmy-js-client";
15 import { i18n } from "../../i18next";
16 import { UserService, WebSocketService } from "../../services";
27 import { BannerIconHeader } from "../common/banner-icon-header";
28 import { Icon } from "../common/icon";
29 import { CommunityForm } from "../community/community-form";
30 import { CommunityLink } from "../community/community-link";
31 import { PersonListing } from "../person/person-listing";
33 interface SidebarProps {
34 community_view: CommunityView;
35 moderators: CommunityModeratorView[];
36 admins: PersonViewSafe[];
42 interface SidebarState {
43 removeReason: Option<string>;
44 removeExpires: Option<string>;
46 showRemoveDialog: boolean;
47 showConfirmLeaveModTeam: boolean;
50 export class Sidebar extends Component<SidebarProps, SidebarState> {
51 private emptyState: SidebarState = {
53 showRemoveDialog: false,
56 showConfirmLeaveModTeam: false,
59 constructor(props: any, context: any) {
60 super(props, context);
61 this.state = this.emptyState;
62 this.handleEditCommunity = this.handleEditCommunity.bind(this);
63 this.handleEditCancel = this.handleEditCancel.bind(this);
69 {!this.state.showEdit ? (
73 community_view={Some(this.props.community_view)}
74 onEdit={this.handleEditCommunity}
75 onCancel={this.handleEditCancel}
76 enableNsfw={this.props.enableNsfw}
86 <div class="card border-secondary mb-3">
87 <div class="card-body">
88 {this.communityTitle()}
91 {this.canPost && this.createPost()}
94 <div class="card border-secondary mb-3">
95 <div class="card-body">
106 let community = this.props.community_view.community;
107 let subscribed = this.props.community_view.subscribed;
110 <h5 className="mb-0">
111 {this.props.showIcon && (
112 <BannerIconHeader icon={community.icon} banner={community.banner} />
114 <span class="mr-2">{community.title}</span>
115 {subscribed == SubscribedType.Subscribed && (
117 class="btn btn-secondary btn-sm mr-2"
119 onClick={linkEvent(this, this.handleUnsubscribe)}
121 <Icon icon="check" classes="icon-inline text-success mr-1" />
125 {subscribed == SubscribedType.Pending && (
126 <div class="badge badge-warning mr-2">
127 {i18n.t("subscribe_pending")}
130 {community.removed && (
131 <small className="mr-2 text-muted font-italic">
135 {community.deleted && (
136 <small className="mr-2 text-muted font-italic">
141 <small className="mr-2 text-muted font-italic">
147 community={community}
158 let community_view = this.props.community_view;
159 let counts = community_view.counts;
161 <ul class="my-1 list-inline">
162 <li className="list-inline-item badge badge-secondary">
163 {i18n.t("number_online", {
164 count: this.props.online,
165 formattedCount: numToSI(this.props.online),
169 className="list-inline-item badge badge-secondary pointer"
170 data-tippy-content={i18n.t("active_users_in_the_last_day", {
171 count: counts.users_active_day,
172 formattedCount: counts.users_active_day,
175 {i18n.t("number_of_users", {
176 count: counts.users_active_day,
177 formattedCount: numToSI(counts.users_active_day),
182 className="list-inline-item badge badge-secondary pointer"
183 data-tippy-content={i18n.t("active_users_in_the_last_week", {
184 count: counts.users_active_week,
185 formattedCount: counts.users_active_week,
188 {i18n.t("number_of_users", {
189 count: counts.users_active_week,
190 formattedCount: numToSI(counts.users_active_week),
195 className="list-inline-item badge badge-secondary pointer"
196 data-tippy-content={i18n.t("active_users_in_the_last_month", {
197 count: counts.users_active_month,
198 formattedCount: counts.users_active_month,
201 {i18n.t("number_of_users", {
202 count: counts.users_active_month,
203 formattedCount: numToSI(counts.users_active_month),
208 className="list-inline-item badge badge-secondary pointer"
209 data-tippy-content={i18n.t("active_users_in_the_last_six_months", {
210 count: counts.users_active_half_year,
211 formattedCount: counts.users_active_half_year,
214 {i18n.t("number_of_users", {
215 count: counts.users_active_half_year,
216 formattedCount: numToSI(counts.users_active_half_year),
218 / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
220 <li className="list-inline-item badge badge-secondary">
221 {i18n.t("number_of_subscribers", {
222 count: counts.subscribers,
223 formattedCount: numToSI(counts.subscribers),
226 <li className="list-inline-item badge badge-secondary">
227 {i18n.t("number_of_posts", {
229 formattedCount: numToSI(counts.posts),
232 <li className="list-inline-item badge badge-secondary">
233 {i18n.t("number_of_comments", {
234 count: counts.comments,
235 formattedCount: numToSI(counts.comments),
238 <li className="list-inline-item">
240 className="badge badge-primary"
241 to={`/modlog/community/${this.props.community_view.community.id}`}
252 <ul class="list-inline small">
253 <li class="list-inline-item">{i18n.t("mods")}: </li>
254 {this.props.moderators.map(mod => (
255 <li class="list-inline-item">
256 <PersonListing person={mod.moderator} />
264 let cv = this.props.community_view;
266 cv.subscribed == SubscribedType.Subscribed && (
268 className={`btn btn-secondary btn-block mb-2 ${
269 cv.community.deleted || cv.community.removed ? "no-click" : ""
271 to={`/create_post?community_id=${cv.community.id}`}
273 {i18n.t("create_a_post")}
280 let community_view = this.props.community_view;
283 {community_view.subscribed == SubscribedType.NotSubscribed && (
285 class="btn btn-secondary btn-block"
287 onClick={linkEvent(this, this.handleSubscribe)}
289 {i18n.t("subscribe")}
297 let description = this.props.community_view.community.description;
298 return description.match({
300 <div className="md-div" dangerouslySetInnerHTML={mdToHtml(desc)} />
307 let community_view = this.props.community_view;
310 <ul class="list-inline mb-1 text-muted font-weight-bold">
311 {amMod(Some(this.props.moderators)) && (
313 <li className="list-inline-item-action">
315 class="btn btn-link text-muted d-inline-block"
316 onClick={linkEvent(this, this.handleEditClick)}
317 data-tippy-content={i18n.t("edit")}
318 aria-label={i18n.t("edit")}
320 <Icon icon="edit" classes="icon-inline" />
323 {!amTopMod(Some(this.props.moderators)) &&
324 (!this.state.showConfirmLeaveModTeam ? (
325 <li className="list-inline-item-action">
327 class="btn btn-link text-muted d-inline-block"
330 this.handleShowConfirmLeaveModTeamClick
333 {i18n.t("leave_mod_team")}
338 <li className="list-inline-item-action">
339 {i18n.t("are_you_sure")}
341 <li className="list-inline-item-action">
343 class="btn btn-link text-muted d-inline-block"
344 onClick={linkEvent(this, this.handleLeaveModTeamClick)}
349 <li className="list-inline-item-action">
351 class="btn btn-link text-muted d-inline-block"
354 this.handleCancelLeaveModTeamClick
362 {amTopMod(Some(this.props.moderators)) && (
363 <li className="list-inline-item-action">
365 class="btn btn-link text-muted d-inline-block"
366 onClick={linkEvent(this, this.handleDeleteClick)}
368 !community_view.community.deleted
373 !community_view.community.deleted
380 classes={`icon-inline ${
381 community_view.community.deleted && "text-danger"
389 {amAdmin(Some(this.props.admins)) && (
390 <li className="list-inline-item">
391 {!this.props.community_view.community.removed ? (
393 class="btn btn-link text-muted d-inline-block"
394 onClick={linkEvent(this, this.handleModRemoveShow)}
400 class="btn btn-link text-muted d-inline-block"
401 onClick={linkEvent(this, this.handleModRemoveSubmit)}
409 {this.state.showRemoveDialog && (
410 <form onSubmit={linkEvent(this, this.handleModRemoveSubmit)}>
411 <div class="form-group row">
412 <label class="col-form-label" htmlFor="remove-reason">
418 class="form-control mr-2"
419 placeholder={i18n.t("optional")}
420 value={toUndefined(this.state.removeReason)}
421 onInput={linkEvent(this, this.handleModRemoveReasonChange)}
424 {/* TODO hold off on expires for now */}
425 {/* <div class="form-group row"> */}
426 {/* <label class="col-form-label">Expires</label> */}
427 {/* <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.removeExpires} onInput={linkEvent(this, this.handleModRemoveExpiresChange)} /> */}
429 <div class="form-group row">
430 <button type="submit" class="btn btn-secondary">
431 {i18n.t("remove_community")}
440 handleEditClick(i: Sidebar) {
441 i.state.showEdit = true;
445 handleEditCommunity() {
446 this.state.showEdit = false;
447 this.setState(this.state);
451 this.state.showEdit = false;
452 this.setState(this.state);
455 handleDeleteClick(i: Sidebar, event: any) {
456 event.preventDefault();
457 let deleteForm = new DeleteCommunity({
458 community_id: i.props.community_view.community.id,
459 deleted: !i.props.community_view.community.deleted,
460 auth: auth().unwrap(),
462 WebSocketService.Instance.send(wsClient.deleteCommunity(deleteForm));
465 handleShowConfirmLeaveModTeamClick(i: Sidebar) {
466 i.state.showConfirmLeaveModTeam = true;
470 handleLeaveModTeamClick(i: Sidebar) {
471 UserService.Instance.myUserInfo.match({
473 let form = new AddModToCommunity({
474 person_id: mui.local_user_view.person.id,
475 community_id: i.props.community_view.community.id,
477 auth: auth().unwrap(),
479 WebSocketService.Instance.send(wsClient.addModToCommunity(form));
480 i.state.showConfirmLeaveModTeam = false;
487 handleCancelLeaveModTeamClick(i: Sidebar) {
488 i.state.showConfirmLeaveModTeam = false;
492 handleUnsubscribe(i: Sidebar, event: any) {
493 event.preventDefault();
494 let community_id = i.props.community_view.community.id;
495 let form = new FollowCommunity({
498 auth: auth().unwrap(),
500 WebSocketService.Instance.send(wsClient.followCommunity(form));
503 UserService.Instance.myUserInfo.match({
505 (mui.follows = mui.follows.filter(i => i.community.id != community_id)),
510 handleSubscribe(i: Sidebar, event: any) {
511 event.preventDefault();
512 let community_id = i.props.community_view.community.id;
513 let form = new FollowCommunity({
516 auth: auth().unwrap(),
518 WebSocketService.Instance.send(wsClient.followCommunity(form));
521 UserService.Instance.myUserInfo.match({
524 community: i.props.community_view.community,
525 follower: mui.local_user_view.person,
531 get canPost(): boolean {
533 !this.props.community_view.community.posting_restricted_to_mods ||
534 amMod(Some(this.props.moderators)) ||
535 amAdmin(Some(this.props.admins))
539 handleModRemoveShow(i: Sidebar) {
540 i.state.showRemoveDialog = true;
544 handleModRemoveReasonChange(i: Sidebar, event: any) {
545 i.state.removeReason = event.target.value;
549 handleModRemoveExpiresChange(i: Sidebar, event: any) {
550 console.log(event.target.value);
551 i.state.removeExpires = event.target.value;
555 handleModRemoveSubmit(i: Sidebar, event: any) {
556 event.preventDefault();
557 let removeForm = new RemoveCommunity({
558 community_id: i.props.community_view.community.id,
559 removed: !i.props.community_view.community.removed,
560 reason: i.state.removeReason,
561 expires: i.state.removeExpires.map(getUnixTime),
562 auth: auth().unwrap(),
564 WebSocketService.Instance.send(wsClient.removeCommunity(removeForm));
566 i.state.showRemoveDialog = false;