import { Component, linkEvent } from 'inferno'; import { Link } from 'inferno-router'; import { Subscription } from 'rxjs'; import { retryWhen, delay, take } from 'rxjs/operators'; import { UserOperation, CommunityUser, GetFollowedCommunitiesResponse, ListCommunitiesForm, ListCommunitiesResponse, Community, SortType, GetSiteResponse, ListingType, SiteResponse, GetPostsResponse, CreatePostLikeResponse, Post, GetPostsForm, WebSocketJsonResponse, } from '../interfaces'; import { WebSocketService, UserService } from '../services'; import { PostListings } from './post-listings'; import { SortSelect } from './sort-select'; import { ListingTypeSelect } from './listing-type-select'; import { SiteForm } from './site-form'; import { wsJsonToRes, repoUrl, mdToHtml, fetchLimit, routeSortTypeToEnum, routeListingTypeToEnum, postRefetchSeconds, pictshareAvatarThumbnail, showAvatars, toast, } from '../utils'; import { i18n } from '../i18next'; import { T } from 'inferno-i18next'; interface MainState { subscribedCommunities: Array; trendingCommunities: Array; site: GetSiteResponse; showEditSite: boolean; loading: boolean; posts: Array; type_: ListingType; sort: SortType; page: number; } export class Main extends Component { private subscription: Subscription; private postFetcher: any; private emptyState: MainState = { subscribedCommunities: [], trendingCommunities: [], site: { site: { id: null, name: null, creator_id: null, creator_name: null, published: null, number_of_users: null, number_of_posts: null, number_of_comments: null, number_of_communities: null, enable_downvotes: null, open_registration: null, enable_nsfw: null, }, admins: [], banned: [], online: null, }, showEditSite: false, loading: true, posts: [], type_: this.getListingTypeFromProps(this.props), sort: this.getSortTypeFromProps(this.props), page: this.getPageFromProps(this.props), }; getListingTypeFromProps(props: any): ListingType { return props.match.params.type ? routeListingTypeToEnum(props.match.params.type) : UserService.Instance.user ? UserService.Instance.user.default_listing_type : ListingType.All; } getSortTypeFromProps(props: any): SortType { return props.match.params.sort ? routeSortTypeToEnum(props.match.params.sort) : UserService.Instance.user ? UserService.Instance.user.default_sort_type : SortType.Hot; } getPageFromProps(props: any): number { return props.match.params.page ? Number(props.match.params.page) : 1; } constructor(props: any, context: any) { super(props, context); this.state = this.emptyState; this.handleEditCancel = this.handleEditCancel.bind(this); this.handleSortChange = this.handleSortChange.bind(this); this.handleTypeChange = this.handleTypeChange.bind(this); this.subscription = WebSocketService.Instance.subject .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10)))) .subscribe( msg => this.parseMessage(msg), err => console.error(err), () => console.log('complete') ); WebSocketService.Instance.getSite(); if (UserService.Instance.user) { WebSocketService.Instance.getFollowedCommunities(); } let listCommunitiesForm: ListCommunitiesForm = { sort: SortType[SortType.Hot], limit: 6, }; WebSocketService.Instance.listCommunities(listCommunitiesForm); this.keepFetchingPosts(); } componentWillUnmount() { this.subscription.unsubscribe(); clearInterval(this.postFetcher); } // Necessary for back button for some reason componentWillReceiveProps(nextProps: any) { if ( nextProps.history.action == 'POP' || nextProps.history.action == 'PUSH' ) { this.state.type_ = this.getListingTypeFromProps(nextProps); this.state.sort = this.getSortTypeFromProps(nextProps); this.state.page = this.getPageFromProps(nextProps); this.setState(this.state); this.fetchPosts(); } } render() { return (
{this.posts()}
{this.my_sidebar()}
); } my_sidebar() { return (
{!this.state.loading && (
{this.trendingCommunities()} {UserService.Instance.user && this.state.subscribedCommunities.length > 0 && (
# #
    {this.state.subscribedCommunities.map(community => (
  • {community.community_name}
  • ))}
)} #
{this.sidebar()} {this.landing()}
)}
); } trendingCommunities() { return (
# #
    {this.state.trendingCommunities.map(community => (
  • {community.name}
  • ))}
); } sidebar() { return (
{!this.state.showEditSite ? ( this.siteInfo() ) : ( )}
); } updateUrl() { let typeStr = ListingType[this.state.type_].toLowerCase(); let sortStr = SortType[this.state.sort].toLowerCase(); this.props.history.push( `/home/type/${typeStr}/sort/${sortStr}/page/${this.state.page}` ); } siteInfo() { return (
{`${this.state.site.site.name}`}
{this.canAdmin && (
  • #
)}
  • #
  • #
  • #
  • #
  • #
  • #
  • # :
  • {this.state.site.admins.map(admin => (
  • {admin.avatar && showAvatars() && ( )} {admin.name}
  • ))}
{this.state.site.site.description && (
)}
); } landing() { return (
# # Lemmybeta

# # #

#

#

#

# # # #

); } posts() { return (
{this.state.loading ? (
) : (
{this.selects()} {this.paginator()}
)}
); } selects() { return (
{this.state.type_ == ListingType.All && ( # )} {UserService.Instance.user && this.state.type_ == ListingType.Subscribed && ( # )}
); } paginator() { return (
{this.state.page > 1 && ( )} {this.state.posts.length == fetchLimit && ( )}
); } get canAdmin(): boolean { return ( UserService.Instance.user && this.state.site.admins .map(a => a.id) .includes(UserService.Instance.user.id) ); } handleEditClick(i: Main) { i.state.showEditSite = true; i.setState(i.state); } handleEditCancel() { this.state.showEditSite = false; this.setState(this.state); } nextPage(i: Main) { i.state.page++; i.state.loading = true; i.setState(i.state); i.updateUrl(); i.fetchPosts(); window.scrollTo(0, 0); } prevPage(i: Main) { i.state.page--; i.state.loading = true; i.setState(i.state); i.updateUrl(); i.fetchPosts(); window.scrollTo(0, 0); } handleSortChange(val: SortType) { this.state.sort = val; this.state.page = 1; this.state.loading = true; this.setState(this.state); this.updateUrl(); this.fetchPosts(); window.scrollTo(0, 0); } handleTypeChange(val: ListingType) { this.state.type_ = val; this.state.page = 1; this.state.loading = true; this.setState(this.state); this.updateUrl(); this.fetchPosts(); window.scrollTo(0, 0); } keepFetchingPosts() { this.fetchPosts(); this.postFetcher = setInterval(() => this.fetchPosts(), postRefetchSeconds); } fetchPosts() { let getPostsForm: GetPostsForm = { page: this.state.page, limit: fetchLimit, sort: SortType[this.state.sort], type_: ListingType[this.state.type_], }; WebSocketService.Instance.getPosts(getPostsForm); } parseMessage(msg: WebSocketJsonResponse) { console.log(msg); let res = wsJsonToRes(msg); if (msg.error) { toast(i18n.t(msg.error), 'danger'); return; } else if (res.op == UserOperation.GetFollowedCommunities) { let data = res.data as GetFollowedCommunitiesResponse; this.state.subscribedCommunities = data.communities; this.setState(this.state); } else if (res.op == UserOperation.ListCommunities) { let data = res.data as ListCommunitiesResponse; this.state.trendingCommunities = data.communities; this.setState(this.state); } else if (res.op == UserOperation.GetSite) { let data = res.data as GetSiteResponse; // This means it hasn't been set up yet if (!data.site) { this.context.router.history.push('/setup'); } this.state.site.admins = data.admins; this.state.site.site = data.site; this.state.site.banned = data.banned; this.state.site.online = data.online; this.setState(this.state); document.title = `${WebSocketService.Instance.site.name}`; } else if (res.op == UserOperation.EditSite) { let data = res.data as SiteResponse; this.state.site.site = data.site; this.state.showEditSite = false; this.setState(this.state); } else if (res.op == UserOperation.GetPosts) { let data = res.data as GetPostsResponse; this.state.posts = data.posts; this.state.loading = false; this.setState(this.state); } else if (res.op == UserOperation.CreatePostLike) { let data = res.data as CreatePostLikeResponse; let found = this.state.posts.find(c => c.id == data.post.id); found.my_vote = data.post.my_vote; found.score = data.post.score; found.upvotes = data.post.upvotes; found.downvotes = data.post.downvotes; this.setState(this.state); } } }