mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-11-25 13:51:13 +00:00
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.
This commit is contained in:
parent
a5a696e54f
commit
72a3a3dbb9
4 changed files with 7 additions and 159 deletions
|
@ -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) => (
|
||||
|
|
|
@ -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 });
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
}),
|
||||
});
|
||||
}
|
||||
|
|
|
@ -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";
|
||||
|
|
Loading…
Reference in a new issue