1 import { Component, linkEvent } from 'inferno';
2 import { Link } from 'inferno-router';
7 CommunityForm as CommunityFormI,
9 } from '../interfaces';
10 import { WebSocketService, UserService } from '../services';
14 pictshareAvatarThumbnail,
17 import { CommunityForm } from './community-form';
18 import { i18n } from '../i18next';
19 import { T } from 'inferno-i18next';
21 interface SidebarProps {
23 moderators: Array<CommunityUser>;
24 admins: Array<UserView>;
27 interface SidebarState {
29 showRemoveDialog: boolean;
31 removeExpires: string;
34 export class Sidebar extends Component<SidebarProps, SidebarState> {
35 private emptyState: SidebarState = {
37 showRemoveDialog: false,
42 constructor(props: any, context: any) {
43 super(props, context);
44 this.state = this.emptyState;
45 this.handleEditCommunity = this.handleEditCommunity.bind(this);
46 this.handleEditCancel = this.handleEditCancel.bind(this);
52 {!this.state.showEdit ? (
56 community={this.props.community}
57 onEdit={this.handleEditCommunity}
58 onCancel={this.handleEditCancel}
66 let community = this.props.community;
69 <div class="card border-secondary mb-3">
70 <div class="card-body">
72 <span>{community.title}</span>
73 {community.removed && (
74 <small className="ml-2 text-muted font-italic">
75 <T i18nKey="removed">#</T>
78 {community.deleted && (
79 <small className="ml-2 text-muted font-italic">
80 <T i18nKey="deleted">#</T>
84 <Link className="text-muted" to={`/c/${community.name}`}>
87 <ul class="list-inline mb-1 text-muted small font-weight-bold">
90 <li className="list-inline-item">
93 onClick={linkEvent(this, this.handleEditClick)}
95 <T i18nKey="edit">#</T>
99 <li className="list-inline-item">
102 onClick={linkEvent(this, this.handleDeleteClick)}
113 <li className="list-inline-item">
114 {!this.props.community.removed ? (
117 onClick={linkEvent(this, this.handleModRemoveShow)}
119 <T i18nKey="remove">#</T>
124 onClick={linkEvent(this, this.handleModRemoveSubmit)}
126 <T i18nKey="restore">#</T>
132 {this.state.showRemoveDialog && (
133 <form onSubmit={linkEvent(this, this.handleModRemoveSubmit)}>
134 <div class="form-group row">
135 <label class="col-form-label">
136 <T i18nKey="reason">#</T>
140 class="form-control mr-2"
141 placeholder={i18n.t('optional')}
142 value={this.state.removeReason}
143 onInput={linkEvent(this, this.handleModRemoveReasonChange)}
146 {/* TODO hold off on expires for now */}
147 {/* <div class="form-group row"> */}
148 {/* <label class="col-form-label">Expires</label> */}
149 {/* <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.removeExpires} onInput={linkEvent(this, this.handleModRemoveExpiresChange)} /> */}
151 <div class="form-group row">
152 <button type="submit" class="btn btn-secondary">
153 <T i18nKey="remove_community">#</T>
158 <ul class="my-1 list-inline">
159 <li className="list-inline-item">
160 <Link className="badge badge-secondary" to="/communities">
161 {community.category_name}
164 <li className="list-inline-item badge badge-secondary">
166 i18nKey="number_of_subscribers"
167 interpolation={{ count: community.number_of_subscribers }}
172 <li className="list-inline-item badge badge-secondary">
174 i18nKey="number_of_posts"
175 interpolation={{ count: community.number_of_posts }}
180 <li className="list-inline-item badge badge-secondary">
182 i18nKey="number_of_comments"
183 interpolation={{ count: community.number_of_comments }}
188 <li className="list-inline-item">
190 className="badge badge-secondary"
191 to={`/modlog/community/${this.props.community.id}`}
193 <T i18nKey="modlog">#</T>
197 <ul class="list-inline small">
198 <li class="list-inline-item">{i18n.t('mods')}: </li>
199 {this.props.moderators.map(mod => (
200 <li class="list-inline-item">
201 <Link class="text-info" to={`/u/${mod.user_name}`}>
202 {mod.avatar && showAvatars() && (
206 src={pictshareAvatarThumbnail(mod.avatar)}
207 class="rounded-circle mr-1"
210 <span>{mod.user_name}</span>
216 class={`btn btn-sm btn-secondary btn-block mb-3 ${(community.deleted ||
217 community.removed) &&
219 to={`/create_post?community=${community.name}`}
221 <T i18nKey="create_a_post">#</T>
224 {community.subscribed ? (
226 class="btn btn-sm btn-secondary btn-block"
227 onClick={linkEvent(community.id, this.handleUnsubscribe)}
229 <T i18nKey="unsubscribe">#</T>
233 class="btn btn-sm btn-secondary btn-block"
234 onClick={linkEvent(community.id, this.handleSubscribe)}
236 <T i18nKey="subscribe">#</T>
242 {community.description && (
243 <div class="card border-secondary">
244 <div class="card-body">
247 dangerouslySetInnerHTML={mdToHtml(community.description)}
256 handleEditClick(i: Sidebar) {
257 i.state.showEdit = true;
261 handleEditCommunity() {
262 this.state.showEdit = false;
263 this.setState(this.state);
267 this.state.showEdit = false;
268 this.setState(this.state);
271 handleDeleteClick(i: Sidebar) {
272 event.preventDefault();
273 let deleteForm: CommunityFormI = {
274 name: i.props.community.name,
275 title: i.props.community.title,
276 category_id: i.props.community.category_id,
277 edit_id: i.props.community.id,
278 deleted: !i.props.community.deleted,
279 nsfw: i.props.community.nsfw,
282 WebSocketService.Instance.editCommunity(deleteForm);
285 handleUnsubscribe(communityId: number) {
286 let form: FollowCommunityForm = {
287 community_id: communityId,
290 WebSocketService.Instance.followCommunity(form);
293 handleSubscribe(communityId: number) {
294 let form: FollowCommunityForm = {
295 community_id: communityId,
298 WebSocketService.Instance.followCommunity(form);
301 private get amCreator(): boolean {
302 return this.props.community.creator_id == UserService.Instance.user.id;
305 get canMod(): boolean {
307 UserService.Instance.user &&
308 this.props.moderators
310 .includes(UserService.Instance.user.id)
314 get canAdmin(): boolean {
316 UserService.Instance.user &&
317 this.props.admins.map(a => a.id).includes(UserService.Instance.user.id)
321 handleModRemoveShow(i: Sidebar) {
322 i.state.showRemoveDialog = true;
326 handleModRemoveReasonChange(i: Sidebar, event: any) {
327 i.state.removeReason = event.target.value;
331 handleModRemoveExpiresChange(i: Sidebar, event: any) {
332 console.log(event.target.value);
333 i.state.removeExpires = event.target.value;
337 handleModRemoveSubmit(i: Sidebar) {
338 event.preventDefault();
339 let deleteForm: CommunityFormI = {
340 name: i.props.community.name,
341 title: i.props.community.title,
342 category_id: i.props.community.category_id,
343 edit_id: i.props.community.id,
344 removed: !i.props.community.removed,
345 reason: i.state.removeReason,
346 expires: getUnixTime(i.state.removeExpires),
347 nsfw: i.props.community.nsfw,
350 WebSocketService.Instance.editCommunity(deleteForm);
352 i.state.showRemoveDialog = false;