routes.api: fix get_captcha endpoint (#1135)

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

diff --git a/ui/src/components/main.tsx b/ui/src/components/main.tsx
index 2466e5fae4f01c67ced7193b154eec7d62e9f177..286e84ca4c5e7596c4da8ebcd5b29e8a91c5c957 100644 (file)
--- a/ui/src/components/main.tsx
+++ b/ui/src/components/main.tsx
@@ -13,7 +13,6 @@ import {
   SortType,
   GetSiteResponse,
   ListingType,
-  DataType,
   SiteResponse,
   GetPostsResponse,
   PostResponse,
@@ -26,7 +25,8 @@ import {
   AddAdminResponse,
   BanUserResponse,
   WebSocketJsonResponse,
-} from '../interfaces';
+} from 'lemmy-js-client';
+import { DataType } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
 import { PostListings } from './post-listings';
 import { CommentNodes } from './comment-nodes';
@@ -36,6 +36,7 @@ import { DataTypeSelect } from './data-type-select';
 import { SiteForm } from './site-form';
 import { UserListing } from './user-listing';
 import { CommunityLink } from './community-link';
+import { BannerIconHeader } from './banner-icon-header';
 import {
   wsJsonToRes,
   repoUrl,
@@ -53,6 +54,8 @@ import {
   editPostFindRes,
   commentsToFlatNodes,
   setupTippy,
+  favIconUrl,
+  notifyPost,
 } from '../utils';
 import { i18n } from '../i18next';
 import { T } from 'inferno-i18next';
@@ -79,9 +82,9 @@ interface MainProps {
 }
 
 interface UrlParams {
-  listingType?: string;
+  listingType?: ListingType;
   dataType?: string;
-  sort?: string;
+  sort?: SortType;
   page?: number;
 }
 
@@ -104,11 +107,15 @@ export class Main extends Component<any, MainState> {
         enable_downvotes: null,
         open_registration: null,
         enable_nsfw: null,
+        icon: null,
+        banner: null,
+        creator_preferred_username: null,
       },
       admins: [],
       banned: [],
       online: null,
       version: null,
+      federated_instances: null,
     },
     showEditSite: false,
     loading: true,
@@ -144,7 +151,7 @@ export class Main extends Component<any, MainState> {
     }
 
     let listCommunitiesForm: ListCommunitiesForm = {
-      sort: SortType[SortType.Hot],
+      sort: SortType.Hot,
       limit: 6,
     };
 
@@ -186,10 +193,23 @@ export class Main extends Component<any, MainState> {
     }
   }
 
+  get favIcon(): string {
+    return this.state.siteRes.site.icon
+      ? this.state.siteRes.site.icon
+      : favIconUrl;
+  }
+
   render() {
     return (
       <div class="container">
-        <Helmet title={this.documentTitle} />
+        <Helmet title={this.documentTitle}>
+          <link
+            id="favicon"
+            rel="icon"
+            type="image/x-icon"
+            href={this.favIcon}
+          />
+        </Helmet>
         <div class="row">
           <main role="main" class="col-12 col-md-8">
             {this.posts()}
@@ -207,8 +227,11 @@ export class Main extends Component<any, MainState> {
           <div>
             <div class="card bg-transparent border-secondary mb-3">
               <div class="card-header bg-transparent border-secondary">
-                {this.siteName()}
-                {this.adminButtons()}
+                <div class="mb-2">
+                  {this.siteName()}
+                  {this.adminButtons()}
+                </div>
+                <BannerIconHeader banner={this.state.siteRes.site.banner} />
               </div>
               <div class="card-body">
                 {this.trendingCommunities()}
@@ -284,6 +307,7 @@ export class Main extends Component<any, MainState> {
                     id: community.community_id,
                     local: community.community_local,
                     actor_id: community.community_actor_id,
+                    icon: community.community_icon,
                   }}
                 />
               </li>
@@ -310,13 +334,9 @@ export class Main extends Component<any, MainState> {
   }
 
   updateUrl(paramUpdates: UrlParams) {
-    const listingTypeStr =
-      paramUpdates.listingType ||
-      ListingType[this.state.listingType].toLowerCase();
-    const dataTypeStr =
-      paramUpdates.dataType || DataType[this.state.dataType].toLowerCase();
-    const sortStr =
-      paramUpdates.sort || SortType[this.state.sort].toLowerCase();
+    const listingTypeStr = paramUpdates.listingType || this.state.listingType;
+    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(
       `/home/data_type/${dataTypeStr}/listing_type/${listingTypeStr}/sort/${sortStr}/page/${page}`
@@ -346,6 +366,7 @@ export class Main extends Component<any, MainState> {
             <UserListing
               user={{
                 name: admin.name,
+                preferred_username: admin.preferred_username,
                 avatar: admin.avatar,
                 local: admin.local,
                 actor_id: admin.actor_id,
@@ -361,11 +382,9 @@ export class Main extends Component<any, MainState> {
   badges() {
     return (
       <ul class="my-2 list-inline">
-        {/*
-              <li className="list-inline-item badge badge-light">
-                {i18n.t('number_online', { count: this.state.siteRes.online })}
-              </li>
-              */}
+        <li className="list-inline-item badge badge-light">
+          {i18n.t('number_online', { count: this.state.siteRes.online })}
+        </li>
         <li className="list-inline-item badge badge-light">
           {i18n.t('number_of_users', {
             count: this.state.siteRes.site.number_of_users,
@@ -518,6 +537,10 @@ export class Main extends Component<any, MainState> {
         <span class="mr-3">
           <ListingTypeSelect
             type_={this.state.listingType}
+            showLocal={
+              this.state.siteRes.federated_instances &&
+              this.state.siteRes.federated_instances.length > 0
+            }
             onChange={this.handleListingTypeChange}
           />
         </span>
@@ -526,7 +549,7 @@ export class Main extends Component<any, MainState> {
         </span>
         {this.state.listingType == ListingType.All && (
           <a
-            href={`/feeds/all.xml?sort=${SortType[this.state.sort]}`}
+            href={`/feeds/all.xml?sort=${this.state.sort}`}
             target="_blank"
             rel="noopener"
             title="RSS"
@@ -539,9 +562,7 @@ export class Main extends Component<any, MainState> {
         {UserService.Instance.user &&
           this.state.listingType == ListingType.Subscribed && (
             <a
-              href={`/feeds/front/${UserService.Instance.auth}.xml?sort=${
-                SortType[this.state.sort]
-              }`}
+              href={`/feeds/front/${UserService.Instance.auth}.xml?sort=${this.state.sort}`}
               target="_blank"
               title="RSS"
               rel="noopener"
@@ -608,17 +629,17 @@ export class Main extends Component<any, MainState> {
   }
 
   handleSortChange(val: SortType) {
-    this.updateUrl({ sort: SortType[val].toLowerCase(), page: 1 });
+    this.updateUrl({ sort: val, page: 1 });
     window.scrollTo(0, 0);
   }
 
   handleListingTypeChange(val: ListingType) {
-    this.updateUrl({ listingType: ListingType[val].toLowerCase(), page: 1 });
+    this.updateUrl({ listingType: 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);
   }
 
@@ -627,16 +648,16 @@ export class Main extends Component<any, MainState> {
       let getPostsForm: GetPostsForm = {
         page: this.state.page,
         limit: fetchLimit,
-        sort: SortType[this.state.sort],
-        type_: ListingType[this.state.listingType],
+        sort: this.state.sort,
+        type_: this.state.listingType,
       };
       WebSocketService.Instance.getPosts(getPostsForm);
     } else {
       let getCommentsForm: GetCommentsForm = {
         page: this.state.page,
         limit: fetchLimit,
-        sort: SortType[this.state.sort],
-        type_: ListingType[this.state.listingType],
+        sort: this.state.sort,
+        type_: this.state.listingType,
       };
       WebSocketService.Instance.getComments(getCommentsForm);
     }
@@ -693,6 +714,7 @@ export class Main extends Component<any, MainState> {
             .includes(data.post.community_id)
         ) {
           this.state.posts.unshift(data.post);
+          notifyPost(data.post, this.context.router);
         }
       } else {
         // NSFW posts
@@ -706,6 +728,7 @@ export class Main extends Component<any, MainState> {
             UserService.Instance.user.show_nsfw)
         ) {
           this.state.posts.unshift(data.post);
+          notifyPost(data.post, this.context.router);
         }
       }
       this.setState(this.state);