Merge branch 'main' into route-data-refactor

[lemmy-ui.git] / src / shared / components / home / home.tsx

diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx
index 8be983042a5ce584988bb282d928656678ddfeb0..cc9dd518dbddac5ae5a9c651f691a1597dc9ec8f 100644 (file)
--- a/src/shared/components/home/home.tsx
+++ b/src/shared/components/home/home.tsx
@@ -77,6 +77,7 @@ import {
   QueryParams,
   relTags,
   restoreScrollPosition,
+  RouteDataResponse,
   saveScrollPosition,
   setIsoData,
   setupTippy,
@@ -117,6 +118,12 @@ interface HomeProps {
   page: number;
 }
 
+type HomeData = RouteDataResponse<{
+  postsResponse?: GetPostsResponse;
+  commentsResponse?: GetCommentsResponse;
+  trendingResponse: ListCommunitiesResponse;
+}>;
+
 function getDataTypeFromQuery(type?: string): DataType {
   return type ? DataType[type] : DataType.Post;
 }
@@ -176,7 +183,7 @@ const LinkButton = ({
 );
 
 export class Home extends Component<any, HomeState> {
-  private isoData = setIsoData(this.context);
+  private isoData = setIsoData<HomeData>(this.context);
   state: HomeState = {
     postsRes: { state: "empty" },
     commentsRes: { state: "empty" },
@@ -228,18 +235,33 @@ export class Home extends Component<any, HomeState> {
 
     // Only fetch the data if coming from another route
     if (FirstLoadService.isFirstLoad) {
-      const [postsRes, commentsRes, trendingCommunitiesRes] =
-        this.isoData.routeData;
+      const {
+        trendingResponse: trendingCommunitiesRes,
+        commentsResponse: commentsRes,
+        postsResponse: postsRes,
+      } = this.isoData.routeData;
 
       this.state = {
         ...this.state,
-        postsRes,
-        commentsRes,
         trendingCommunitiesRes,
         tagline: getRandomFromList(this.state?.siteRes?.taglines ?? [])
           ?.content,
         isIsomorphic: true,
       };
+
+      if (commentsRes?.state === "success") {
+        this.state = {
+          ...this.state,
+          commentsRes,
+        };
+      }
+
+      if (postsRes?.state === "success") {
+        this.state = {
+          ...this.state,
+          postsRes,
+        };
+      }
     }
   }
 
@@ -254,13 +276,11 @@ export class Home extends Component<any, HomeState> {
     saveScrollPosition(this.context);
   }
 
-  static fetchInitialData({
+  static async fetchInitialData({
     client,
     auth,
     query: { dataType: urlDataType, listingType, page: urlPage, sort: urlSort },
-  }: InitialFetchRequest<QueryParams<HomeProps>>): Promise<
-    RequestState<any>
-  >[] {
+  }: InitialFetchRequest<QueryParams<HomeProps>>): Promise<HomeData> {
     const dataType = getDataTypeFromQuery(urlDataType);
 
     // TODO figure out auth default_listingType, default_sort_type
@@ -269,7 +289,9 @@ export class Home extends Component<any, HomeState> {
 
     const page = urlPage ? Number(urlPage) : 1;
 
-    const promises: Promise<RequestState<any>>[] = [];
+    let postsResponse: RequestState<GetPostsResponse> | undefined = undefined;
+    let commentsResponse: RequestState<GetCommentsResponse> | undefined =
+      undefined;
 
     if (dataType === DataType.Post) {
       const getPostsForm: GetPosts = {
@@ -281,8 +303,7 @@ export class Home extends Component<any, HomeState> {
         auth,
       };
 
-      promises.push(client.getPosts(getPostsForm));
-      promises.push(Promise.resolve({ state: "empty" }));
+      postsResponse = await client.getPosts(getPostsForm);
     } else {
       const getCommentsForm: GetComments = {
         page,
@@ -292,8 +313,8 @@ export class Home extends Component<any, HomeState> {
         saved_only: false,
         auth,
       };
-      promises.push(Promise.resolve({ state: "empty" }));
-      promises.push(client.getComments(getCommentsForm));
+
+      commentsResponse = await client.getComments(getCommentsForm);
     }
 
     const trendingCommunitiesForm: ListCommunities = {
@@ -302,9 +323,12 @@ export class Home extends Component<any, HomeState> {
       limit: trendingFetchLimit,
       auth,
     };
-    promises.push(client.listCommunities(trendingCommunitiesForm));
 
-    return promises;
+    return {
+      trendingResponse: await client.listCommunities(trendingCommunitiesForm),
+      commentsResponse,
+      postsResponse,
+    };
   }
 
   get documentTitle(): string {