import { Component, linkEvent } from 'inferno'; import { Subscription } from "rxjs"; import { retryWhen, delay, take } from 'rxjs/operators'; import { UserOperation, Community, Post as PostI, PostResponse, Comment, CommentForm as CommentFormI, CommentResponse, CommentLikeForm, CreateCommentLikeResponse } from '../interfaces'; import { WebSocketService, UserService } from '../services'; import { msgOp } from '../utils'; import { MomentTime } from './moment-time'; interface CommentNodeI { comment: Comment; children?: Array; }; interface State { post: PostI; comments: Array; } export class Post extends Component { private subscription: Subscription; private emptyState: State = { post: { name: null, attributed_to: null, community_id: null, id: null, published: null, }, comments: [] } constructor(props, context) { super(props, context); this.state = this.emptyState; this.state.post.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') ); WebSocketService.Instance.getPost(this.state.post.id); } componentWillUnmount() { this.subscription.unsubscribe(); } render() { return (
{this.postHeader()} {this.commentsTree()}
{this.newComments()}
{this.sidebar()}
) } postHeader() { let title = this.state.post.url ?
{this.state.post.name} {(new URL(this.state.post.url)).hostname}
:
{this.state.post.name}
; return (
{title}
via {this.state.post.attributed_to}
{this.state.post.body}
) } newComments() { return (
New Comments
{this.state.comments.map(comment => )}
) } sidebar() { return (
Sidebar

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

); } // buildCommentsTree(): Array { buildCommentsTree(): any { let tree: Array = this.createCommentsTree(this.state.comments); console.log(tree); // TODO this is redoing every time and it shouldn't return tree; } private createCommentsTree(comments: Array): Array { let hashTable = {}; for (let comment of comments) { let node: CommentNodeI = { comment: comment }; hashTable[comment.id] = { ...node, children : [] }; } let tree: Array = []; for (let comment of comments) { if( comment.parent_id ) hashTable[comment.parent_id].children.push(hashTable[comment.id]); else tree.push(hashTable[comment.id]); } return tree; } commentsTree() { let nodes = this.buildCommentsTree(); return (
); } parseMessage(msg: any) { console.log(msg); let op: UserOperation = msgOp(msg); if (msg.error) { alert(msg.error); return; } else if (op == UserOperation.GetPost) { let res: PostResponse = msg; this.state.post = res.post; this.state.comments = res.comments; this.setState(this.state); } else if (op == UserOperation.CreateComment) { let res: CommentResponse = msg; this.state.comments.unshift(res.comment); this.setState(this.state); } else if (op == UserOperation.EditComment) { let res: CommentResponse = msg; let found = this.state.comments.find(c => c.id == res.comment.id); found.content = res.comment.content; found.updated = res.comment.updated; this.setState(this.state); } else if (op == UserOperation.CreateCommentLike) { let res: CreateCommentLikeResponse = msg; let found: Comment = this.state.comments.find(c => c.id === res.comment.id); found.score = res.comment.score; found.upvotes = res.comment.upvotes; found.downvotes = res.comment.downvotes; if (res.comment.my_vote !== null) found.my_vote = res.comment.my_vote; this.setState(this.state); } } } interface CommentNodesState { } interface CommentNodesProps { nodes: Array; noIndent?: boolean; } export class CommentNodes extends Component { constructor(props, context) { super(props, context); } render() { return (
{this.props.nodes.map(node => )}
) } } interface CommentNodeState { showReply: boolean; showEdit: boolean; } interface CommentNodeProps { node: CommentNodeI; noIndent?: boolean; } export class CommentNode extends Component { private emptyState: CommentNodeState = { showReply: false, showEdit: false } constructor(props, context) { super(props, context); this.state = this.emptyState; this.handleReplyCancel = this.handleReplyCancel.bind(this); this.handleCommentLike = this.handleCommentLike.bind(this); this.handleCommentDisLike = this.handleCommentDisLike.bind(this); } render() { let node = this.props.node; return (
{node.comment.score}
{this.state.showEdit && } {!this.state.showEdit &&

{node.comment.content}

  • reply
  • {this.myComment &&
  • edit
  • } {this.myComment &&
  • delete
  • }
  • link
}
{this.state.showReply && } {this.props.node.children && }
) } private get myComment(): boolean { return this.props.node.comment.attributed_to == UserService.Instance.fediUserId; } handleReplyClick(i: CommentNode, event) { i.state.showReply = true; i.setState(i.state); } handleEditClick(i: CommentNode, event) { i.state.showEdit = true; i.setState(i.state); } handleDeleteClick(i: CommentNode, event) { let deleteForm: CommentFormI = { content: "*deleted*", edit_id: i.props.node.comment.id, post_id: i.props.node.comment.post_id, parent_id: i.props.node.comment.parent_id, auth: null }; WebSocketService.Instance.editComment(deleteForm); } handleReplyCancel(): any { this.state.showReply = false; this.state.showEdit = false; this.setState(this.state); } handleCommentLike(i: CommentNodeI, event) { let form: CommentLikeForm = { comment_id: i.comment.id, post_id: i.comment.post_id, score: (i.comment.my_vote == 1) ? 0 : 1 }; WebSocketService.Instance.likeComment(form); } handleCommentDisLike(i: CommentNodeI, event) { let form: CommentLikeForm = { comment_id: i.comment.id, post_id: i.comment.post_id, score: (i.comment.my_vote == -1) ? 0 : -1 }; WebSocketService.Instance.likeComment(form); } } interface CommentFormProps { postId?: number; node?: CommentNodeI; onReplyCancel?(); edit?: boolean; } interface CommentFormState { commentForm: CommentFormI; buttonTitle: string; } export class CommentForm extends Component { private emptyState: CommentFormState = { commentForm: { auth: null, content: null, post_id: this.props.node ? this.props.node.comment.post_id : this.props.postId }, buttonTitle: !this.props.node ? "Post" : this.props.edit ? "Edit" : "Reply" } constructor(props, context) { super(props, context); this.state = this.emptyState; if (this.props.node) { if (this.props.edit) { this.state.commentForm.edit_id = this.props.node.comment.id; this.state.commentForm.parent_id = this.props.node.comment.parent_id; this.state.commentForm.content = this.props.node.comment.content; } else { // A reply gets a new parent id this.state.commentForm.parent_id = this.props.node.comment.id; } } } render() { return (