routes.api: fix get_captcha endpoint (#1135)

[lemmy.git] / ui / src / components / post.tsx

diff --git a/ui/src/components/post.tsx b/ui/src/components/post.tsx
index 3b0a8d4a6bb0d694ea57cc15e8be2f2b08242e53..e9427a5eb32f17243ebc05743db7866c616ebd1a 100644 (file)
--- a/ui/src/components/post.tsx
+++ b/ui/src/components/post.tsx
@@ -1,4 +1,5 @@
 import { Component, linkEvent } from 'inferno';
+import { Helmet } from 'inferno-helmet';
 import { Subscription } from 'rxjs';
 import { retryWhen, delay, take } from 'rxjs/operators';
 import {
@@ -8,10 +9,8 @@ import {
   GetPostResponse,
   PostResponse,
   Comment,
-  CommentForm as CommentFormI,
+  MarkCommentAsReadForm,
   CommentResponse,
-  CommentSortType,
-  CommentViewType,
   CommunityUser,
   CommunityResponse,
   CommentNode as CommentNodeI,
@@ -27,7 +26,8 @@ import {
   GetSiteResponse,
   GetCommunityResponse,
   WebSocketJsonResponse,
-} from '../interfaces';
+} from 'lemmy-js-client';
+import { CommentSortType, CommentViewType } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
 import {
   wsJsonToRes,
@@ -38,6 +38,7 @@ import {
   createPostLikeRes,
   commentsToFlatNodes,
   setupTippy,
+  favIconUrl,
 } from '../utils';
 import { PostListing } from './post-listing';
 import { Sidebar } from './sidebar';
@@ -90,8 +91,12 @@ export class Post extends Component<any, PostState> {
         enable_downvotes: undefined,
         open_registration: undefined,
         enable_nsfw: undefined,
+        icon: undefined,
+        banner: undefined,
       },
       online: null,
+      version: null,
+      federated_instances: undefined,
     },
   };
 
@@ -167,26 +172,43 @@ export class Post extends Component<any, PostState> {
       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">
@@ -226,9 +248,9 @@ export class Post extends Component<any, PostState> {
   sortRadios() {
     return (
       <>
-        <div class="btn-group btn-group-toggle 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'
             }`}
           >
@@ -241,7 +263,7 @@ export class Post extends Component<any, PostState> {
             />
           </label>
           <label
-            className={`btn btn-sm btn-secondary pointer ${
+            className={`btn btn-outline-secondary pointer ${
               this.state.commentSort === CommentSortType.Top && 'active'
             }`}
           >
@@ -254,7 +276,7 @@ export class Post extends Component<any, PostState> {
             />
           </label>
           <label
-            className={`btn btn-sm btn-secondary pointer ${
+            className={`btn btn-outline-secondary pointer ${
               this.state.commentSort === CommentSortType.New && 'active'
             }`}
           >
@@ -267,7 +289,7 @@ export class Post extends Component<any, PostState> {
             />
           </label>
           <label
-            className={`btn btn-sm btn-secondary pointer ${
+            className={`btn btn-outline-secondary pointer ${
               this.state.commentSort === CommentSortType.Old && 'active'
             }`}
           >
@@ -280,22 +302,9 @@ export class Post extends Component<any, PostState> {
             />
           </label>
         </div>
-        <div class="btn-group btn-group-toggle ml-3 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'
             }`}
           >
@@ -339,6 +348,7 @@ export class Post extends Component<any, PostState> {
           admins={this.state.siteRes.admins}
           online={this.state.online}
           enableNsfw={this.state.siteRes.site.enable_nsfw}
+          showIcon
         />
       </div>
     );
@@ -346,11 +356,13 @@ export class Post extends Component<any, PostState> {
 
   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);
   }
 
@@ -419,17 +431,15 @@ export class Post extends Component<any, PostState> {
       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,
         };
@@ -446,7 +456,11 @@ export class Post extends Component<any, PostState> {
         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);
@@ -463,7 +477,13 @@ export class Post extends Component<any, PostState> {
       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);
@@ -473,7 +493,11 @@ export class Post extends Component<any, PostState> {
       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;
@@ -531,7 +555,6 @@ export class Post extends Component<any, PostState> {
       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);
     }
   }