import { None, Option, Some } from "@sniptt/monads"; import { Component, linkEvent } from "inferno"; import { AddModToCommunityResponse, BanFromCommunityResponse, BlockCommunityResponse, BlockPersonResponse, CommentReportResponse, CommentResponse, CommentView, CommunityResponse, GetComments, GetCommentsResponse, GetCommunity, GetCommunityResponse, GetPosts, GetPostsResponse, GetSiteResponse, ListingType, PostReportResponse, PostResponse, PostView, PurgeItemResponse, SortType, toOption, UserOperation, wsJsonToRes, wsUserOp, } from "lemmy-js-client"; import { Subscription } from "rxjs"; import { i18n } from "../../i18next"; import { CommentViewType, DataType, InitialFetchRequest, } from "../../interfaces"; import { UserService, WebSocketService } from "../../services"; import { auth, commentsToFlatNodes, communityRSSUrl, createCommentLikeRes, createPostLikeFindRes, editCommentRes, editPostFindRes, enableDownvotes, enableNsfw, fetchLimit, getDataTypeFromProps, getPageFromProps, getSortTypeFromProps, notifyPost, postToCommentSortType, relTags, restoreScrollPosition, saveCommentRes, saveScrollPosition, setIsoData, setupTippy, showLocal, toast, updateCommunityBlock, updatePersonBlock, wsClient, wsSubscribe, } from "../../utils"; import { CommentNodes } from "../comment/comment-nodes"; import { BannerIconHeader } from "../common/banner-icon-header"; import { DataTypeSelect } from "../common/data-type-select"; import { HtmlTags } from "../common/html-tags"; import { Icon, Spinner } from "../common/icon"; import { Paginator } from "../common/paginator"; import { SortSelect } from "../common/sort-select"; import { Sidebar } from "../community/sidebar"; import { SiteSidebar } from "../home/site-sidebar"; import { PostListings } from "../post/post-listings"; import { CommunityLink } from "./community-link"; interface State { communityRes: Option; siteRes: GetSiteResponse; communityName: string; communityLoading: boolean; postsLoading: boolean; commentsLoading: boolean; posts: PostView[]; comments: CommentView[]; dataType: DataType; sort: SortType; page: number; showSidebarMobile: boolean; } interface CommunityProps { dataType: DataType; sort: SortType; page: number; } interface UrlParams { dataType?: string; sort?: SortType; page?: number; } export class Community extends Component { private isoData = setIsoData( this.context, GetCommunityResponse, GetPostsResponse, GetCommentsResponse ); private subscription: Subscription; private emptyState: State = { communityRes: None, communityName: this.props.match.params.name, communityLoading: true, postsLoading: true, commentsLoading: true, posts: [], comments: [], dataType: getDataTypeFromProps(this.props), sort: getSortTypeFromProps(this.props), page: getPageFromProps(this.props), siteRes: this.isoData.site_res, showSidebarMobile: false, }; constructor(props: any, context: any) { super(props, context); this.state = this.emptyState; this.handleSortChange = this.handleSortChange.bind(this); this.handleDataTypeChange = this.handleDataTypeChange.bind(this); this.handlePageChange = this.handlePageChange.bind(this); this.parseMessage = this.parseMessage.bind(this); this.subscription = wsSubscribe(this.parseMessage); // Only fetch the data if coming from another route if (this.isoData.path == this.context.router.route.match.url) { this.state = { ...this.state, communityRes: Some(this.isoData.routeData[0] as GetCommunityResponse), }; let postsRes = Some(this.isoData.routeData[1] as GetPostsResponse); let commentsRes = Some(this.isoData.routeData[2] as GetCommentsResponse); if (postsRes.isSome()) { this.state = { ...this.state, posts: postsRes.unwrap().posts }; } if (commentsRes.isSome()) { this.state = { ...this.state, comments: commentsRes.unwrap().comments }; } this.state = { ...this.state, communityLoading: false, postsLoading: false, commentsLoading: false, }; } else { this.fetchCommunity(); this.fetchData(); } } fetchCommunity() { let form = new GetCommunity({ name: Some(this.state.communityName), id: None, auth: auth(false).ok(), }); WebSocketService.Instance.send(wsClient.getCommunity(form)); } componentDidMount() { setupTippy(); } componentWillUnmount() { saveScrollPosition(this.context); this.subscription.unsubscribe(); } static getDerivedStateFromProps(props: any): CommunityProps { return { dataType: getDataTypeFromProps(props), sort: getSortTypeFromProps(props), page: getPageFromProps(props), }; } static fetchInitialData(req: InitialFetchRequest): Promise[] { let pathSplit = req.path.split("/"); let promises: Promise[] = []; let communityName = pathSplit[2]; let communityForm = new GetCommunity({ name: Some(communityName), id: None, auth: req.auth, }); promises.push(req.client.getCommunity(communityForm)); let dataType: DataType = pathSplit[4] ? DataType[pathSplit[4]] : DataType.Post; let sort: Option = toOption( pathSplit[6] ? SortType[pathSplit[6]] : UserService.Instance.myUserInfo.match({ some: mui => Object.values(SortType)[ mui.local_user_view.local_user.default_sort_type ], none: SortType.Active, }) ); let page = toOption(pathSplit[8] ? Number(pathSplit[8]) : 1); if (dataType == DataType.Post) { let getPostsForm = new GetPosts({ community_name: Some(communityName), community_id: None, page, limit: Some(fetchLimit), sort, type_: Some(ListingType.All), saved_only: Some(false), auth: req.auth, }); promises.push(req.client.getPosts(getPostsForm)); promises.push(Promise.resolve()); } else { let getCommentsForm = new GetComments({ community_name: Some(communityName), community_id: None, page, limit: Some(fetchLimit), max_depth: None, sort: sort.map(postToCommentSortType), type_: Some(ListingType.All), saved_only: Some(false), post_id: None, parent_id: None, auth: req.auth, }); promises.push(Promise.resolve()); promises.push(req.client.getComments(getCommentsForm)); } return promises; } componentDidUpdate(_: any, lastState: State) { if ( lastState.dataType !== this.state.dataType || lastState.sort !== this.state.sort || lastState.page !== this.state.page ) { this.setState({ postsLoading: true, commentsLoading: true }); this.fetchData(); } } get documentTitle(): string { return this.state.communityRes.match({ some: res => this.state.siteRes.site_view.match({ some: siteView => `${res.community_view.community.title} - ${siteView.site.name}`, none: "", }), none: "", }); } render() { return (
{this.state.communityLoading ? (
) : ( this.state.communityRes.match({ some: res => ( <>
{this.communityInfo()}
{this.state.showSidebarMobile && ( <> {!res.community_view.community.local && res.site.match({ some: site => ( ), none: <>, })} )}
{this.selects()} {this.listings()}
{!res.community_view.community.local && res.site.match({ some: site => ( ), none: <>, })}
), none: <>, }) )}
); } listings() { return this.state.dataType == DataType.Post ? ( this.state.postsLoading ? (
) : ( ) ) : this.state.commentsLoading ? (
) : ( r.moderators)} admins={Some(this.state.siteRes.admins)} maxCommentsShown={None} allLanguages={this.state.siteRes.all_languages} /> ); } communityInfo() { return this.state.communityRes .map(r => r.community_view.community) .match({ some: community => (
{community.title}
), none: <>, }); } selects() { let communityRss = this.state.communityRes.map(r => communityRSSUrl(r.community_view.community.actor_id, this.state.sort) ); return (
{communityRss.match({ some: rss => ( <> ), none: <>, })}
); } handlePageChange(page: number) { this.updateUrl({ page }); window.scrollTo(0, 0); } handleSortChange(val: SortType) { this.updateUrl({ sort: val, page: 1 }); window.scrollTo(0, 0); } handleDataTypeChange(val: DataType) { this.updateUrl({ dataType: DataType[val], page: 1 }); window.scrollTo(0, 0); } handleShowSidebarMobile(i: Community) { i.setState({ showSidebarMobile: !i.state.showSidebarMobile }); } updateUrl(paramUpdates: UrlParams) { const dataTypeStr = paramUpdates.dataType || DataType[this.state.dataType]; const sortStr = paramUpdates.sort || this.state.sort; const page = paramUpdates.page || this.state.page; let typeView = `/c/${this.state.communityName}`; this.props.history.push( `${typeView}/data_type/${dataTypeStr}/sort/${sortStr}/page/${page}` ); } fetchData() { if (this.state.dataType == DataType.Post) { let form = new GetPosts({ page: Some(this.state.page), limit: Some(fetchLimit), sort: Some(this.state.sort), type_: Some(ListingType.All), community_name: Some(this.state.communityName), community_id: None, saved_only: Some(false), auth: auth(false).ok(), }); WebSocketService.Instance.send(wsClient.getPosts(form)); } else { let form = new GetComments({ page: Some(this.state.page), limit: Some(fetchLimit), max_depth: None, sort: Some(postToCommentSortType(this.state.sort)), type_: Some(ListingType.All), community_name: Some(this.state.communityName), community_id: None, saved_only: Some(false), post_id: None, parent_id: None, auth: auth(false).ok(), }); WebSocketService.Instance.send(wsClient.getComments(form)); } } parseMessage(msg: any) { let op = wsUserOp(msg); console.log(msg); if (msg.error) { toast(i18n.t(msg.error), "danger"); this.context.router.history.push("/"); return; } else if (msg.reconnect) { this.state.communityRes.match({ some: res => { WebSocketService.Instance.send( wsClient.communityJoin({ community_id: res.community_view.community.id, }) ); }, none: void 0, }); this.fetchData(); } else if (op == UserOperation.GetCommunity) { let data = wsJsonToRes(msg, GetCommunityResponse); this.setState({ communityRes: Some(data), communityLoading: false }); // TODO why is there no auth in this form? WebSocketService.Instance.send( wsClient.communityJoin({ community_id: data.community_view.community.id, }) ); } else if ( op == UserOperation.EditCommunity || op == UserOperation.DeleteCommunity || op == UserOperation.RemoveCommunity ) { let data = wsJsonToRes(msg, CommunityResponse); this.state.communityRes.match({ some: res => (res.community_view = data.community_view), none: void 0, }); this.setState(this.state); } else if (op == UserOperation.FollowCommunity) { let data = wsJsonToRes(msg, CommunityResponse); this.state.communityRes.match({ some: res => { res.community_view.subscribed = data.community_view.subscribed; res.community_view.counts.subscribers = data.community_view.counts.subscribers; }, none: void 0, }); this.setState(this.state); } else if (op == UserOperation.GetPosts) { let data = wsJsonToRes(msg, GetPostsResponse); this.setState({ posts: data.posts, postsLoading: false }); restoreScrollPosition(this.context); setupTippy(); } else if ( op == UserOperation.EditPost || op == UserOperation.DeletePost || op == UserOperation.RemovePost || op == UserOperation.LockPost || op == UserOperation.StickyPost || op == UserOperation.SavePost ) { let data = wsJsonToRes(msg, PostResponse); editPostFindRes(data.post_view, this.state.posts); this.setState(this.state); } else if (op == UserOperation.CreatePost) { let data = wsJsonToRes(msg, PostResponse); this.state.posts.unshift(data.post_view); if ( UserService.Instance.myUserInfo .map(m => m.local_user_view.local_user.show_new_post_notifs) .unwrapOr(false) ) { notifyPost(data.post_view, this.context.router); } this.setState(this.state); } else if (op == UserOperation.CreatePostLike) { let data = wsJsonToRes(msg, PostResponse); createPostLikeFindRes(data.post_view, this.state.posts); this.setState(this.state); } else if (op == UserOperation.AddModToCommunity) { let data = wsJsonToRes( msg, AddModToCommunityResponse ); this.state.communityRes.match({ some: res => (res.moderators = data.moderators), none: void 0, }); this.setState(this.state); } else if (op == UserOperation.BanFromCommunity) { let data = wsJsonToRes( msg, BanFromCommunityResponse ); // TODO this might be incorrect this.state.posts .filter(p => p.creator.id == data.person_view.person.id) .forEach(p => (p.creator_banned_from_community = data.banned)); this.setState(this.state); } else if (op == UserOperation.GetComments) { let data = wsJsonToRes(msg, GetCommentsResponse); this.setState({ comments: data.comments, commentsLoading: false }); } else if ( op == UserOperation.EditComment || op == UserOperation.DeleteComment || op == UserOperation.RemoveComment ) { let data = wsJsonToRes(msg, CommentResponse); editCommentRes(data.comment_view, this.state.comments); this.setState(this.state); } else if (op == UserOperation.CreateComment) { let data = wsJsonToRes(msg, CommentResponse); // Necessary since it might be a user reply if (data.form_id) { this.state.comments.unshift(data.comment_view); this.setState(this.state); } } else if (op == UserOperation.SaveComment) { let data = wsJsonToRes(msg, CommentResponse); saveCommentRes(data.comment_view, this.state.comments); this.setState(this.state); } else if (op == UserOperation.CreateCommentLike) { let data = wsJsonToRes(msg, CommentResponse); createCommentLikeRes(data.comment_view, this.state.comments); this.setState(this.state); } else if (op == UserOperation.BlockPerson) { let data = wsJsonToRes(msg, BlockPersonResponse); updatePersonBlock(data); } else if (op == UserOperation.CreatePostReport) { let data = wsJsonToRes(msg, PostReportResponse); if (data) { toast(i18n.t("report_created")); } } else if (op == UserOperation.CreateCommentReport) { let data = wsJsonToRes(msg, CommentReportResponse); if (data) { toast(i18n.t("report_created")); } } else if (op == UserOperation.PurgeCommunity) { let data = wsJsonToRes(msg, PurgeItemResponse); if (data.success) { toast(i18n.t("purge_success")); this.context.router.history.push(`/`); } } else if (op == UserOperation.BlockCommunity) { let data = wsJsonToRes( msg, BlockCommunityResponse ); this.state.communityRes.match({ some: res => (res.community_view.blocked = data.blocked), none: void 0, }); updateCommunityBlock(data); this.setState(this.state); } } }