import { Component, linkEvent } from 'inferno'; import { Link } from 'inferno-router'; import { Subscription } from "rxjs"; import { retryWhen, delay, take } from 'rxjs/operators'; import { UserOperation, Post, Comment, CommunityUser, GetUserDetailsForm, SortType, UserDetailsResponse, UserView } from '../interfaces'; import { WebSocketService } from '../services'; import { msgOp, fetchLimit } from '../utils'; import { PostListing } from './post-listing'; import { CommentNodes } from './comment-nodes'; import { MomentTime } from './moment-time'; enum View { Overview, Comments, Posts, Saved } interface UserState { user: UserView; user_id: number; follows: Array; moderates: Array; comments: Array; posts: Array; saved?: Array; view: View; sort: SortType; page: number; } export class User extends Component { private subscription: Subscription; private emptyState: UserState = { user: { id: null, name: null, fedi_name: null, published: null, number_of_posts: null, post_score: null, number_of_comments: null, comment_score: null, }, user_id: null, follows: [], moderates: [], comments: [], posts: [], view: View.Overview, sort: SortType.New, page: 1, } constructor(props: any, context: any) { super(props, context); this.state = this.emptyState; this.state.user_id = Number(this.props.match.params.id); 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') ); this.refetch(); } componentWillUnmount() { this.subscription.unsubscribe(); } render() { return (
/u/{this.state.user.name}
{this.selects()} {this.state.view == View.Overview && this.overview() } {this.state.view == View.Comments && this.comments() } {this.state.view == View.Posts && this.posts() } {this.state.view == View.Saved && this.overview() } {this.paginator()}
{this.userInfo()} {this.moderates()} {this.follows()}
) } selects() { return (
) } overview() { let combined: Array<{type_: string, data: Comment | Post}> = []; let comments = this.state.comments.map(e => {return {type_: "comments", data: e}}); let posts = this.state.posts.map(e => {return {type_: "posts", data: e}}); combined.push(...comments); combined.push(...posts); // Sort it if (this.state.sort == SortType.New) { combined.sort((a, b) => b.data.published.localeCompare(a.data.published)); } else { combined.sort((a, b) => b.data.score - a.data.score); } return (
{combined.map(i =>
{i.type_ == "posts" ? : }
) }
) } comments() { return (
{this.state.comments.map(comment => )}
); } posts() { return (
{this.state.posts.map(post => )}
); } userInfo() { let user = this.state.user; return (
{user.name}
Joined
{user.post_score} points {user.number_of_posts} posts
{user.comment_score} points {user.number_of_comments} comments

) } moderates() { return (
{this.state.moderates.length > 0 &&
Moderates
    {this.state.moderates.map(community =>
  • {community.community_name}
  • )}
}
) } follows() { return (
{this.state.follows.length > 0 &&

Subscribed
    {this.state.follows.map(community =>
  • {community.community_name}
  • )}
}
) } paginator() { return (
{this.state.page > 1 && }
); } nextPage(i: User) { i.state.page++; i.setState(i.state); i.refetch(); } prevPage(i: User) { i.state.page--; i.setState(i.state); i.refetch(); } refetch() { let form: GetUserDetailsForm = { user_id: this.state.user_id, sort: SortType[this.state.sort], saved_only: this.state.view == View.Saved, page: this.state.page, limit: fetchLimit, }; WebSocketService.Instance.getUserDetails(form); } handleSortChange(i: User, event: any) { i.state.sort = Number(event.target.value); i.state.page = 1; i.setState(i.state); i.refetch(); } handleViewChange(i: User, event: any) { i.state.view = Number(event.target.value); i.state.page = 1; i.setState(i.state); i.refetch(); } parseMessage(msg: any) { console.log(msg); let op: UserOperation = msgOp(msg); if (msg.error) { alert(msg.error); return; } else if (op == UserOperation.GetUserDetails) { let res: UserDetailsResponse = msg; this.state.user = res.user; this.state.comments = res.comments; this.state.follows = res.follows; this.state.moderates = res.moderates; this.state.posts = res.posts; this.setState(this.state); } } }