import { Component, linkEvent } from 'inferno';
+import { Helmet } from 'inferno-helmet';
import { Subscription } from 'rxjs';
import { retryWhen, delay, take } from 'rxjs/operators';
import {
GetPostResponse,
PostResponse,
Comment,
- CommentForm as CommentFormI,
+ MarkCommentAsReadForm,
CommentResponse,
- CommentSortType,
- CommentViewType,
CommunityUser,
CommunityResponse,
CommentNode as CommentNodeI,
GetSiteResponse,
GetCommunityResponse,
WebSocketJsonResponse,
-} from '../interfaces';
+} from 'lemmy-js-client';
+import { CommentSortType, CommentViewType } from '../interfaces';
import { WebSocketService, UserService } from '../services';
import {
wsJsonToRes,
createPostLikeRes,
commentsToFlatNodes,
setupTippy,
+ favIconUrl,
} from '../utils';
import { PostListing } from './post-listing';
import { Sidebar } from './sidebar';
enable_downvotes: undefined,
open_registration: undefined,
enable_nsfw: undefined,
+ icon: undefined,
+ banner: undefined,
},
online: null,
+ version: null,
+ federated_instances: undefined,
},
};
UserService.Instance.user &&
UserService.Instance.user.id == parent_user_id
) {
- let form: CommentFormI = {
- content: found.content,
+ let form: MarkCommentAsReadForm = {
edit_id: found.id,
- creator_id: found.creator_id,
- post_id: found.post_id,
- parent_id: found.parent_id,
read: true,
auth: null,
};
- WebSocketService.Instance.editComment(form);
- UserService.Instance.user.unreadCount--;
- UserService.Instance.sub.next({
- user: UserService.Instance.user,
- });
+ WebSocketService.Instance.markCommentAsRead(form);
+ UserService.Instance.unreadCountSub.next(
+ UserService.Instance.unreadCountSub.value - 1
+ );
+ }
+ }
+
+ get documentTitle(): string {
+ if (this.state.post) {
+ return `${this.state.post.name} - ${this.state.siteRes.site.name}`;
+ } else {
+ return 'Lemmy';
}
}
+ get favIcon(): string {
+ return this.state.siteRes.site.icon
+ ? this.state.siteRes.site.icon
+ : favIconUrl;
+ }
+
render() {
return (
<div class="container">
+ <Helmet title={this.documentTitle}>
+ <link
+ id="favicon"
+ rel="icon"
+ type="image/x-icon"
+ href={this.favIcon}
+ />
+ </Helmet>
{this.state.loading ? (
<h5>
<svg class="icon icon-spinner spin">
sortRadios() {
return (
<>
- <div class="btn-group btn-group-toggle mr-3 mb-2">
+ <div class="btn-group btn-group-toggle flex-wrap mr-3 mb-2">
<label
- className={`btn btn-sm btn-secondary pointer ${
+ className={`btn btn-outline-secondary pointer ${
this.state.commentSort === CommentSortType.Hot && 'active'
}`}
>
/>
</label>
<label
- className={`btn btn-sm btn-secondary pointer ${
+ className={`btn btn-outline-secondary pointer ${
this.state.commentSort === CommentSortType.Top && 'active'
}`}
>
/>
</label>
<label
- className={`btn btn-sm btn-secondary pointer ${
+ className={`btn btn-outline-secondary pointer ${
this.state.commentSort === CommentSortType.New && 'active'
}`}
>
/>
</label>
<label
- className={`btn btn-sm btn-secondary pointer ${
+ className={`btn btn-outline-secondary pointer ${
this.state.commentSort === CommentSortType.Old && 'active'
}`}
>
/>
</label>
</div>
- <div class="btn-group btn-group-toggle mb-2">
+ <div class="btn-group btn-group-toggle flex-wrap mb-2">
<label
- className={`btn btn-sm btn-secondary pointer ${
- this.state.commentViewType === CommentViewType.Tree && 'active'
- }`}
- >
- {i18n.t('tree')}
- <input
- type="radio"
- value={CommentViewType.Tree}
- checked={this.state.commentViewType === CommentViewType.Tree}
- onChange={linkEvent(this, this.handleCommentViewTypeChange)}
- />
- </label>
- <label
- className={`btn btn-sm btn-secondary pointer ${
+ className={`btn btn-outline-secondary pointer ${
this.state.commentViewType === CommentViewType.Chat && 'active'
}`}
>
admins={this.state.siteRes.admins}
online={this.state.online}
enableNsfw={this.state.siteRes.site.enable_nsfw}
+ showIcon
/>
</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);
}
this.state.comments = data.comments;
this.state.community = data.community;
this.state.moderators = data.moderators;
- this.state.siteRes.admins = data.admins;
this.state.online = data.online;
this.state.loading = false;
- document.title = `${this.state.post.name} - ${this.state.siteRes.site.name}`;
// Get cross-posts
if (this.state.post.url) {
let form: SearchForm = {
q: this.state.post.url,
- type_: SearchType[SearchType.Url],
- sort: SortType[SortType.TopAll],
+ type_: SearchType.Url,
+ sort: SortType.TopAll,
page: 1,
limit: 6,
};
this.state.comments.unshift(data.comment);
this.setState(this.state);
}
- } else if (res.op == UserOperation.EditComment) {
+ } else if (
+ res.op == UserOperation.EditComment ||
+ res.op == UserOperation.DeleteComment ||
+ res.op == UserOperation.RemoveComment
+ ) {
let data = res.data as CommentResponse;
editCommentRes(data, this.state.comments);
this.setState(this.state);
let data = res.data as PostResponse;
createPostLikeRes(data, this.state.post);
this.setState(this.state);
- } else if (res.op == UserOperation.EditPost) {
+ } else if (
+ res.op == UserOperation.EditPost ||
+ res.op == UserOperation.DeletePost ||
+ res.op == UserOperation.RemovePost ||
+ res.op == UserOperation.LockPost ||
+ res.op == UserOperation.StickyPost
+ ) {
let data = res.data as PostResponse;
this.state.post = data.post;
this.setState(this.state);
this.state.post = data.post;
this.setState(this.state);
setupTippy();
- } else if (res.op == UserOperation.EditCommunity) {
+ } else if (
+ res.op == UserOperation.EditCommunity ||
+ res.op == UserOperation.DeleteCommunity ||
+ res.op == UserOperation.RemoveCommunity
+ ) {
let data = res.data as CommunityResponse;
this.state.community = data.community;
this.state.post.community_id = data.community.id;
let data = res.data as GetCommunityResponse;
this.state.community = data.community;
this.state.moderators = data.moderators;
- this.state.siteRes.admins = data.admins;
this.setState(this.state);
}
}