Remove trending communities card from home. (#2639)

* Remove trending communities card from home.

- This proved after time to be pointless. I thought about keeping the
  create and explore communities buttons, but these are already in the
  navbar, and so just take up more pointless space.
- Fixes #2027
- Fixes #2007

* Forgot to remove trending loading skeleton.

src/shared/components/common/loading-skeleton.tsx

@@ -58,40 +58,6 @@ class PostsLoadingSkeletonItem extends Component<any, any> {
   }
 }
 
-export class TrendingCommunitiesLoadingSkeleton extends Component<
-  LoadingSkeletonProps,
-  any
-> {
-  render() {
-    return (
-      <div className="mb-2">
-        {Array.from({ length: this.props.itemCount ?? 10 }, (_, index) => (
-          <TrendingCommunitiesLoadingSkeletonItem key={index} />
-        ))}
-      </div>
-    );
-  }
-}
-
-class TrendingCommunitiesLoadingSkeletonItem extends Component<any, any> {
-  render() {
-    return (
-      <div className="col flex-grow-1 mt-2 ps-2 pe-4">
-        <div className="row">
-          <div className="col flex-grow-0 pe-0">
-            <div className="d-flex placeholder-glow img-icon">
-              <span className="placeholder placeholder-lg w-100 h-100 rounded-circle" />
-            </div>
-          </div>
-          <div className="col flex-grow-1 pe-0">
-            <LoadingSkeletonLine size={12} />
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
 export class CommentsLoadingSkeleton extends Component<any, any> {
   render() {
     return Array.from({ length: this.props.itemCount ?? 10 }, (_, index) => (

src/shared/components/home/home.tsx

@@ -18,10 +18,8 @@ import {
   getQueryString,
   getRandomFromList,
   resourcesSettled,
-  bareRoutePush,
 } from "@utils/helpers";
 import { scrollMixin } from "../mixins/scroll-mixin";
-import { canCreateCommunity } from "@utils/roles";
 import type { QueryParams, StringBoolean } from "@utils/types";
 import { RouteDataResponse } from "@utils/types";
 import { NoOptionI18nKeys } from "i18next";
@@ -56,8 +54,6 @@ import {
   GetSiteResponse,
   HidePost,
   LemmyHttp,
-  ListCommunities,
-  ListCommunitiesResponse,
   ListingType,
   LockPost,
   MarkCommentReplyAsRead,
@@ -75,7 +71,7 @@ import {
   SuccessResponse,
   TransferCommunity,
 } from "lemmy-js-client";
-import { fetchLimit, relTags, trendingFetchLimit } from "../../config";
+import { fetchLimit, relTags } from "../../config";
 import {
   CommentViewType,
   DataType,
@@ -106,7 +102,6 @@ import { getHttpBaseInternal } from "../../utils/env";
 import {
   CommentsLoadingSkeleton,
   PostsLoadingSkeleton,
-  TrendingCommunitiesLoadingSkeleton,
 } from "../common/loading-skeleton";
 import { RouteComponentProps } from "inferno-router/dist/Route";
 import { IRoutePropsWithFetch } from "../../routes";
@@ -116,9 +111,7 @@ import { isBrowser, snapToTop } from "@utils/browser";
 interface HomeState {
   postsRes: RequestState<GetPostsResponse>;
   commentsRes: RequestState<GetCommentsResponse>;
-  trendingCommunitiesRes: RequestState<ListCommunitiesResponse>;
   showSubscribedMobile: boolean;
-  showTrendingMobile: boolean;
   showSidebarMobile: boolean;
   subscribedCollapsed: boolean;
   tagline?: string;
@@ -137,7 +130,6 @@ interface HomeProps {
 type HomeData = RouteDataResponse<{
   postsRes: GetPostsResponse;
   commentsRes: GetCommentsResponse;
-  trendingCommunitiesRes: ListCommunitiesResponse;
 }>;
 
 function getRss(listingType: ListingType, sort: SortType) {
@@ -238,18 +230,6 @@ const MobileButton = ({
   </button>
 );
 
-const LinkButton = ({
-  path,
-  translationKey,
-}: {
-  path: string;
-  translationKey: NoOptionI18nKeys;
-}) => (
-  <Link className="btn btn-secondary d-block" to={path}>
-    {I18NextService.i18n.t(translationKey)}
-  </Link>
-);
-
 type HomePathProps = Record<string, never>;
 type HomeRouteProps = RouteComponentProps<HomePathProps> & HomeProps;
 export type HomeFetchConfig = IRoutePropsWithFetch<
@@ -265,10 +245,8 @@ export class Home extends Component<HomeRouteProps, HomeState> {
   state: HomeState = {
     postsRes: EMPTY_REQUEST,
     commentsRes: EMPTY_REQUEST,
-    trendingCommunitiesRes: EMPTY_REQUEST,
     siteRes: this.isoData.site_res,
     showSubscribedMobile: false,
-    showTrendingMobile: false,
     showSidebarMobile: false,
     subscribedCollapsed: false,
     isIsomorphic: false,
@@ -276,7 +254,6 @@ export class Home extends Component<HomeRouteProps, HomeState> {
 
   loadingSettled(): boolean {
     return resourcesSettled([
-      this.state.trendingCommunitiesRes,
       this.props.dataType === DataType.Post
         ? this.state.postsRes
         : this.state.commentsRes,
@@ -324,12 +301,10 @@ export class Home extends Component<HomeRouteProps, HomeState> {
 
     // Only fetch the data if coming from another route
     if (FirstLoadService.isFirstLoad) {
-      const { trendingCommunitiesRes, commentsRes, postsRes } =
-        this.isoData.routeData;
+      const { commentsRes, postsRes } = this.isoData.routeData;
 
       this.state = {
         ...this.state,
-        trendingCommunitiesRes,
         commentsRes,
         postsRes,
         isIsomorphic: true,
@@ -349,10 +324,7 @@ export class Home extends Component<HomeRouteProps, HomeState> {
         )) &&
       isBrowser()
     ) {
-      await Promise.all([
-        this.fetchTrendingCommunities(),
-        this.fetchData(this.props),
-      ]);
+      await this.fetchData(this.props);
     }
   }
 
@@ -360,10 +332,6 @@ export class Home extends Component<HomeRouteProps, HomeState> {
     nextProps: HomeRouteProps & { children?: InfernoNode },
   ) {
     this.fetchData(nextProps);
-
-    if (bareRoutePush(this.props, nextProps)) {
-      this.fetchTrendingCommunities();
-    }
   }
 
   static async fetchInitialData({
@@ -401,24 +369,12 @@ export class Home extends Component<HomeRouteProps, HomeState> {
       commentsFetch = client.getComments(getCommentsForm);
     }
 
-    const trendingCommunitiesForm: ListCommunities = {
-      type_: "Local",
-      sort: "Hot",
-      limit: trendingFetchLimit,
-    };
-
-    const trendingCommunitiesFetch = client.listCommunities(
-      trendingCommunitiesForm,
-    );
-
-    const [postsRes, commentsRes, trendingCommunitiesRes] = await Promise.all([
+    const [postsRes, commentsRes] = await Promise.all([
       postsFetch,
       commentsFetch,
-      trendingCommunitiesFetch,
     ]);
 
     return {
-      trendingCommunitiesRes,
       commentsRes,
       postsRes,
     };
@@ -481,7 +437,6 @@ export class Home extends Component<HomeRouteProps, HomeState> {
         admins,
       },
       showSubscribedMobile,
-      showTrendingMobile,
       showSidebarMobile,
     } = this.state;
 
@@ -495,11 +450,6 @@ export class Home extends Component<HomeRouteProps, HomeState> {
               onClick={linkEvent(this, this.handleShowSubscribedMobile)}
             />
           )}
-          <MobileButton
-            textKey="trending"
-            show={showTrendingMobile}
-            onClick={linkEvent(this, this.handleShowTrendingMobile)}
-          />
           <MobileButton
             textKey="sidebar"
             show={showSidebarMobile}
@@ -514,11 +464,6 @@ export class Home extends Component<HomeRouteProps, HomeState> {
               isMobile={true}
             />
           )}
-          {showTrendingMobile && (
-            <div className="card border-secondary mb-3">
-              {this.trendingCommunities()}
-            </div>
-          )}
           {showSubscribedMobile && (
             <div className="card border-secondary mb-3">
               {this.subscribedCommunities(true)}
@@ -539,9 +484,6 @@ export class Home extends Component<HomeRouteProps, HomeState> {
 
     return (
       <div id="sidebarContainer">
-        <section id="sidebarMain" className="card border-secondary mb-3">
-          {this.trendingCommunities()}
-        </section>
         <SiteSidebar
           site={site}
           admins={admins}
@@ -562,51 +504,6 @@ export class Home extends Component<HomeRouteProps, HomeState> {
     );
   }
 
-  trendingCommunities() {
-    switch (this.state.trendingCommunitiesRes?.state) {
-      case "loading":
-        return <TrendingCommunitiesLoadingSkeleton itemCount={5} />;
-      case "success": {
-        const trending = this.state.trendingCommunitiesRes.data.communities;
-        return (
-          <>
-            <header className="card-header d-flex align-items-center">
-              <h5 className="mb-0">
-                <T i18nKey="trending_communities">
-                  #
-                  <Link className="text-body" to="/communities">
-                    #
-                  </Link>
-                </T>
-              </h5>
-            </header>
-            <div className="card-body">
-              {trending.length > 0 && (
-                <ul className="list-inline">
-                  {trending.map(cv => (
-                    <li key={cv.community.id} className="list-inline-item">
-                      <CommunityLink community={cv.community} />
-                    </li>
-                  ))}
-                </ul>
-              )}
-              {canCreateCommunity(this.state.siteRes) && (
-                <LinkButton
-                  path="/create_community"
-                  translationKey="create_a_community"
-                />
-              )}
-              <LinkButton
-                path="/communities"
-                translationKey="explore_communities"
-              />
-            </div>
-          </>
-        );
-      }
-    }
-  }
-
   subscribedCommunities(isMobile = false) {
     const { subscribedCollapsed } = this.state;
 
@@ -842,17 +739,6 @@ export class Home extends Component<HomeRouteProps, HomeState> {
     );
   }
 
-  async fetchTrendingCommunities() {
-    this.setState({ trendingCommunitiesRes: LOADING_REQUEST });
-    this.setState({
-      trendingCommunitiesRes: await HttpService.client.listCommunities({
-        type_: "Local",
-        sort: "Hot",
-        limit: trendingFetchLimit,
-      }),
-    });
-  }
-
   fetchDataToken?: symbol;
   async fetchData({
     dataType,
@@ -893,10 +779,6 @@ export class Home extends Component<HomeRouteProps, HomeState> {
     i.setState({ showSubscribedMobile: !i.state.showSubscribedMobile });
   }
 
-  handleShowTrendingMobile(i: Home) {
-    i.setState({ showTrendingMobile: !i.state.showTrendingMobile });
-  }
-
   handleShowSidebarMobile(i: Home) {
     i.setState({ showSidebarMobile: !i.state.showSidebarMobile });
   }

src/shared/components/post/post-form.tsx

@@ -27,7 +27,7 @@ import {
   ghostArchiveUrl,
   postMarkdownFieldCharacterLimit,
   relTags,
-  trendingFetchLimit,
+  similarPostFetchLimit,
   webArchiveUrl,
 } from "../../config";
 import { PostFormParams } from "../../interfaces";
@@ -825,7 +825,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
           listing_type: "All",
           community_id: this.state.form.community_id,
           page: 1,
-          limit: trendingFetchLimit,
+          limit: similarPostFetchLimit,
         }),
       });
     }

src/shared/config.ts

@@ -16,7 +16,6 @@ export const webArchiveUrl = "https://web.archive.org";
 export const elementUrl = "https://element.io";
 
 export const postRefetchSeconds: number = 60 * 1000;
-export const trendingFetchLimit = 6;
 export const mentionDropdownFetchLimit = 10;
 export const commentTreeMaxDepth = 8;
 export const postMarkdownFieldCharacterLimit = 50000;
@@ -25,6 +24,7 @@ export const maxUploadImages = 20;
 export const concurrentImageUpload = 4;
 export const updateUnreadCountsInterval = 30000;
 export const fetchLimit = 20;
+export const similarPostFetchLimit = 6;
 export const relTags = "noopener nofollow";
 export const emDash = "\u2014";
 export const authCookieName = "jwt";