2020-09-06 16:15:25 +00:00
|
|
|
import { Component, linkEvent } from 'inferno';
|
2020-09-11 18:09:21 +00:00
|
|
|
import { HtmlTags } from './html-tags';
|
2020-09-06 16:15:25 +00:00
|
|
|
import { Subscription } from 'rxjs';
|
|
|
|
import {
|
|
|
|
UserOperation,
|
2020-12-24 01:58:27 +00:00
|
|
|
PostView,
|
2020-09-06 16:15:25 +00:00
|
|
|
GetPostResponse,
|
|
|
|
PostResponse,
|
2020-12-24 01:58:27 +00:00
|
|
|
MarkCommentAsRead,
|
2020-09-06 16:15:25 +00:00
|
|
|
CommentResponse,
|
|
|
|
CommunityResponse,
|
|
|
|
BanFromCommunityResponse,
|
|
|
|
BanUserResponse,
|
|
|
|
AddModToCommunityResponse,
|
|
|
|
AddAdminResponse,
|
|
|
|
SearchType,
|
|
|
|
SortType,
|
2020-12-24 01:58:27 +00:00
|
|
|
Search,
|
|
|
|
GetPost,
|
2020-09-06 16:15:25 +00:00
|
|
|
SearchResponse,
|
|
|
|
GetSiteResponse,
|
|
|
|
GetCommunityResponse,
|
2020-09-09 00:48:17 +00:00
|
|
|
ListCategoriesResponse,
|
|
|
|
Category,
|
2020-09-06 16:15:25 +00:00
|
|
|
} from 'lemmy-js-client';
|
2020-11-12 21:56:46 +00:00
|
|
|
import {
|
|
|
|
CommentSortType,
|
|
|
|
CommentViewType,
|
|
|
|
InitialFetchRequest,
|
2020-12-24 01:58:27 +00:00
|
|
|
CommentNode as CommentNodeI,
|
2020-11-12 21:56:46 +00:00
|
|
|
} from '../interfaces';
|
2020-09-06 16:15:25 +00:00
|
|
|
import { WebSocketService, UserService } from '../services';
|
|
|
|
import {
|
|
|
|
wsJsonToRes,
|
|
|
|
toast,
|
|
|
|
editCommentRes,
|
|
|
|
saveCommentRes,
|
|
|
|
createCommentLikeRes,
|
|
|
|
createPostLikeRes,
|
|
|
|
commentsToFlatNodes,
|
|
|
|
setupTippy,
|
2020-09-09 00:48:17 +00:00
|
|
|
setIsoData,
|
|
|
|
getIdFromProps,
|
|
|
|
getCommentIdFromProps,
|
|
|
|
wsSubscribe,
|
|
|
|
isBrowser,
|
2020-09-11 18:09:21 +00:00
|
|
|
previewLines,
|
|
|
|
isImage,
|
2020-12-24 01:58:27 +00:00
|
|
|
wsUserOp,
|
2020-12-24 22:05:57 +00:00
|
|
|
wsClient,
|
|
|
|
authField,
|
|
|
|
setOptionalAuth,
|
2020-09-06 16:15:25 +00:00
|
|
|
} from '../utils';
|
|
|
|
import { PostListing } from './post-listing';
|
|
|
|
import { Sidebar } from './sidebar';
|
|
|
|
import { CommentForm } from './comment-form';
|
|
|
|
import { CommentNodes } from './comment-nodes';
|
|
|
|
import autosize from 'autosize';
|
|
|
|
import { i18n } from '../i18next';
|
|
|
|
|
|
|
|
interface PostState {
|
2020-09-09 00:48:17 +00:00
|
|
|
postRes: GetPostResponse;
|
|
|
|
postId: number;
|
|
|
|
commentId?: number;
|
2020-09-06 16:15:25 +00:00
|
|
|
commentSort: CommentSortType;
|
|
|
|
commentViewType: CommentViewType;
|
|
|
|
scrolled?: boolean;
|
|
|
|
loading: boolean;
|
2020-12-24 01:58:27 +00:00
|
|
|
crossPosts: PostView[];
|
2020-09-06 16:15:25 +00:00
|
|
|
siteRes: GetSiteResponse;
|
2020-09-09 00:48:17 +00:00
|
|
|
categories: Category[];
|
2020-09-06 16:15:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
export class Post extends Component<any, PostState> {
|
|
|
|
private subscription: Subscription;
|
2020-09-09 00:48:17 +00:00
|
|
|
private isoData = setIsoData(this.context);
|
2020-09-06 16:15:25 +00:00
|
|
|
private emptyState: PostState = {
|
2020-09-09 00:48:17 +00:00
|
|
|
postRes: null,
|
|
|
|
postId: getIdFromProps(this.props),
|
|
|
|
commentId: getCommentIdFromProps(this.props),
|
2020-09-06 16:15:25 +00:00
|
|
|
commentSort: CommentSortType.Hot,
|
|
|
|
commentViewType: CommentViewType.Tree,
|
|
|
|
scrolled: false,
|
|
|
|
loading: true,
|
|
|
|
crossPosts: [],
|
2020-12-24 01:58:27 +00:00
|
|
|
siteRes: this.isoData.site_res,
|
2020-09-09 00:48:17 +00:00
|
|
|
categories: [],
|
2020-09-06 16:15:25 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
constructor(props: any, context: any) {
|
|
|
|
super(props, context);
|
|
|
|
|
|
|
|
this.state = this.emptyState;
|
|
|
|
|
2020-09-09 00:48:17 +00:00
|
|
|
this.parseMessage = this.parseMessage.bind(this);
|
|
|
|
this.subscription = wsSubscribe(this.parseMessage);
|
2020-09-06 16:15:25 +00:00
|
|
|
|
2020-09-09 00:48:17 +00:00
|
|
|
// Only fetch the data if coming from another route
|
|
|
|
if (this.isoData.path == this.context.router.route.match.url) {
|
|
|
|
this.state.postRes = this.isoData.routeData[0];
|
|
|
|
this.state.categories = this.isoData.routeData[1].categories;
|
|
|
|
this.state.loading = false;
|
2020-09-06 16:15:25 +00:00
|
|
|
|
2020-09-09 00:48:17 +00:00
|
|
|
if (isBrowser() && this.state.commentId) {
|
|
|
|
this.scrollCommentIntoView();
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
this.fetchPost();
|
2020-12-24 22:05:57 +00:00
|
|
|
WebSocketService.Instance.send(wsClient.listCategories());
|
2020-09-09 00:48:17 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
fetchPost() {
|
2020-12-24 01:58:27 +00:00
|
|
|
let form: GetPost = {
|
2020-09-09 00:48:17 +00:00
|
|
|
id: this.state.postId,
|
2020-12-24 22:05:57 +00:00
|
|
|
auth: authField(false),
|
2020-09-06 16:15:25 +00:00
|
|
|
};
|
2020-12-24 22:05:57 +00:00
|
|
|
WebSocketService.Instance.send(wsClient.getPost(form));
|
2020-09-09 00:48:17 +00:00
|
|
|
}
|
|
|
|
|
2020-11-12 21:56:46 +00:00
|
|
|
static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
|
|
|
|
let pathSplit = req.path.split('/');
|
2020-09-09 00:48:17 +00:00
|
|
|
let promises: Promise<any>[] = [];
|
|
|
|
|
|
|
|
let id = Number(pathSplit[2]);
|
|
|
|
|
2020-12-24 01:58:27 +00:00
|
|
|
let postForm: GetPost = {
|
2020-09-09 00:48:17 +00:00
|
|
|
id,
|
|
|
|
};
|
2020-12-24 22:05:57 +00:00
|
|
|
setOptionalAuth(postForm, req.auth);
|
2020-09-09 00:48:17 +00:00
|
|
|
|
2020-11-12 21:56:46 +00:00
|
|
|
promises.push(req.client.getPost(postForm));
|
|
|
|
promises.push(req.client.listCategories());
|
2020-09-09 00:48:17 +00:00
|
|
|
|
|
|
|
return promises;
|
2020-09-06 16:15:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
|
this.subscription.unsubscribe();
|
2020-11-05 23:41:21 +00:00
|
|
|
window.isoData.path = undefined;
|
2020-09-06 16:15:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount() {
|
2020-12-24 22:05:57 +00:00
|
|
|
WebSocketService.Instance.send(
|
|
|
|
wsClient.postJoin({ post_id: this.state.postId })
|
|
|
|
);
|
2020-09-06 16:15:25 +00:00
|
|
|
autosize(document.querySelectorAll('textarea'));
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidUpdate(_lastProps: any, lastState: PostState, _snapshot: any) {
|
|
|
|
if (
|
2020-09-09 00:48:17 +00:00
|
|
|
this.state.commentId &&
|
2020-09-06 16:15:25 +00:00
|
|
|
!this.state.scrolled &&
|
2020-09-09 00:48:17 +00:00
|
|
|
lastState.postRes &&
|
|
|
|
lastState.postRes.comments.length > 0
|
2020-09-06 16:15:25 +00:00
|
|
|
) {
|
2020-09-09 00:48:17 +00:00
|
|
|
this.scrollCommentIntoView();
|
2020-09-06 16:15:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// Necessary if you are on a post and you click another post (same route)
|
|
|
|
if (_lastProps.location.pathname !== _lastProps.history.location.pathname) {
|
2020-09-11 18:09:21 +00:00
|
|
|
// TODO Couldnt get a refresh working. This does for now.
|
2020-09-06 16:15:25 +00:00
|
|
|
location.reload();
|
|
|
|
|
|
|
|
// let currentId = this.props.match.params.id;
|
|
|
|
// WebSocketService.Instance.getPost(currentId);
|
|
|
|
// this.context.refresh();
|
|
|
|
// this.context.router.history.push(_lastProps.location.pathname);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-09-09 00:48:17 +00:00
|
|
|
scrollCommentIntoView() {
|
|
|
|
var elmnt = document.getElementById(`comment-${this.state.commentId}`);
|
|
|
|
elmnt.scrollIntoView();
|
|
|
|
elmnt.classList.add('mark');
|
|
|
|
this.state.scrolled = true;
|
|
|
|
this.markScrolledAsRead(this.state.commentId);
|
|
|
|
}
|
|
|
|
|
2020-12-24 01:58:27 +00:00
|
|
|
// TODO this needs some re-work
|
2020-09-06 16:15:25 +00:00
|
|
|
markScrolledAsRead(commentId: number) {
|
2020-12-24 01:58:27 +00:00
|
|
|
let found = this.state.postRes.comments.find(
|
|
|
|
c => c.comment.id == commentId
|
|
|
|
);
|
|
|
|
let parent = this.state.postRes.comments.find(
|
|
|
|
c => found.comment.parent_id == c.comment.id
|
|
|
|
);
|
2020-09-06 16:15:25 +00:00
|
|
|
let parent_user_id = parent
|
2020-12-24 01:58:27 +00:00
|
|
|
? parent.creator.id
|
|
|
|
: this.state.postRes.post_view.creator.id;
|
2020-09-06 16:15:25 +00:00
|
|
|
|
|
|
|
if (
|
|
|
|
UserService.Instance.user &&
|
|
|
|
UserService.Instance.user.id == parent_user_id
|
|
|
|
) {
|
2020-12-24 01:58:27 +00:00
|
|
|
let form: MarkCommentAsRead = {
|
2021-01-06 21:07:13 +00:00
|
|
|
comment_id: found.comment.id,
|
2020-09-06 16:15:25 +00:00
|
|
|
read: true,
|
2020-12-24 22:05:57 +00:00
|
|
|
auth: authField(),
|
2020-09-06 16:15:25 +00:00
|
|
|
};
|
2020-12-24 22:05:57 +00:00
|
|
|
WebSocketService.Instance.send(wsClient.markCommentAsRead(form));
|
2020-09-06 16:15:25 +00:00
|
|
|
UserService.Instance.unreadCountSub.next(
|
|
|
|
UserService.Instance.unreadCountSub.value - 1
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
get documentTitle(): string {
|
2020-12-24 01:58:27 +00:00
|
|
|
return `${this.state.postRes.post_view.post.name} - ${this.state.siteRes.site_view.site.name}`;
|
2020-09-11 18:09:21 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
get imageTag(): string {
|
2020-12-24 01:58:27 +00:00
|
|
|
let post = this.state.postRes.post_view.post;
|
2020-09-11 18:09:21 +00:00
|
|
|
return (
|
2020-12-24 01:58:27 +00:00
|
|
|
post.thumbnail_url ||
|
|
|
|
(post.url ? (isImage(post.url) ? post.url : undefined) : undefined)
|
2020-09-11 18:09:21 +00:00
|
|
|
);
|
2020-09-06 16:15:25 +00:00
|
|
|
}
|
|
|
|
|
2020-09-11 18:09:21 +00:00
|
|
|
get descriptionTag(): string {
|
2020-12-24 01:58:27 +00:00
|
|
|
let body = this.state.postRes.post_view.post.body;
|
|
|
|
return body ? previewLines(body) : undefined;
|
2020-09-06 16:15:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2020-12-24 22:05:57 +00:00
|
|
|
let pv = this.state.postRes?.post_view;
|
2020-09-06 16:15:25 +00:00
|
|
|
return (
|
|
|
|
<div class="container">
|
|
|
|
{this.state.loading ? (
|
|
|
|
<h5>
|
|
|
|
<svg class="icon icon-spinner spin">
|
|
|
|
<use xlinkHref="#icon-spinner"></use>
|
|
|
|
</svg>
|
|
|
|
</h5>
|
|
|
|
) : (
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-12 col-md-8 mb-3">
|
2020-09-11 18:09:21 +00:00
|
|
|
<HtmlTags
|
|
|
|
title={this.documentTitle}
|
|
|
|
path={this.context.router.route.match.url}
|
|
|
|
image={this.imageTag}
|
|
|
|
description={this.descriptionTag}
|
|
|
|
/>
|
2020-09-06 16:15:25 +00:00
|
|
|
<PostListing
|
2020-12-24 01:58:27 +00:00
|
|
|
post_view={pv}
|
|
|
|
duplicates={this.state.crossPosts}
|
2020-09-06 16:15:25 +00:00
|
|
|
showBody
|
|
|
|
showCommunity
|
2020-09-09 00:48:17 +00:00
|
|
|
moderators={this.state.postRes.moderators}
|
2020-09-06 16:15:25 +00:00
|
|
|
admins={this.state.siteRes.admins}
|
2020-12-24 01:58:27 +00:00
|
|
|
enableDownvotes={
|
|
|
|
this.state.siteRes.site_view.site.enable_downvotes
|
|
|
|
}
|
|
|
|
enableNsfw={this.state.siteRes.site_view.site.enable_nsfw}
|
2020-09-06 16:15:25 +00:00
|
|
|
/>
|
|
|
|
<div className="mb-2" />
|
|
|
|
<CommentForm
|
2020-09-09 00:48:17 +00:00
|
|
|
postId={this.state.postId}
|
2020-12-24 01:58:27 +00:00
|
|
|
disabled={pv.post.locked}
|
2020-09-06 16:15:25 +00:00
|
|
|
/>
|
2020-09-09 00:48:17 +00:00
|
|
|
{this.state.postRes.comments.length > 0 && this.sortRadios()}
|
2020-09-06 16:15:25 +00:00
|
|
|
{this.state.commentViewType == CommentViewType.Tree &&
|
|
|
|
this.commentsTree()}
|
|
|
|
{this.state.commentViewType == CommentViewType.Chat &&
|
|
|
|
this.commentsFlat()}
|
|
|
|
</div>
|
|
|
|
<div class="col-12 col-sm-12 col-md-4">{this.sidebar()}</div>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
sortRadios() {
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<div class="btn-group btn-group-toggle flex-wrap mr-3 mb-2">
|
|
|
|
<label
|
|
|
|
className={`btn btn-outline-secondary pointer ${
|
|
|
|
this.state.commentSort === CommentSortType.Hot && 'active'
|
|
|
|
}`}
|
|
|
|
>
|
|
|
|
{i18n.t('hot')}
|
|
|
|
<input
|
|
|
|
type="radio"
|
|
|
|
value={CommentSortType.Hot}
|
|
|
|
checked={this.state.commentSort === CommentSortType.Hot}
|
|
|
|
onChange={linkEvent(this, this.handleCommentSortChange)}
|
|
|
|
/>
|
|
|
|
</label>
|
|
|
|
<label
|
|
|
|
className={`btn btn-outline-secondary pointer ${
|
|
|
|
this.state.commentSort === CommentSortType.Top && 'active'
|
|
|
|
}`}
|
|
|
|
>
|
|
|
|
{i18n.t('top')}
|
|
|
|
<input
|
|
|
|
type="radio"
|
|
|
|
value={CommentSortType.Top}
|
|
|
|
checked={this.state.commentSort === CommentSortType.Top}
|
|
|
|
onChange={linkEvent(this, this.handleCommentSortChange)}
|
|
|
|
/>
|
|
|
|
</label>
|
|
|
|
<label
|
|
|
|
className={`btn btn-outline-secondary pointer ${
|
|
|
|
this.state.commentSort === CommentSortType.New && 'active'
|
|
|
|
}`}
|
|
|
|
>
|
|
|
|
{i18n.t('new')}
|
|
|
|
<input
|
|
|
|
type="radio"
|
|
|
|
value={CommentSortType.New}
|
|
|
|
checked={this.state.commentSort === CommentSortType.New}
|
|
|
|
onChange={linkEvent(this, this.handleCommentSortChange)}
|
|
|
|
/>
|
|
|
|
</label>
|
|
|
|
<label
|
|
|
|
className={`btn btn-outline-secondary pointer ${
|
|
|
|
this.state.commentSort === CommentSortType.Old && 'active'
|
|
|
|
}`}
|
|
|
|
>
|
|
|
|
{i18n.t('old')}
|
|
|
|
<input
|
|
|
|
type="radio"
|
|
|
|
value={CommentSortType.Old}
|
|
|
|
checked={this.state.commentSort === CommentSortType.Old}
|
|
|
|
onChange={linkEvent(this, this.handleCommentSortChange)}
|
|
|
|
/>
|
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
<div class="btn-group btn-group-toggle flex-wrap mb-2">
|
|
|
|
<label
|
|
|
|
className={`btn btn-outline-secondary pointer ${
|
|
|
|
this.state.commentViewType === CommentViewType.Chat && 'active'
|
|
|
|
}`}
|
|
|
|
>
|
|
|
|
{i18n.t('chat')}
|
|
|
|
<input
|
|
|
|
type="radio"
|
|
|
|
value={CommentViewType.Chat}
|
|
|
|
checked={this.state.commentViewType === CommentViewType.Chat}
|
|
|
|
onChange={linkEvent(this, this.handleCommentViewTypeChange)}
|
|
|
|
/>
|
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
commentsFlat() {
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<CommentNodes
|
2020-09-09 00:48:17 +00:00
|
|
|
nodes={commentsToFlatNodes(this.state.postRes.comments)}
|
2020-09-06 16:15:25 +00:00
|
|
|
noIndent
|
2020-12-24 01:58:27 +00:00
|
|
|
locked={this.state.postRes.post_view.post.locked}
|
2020-09-09 00:48:17 +00:00
|
|
|
moderators={this.state.postRes.moderators}
|
2020-09-06 16:15:25 +00:00
|
|
|
admins={this.state.siteRes.admins}
|
2020-12-24 01:58:27 +00:00
|
|
|
postCreatorId={this.state.postRes.post_view.creator.id}
|
2020-09-06 16:15:25 +00:00
|
|
|
showContext
|
2020-12-24 01:58:27 +00:00
|
|
|
enableDownvotes={this.state.siteRes.site_view.site.enable_downvotes}
|
2020-09-06 16:15:25 +00:00
|
|
|
sort={this.state.commentSort}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
sidebar() {
|
|
|
|
return (
|
|
|
|
<div class="mb-3">
|
|
|
|
<Sidebar
|
2020-12-24 01:58:27 +00:00
|
|
|
community_view={this.state.postRes.community_view}
|
2020-09-09 00:48:17 +00:00
|
|
|
moderators={this.state.postRes.moderators}
|
2020-09-06 16:15:25 +00:00
|
|
|
admins={this.state.siteRes.admins}
|
2020-09-09 00:48:17 +00:00
|
|
|
online={this.state.postRes.online}
|
2020-12-24 01:58:27 +00:00
|
|
|
enableNsfw={this.state.siteRes.site_view.site.enable_nsfw}
|
2020-09-06 16:15:25 +00:00
|
|
|
showIcon
|
2020-09-09 00:48:17 +00:00
|
|
|
categories={this.state.categories}
|
2020-09-06 16:15:25 +00:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
handleCommentSortChange(i: Post, event: any) {
|
|
|
|
i.state.commentSort = Number(event.target.value);
|
|
|
|
i.state.commentViewType = CommentViewType.Tree;
|
|
|
|
i.setState(i.state);
|
|
|
|
}
|
|
|
|
|
|
|
|
handleCommentViewTypeChange(i: Post, event: any) {
|
|
|
|
i.state.commentViewType = Number(event.target.value);
|
|
|
|
i.state.commentSort = CommentSortType.New;
|
|
|
|
i.setState(i.state);
|
|
|
|
}
|
|
|
|
|
|
|
|
buildCommentsTree(): CommentNodeI[] {
|
|
|
|
let map = new Map<number, CommentNodeI>();
|
2020-12-24 01:58:27 +00:00
|
|
|
for (let comment_view of this.state.postRes.comments) {
|
2020-09-06 16:15:25 +00:00
|
|
|
let node: CommentNodeI = {
|
2020-12-24 01:58:27 +00:00
|
|
|
comment_view: comment_view,
|
2020-09-06 16:15:25 +00:00
|
|
|
children: [],
|
|
|
|
};
|
2020-12-24 01:58:27 +00:00
|
|
|
map.set(comment_view.comment.id, { ...node });
|
2020-09-06 16:15:25 +00:00
|
|
|
}
|
|
|
|
let tree: CommentNodeI[] = [];
|
2020-12-24 01:58:27 +00:00
|
|
|
for (let comment_view of this.state.postRes.comments) {
|
|
|
|
let child = map.get(comment_view.comment.id);
|
|
|
|
if (comment_view.comment.parent_id) {
|
|
|
|
let parent_ = map.get(comment_view.comment.parent_id);
|
2020-09-06 16:15:25 +00:00
|
|
|
parent_.children.push(child);
|
|
|
|
} else {
|
|
|
|
tree.push(child);
|
|
|
|
}
|
|
|
|
|
|
|
|
this.setDepth(child);
|
|
|
|
}
|
|
|
|
|
|
|
|
return tree;
|
|
|
|
}
|
|
|
|
|
|
|
|
setDepth(node: CommentNodeI, i: number = 0): void {
|
|
|
|
for (let child of node.children) {
|
2020-12-24 01:58:27 +00:00
|
|
|
child.depth = i;
|
2020-09-06 16:15:25 +00:00
|
|
|
this.setDepth(child, i + 1);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
commentsTree() {
|
|
|
|
let nodes = this.buildCommentsTree();
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<CommentNodes
|
|
|
|
nodes={nodes}
|
2020-12-24 01:58:27 +00:00
|
|
|
locked={this.state.postRes.post_view.post.locked}
|
2020-09-09 00:48:17 +00:00
|
|
|
moderators={this.state.postRes.moderators}
|
2020-09-06 16:15:25 +00:00
|
|
|
admins={this.state.siteRes.admins}
|
2020-12-24 01:58:27 +00:00
|
|
|
postCreatorId={this.state.postRes.post_view.creator.id}
|
2020-09-06 16:15:25 +00:00
|
|
|
sort={this.state.commentSort}
|
2020-12-24 01:58:27 +00:00
|
|
|
enableDownvotes={this.state.siteRes.site_view.site.enable_downvotes}
|
2020-09-06 16:15:25 +00:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-12-24 01:58:27 +00:00
|
|
|
parseMessage(msg: any) {
|
|
|
|
let op = wsUserOp(msg);
|
2021-01-13 17:06:56 +00:00
|
|
|
console.log(msg);
|
2020-09-06 16:15:25 +00:00
|
|
|
if (msg.error) {
|
|
|
|
toast(i18n.t(msg.error), 'danger');
|
|
|
|
return;
|
|
|
|
} else if (msg.reconnect) {
|
2020-09-25 16:47:29 +00:00
|
|
|
let postId = Number(this.props.match.params.id);
|
2020-12-24 22:05:57 +00:00
|
|
|
WebSocketService.Instance.send(wsClient.postJoin({ post_id: postId }));
|
|
|
|
WebSocketService.Instance.send(
|
|
|
|
wsClient.getPost({
|
|
|
|
id: postId,
|
|
|
|
auth: authField(false),
|
|
|
|
})
|
|
|
|
);
|
2020-12-24 01:58:27 +00:00
|
|
|
} else if (op == UserOperation.GetPost) {
|
|
|
|
let data = wsJsonToRes<GetPostResponse>(msg).data;
|
2020-09-09 00:48:17 +00:00
|
|
|
this.state.postRes = data;
|
2020-09-06 16:15:25 +00:00
|
|
|
this.state.loading = false;
|
|
|
|
|
|
|
|
// Get cross-posts
|
2020-12-24 01:58:27 +00:00
|
|
|
if (this.state.postRes.post_view.post.url) {
|
|
|
|
let form: Search = {
|
|
|
|
q: this.state.postRes.post_view.post.url,
|
2020-09-06 16:15:25 +00:00
|
|
|
type_: SearchType.Url,
|
|
|
|
sort: SortType.TopAll,
|
|
|
|
page: 1,
|
|
|
|
limit: 6,
|
2020-12-24 22:05:57 +00:00
|
|
|
auth: authField(false),
|
2020-09-06 16:15:25 +00:00
|
|
|
};
|
2020-12-24 22:05:57 +00:00
|
|
|
WebSocketService.Instance.send(wsClient.search(form));
|
2020-09-06 16:15:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
this.setState(this.state);
|
|
|
|
setupTippy();
|
2020-12-24 01:58:27 +00:00
|
|
|
} else if (op == UserOperation.CreateComment) {
|
|
|
|
let data = wsJsonToRes<CommentResponse>(msg).data;
|
2020-09-06 16:15:25 +00:00
|
|
|
|
2021-01-13 17:06:56 +00:00
|
|
|
// Necessary since it might be a user reply, which has the recipients, to avoid double
|
|
|
|
if (data.recipient_ids.length == 0) {
|
2020-12-24 01:58:27 +00:00
|
|
|
this.state.postRes.comments.unshift(data.comment_view);
|
2021-01-15 17:42:05 +00:00
|
|
|
this.state.postRes.post_view.counts.comments++;
|
2020-09-06 16:15:25 +00:00
|
|
|
this.setState(this.state);
|
|
|
|
}
|
|
|
|
} else if (
|
2020-12-24 01:58:27 +00:00
|
|
|
op == UserOperation.EditComment ||
|
|
|
|
op == UserOperation.DeleteComment ||
|
|
|
|
op == UserOperation.RemoveComment
|
2020-09-06 16:15:25 +00:00
|
|
|
) {
|
2020-12-24 01:58:27 +00:00
|
|
|
let data = wsJsonToRes<CommentResponse>(msg).data;
|
|
|
|
editCommentRes(data.comment_view, this.state.postRes.comments);
|
2020-09-06 16:15:25 +00:00
|
|
|
this.setState(this.state);
|
2020-12-24 01:58:27 +00:00
|
|
|
} else if (op == UserOperation.SaveComment) {
|
|
|
|
let data = wsJsonToRes<CommentResponse>(msg).data;
|
|
|
|
saveCommentRes(data.comment_view, this.state.postRes.comments);
|
2020-09-06 16:15:25 +00:00
|
|
|
this.setState(this.state);
|
|
|
|
setupTippy();
|
2020-12-24 01:58:27 +00:00
|
|
|
} else if (op == UserOperation.CreateCommentLike) {
|
|
|
|
let data = wsJsonToRes<CommentResponse>(msg).data;
|
|
|
|
createCommentLikeRes(data.comment_view, this.state.postRes.comments);
|
2020-09-06 16:15:25 +00:00
|
|
|
this.setState(this.state);
|
2020-12-24 01:58:27 +00:00
|
|
|
} else if (op == UserOperation.CreatePostLike) {
|
|
|
|
let data = wsJsonToRes<PostResponse>(msg).data;
|
|
|
|
createPostLikeRes(data.post_view, this.state.postRes.post_view);
|
2020-09-06 16:15:25 +00:00
|
|
|
this.setState(this.state);
|
|
|
|
} else if (
|
2020-12-24 01:58:27 +00:00
|
|
|
op == UserOperation.EditPost ||
|
|
|
|
op == UserOperation.DeletePost ||
|
|
|
|
op == UserOperation.RemovePost ||
|
|
|
|
op == UserOperation.LockPost ||
|
|
|
|
op == UserOperation.StickyPost ||
|
|
|
|
op == UserOperation.SavePost
|
2020-09-06 16:15:25 +00:00
|
|
|
) {
|
2020-12-24 01:58:27 +00:00
|
|
|
let data = wsJsonToRes<PostResponse>(msg).data;
|
|
|
|
this.state.postRes.post_view = data.post_view;
|
2020-09-06 16:15:25 +00:00
|
|
|
this.setState(this.state);
|
|
|
|
setupTippy();
|
|
|
|
} else if (
|
2020-12-24 01:58:27 +00:00
|
|
|
op == UserOperation.EditCommunity ||
|
|
|
|
op == UserOperation.DeleteCommunity ||
|
|
|
|
op == UserOperation.RemoveCommunity ||
|
|
|
|
op == UserOperation.FollowCommunity
|
2020-09-06 16:15:25 +00:00
|
|
|
) {
|
2020-12-24 01:58:27 +00:00
|
|
|
let data = wsJsonToRes<CommunityResponse>(msg).data;
|
|
|
|
this.state.postRes.community_view = data.community_view;
|
|
|
|
this.state.postRes.post_view.community = data.community_view.community;
|
2020-09-06 16:15:25 +00:00
|
|
|
this.setState(this.state);
|
|
|
|
this.setState(this.state);
|
2020-12-24 01:58:27 +00:00
|
|
|
} else if (op == UserOperation.BanFromCommunity) {
|
|
|
|
let data = wsJsonToRes<BanFromCommunityResponse>(msg).data;
|
2020-09-09 00:48:17 +00:00
|
|
|
this.state.postRes.comments
|
2020-12-24 01:58:27 +00:00
|
|
|
.filter(c => c.creator.id == data.user_view.user.id)
|
|
|
|
.forEach(c => (c.creator_banned_from_community = data.banned));
|
|
|
|
if (this.state.postRes.post_view.creator.id == data.user_view.user.id) {
|
|
|
|
this.state.postRes.post_view.creator_banned_from_community =
|
|
|
|
data.banned;
|
2020-09-06 16:15:25 +00:00
|
|
|
}
|
|
|
|
this.setState(this.state);
|
2020-12-24 01:58:27 +00:00
|
|
|
} else if (op == UserOperation.AddModToCommunity) {
|
|
|
|
let data = wsJsonToRes<AddModToCommunityResponse>(msg).data;
|
2020-09-09 00:48:17 +00:00
|
|
|
this.state.postRes.moderators = data.moderators;
|
2020-09-06 16:15:25 +00:00
|
|
|
this.setState(this.state);
|
2020-12-24 01:58:27 +00:00
|
|
|
} else if (op == UserOperation.BanUser) {
|
|
|
|
let data = wsJsonToRes<BanUserResponse>(msg).data;
|
2020-09-09 00:48:17 +00:00
|
|
|
this.state.postRes.comments
|
2020-12-24 01:58:27 +00:00
|
|
|
.filter(c => c.creator.id == data.user_view.user.id)
|
|
|
|
.forEach(c => (c.creator.banned = data.banned));
|
|
|
|
if (this.state.postRes.post_view.creator.id == data.user_view.user.id) {
|
|
|
|
this.state.postRes.post_view.creator.banned = data.banned;
|
2020-09-06 16:15:25 +00:00
|
|
|
}
|
|
|
|
this.setState(this.state);
|
2020-12-24 01:58:27 +00:00
|
|
|
} else if (op == UserOperation.AddAdmin) {
|
|
|
|
let data = wsJsonToRes<AddAdminResponse>(msg).data;
|
2020-09-06 16:15:25 +00:00
|
|
|
this.state.siteRes.admins = data.admins;
|
|
|
|
this.setState(this.state);
|
2020-12-24 01:58:27 +00:00
|
|
|
} else if (op == UserOperation.Search) {
|
|
|
|
let data = wsJsonToRes<SearchResponse>(msg).data;
|
2020-09-06 16:15:25 +00:00
|
|
|
this.state.crossPosts = data.posts.filter(
|
2020-12-24 01:58:27 +00:00
|
|
|
p => p.post.id != Number(this.props.match.params.id)
|
2020-09-06 16:15:25 +00:00
|
|
|
);
|
|
|
|
this.setState(this.state);
|
2020-12-24 01:58:27 +00:00
|
|
|
} else if (op == UserOperation.TransferSite) {
|
|
|
|
let data = wsJsonToRes<GetSiteResponse>(msg).data;
|
2020-09-06 16:15:25 +00:00
|
|
|
this.state.siteRes = data;
|
|
|
|
this.setState(this.state);
|
2020-12-24 01:58:27 +00:00
|
|
|
} else if (op == UserOperation.TransferCommunity) {
|
|
|
|
let data = wsJsonToRes<GetCommunityResponse>(msg).data;
|
|
|
|
this.state.postRes.community_view = data.community_view;
|
|
|
|
this.state.postRes.post_view.community = data.community_view.community;
|
2020-09-09 00:48:17 +00:00
|
|
|
this.state.postRes.moderators = data.moderators;
|
|
|
|
this.setState(this.state);
|
2020-12-24 01:58:27 +00:00
|
|
|
} else if (op == UserOperation.ListCategories) {
|
|
|
|
let data = wsJsonToRes<ListCategoriesResponse>(msg).data;
|
2020-09-09 00:48:17 +00:00
|
|
|
this.state.categories = data.categories;
|
2020-09-06 16:15:25 +00:00
|
|
|
this.setState(this.state);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|