X-Git-Url: http://these/git/?a=blobdiff_plain;f=src%2Fshared%2Fcomponents%2Fhome%2Fhome.tsx;h=741dfa57aa7576eb0138bf1d687ab2773ae4a70d;hb=26ff0f7e06bf32024161a60a5503e1a041ab778c;hp=4270bd0bee42d40546dbbc4285d8f6da24573eca;hpb=3fca825f1f5fa9801433f4c00651a413a93c0db5;p=lemmy-ui.git diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx index 4270bd0..741dfa5 100644 --- a/src/shared/components/home/home.tsx +++ b/src/shared/components/home/home.tsx @@ -1,6 +1,27 @@ -import { getQueryParams, getQueryString } from "@utils/helpers"; +import { + commentsToFlatNodes, + editComment, + editPost, + editWith, + enableDownvotes, + enableNsfw, + getCommentParentId, + getDataTypeString, + myAuth, + postToCommentSortType, + setIsoData, + showLocal, + updatePersonBlock, +} from "@utils/app"; +import { + getPageFromString, + getQueryParams, + getQueryString, + getRandomFromList, +} from "@utils/helpers"; import { canCreateCommunity } from "@utils/roles"; import type { QueryParams } from "@utils/types"; +import { RouteDataResponse } from "@utils/types"; import { NoOptionI18nKeys } from "i18next"; import { Component, MouseEventHandler, linkEvent } from "inferno"; import { T } from "inferno-i18next-dess"; @@ -50,41 +71,22 @@ import { SortType, TransferCommunity, } from "lemmy-js-client"; -import { i18n } from "../../i18next"; +import { fetchLimit, relTags, trendingFetchLimit } from "../../config"; import { CommentViewType, DataType, InitialFetchRequest, } from "../../interfaces"; -import { UserService } from "../../services"; -import { FirstLoadService } from "../../services/FirstLoadService"; -import { HttpService, RequestState } from "../../services/HttpService"; +import { mdToHtml } from "../../markdown"; import { - RouteDataResponse, - commentsToFlatNodes, - editComment, - editPost, - editWith, - enableDownvotes, - enableNsfw, - fetchLimit, - getCommentParentId, - getDataTypeString, - getPageFromString, - getRandomFromList, - mdToHtml, - myAuth, - postToCommentSortType, - relTags, - restoreScrollPosition, - saveScrollPosition, - setIsoData, - setupTippy, - showLocal, - toast, - trendingFetchLimit, - updatePersonBlock, -} from "../../utils"; + FirstLoadService, + HomeCacheService, + I18NextService, + UserService, +} from "../../services"; +import { HttpService, RequestState } from "../../services/HttpService"; +import { setupTippy } from "../../tippy"; +import { toast } from "../../toast"; import { CommentNodes } from "../comment/comment-nodes"; import { DataTypeSelect } from "../common/data-type-select"; import { HtmlTags } from "../common/html-tags"; @@ -104,6 +106,7 @@ interface HomeState { showTrendingMobile: boolean; showSidebarMobile: boolean; subscribedCollapsed: boolean; + scrolled: boolean; tagline?: string; siteRes: GetSiteResponse; finished: Map; @@ -111,7 +114,7 @@ interface HomeState { } interface HomeProps { - listingType: ListingType; + listingType?: ListingType; dataType: DataType; sort: SortType; page: number; @@ -160,12 +163,12 @@ function getDataTypeFromQuery(type?: string): DataType { return type ? DataType[type] : DataType.Post; } -function getListingTypeFromQuery(type?: string): ListingType { +function getListingTypeFromQuery(type?: string): ListingType | undefined { const myListingType = UserService.Instance.myUserInfo?.local_user_view?.local_user ?.default_listing_type; - return (type ? (type as ListingType) : myListingType) ?? "Local"; + return type ? (type as ListingType) : myListingType; } function getSortTypeFromQuery(type?: string): SortType { @@ -197,7 +200,7 @@ const MobileButton = ({ className="btn btn-secondary d-inline-block mb-2 me-3" onClick={onClick} > - {i18n.t(textKey)}{" "} + {I18NextService.i18n.t(textKey)}{" "} ); @@ -210,7 +213,7 @@ const LinkButton = ({ translationKey: NoOptionI18nKeys; }) => ( - {i18n.t(translationKey)} + {I18NextService.i18n.t(translationKey)} ); @@ -220,6 +223,7 @@ export class Home extends Component { postsRes: { state: "empty" }, commentsRes: { state: "empty" }, trendingCommunitiesRes: { state: "empty" }, + scrolled: true, siteRes: this.isoData.site_res, showSubscribedMobile: false, showTrendingMobile: false, @@ -275,11 +279,19 @@ export class Home extends Component { trendingCommunitiesRes, commentsRes, postsRes, - tagline: getRandomFromList(this.state?.siteRes?.taglines ?? []) - ?.content, isIsomorphic: true, }; + + HomeCacheService.postsRes = postsRes; } + + this.state.tagline = getRandomFromList( + this.state?.siteRes?.taglines ?? [] + )?.content; + } + + componentWillUnmount() { + HomeCacheService.activate(); } async componentDidMount() { @@ -295,19 +307,16 @@ export class Home extends Component { setupTippy(); } - componentWillUnmount() { - saveScrollPosition(this.context); - } - static async fetchInitialData({ client, auth, query: { dataType: urlDataType, listingType, page: urlPage, sort: urlSort }, + site, }: InitialFetchRequest>): Promise { const dataType = getDataTypeFromQuery(urlDataType); - - // TODO figure out auth default_listingType, default_sort_type - const type_ = getListingTypeFromQuery(listingType); + const type_ = + getListingTypeFromQuery(listingType) ?? + site.site_view.local_site.default_post_listing_type; const sort = getSortTypeFromQuery(urlSort); const page = urlPage ? Number(urlPage) : 1; @@ -381,7 +390,7 @@ export class Home extends Component { /> {site_setup && (
-
+
{tagline && (
{
{this.mobileView}
{this.posts}
-
@@ -565,10 +574,14 @@ export class Home extends Component { className="btn btn-sm text-muted" onClick={linkEvent(this, this.handleCollapseSubscribe)} aria-label={ - subscribedCollapsed ? i18n.t("expand") : i18n.t("collapse") + subscribedCollapsed + ? I18NextService.i18n.t("expand") + : I18NextService.i18n.t("collapse") } data-tippy-content={ - subscribedCollapsed ? i18n.t("expand") : i18n.t("collapse") + subscribedCollapsed + ? I18NextService.i18n.t("expand") + : I18NextService.i18n.t("collapse") } aria-expanded="true" aria-controls="sidebarSubscribedBody" @@ -623,6 +636,11 @@ export class Home extends Component { search: getQueryString(queryParams), }); + if (!this.state.scrolled) { + this.setState({ scrolled: true }); + setTimeout(() => window.scrollTo(0, 0), 0); + } + await this.fetchData(); } @@ -645,7 +663,9 @@ export class Home extends Component { const siteRes = this.state.siteRes; if (dataType === DataType.Post) { - switch (this.state.postsRes.state) { + switch (this.state.postsRes?.state) { + case "empty": + return
; case "loading": return (
@@ -742,7 +762,10 @@ export class Home extends Component {
{
-
{getRss(listingType)}
+
+ {getRss( + listingType ?? + this.state.siteRes.site_view.local_site.default_post_listing_type + )} +
); } @@ -773,17 +801,30 @@ export class Home extends Component { const { dataType, page, listingType, sort } = getHomeQueryParams(); if (dataType === DataType.Post) { - this.setState({ postsRes: { state: "loading" } }); - this.setState({ - postsRes: await HttpService.client.getPosts({ - page, - limit: fetchLimit, - sort, - saved_only: false, - type_: listingType, - auth, - }), - }); + if (HomeCacheService.active) { + const { postsRes, scrollY } = HomeCacheService; + HomeCacheService.deactivate(); + this.setState({ postsRes }); + window.scrollTo({ + left: 0, + top: scrollY, + behavior: "instant", + }); + } else { + this.setState({ postsRes: { state: "loading" } }); + this.setState({ + postsRes: await HttpService.client.getPosts({ + page, + limit: fetchLimit, + sort, + saved_only: false, + type_: listingType, + auth, + }), + }); + + HomeCacheService.postsRes = this.state.postsRes; + } } else { this.setState({ commentsRes: { state: "loading" } }); this.setState({ @@ -798,7 +839,6 @@ export class Home extends Component { }); } - restoreScrollPosition(this.context); setupTippy(); } @@ -819,23 +859,23 @@ export class Home extends Component { } handlePageChange(page: number) { + this.setState({ scrolled: false }); this.updateUrl({ page }); - window.scrollTo(0, 0); } handleSortChange(val: SortType) { + this.setState({ scrolled: false }); this.updateUrl({ sort: val, page: 1 }); - window.scrollTo(0, 0); } handleListingTypeChange(val: ListingType) { + this.setState({ scrolled: false }); this.updateUrl({ listingType: val, page: 1 }); - window.scrollTo(0, 0); } handleDataTypeChange(val: DataType) { + this.setState({ scrolled: false }); this.updateUrl({ dataType: val, page: 1 }); - window.scrollTo(0, 0); } async handleAddModToCommunity(form: AddModToCommunity) { @@ -932,14 +972,14 @@ export class Home extends Component { async handleCommentReport(form: CreateCommentReport) { const reportRes = await HttpService.client.createCommentReport(form); if (reportRes.state == "success") { - toast(i18n.t("report_created")); + toast(I18NextService.i18n.t("report_created")); } } async handlePostReport(form: CreatePostReport) { const reportRes = await HttpService.client.createPostReport(form); if (reportRes.state == "success") { - toast(i18n.t("report_created")); + toast(I18NextService.i18n.t("report_created")); } } @@ -963,7 +1003,7 @@ export class Home extends Component { async handleTransferCommunity(form: TransferCommunity) { await HttpService.client.transferCommunity(form); - toast(i18n.t("transfer_community")); + toast(I18NextService.i18n.t("transfer_community")); } async handleCommentReplyRead(form: MarkCommentReplyAsRead) { @@ -1030,7 +1070,7 @@ export class Home extends Component { purgeItem(purgeRes: RequestState) { if (purgeRes.state == "success") { - toast(i18n.t("purge_success")); + toast(I18NextService.i18n.t("purge_success")); this.context.router.history.push(`/`); } }