routes.api: fix get_captcha endpoint (#1135)

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

diff --git a/ui/src/components/community.tsx b/ui/src/components/community.tsx
index f4610a08b92bee6f368864e10cdb853e1fbfe846..f86562f8c23286fe84bb38f92b5a708fb8d028eb 100644 (file)
--- a/ui/src/components/community.tsx
+++ b/ui/src/components/community.tsx
@@ -1,6 +1,8 @@
 import { Component, linkEvent } from 'inferno';
+import { Helmet } from 'inferno-helmet';
 import { Subscription } from 'rxjs';
 import { retryWhen, delay, take } from 'rxjs/operators';
+import { DataType } from '../interfaces';
 import {
   UserOperation,
   Community as CommunityI,
@@ -13,7 +15,6 @@ import {
   GetPostsForm,
   GetCommunityForm,
   ListingType,
-  DataType,
   GetPostsResponse,
   PostResponse,
   AddModToCommunityResponse,
@@ -25,13 +26,15 @@ import {
   WebSocketJsonResponse,
   GetSiteResponse,
   Site,
-} from '../interfaces';
+} from 'lemmy-js-client';
 import { WebSocketService } from '../services';
 import { PostListings } from './post-listings';
 import { CommentNodes } from './comment-nodes';
 import { SortSelect } from './sort-select';
 import { DataTypeSelect } from './data-type-select';
 import { Sidebar } from './sidebar';
+import { CommunityLink } from './community-link';
+import { BannerIconHeader } from './banner-icon-header';
 import {
   wsJsonToRes,
   fetchLimit,
@@ -46,6 +49,8 @@ import {
   editPostFindRes,
   commentsToFlatNodes,
   setupTippy,
+  favIconUrl,
+  notifyPost,
 } from '../utils';
 import { i18n } from '../i18next';
 
@@ -73,7 +78,7 @@ interface CommunityProps {
 
 interface UrlParams {
   dataType?: string;
-  sort?: string;
+  sort?: SortType;
   page?: number;
 }
 
@@ -125,6 +130,9 @@ export class Community extends Component<any, State> {
       enable_downvotes: undefined,
       open_registration: undefined,
       enable_nsfw: undefined,
+      icon: undefined,
+      banner: undefined,
+      creator_preferred_username: undefined,
     },
   };
 
@@ -174,10 +182,29 @@ export class Community extends Component<any, State> {
     }
   }
 
+  get documentTitle(): string {
+    if (this.state.community.title) {
+      return `${this.state.community.title} - ${this.state.site.name}`;
+    } else {
+      return 'Lemmy';
+    }
+  }
+
+  get favIcon(): string {
+    return this.state.site.icon ? this.state.site.icon : favIconUrl;
+  }
+
   render() {
     return (
       <div class="container">
-        {this.selects()}
+        <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">
@@ -187,19 +214,8 @@ export class Community extends Component<any, State> {
         ) : (
           <div class="row">
             <div class="col-12 col-md-8">
-              <h5>
-                {this.state.community.title}
-                {this.state.community.removed && (
-                  <small className="ml-2 text-muted font-italic">
-                    {i18n.t('removed')}
-                  </small>
-                )}
-                {this.state.community.nsfw && (
-                  <small className="ml-2 text-muted font-italic">
-                    {i18n.t('nsfw')}
-                  </small>
-                )}
-              </h5>
+              {this.communityInfo()}
+              {this.selects()}
               {this.listings()}
               {this.paginator()}
             </div>
@@ -238,6 +254,26 @@ export class Community extends Component<any, State> {
     );
   }
 
+  communityInfo() {
+    return (
+      <div>
+        <BannerIconHeader
+          banner={this.state.community.banner}
+          icon={this.state.community.icon}
+        />
+        <h5 class="mb-0">{this.state.community.title}</h5>
+        <CommunityLink
+          community={this.state.community}
+          realLink
+          useApubName
+          muted
+          hideAvatar
+        />
+        <hr />
+      </div>
+    );
+  }
+
   selects() {
     return (
       <div class="mb-3">
@@ -251,9 +287,7 @@ export class Community extends Component<any, State> {
           <SortSelect sort={this.state.sort} onChange={this.handleSortChange} />
         </span>
         <a
-          href={`/feeds/c/${this.state.communityName}.xml?sort=${
-            SortType[this.state.sort]
-          }`}
+          href={`/feeds/c/${this.state.communityName}.xml?sort=${this.state.sort}`}
           target="_blank"
           title="RSS"
           rel="noopener"
@@ -271,7 +305,7 @@ export class Community extends Component<any, State> {
       <div class="my-2">
         {this.state.page > 1 && (
           <button
-            class="btn btn-sm btn-secondary mr-1"
+            class="btn btn-secondary mr-1"
             onClick={linkEvent(this, this.prevPage)}
           >
             {i18n.t('prev')}
@@ -279,7 +313,7 @@ export class Community extends Component<any, State> {
         )}
         {this.state.posts.length > 0 && (
           <button
-            class="btn btn-sm btn-secondary"
+            class="btn btn-secondary"
             onClick={linkEvent(this, this.nextPage)}
           >
             {i18n.t('next')}
@@ -300,20 +334,18 @@ export class Community extends Component<any, State> {
   }
 
   handleSortChange(val: SortType) {
-    this.updateUrl({ sort: SortType[val].toLowerCase(), page: 1 });
+    this.updateUrl({ sort: val, page: 1 });
     window.scrollTo(0, 0);
   }
 
   handleDataTypeChange(val: DataType) {
-    this.updateUrl({ dataType: DataType[val].toLowerCase(), page: 1 });
+    this.updateUrl({ dataType: DataType[val], page: 1 });
     window.scrollTo(0, 0);
   }
 
   updateUrl(paramUpdates: UrlParams) {
-    const dataTypeStr =
-      paramUpdates.dataType || DataType[this.state.dataType].toLowerCase();
-    const sortStr =
-      paramUpdates.sort || SortType[this.state.sort].toLowerCase();
+    const dataTypeStr = paramUpdates.dataType || DataType[this.state.dataType];
+    const sortStr = paramUpdates.sort || this.state.sort;
     const page = paramUpdates.page || this.state.page;
     this.props.history.push(
       `/c/${this.state.community.name}/data_type/${dataTypeStr}/sort/${sortStr}/page/${page}`
@@ -325,8 +357,8 @@ export class Community extends Component<any, State> {
       let getPostsForm: GetPostsForm = {
         page: this.state.page,
         limit: fetchLimit,
-        sort: SortType[this.state.sort],
-        type_: ListingType[ListingType.Community],
+        sort: this.state.sort,
+        type_: ListingType.Community,
         community_id: this.state.community.id,
       };
       WebSocketService.Instance.getPosts(getPostsForm);
@@ -334,8 +366,8 @@ export class Community extends Component<any, State> {
       let getCommentsForm: GetCommentsForm = {
         page: this.state.page,
         limit: fetchLimit,
-        sort: SortType[this.state.sort],
-        type_: ListingType[ListingType.Community],
+        sort: this.state.sort,
+        type_: ListingType.Community,
         community_id: this.state.community.id,
       };
       WebSocketService.Instance.getComments(getCommentsForm);
@@ -356,7 +388,6 @@ export class Community extends Component<any, State> {
       this.state.community = data.community;
       this.state.moderators = data.moderators;
       this.state.online = data.online;
-      document.title = `/c/${this.state.community.name} - ${this.state.site.name}`;
       this.setState(this.state);
       this.fetchData();
     } else if (
@@ -392,6 +423,7 @@ export class Community extends Component<any, State> {
     } else if (res.op == UserOperation.CreatePost) {
       let data = res.data as PostResponse;
       this.state.posts.unshift(data.post);
+      notifyPost(data.post, this.context.router);
       this.setState(this.state);
     } else if (res.op == UserOperation.CreatePostLike) {
       let data = res.data as PostResponse;