X-Git-Url: http://these/git/?a=blobdiff_plain;f=src%2Fshared%2Fcomponents%2Fsearch.tsx;h=99b180356b87c5ab89f789a795c49c81f9ef8645;hb=53c3cfeade90150b07431386745a24aa699a25ec;hp=8097dbde433b7ac7ef3811e47cc44cd6d4ffe76b;hpb=d84af4a3efa5925317b6e7825ada92dde71c03ae;p=lemmy-ui.git

diff --git a/src/shared/components/search.tsx b/src/shared/components/search.tsx
index 8097dbd..99b1803 100644
--- a/src/shared/components/search.tsx
+++ b/src/shared/components/search.tsx
@@ -1,3 +1,28 @@
+import {
+  commentsToFlatNodes,
+  communityToChoice,
+  enableDownvotes,
+  enableNsfw,
+  fetchCommunities,
+  fetchUsers,
+  getUpdatedSearchId,
+  myAuth,
+  personToChoice,
+  setIsoData,
+  showLocal,
+} from "@utils/app";
+import { restoreScrollPosition, saveScrollPosition } from "@utils/browser";
+import {
+  capitalizeFirstLetter,
+  debounce,
+  getIdFromString,
+  getPageFromString,
+  getQueryParams,
+  getQueryString,
+  numToSI,
+} from "@utils/helpers";
+import type { QueryParams } from "@utils/types";
+import { Choice, RouteDataResponse } from "@utils/types";
 import type { NoOptionI18nKeys } from "i18next";
 import { Component, linkEvent } from "inferno";
 import {
@@ -20,35 +45,10 @@ import {
   SearchType,
   SortType,
 } from "lemmy-js-client";
-import { i18n } from "../i18next";
+import { fetchLimit } from "../config";
 import { CommentViewType, InitialFetchRequest } from "../interfaces";
-import { FirstLoadService } from "../services/FirstLoadService";
+import { FirstLoadService, I18NextService } from "../services";
 import { HttpService, RequestState } from "../services/HttpService";
-import {
-  Choice,
-  QueryParams,
-  capitalizeFirstLetter,
-  commentsToFlatNodes,
-  communityToChoice,
-  debounce,
-  enableDownvotes,
-  enableNsfw,
-  fetchCommunities,
-  fetchLimit,
-  fetchUsers,
-  getIdFromString,
-  getPageFromString,
-  getQueryParams,
-  getQueryString,
-  getUpdatedSearchId,
-  myAuth,
-  numToSI,
-  personToChoice,
-  restoreScrollPosition,
-  saveScrollPosition,
-  setIsoData,
-  showLocal,
-} from "../utils";
 import { CommentNodes } from "./comment/comment-nodes";
 import { HtmlTags } from "./common/html-tags";
 import { Spinner } from "./common/icon";
@@ -70,6 +70,14 @@ interface SearchProps {
   page: number;
 }
 
+type SearchData = RouteDataResponse<{
+  communityResponse: GetCommunityResponse;
+  listCommunitiesResponse: ListCommunitiesResponse;
+  creatorDetailsResponse: GetPersonDetailsResponse;
+  searchResponse: SearchResponse;
+  resolveObjectResponse: ResolveObjectResponse;
+}>;
+
 type FilterType = "creator" | "community";
 
 interface SearchState {
@@ -173,15 +181,15 @@ const Filter = ({
   loading: boolean;
 }) => {
   return (
-    <div className="form-group col-sm-6">
-      <label className="col-form-label" htmlFor={`${filterType}-filter`}>
-        {capitalizeFirstLetter(i18n.t(filterType))}
+    <div className="col-sm-6">
+      <label className="mb-1" htmlFor={`${filterType}-filter`}>
+        {capitalizeFirstLetter(I18NextService.i18n.t(filterType))}
       </label>
       <SearchableSelect
         id={`${filterType}-filter`}
         options={[
           {
-            label: i18n.t("all"),
+            label: I18NextService.i18n.t("all"),
             value: "0",
           },
         ].concat(options)}
@@ -219,7 +227,7 @@ function getListing(
   return (
     <>
       <span>{listing}</span>
-      <span>{` - ${i18n.t(translationKey, {
+      <span>{` - ${I18NextService.i18n.t(translationKey, {
         count: Number(count),
         formattedCount: numToSI(count),
       })}`}</span>
@@ -228,7 +236,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 +271,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 +358,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 +384,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,45 +424,60 @@ 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 HttpService.silent_client.resolveObject(
+            resolveObjectForm
+          );
+
+          // If we return this object with a state of failed, the catch-all-handler will redirect
+          // to an error page, so we ignore it by covering up the error with the empty state.
+          if (resolveObjectResponse.state === "failed") {
+            resolveObjectResponse = { state: "empty" };
+          }
         }
-      } else {
-        promises.push(Promise.resolve({ state: "empty" }));
-        promises.push(Promise.resolve({ state: "empty" }));
       }
     }
 
-    return promises;
+    return {
+      communityResponse,
+      creatorDetailsResponse,
+      listCommunitiesResponse,
+      resolveObjectResponse,
+      searchResponse,
+    };
   }
 
   get documentTitle(): string {
     const { q } = getSearchQueryParams();
     const name = this.state.siteRes.site_view.site.name;
-    return `${i18n.t("search")} - ${q ? `${q} - ` : ""}${name}`;
+    return `${I18NextService.i18n.t("search")} - ${q ? `${q} - ` : ""}${name}`;
   }
 
   render() {
     const { type, page } = getSearchQueryParams();
 
     return (
-      <div className="container-lg">
+      <div className="search container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
+          canonicalPath={
+            this.context.router.route.match.url +
+            this.context.router.route.location.search
+          }
         />
-        <h5>{i18n.t("search")}</h5>
+        <h1 className="h4 mb-4">{I18NextService.i18n.t("search")}</h1>
         {this.selects}
         {this.searchForm}
         {this.displayResults(type)}
         {this.resultsCount === 0 &&
           this.state.searchRes.state === "success" && (
-            <span>{i18n.t("no_results")}</span>
+            <span>{I18NextService.i18n.t("no_results")}</span>
           )}
         <Paginator page={page} onChange={this.handlePageChange} />
       </div>
@@ -449,26 +505,30 @@ export class Search extends Component<any, SearchState> {
   get searchForm() {
     return (
       <form
-        className="form-inline"
+        className="row gx-2 gy-3"
         onSubmit={linkEvent(this, this.handleSearchSubmit)}
       >
-        <input
-          type="text"
-          className="form-control mr-2 mb-2"
-          value={this.state.searchText}
-          placeholder={`${i18n.t("search")}...`}
-          aria-label={i18n.t("search")}
-          onInput={linkEvent(this, this.handleQChange)}
-          required
-          minLength={1}
-        />
-        <button type="submit" className="btn btn-secondary mr-2 mb-2">
-          {this.state.searchRes.state == "loading" ? (
-            <Spinner />
-          ) : (
-            <span>{i18n.t("search")}</span>
-          )}
-        </button>
+        <div className="col-auto flex-grow-1 flex-sm-grow-0">
+          <input
+            type="text"
+            className="form-control me-2 mb-2 col-sm-8"
+            value={this.state.searchText}
+            placeholder={`${I18NextService.i18n.t("search")}...`}
+            aria-label={I18NextService.i18n.t("search")}
+            onInput={linkEvent(this, this.handleQChange)}
+            required
+            minLength={1}
+          />
+        </div>
+        <div className="col-auto">
+          <button type="submit" className="btn btn-secondary mb-2">
+            {this.state.searchRes.state === "loading" ? (
+              <Spinner />
+            ) : (
+              <span>{I18NextService.i18n.t("search")}</span>
+            )}
+          </button>
+        </div>
       </form>
     );
   }
@@ -489,39 +549,45 @@ export class Search extends Component<any, SearchState> {
       communitiesRes.data.communities.length > 0;
 
     return (
-      <div className="mb-2">
-        <select
-          value={type}
-          onChange={linkEvent(this, this.handleTypeChange)}
-          className="custom-select w-auto mb-2"
-          aria-label={i18n.t("type")}
-        >
-          <option disabled aria-hidden="true">
-            {i18n.t("type")}
-          </option>
-          {searchTypes.map(option => (
-            <option value={option} key={option}>
-              {i18n.t(option.toString().toLowerCase() as NoOptionI18nKeys)}
-            </option>
-          ))}
-        </select>
-        <span className="ml-2">
-          <ListingTypeSelect
-            type_={listingType}
-            showLocal={showLocal(this.isoData)}
-            showSubscribed
-            onChange={this.handleListingTypeChange}
-          />
-        </span>
-        <span className="ml-2">
-          <SortSelect
-            sort={sort}
-            onChange={this.handleSortChange}
-            hideHot
-            hideMostComments
-          />
-        </span>
-        <div className="form-row">
+      <>
+        <div className="row row-cols-auto g-2 g-sm-3 mb-2 mb-sm-3">
+          <div className="col">
+            <select
+              value={type}
+              onChange={linkEvent(this, this.handleTypeChange)}
+              className="form-select d-inline-block w-auto"
+              aria-label={I18NextService.i18n.t("type")}
+            >
+              <option disabled aria-hidden="true">
+                {I18NextService.i18n.t("type")}
+              </option>
+              {searchTypes.map(option => (
+                <option value={option} key={option}>
+                  {I18NextService.i18n.t(
+                    option.toString().toLowerCase() as NoOptionI18nKeys
+                  )}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div className="col">
+            <ListingTypeSelect
+              type_={listingType}
+              showLocal={showLocal(this.isoData)}
+              showSubscribed
+              onChange={this.handleListingTypeChange}
+            />
+          </div>
+          <div className="col">
+            <SortSelect
+              sort={sort}
+              onChange={this.handleSortChange}
+              hideHot
+              hideMostComments
+            />
+          </div>
+        </div>
+        <div className="row gy-2 gx-4 mb-3">
           {hasCommunities && (
             <Filter
               filterType="community"
@@ -541,7 +607,7 @@ export class Search extends Component<any, SearchState> {
             loading={searchCreatorLoading}
           />
         </div>
-      </div>
+      </>
     );
   }
 
@@ -901,7 +967,7 @@ export class Search extends Component<any, SearchState> {
       if (auth) {
         this.setState({ resolveObjectRes: { state: "loading" } });
         this.setState({
-          resolveObjectRes: await HttpService.client.resolveObject({
+          resolveObjectRes: await HttpService.silent_client.resolveObject({
             q,
             auth,
           }),
@@ -1049,7 +1115,5 @@ export class Search extends Component<any, SearchState> {
     };
 
     this.props.history.push(`/search${getQueryString(queryParams)}`);
-
-    await this.search();
   }
 }