import { Component, linkEvent } from "inferno"; import { Link } from "inferno-router"; import { AddModToCommunity, CommunityModeratorView, CommunityView, DeleteCommunity, FollowCommunity, PersonViewSafe, RemoveCommunity, } from "lemmy-js-client"; import { i18n } from "../../i18next"; import { UserService, WebSocketService } from "../../services"; import { authField, getUnixTime, mdToHtml, numToSI, wsClient, } from "../../utils"; import { BannerIconHeader } from "../common/banner-icon-header"; import { Icon } from "../common/icon"; import { CommunityForm } from "../community/community-form"; import { CommunityLink } from "../community/community-link"; import { PersonListing } from "../person/person-listing"; interface SidebarProps { community_view: CommunityView; moderators: CommunityModeratorView[]; admins: PersonViewSafe[]; online: number; enableNsfw: boolean; showIcon?: boolean; } interface SidebarState { showEdit: boolean; showRemoveDialog: boolean; removeReason: string; removeExpires: string; showConfirmLeaveModTeam: boolean; } export class Sidebar extends Component { private emptyState: SidebarState = { showEdit: false, showRemoveDialog: false, removeReason: null, removeExpires: null, showConfirmLeaveModTeam: false, }; constructor(props: any, context: any) { super(props, context); this.state = this.emptyState; this.handleEditCommunity = this.handleEditCommunity.bind(this); this.handleEditCancel = this.handleEditCancel.bind(this); } render() { return (
{!this.state.showEdit ? ( this.sidebar() ) : ( )}
); } sidebar() { return (
{this.communityTitle()} {this.adminButtons()} {this.subscribe()} {this.canPost && this.createPost()}
{this.description()} {this.badges()} {this.mods()}
); } communityTitle() { let community = this.props.community_view.community; let subscribed = this.props.community_view.subscribed; return (
{this.props.showIcon && ( )} {community.title} {subscribed && ( {i18n.t("joined")} )} {community.removed && ( {i18n.t("removed")} )} {community.deleted && ( {i18n.t("deleted")} )} {community.nsfw && ( {i18n.t("nsfw")} )}
); } badges() { let community_view = this.props.community_view; let counts = community_view.counts; return ( ); } mods() { return ( ); } createPost() { let cv = this.props.community_view; return ( cv.subscribed && ( {i18n.t("create_a_post")} ) ); } subscribe() { let community_view = this.props.community_view; return (
{!community_view.subscribed && ( {i18n.t("subscribe")} )}
); } description() { let description = this.props.community_view.community.description; return ( description && (
) ); } adminButtons() { let community_view = this.props.community_view; return ( <> {this.state.showRemoveDialog && (
{/* TODO hold off on expires for now */} {/*
*/} {/* */} {/* */} {/*
*/}
)} ); } handleEditClick(i: Sidebar) { i.state.showEdit = true; i.setState(i.state); } handleEditCommunity() { this.state.showEdit = false; this.setState(this.state); } handleEditCancel() { this.state.showEdit = false; this.setState(this.state); } handleDeleteClick(i: Sidebar, event: any) { event.preventDefault(); let deleteForm: DeleteCommunity = { community_id: i.props.community_view.community.id, deleted: !i.props.community_view.community.deleted, auth: authField(), }; WebSocketService.Instance.send(wsClient.deleteCommunity(deleteForm)); } handleShowConfirmLeaveModTeamClick(i: Sidebar) { i.state.showConfirmLeaveModTeam = true; i.setState(i.state); } handleLeaveModTeamClick(i: Sidebar) { let form: AddModToCommunity = { person_id: UserService.Instance.myUserInfo.local_user_view.person.id, community_id: i.props.community_view.community.id, added: false, auth: authField(), }; WebSocketService.Instance.send(wsClient.addModToCommunity(form)); i.state.showConfirmLeaveModTeam = false; i.setState(i.state); } handleCancelLeaveModTeamClick(i: Sidebar) { i.state.showConfirmLeaveModTeam = false; i.setState(i.state); } handleUnsubscribe(i: Sidebar, event: any) { event.preventDefault(); let community_id = i.props.community_view.community.id; let form: FollowCommunity = { community_id, follow: false, auth: authField(), }; WebSocketService.Instance.send(wsClient.followCommunity(form)); // Update myUserInfo UserService.Instance.myUserInfo.follows = UserService.Instance.myUserInfo.follows.filter( i => i.community.id != community_id ); } handleSubscribe(i: Sidebar, event: any) { event.preventDefault(); let community_id = i.props.community_view.community.id; let form: FollowCommunity = { community_id, follow: true, auth: authField(), }; WebSocketService.Instance.send(wsClient.followCommunity(form)); // Update myUserInfo UserService.Instance.myUserInfo.follows.push({ community: i.props.community_view.community, follower: UserService.Instance.myUserInfo.local_user_view.person, }); } private get amTopMod(): boolean { return ( this.props.moderators[0].moderator.id == UserService.Instance.myUserInfo.local_user_view.person.id ); } get canMod(): boolean { return ( UserService.Instance.myUserInfo && this.props.moderators .map(m => m.moderator.id) .includes(UserService.Instance.myUserInfo.local_user_view.person.id) ); } get canAdmin(): boolean { return ( UserService.Instance.myUserInfo && this.props.admins .map(a => a.person.id) .includes(UserService.Instance.myUserInfo.local_user_view.person.id) ); } get canPost(): boolean { return ( !this.props.community_view.community.posting_restricted_to_mods || this.canMod || this.canAdmin ); } handleModRemoveShow(i: Sidebar) { i.state.showRemoveDialog = true; i.setState(i.state); } handleModRemoveReasonChange(i: Sidebar, event: any) { i.state.removeReason = event.target.value; i.setState(i.state); } handleModRemoveExpiresChange(i: Sidebar, event: any) { console.log(event.target.value); i.state.removeExpires = event.target.value; i.setState(i.state); } handleModRemoveSubmit(i: Sidebar, event: any) { event.preventDefault(); let removeForm: RemoveCommunity = { community_id: i.props.community_view.community.id, removed: !i.props.community_view.community.removed, reason: i.state.removeReason, expires: getUnixTime(i.state.removeExpires), auth: authField(), }; WebSocketService.Instance.send(wsClient.removeCommunity(removeForm)); i.state.showRemoveDialog = false; i.setState(i.state); } }