Merge branch 'main' into breakout-role-utils

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

diff --git a/src/shared/components/search.tsx b/src/shared/components/search.tsx
index d32e408755de63e2f6b23f98c18a677e4d927b4a..e56056acc01baa4abbc9b905b350f9c4acad786f 100644 (file)
--- a/src/shared/components/search.tsx
+++ b/src/shared/components/search.tsx
@@ -26,6 +26,7 @@ import { FirstLoadService } from "../services/FirstLoadService";
 import { HttpService, RequestState } from "../services/HttpService";
 import {
   Choice,
+  RouteDataResponse,
   capitalizeFirstLetter,
   commentsToFlatNodes,
   communityToChoice,
@@ -70,6 +71,14 @@ interface SearchProps {
   page: number;
 }
 
+type SearchData = RouteDataResponse<{
+  communityResponse: GetCommunityResponse;
+  listCommunitiesResponse: ListCommunitiesResponse;
+  creatorDetailsResponse: GetPersonDetailsResponse;
+  searchResponse: SearchResponse;
+  resolveObjectResponse: ResolveObjectResponse;
+}>;
+
 type FilterType = "creator" | "community";
 
 interface SearchState {
@@ -228,7 +237,8 @@ function getListing(
 }
 
 export class Search extends Component<any, SearchState> {
-  private isoData = setIsoData(this.context);
+  private isoData = setIsoData<SearchData>(this.context);
+
   state: SearchState = {
     resolveObjectRes: { state: "empty" },
     creatorDetailsRes: { state: "empty" },
@@ -262,42 +272,63 @@ export class Search extends Component<any, SearchState> {
 
     // Only fetch the data if coming from another route
     if (FirstLoadService.isFirstLoad) {
-      const [
-        communityRes,
-        communitiesRes,
-        creatorDetailsRes,
-        searchRes,
-        resolveObjectRes,
-      ] = this.isoData.routeData;
+      const {
+        communityResponse: communityRes,
+        creatorDetailsResponse: creatorDetailsRes,
+        listCommunitiesResponse: communitiesRes,
+        resolveObjectResponse: resolveObjectRes,
+        searchResponse: searchRes,
+      } = this.isoData.routeData;
 
       this.state = {
         ...this.state,
-        communitiesRes,
-        communityRes,
-        creatorDetailsRes,
-        creatorSearchOptions:
-          creatorDetailsRes.state == "success"
-            ? [personToChoice(creatorDetailsRes.data.person_view)]
-            : [],
         isIsomorphic: true,
       };
 
-      if (communityRes.state === "success") {
+      if (creatorDetailsRes?.state === "success") {
+        this.state = {
+          ...this.state,
+          creatorSearchOptions:
+            creatorDetailsRes?.state === "success"
+              ? [personToChoice(creatorDetailsRes.data.person_view)]
+              : [],
+          creatorDetailsRes,
+        };
+      }
+
+      if (communitiesRes?.state === "success") {
         this.state = {
           ...this.state,
-          communitySearchOptions: [
-            communityToChoice(communityRes.data.community_view),
-          ],
+          communitiesRes,
         };
       }
 
-      if (q) {
+      if (communityRes?.state === "success") {
         this.state = {
           ...this.state,
-          searchRes,
-          resolveObjectRes,
+          communityRes,
         };
       }
+
+      if (q !== "") {
+        this.state = {
+          ...this.state,
+        };
+
+        if (searchRes?.state === "success") {
+          this.state = {
+            ...this.state,
+            searchRes,
+          };
+        }
+
+        if (resolveObjectRes?.state === "success") {
+          this.state = {
+            ...this.state,
+            resolveObjectRes,
+          };
+        }
+      }
     }
   }
 
@@ -328,23 +359,25 @@ export class Search extends Component<any, SearchState> {
     saveScrollPosition(this.context);
   }
 
-  static fetchInitialData({
+  static async fetchInitialData({
     client,
     auth,
     query: { communityId, creatorId, q, type, sort, listingType, page },
-  }: InitialFetchRequest<QueryParams<SearchProps>>): Promise<
-    RequestState<any>
-  >[] {
-    const promises: Promise<RequestState<any>>[] = [];
-
+  }: InitialFetchRequest<QueryParams<SearchProps>>): Promise<SearchData> {
     const community_id = getIdFromString(communityId);
+    let communityResponse: RequestState<GetCommunityResponse> = {
+      state: "empty",
+    };
+    let listCommunitiesResponse: RequestState<ListCommunitiesResponse> = {
+      state: "empty",
+    };
     if (community_id) {
       const getCommunityForm: GetCommunity = {
         id: community_id,
         auth,
       };
-      promises.push(client.getCommunity(getCommunityForm));
-      promises.push(Promise.resolve({ state: "empty" }));
+
+      communityResponse = await client.getCommunity(getCommunityForm);
     } else {
       const listCommunitiesForm: ListCommunities = {
         type_: defaultListingType,
@@ -352,23 +385,32 @@ export class Search extends Component<any, SearchState> {
         limit: fetchLimit,
         auth,
       };
-      promises.push(Promise.resolve({ state: "empty" }));
-      promises.push(client.listCommunities(listCommunitiesForm));
+
+      listCommunitiesResponse = await client.listCommunities(
+        listCommunitiesForm
+      );
     }
 
     const creator_id = getIdFromString(creatorId);
+    let creatorDetailsResponse: RequestState<GetPersonDetailsResponse> = {
+      state: "empty",
+    };
     if (creator_id) {
       const getCreatorForm: GetPersonDetails = {
         person_id: creator_id,
         auth,
       };
-      promises.push(client.getPersonDetails(getCreatorForm));
-    } else {
-      promises.push(Promise.resolve({ state: "empty" }));
+
+      creatorDetailsResponse = await client.getPersonDetails(getCreatorForm);
     }
 
     const query = getSearchQueryFromQuery(q);
 
+    let searchResponse: RequestState<SearchResponse> = { state: "empty" };
+    let resolveObjectResponse: RequestState<ResolveObjectResponse> = {
+      state: "empty",
+    };
+
     if (query) {
       const form: SearchForm = {
         q: query,
@@ -383,21 +425,24 @@ export class Search extends Component<any, SearchState> {
       };
 
       if (query !== "") {
-        promises.push(client.search(form));
+        searchResponse = await client.search(form);
         if (auth) {
           const resolveObjectForm: ResolveObject = {
             q: query,
             auth,
           };
-          promises.push(client.resolveObject(resolveObjectForm));
+          resolveObjectResponse = await client.resolveObject(resolveObjectForm);
         }
-      } else {
-        promises.push(Promise.resolve({ state: "empty" }));
-        promises.push(Promise.resolve({ state: "empty" }));
       }
     }
 
-    return promises;
+    return {
+      communityResponse,
+      creatorDetailsResponse,
+      listCommunitiesResponse,
+      resolveObjectResponse,
+      searchResponse,
+    };
   }
 
   get documentTitle(): string {
@@ -463,7 +508,7 @@ export class Search extends Component<any, SearchState> {
           minLength={1}
         />
         <button type="submit" className="btn btn-secondary mr-2 mb-2">
-          {this.state.searchRes.state == "loading" ? (
+          {this.state.searchRes.state === "loading" ? (
             <Spinner />
           ) : (
             <span>{i18n.t("search")}</span>