import { None, Option, Some } from "@sniptt/monads"; import { Component, linkEvent } from "inferno"; import { Link } from "inferno-router"; import { AddModToCommunity, BlockCommunity, CommunityModeratorView, CommunityView, DeleteCommunity, FollowCommunity, Language, PersonViewSafe, PurgeCommunity, RemoveCommunity, SubscribedType, toUndefined, } from "lemmy-js-client"; import { i18n } from "../../i18next"; import { UserService, WebSocketService } from "../../services"; import { amAdmin, amMod, amTopMod, auth, getUnixTime, mdToHtml, numToSI, wsClient, } from "../../utils"; import { BannerIconHeader } from "../common/banner-icon-header"; import { Icon, PurgeWarning, Spinner } 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[]; allLanguages: Language[]; siteLanguages: number[]; communityLanguages: Option; online: number; enableNsfw?: boolean; showIcon?: boolean; editable?: boolean; } interface SidebarState { removeReason: Option; removeExpires: Option; showEdit: boolean; showRemoveDialog: boolean; showPurgeDialog: boolean; purgeReason: Option; purgeLoading: boolean; showConfirmLeaveModTeam: boolean; } export class Sidebar extends Component { private emptyState: SidebarState = { showEdit: false, showRemoveDialog: false, removeReason: None, removeExpires: None, showPurgeDialog: false, purgeReason: None, purgeLoading: false, 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.props.editable && this.adminButtons()} {this.subscribe()} {this.canPost && this.createPost()} {this.blockCommunity()}
{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 == SubscribedType.Subscribed && ( )} {subscribed == SubscribedType.Pending && ( )} {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 (
  • {i18n.t("number_online", { count: this.props.online, formattedCount: numToSI(this.props.online), })}
  • {i18n.t("number_of_users", { count: counts.users_active_day, formattedCount: numToSI(counts.users_active_day), })}{" "} / {i18n.t("day")}
  • {i18n.t("number_of_users", { count: counts.users_active_week, formattedCount: numToSI(counts.users_active_week), })}{" "} / {i18n.t("week")}
  • {i18n.t("number_of_users", { count: counts.users_active_month, formattedCount: numToSI(counts.users_active_month), })}{" "} / {i18n.t("month")}
  • {i18n.t("number_of_users", { count: counts.users_active_half_year, formattedCount: numToSI(counts.users_active_half_year), })}{" "} / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
  • {i18n.t("number_of_subscribers", { count: counts.subscribers, formattedCount: numToSI(counts.subscribers), })}
  • {i18n.t("number_of_posts", { count: counts.posts, formattedCount: numToSI(counts.posts), })}
  • {i18n.t("number_of_comments", { count: counts.comments, formattedCount: numToSI(counts.comments), })}
  • {i18n.t("modlog")}
); } mods() { return (
  • {i18n.t("mods")}:
  • {this.props.moderators.map(mod => (
  • ))}
); } createPost() { let cv = this.props.community_view; return ( {i18n.t("create_a_post")} ); } subscribe() { let community_view = this.props.community_view; return (
{community_view.subscribed == SubscribedType.NotSubscribed && ( )}
); } blockCommunity() { let community_view = this.props.community_view; let blocked = this.props.community_view.blocked; return (
{community_view.subscribed == SubscribedType.NotSubscribed && (blocked ? ( ) : ( ))}
); } description() { let description = this.props.community_view.community.description; return description.match({ some: desc => (
), none: <>, }); } adminButtons() { let community_view = this.props.community_view; return ( <>
    {amMod(Some(this.props.moderators)) && ( <>
  • {!amTopMod(Some(this.props.moderators)) && (!this.state.showConfirmLeaveModTeam ? (
  • ) : ( <>
  • {i18n.t("are_you_sure")}
  • ))} {amTopMod(Some(this.props.moderators)) && (
  • )} )} {amAdmin() && (
  • {!this.props.community_view.community.removed ? ( ) : ( )}
  • )}
{this.state.showRemoveDialog && (
{/* TODO hold off on expires for now */} {/*
*/} {/* */} {/* */} {/*
*/}
)} {this.state.showPurgeDialog && (
{this.state.purgeLoading ? ( ) : ( )}
)} ); } handleEditClick(i: Sidebar) { i.setState({ showEdit: true }); } handleEditCommunity() { this.setState({ showEdit: false }); } handleEditCancel() { this.setState({ showEdit: false }); } handleDeleteClick(i: Sidebar, event: any) { event.preventDefault(); let deleteForm = new DeleteCommunity({ community_id: i.props.community_view.community.id, deleted: !i.props.community_view.community.deleted, auth: auth().unwrap(), }); WebSocketService.Instance.send(wsClient.deleteCommunity(deleteForm)); } handleShowConfirmLeaveModTeamClick(i: Sidebar) { i.setState({ showConfirmLeaveModTeam: true }); } handleLeaveModTeamClick(i: Sidebar) { UserService.Instance.myUserInfo.match({ some: mui => { let form = new AddModToCommunity({ person_id: mui.local_user_view.person.id, community_id: i.props.community_view.community.id, added: false, auth: auth().unwrap(), }); WebSocketService.Instance.send(wsClient.addModToCommunity(form)); i.setState({ showConfirmLeaveModTeam: false }); }, none: void 0, }); } handleCancelLeaveModTeamClick(i: Sidebar) { i.setState({ showConfirmLeaveModTeam: false }); } handleUnsubscribe(i: Sidebar, event: any) { event.preventDefault(); let community_id = i.props.community_view.community.id; let form = new FollowCommunity({ community_id, follow: false, auth: auth().unwrap(), }); WebSocketService.Instance.send(wsClient.followCommunity(form)); // Update myUserInfo UserService.Instance.myUserInfo.match({ some: mui => (mui.follows = mui.follows.filter(i => i.community.id != community_id)), none: void 0, }); } handleSubscribe(i: Sidebar, event: any) { event.preventDefault(); let community_id = i.props.community_view.community.id; let form = new FollowCommunity({ community_id, follow: true, auth: auth().unwrap(), }); WebSocketService.Instance.send(wsClient.followCommunity(form)); // Update myUserInfo UserService.Instance.myUserInfo.match({ some: mui => mui.follows.push({ community: i.props.community_view.community, follower: mui.local_user_view.person, }), none: void 0, }); } get canPost(): boolean { return ( !this.props.community_view.community.posting_restricted_to_mods || amMod(Some(this.props.moderators)) || amAdmin() ); } handleModRemoveShow(i: Sidebar) { i.setState({ showRemoveDialog: true }); } handleModRemoveReasonChange(i: Sidebar, event: any) { i.setState({ removeReason: Some(event.target.value) }); } handleModRemoveExpiresChange(i: Sidebar, event: any) { i.setState({ removeExpires: Some(event.target.value) }); } handleModRemoveSubmit(i: Sidebar, event: any) { event.preventDefault(); let removeForm = new RemoveCommunity({ community_id: i.props.community_view.community.id, removed: !i.props.community_view.community.removed, reason: i.state.removeReason, expires: i.state.removeExpires.map(getUnixTime), auth: auth().unwrap(), }); WebSocketService.Instance.send(wsClient.removeCommunity(removeForm)); i.setState({ showRemoveDialog: false }); } handlePurgeCommunityShow(i: Sidebar) { i.setState({ showPurgeDialog: true, showRemoveDialog: false }); } handlePurgeReasonChange(i: Sidebar, event: any) { i.setState({ purgeReason: Some(event.target.value) }); } handlePurgeSubmit(i: Sidebar, event: any) { event.preventDefault(); let form = new PurgeCommunity({ community_id: i.props.community_view.community.id, reason: i.state.purgeReason, auth: auth().unwrap(), }); WebSocketService.Instance.send(wsClient.purgeCommunity(form)); i.setState({ purgeLoading: true }); } handleBlock(i: Sidebar, event: any) { event.preventDefault(); let blockCommunityForm = new BlockCommunity({ community_id: i.props.community_view.community.id, block: true, auth: auth().unwrap(), }); WebSocketService.Instance.send(wsClient.blockCommunity(blockCommunityForm)); } handleUnblock(i: Sidebar, event: any) { event.preventDefault(); let blockCommunityForm = new BlockCommunity({ community_id: i.props.community_view.community.id, block: false, auth: auth().unwrap(), }); WebSocketService.Instance.send(wsClient.blockCommunity(blockCommunityForm)); } }