1 import { Component, linkEvent } from 'inferno';
2 import { Subscription } from "rxjs";
3 import { retryWhen, delay, take } from 'rxjs/operators';
4 import { UserOperation, Community, Post as PostI, GetPostResponse, PostResponse, Comment, CommentForm as CommentFormI, CommentResponse, CommentSortType, CreatePostLikeResponse, CommunityUser, CommunityResponse, CommentNode as CommentNodeI, BanFromCommunityResponse, BanUserResponse, AddModToCommunityResponse, AddAdminResponse, UserView, SearchType, SortType, SearchForm, SearchResponse, GetSiteResponse, GetCommunityResponse } from '../interfaces';
5 import { WebSocketService, UserService } from '../services';
6 import { msgOp, hotRank } from '../utils';
7 import { PostListing } from './post-listing';
8 import { PostListings } from './post-listings';
9 import { Sidebar } from './sidebar';
10 import { CommentForm } from './comment-form';
11 import { CommentNodes } from './comment-nodes';
12 import * as autosize from 'autosize';
13 import { i18n } from '../i18next';
14 import { T } from 'inferno-i18next';
18 comments: Array<Comment>;
19 commentSort: CommentSortType;
21 moderators: Array<CommunityUser>;
22 admins: Array<UserView>;
24 scrolled_comment_id?: number;
26 crossPosts: Array<PostI>;
29 export class Post extends Component<any, PostState> {
31 private subscription: Subscription;
32 private emptyState: PostState = {
35 commentSort: CommentSortType.Hot,
44 constructor(props: any, context: any) {
45 super(props, context);
47 this.state = this.emptyState;
49 let postId = Number(this.props.match.params.id);
50 if (this.props.match.params.comment_id) {
51 this.state.scrolled_comment_id = this.props.match.params.comment_id;
54 this.subscription = WebSocketService.Instance.subject
55 .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
57 (msg) => this.parseMessage(msg),
58 (err) => console.error(err),
59 () => console.log('complete')
62 WebSocketService.Instance.getPost(postId);
65 componentWillUnmount() {
66 this.subscription.unsubscribe();
70 autosize(document.querySelectorAll('textarea'));
73 componentDidUpdate(_lastProps: any, lastState: PostState, _snapshot: any) {
74 if (this.state.scrolled_comment_id && !this.state.scrolled && lastState.comments.length > 0) {
75 var elmnt = document.getElementById(`comment-${this.state.scrolled_comment_id}`);
76 elmnt.scrollIntoView();
77 elmnt.classList.add("mark");
78 this.state.scrolled = true;
79 this.markScrolledAsRead(this.state.scrolled_comment_id);
82 // Necessary if you are on a post and you click another post (same route)
83 if (_lastProps.location.pathname !== _lastProps.history.location.pathname) {
84 // Couldnt get a refresh working. This does for now.
87 // let currentId = this.props.match.params.id;
88 // WebSocketService.Instance.getPost(currentId);
89 // this.context.router.history.push('/sponsors');
90 // this.context.refresh();
91 // this.context.router.history.push(_lastProps.location.pathname);
96 markScrolledAsRead(commentId: number) {
97 let found = this.state.comments.find(c => c.id == commentId);
98 let parent = this.state.comments.find(c => found.parent_id == c.id);
99 let parent_user_id = parent ? parent.creator_id : this.state.post.creator_id;
101 if (UserService.Instance.user && UserService.Instance.user.id == parent_user_id) {
103 let form: CommentFormI = {
104 content: found.content,
106 creator_id: found.creator_id,
107 post_id: found.post_id,
108 parent_id: found.parent_id,
112 WebSocketService.Instance.editComment(form);
118 <div class="container">
119 {this.state.loading ?
120 <h5><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h5> :
122 <div class="col-12 col-md-8 mb-3">
124 post={this.state.post}
128 moderators={this.state.moderators}
129 admins={this.state.admins}
131 {this.state.crossPosts.length > 0 &&
133 <div class="my-1 text-muted small font-weight-bold"><T i18nKey="cross_posts">#</T></div>
134 <PostListings showCommunity posts={this.state.crossPosts} />
137 <div className="mb-2" />
138 <CommentForm postId={this.state.post.id} disabled={this.state.post.locked} />
140 {this.commentsTree()}
142 <div class="col-12 col-sm-12 col-md-4">
143 {this.state.comments.length > 0 && this.newComments()}
154 <div class="btn-group btn-group-toggle mb-3">
155 <label className={`btn btn-sm btn-secondary pointer ${this.state.commentSort === CommentSortType.Hot && 'active'}`}>{i18n.t('hot')}
156 <input type="radio" value={CommentSortType.Hot}
157 checked={this.state.commentSort === CommentSortType.Hot}
158 onChange={linkEvent(this, this.handleCommentSortChange)} />
160 <label className={`btn btn-sm btn-secondary pointer ${this.state.commentSort === CommentSortType.Top && 'active'}`}>{i18n.t('top')}
161 <input type="radio" value={CommentSortType.Top}
162 checked={this.state.commentSort === CommentSortType.Top}
163 onChange={linkEvent(this, this.handleCommentSortChange)} />
165 <label className={`btn btn-sm btn-secondary pointer ${this.state.commentSort === CommentSortType.New && 'active'}`}>{i18n.t('new')}
166 <input type="radio" value={CommentSortType.New}
167 checked={this.state.commentSort === CommentSortType.New}
168 onChange={linkEvent(this, this.handleCommentSortChange)} />
176 <div class="d-none d-md-block new-comments mb-3 card border-secondary">
177 <div class="card-body small">
178 <h6><T i18nKey="recent_comments">#</T></h6>
179 {this.state.comments.map(comment =>
181 nodes={[{comment: comment}]}
183 locked={this.state.post.locked}
184 moderators={this.state.moderators}
185 admins={this.state.admins}
186 postCreatorId={this.state.post.creator_id}
198 community={this.state.community}
199 moderators={this.state.moderators}
200 admins={this.state.admins}
206 handleCommentSortChange(i: Post, event: any) {
207 i.state.commentSort = Number(event.target.value);
211 private buildCommentsTree(): Array<CommentNodeI> {
212 let map = new Map<number, CommentNodeI>();
213 for (let comment of this.state.comments) {
214 let node: CommentNodeI = {
218 map.set(comment.id, { ...node });
220 let tree: Array<CommentNodeI> = [];
221 for (let comment of this.state.comments) {
222 if( comment.parent_id ) {
223 map.get(comment.parent_id).children.push(map.get(comment.id));
226 tree.push(map.get(comment.id));
235 sortTree(tree: Array<CommentNodeI>) {
237 // First, put removed and deleted comments at the bottom, then do your other sorts
238 if (this.state.commentSort == CommentSortType.Top) {
239 tree.sort((a, b) => (+a.comment.removed - +b.comment.removed) ||
240 (+a.comment.deleted - +b.comment.deleted ) ||
241 (b.comment.score - a.comment.score));
242 } else if (this.state.commentSort == CommentSortType.New) {
243 tree.sort((a, b) => (+a.comment.removed - +b.comment.removed) ||
244 (+a.comment.deleted - +b.comment.deleted ) ||
245 (b.comment.published.localeCompare(a.comment.published)));
246 } else if (this.state.commentSort == CommentSortType.Hot) {
247 tree.sort((a, b) => (+a.comment.removed - +b.comment.removed) ||
248 (+a.comment.deleted - +b.comment.deleted ) ||
249 (hotRank(b.comment) - hotRank(a.comment)));
252 for (let node of tree) {
253 this.sortTree(node.children);
259 let nodes = this.buildCommentsTree();
264 locked={this.state.post.locked}
265 moderators={this.state.moderators}
266 admins={this.state.admins}
267 postCreatorId={this.state.post.creator_id}
273 parseMessage(msg: any) {
275 let op: UserOperation = msgOp(msg);
277 alert(i18n.t(msg.error));
279 } else if (op == UserOperation.GetPost) {
280 let res: GetPostResponse = msg;
281 this.state.post = res.post;
282 this.state.comments = res.comments;
283 this.state.community = res.community;
284 this.state.moderators = res.moderators;
285 this.state.admins = res.admins;
286 this.state.loading = false;
287 document.title = `${this.state.post.name} - ${WebSocketService.Instance.site.name}`;
290 if (this.state.post.url) {
291 let form: SearchForm = {
292 q: this.state.post.url,
293 type_: SearchType[SearchType.Url],
294 sort: SortType[SortType.TopAll],
298 WebSocketService.Instance.search(form);
301 this.setState(this.state);
302 } else if (op == UserOperation.CreateComment) {
303 let res: CommentResponse = msg;
304 this.state.comments.unshift(res.comment);
305 this.setState(this.state);
306 } else if (op == UserOperation.EditComment) {
307 let res: CommentResponse = msg;
308 let found = this.state.comments.find(c => c.id == res.comment.id);
309 found.content = res.comment.content;
310 found.updated = res.comment.updated;
311 found.removed = res.comment.removed;
312 found.deleted = res.comment.deleted;
313 found.upvotes = res.comment.upvotes;
314 found.downvotes = res.comment.downvotes;
315 found.score = res.comment.score;
316 found.read = res.comment.read;
318 this.setState(this.state);
319 } else if (op == UserOperation.SaveComment) {
320 let res: CommentResponse = msg;
321 let found = this.state.comments.find(c => c.id == res.comment.id);
322 found.saved = res.comment.saved;
323 this.setState(this.state);
324 } else if (op == UserOperation.CreateCommentLike) {
325 let res: CommentResponse = msg;
326 let found: Comment = this.state.comments.find(c => c.id === res.comment.id);
327 found.score = res.comment.score;
328 found.upvotes = res.comment.upvotes;
329 found.downvotes = res.comment.downvotes;
330 if (res.comment.my_vote !== null)
331 found.my_vote = res.comment.my_vote;
332 this.setState(this.state);
333 } else if (op == UserOperation.CreatePostLike) {
334 let res: CreatePostLikeResponse = msg;
335 this.state.post.my_vote = res.post.my_vote;
336 this.state.post.score = res.post.score;
337 this.state.post.upvotes = res.post.upvotes;
338 this.state.post.downvotes = res.post.downvotes;
339 this.setState(this.state);
340 } else if (op == UserOperation.EditPost) {
341 let res: PostResponse = msg;
342 this.state.post = res.post;
343 this.setState(this.state);
344 } else if (op == UserOperation.SavePost) {
345 let res: PostResponse = msg;
346 this.state.post = res.post;
347 this.setState(this.state);
348 } else if (op == UserOperation.EditCommunity) {
349 let res: CommunityResponse = msg;
350 this.state.community = res.community;
351 this.state.post.community_id = res.community.id;
352 this.state.post.community_name = res.community.name;
353 this.setState(this.state);
354 } else if (op == UserOperation.FollowCommunity) {
355 let res: CommunityResponse = msg;
356 this.state.community.subscribed = res.community.subscribed;
357 this.state.community.number_of_subscribers = res.community.number_of_subscribers;
358 this.setState(this.state);
359 } else if (op == UserOperation.BanFromCommunity) {
360 let res: BanFromCommunityResponse = msg;
361 this.state.comments.filter(c => c.creator_id == res.user.id)
362 .forEach(c => c.banned_from_community = res.banned);
363 if (this.state.post.creator_id == res.user.id) {
364 this.state.post.banned_from_community = res.banned;
366 this.setState(this.state);
367 } else if (op == UserOperation.AddModToCommunity) {
368 let res: AddModToCommunityResponse = msg;
369 this.state.moderators = res.moderators;
370 this.setState(this.state);
371 } else if (op == UserOperation.BanUser) {
372 let res: BanUserResponse = msg;
373 this.state.comments.filter(c => c.creator_id == res.user.id)
374 .forEach(c => c.banned = res.banned);
375 if (this.state.post.creator_id == res.user.id) {
376 this.state.post.banned = res.banned;
378 this.setState(this.state);
379 } else if (op == UserOperation.AddAdmin) {
380 let res: AddAdminResponse = msg;
381 this.state.admins = res.admins;
382 this.setState(this.state);
383 } else if (op == UserOperation.Search) {
384 let res: SearchResponse = msg;
385 this.state.crossPosts = res.posts.filter(p => p.id != this.state.post.id);
386 this.setState(this.state);
387 } else if (op == UserOperation.TransferSite) {
388 let res: GetSiteResponse = msg;
390 this.state.admins = res.admins;
391 this.setState(this.state);
392 } else if (op == UserOperation.TransferCommunity) {
393 let res: GetCommunityResponse = msg;
394 this.state.community = res.community;
395 this.state.moderators = res.moderators;
396 this.state.admins = res.admins;
397 this.setState(this.state);