Search page select fix (#2201)

* Fix search page community searchable select

* Fix bug with search page creator select

* Add stricter typing to dedup function

* Fix modlog searchable selects

lemmy-translations

@@ -1 +1 @@
-Subproject commit 6fbc86932a03c4d40829ee4a3395259b2a7660e5
+Subproject commit 6b373bf7665ed58a81d8285009ad147248acfd7c

src/shared/components/modlog.tsx

@@ -109,6 +109,7 @@ interface ModlogState {
   loadingUserSearch: boolean;
   modSearchOptions: Choice[];
   userSearchOptions: Choice[];
+  isIsomorphic: boolean;
 }
 
 interface ModlogProps {
@@ -617,27 +618,15 @@ async function createNewOptions({
   oldOptions: Choice[];
   text: string;
 }) {
-  const newOptions: Choice[] = [];
-
-  if (id) {
-    const selectedUser = oldOptions.find(
-      ({ value }) => value === id.toString(),
-    );
-
-    if (selectedUser) {
-      newOptions.push(selectedUser);
-    }
-  }
-
   if (text.length > 0) {
-    newOptions.push(
-      ...(await fetchUsers(text))
-        .slice(0, Number(fetchLimit))
-        .map<Choice>(personToChoice),
-    );
+    return oldOptions
+      .filter(choice => parseInt(choice.value, 10) === id)
+      .concat(
+        (await fetchUsers(text)).slice(0, fetchLimit).map(personToChoice),
+      );
+  } else {
+    return oldOptions;
   }
-
-  return newOptions;
 }
 
 export class Modlog extends Component<
@@ -653,6 +642,7 @@ export class Modlog extends Component<
     loadingUserSearch: false,
     userSearchOptions: [],
     modSearchOptions: [],
+    isIsomorphic: false,
   };
 
   constructor(
@@ -673,6 +663,7 @@ export class Modlog extends Component<
         ...this.state,
         res,
         communityRes,
+        isIsomorphic: true,
       };
 
       if (modUserResponse.state === "success") {
@@ -692,7 +683,40 @@ export class Modlog extends Component<
   }
 
   async componentDidMount() {
-    await this.refetch();
+    if (!this.state.isIsomorphic) {
+      const { modId, userId } = getModlogQueryParams();
+      const promises = [this.refetch()];
+
+      if (userId) {
+        promises.push(
+          HttpService.client
+            .getPersonDetails({ person_id: userId })
+            .then(res => {
+              if (res.state === "success") {
+                this.setState({
+                  userSearchOptions: [personToChoice(res.data.person_view)],
+                });
+              }
+            }),
+        );
+      }
+
+      if (modId) {
+        promises.push(
+          HttpService.client
+            .getPersonDetails({ person_id: modId })
+            .then(res => {
+              if (res.state === "success") {
+                this.setState({
+                  modSearchOptions: [personToChoice(res.data.person_view)],
+                });
+              }
+            }),
+        );
+      }
+
+      await Promise.all(promises);
+    }
   }
 
   get combined() {

src/shared/components/search.tsx

@@ -15,6 +15,7 @@ import { restoreScrollPosition, saveScrollPosition } from "@utils/browser";
 import {
   capitalizeFirstLetter,
   debounce,
+  dedupByProperty,
   getIdFromString,
   getPageFromString,
   getQueryParams,
@@ -33,7 +34,6 @@ import {
   GetPersonDetails,
   GetPersonDetailsResponse,
   GetSiteResponse,
-  ListCommunities,
   ListCommunitiesResponse,
   ListingType,
   PersonView,
@@ -88,9 +88,6 @@ type FilterType = "creator" | "community";
 interface SearchState {
   searchRes: RequestState<SearchResponse>;
   resolveObjectRes: RequestState<ResolveObjectResponse>;
-  creatorDetailsRes: RequestState<GetPersonDetailsResponse>;
-  communitiesRes: RequestState<ListCommunitiesResponse>;
-  communityRes: RequestState<GetCommunityResponse>;
   siteRes: GetSiteResponse;
   searchText?: string;
   communitySearchOptions: Choice[];
@@ -197,7 +194,7 @@ const Filter = ({
             label: I18NextService.i18n.t("all"),
             value: "0",
           },
-        ].concat(options)}
+        ].concat(dedupByProperty(options, option => option.value))}
         value={value ?? 0}
         onSearch={onSearch}
         onChange={onChange}
@@ -245,9 +242,6 @@ export class Search extends Component<any, SearchState> {
 
   state: SearchState = {
     resolveObjectRes: EMPTY_REQUEST,
-    creatorDetailsRes: EMPTY_REQUEST,
-    communitiesRes: EMPTY_REQUEST,
-    communityRes: EMPTY_REQUEST,
     siteRes: this.isoData.site_res,
     creatorSearchOptions: [],
     communitySearchOptions: [],
@@ -269,10 +263,7 @@ export class Search extends Component<any, SearchState> {
 
     const { q } = getSearchQueryParams();
 
-    this.state = {
-      ...this.state,
-      searchText: q,
-    };
+    this.state.searchText = q;
 
     // Only fetch the data if coming from another route
     if (FirstLoadService.isFirstLoad) {
@@ -284,78 +275,107 @@ export class Search extends Component<any, SearchState> {
         searchResponse: searchRes,
       } = this.isoData.routeData;
 
-      this.state = {
-        ...this.state,
-        isIsomorphic: true,
-      };
+      this.state.isIsomorphic = true;
 
       if (creatorDetailsRes?.state === "success") {
-        this.state = {
-          ...this.state,
-          creatorSearchOptions:
-            creatorDetailsRes?.state === "success"
-              ? [personToChoice(creatorDetailsRes.data.person_view)]
-              : [],
-          creatorDetailsRes,
-        };
+        this.state.creatorSearchOptions =
+          creatorDetailsRes.state === "success"
+            ? [personToChoice(creatorDetailsRes.data.person_view)]
+            : [];
       }
 
       if (communitiesRes?.state === "success") {
-        this.state = {
-          ...this.state,
-          communitiesRes,
-        };
+        this.state.communitySearchOptions =
+          communitiesRes.data.communities.map(communityToChoice);
       }
 
       if (communityRes?.state === "success") {
-        this.state = {
-          ...this.state,
-          communityRes,
-        };
+        this.state.communitySearchOptions.unshift(
+          communityToChoice(communityRes.data.community_view),
+        );
       }
 
-      if (q !== "") {
-        this.state = {
-          ...this.state,
-        };
+      if (searchRes?.state === "success") {
+        this.state.searchRes = searchRes;
+      }
 
-        if (searchRes?.state === "success") {
-          this.state = {
-            ...this.state,
-            searchRes,
-          };
-        }
-
-        if (resolveObjectRes?.state === "success") {
-          this.state = {
-            ...this.state,
-            resolveObjectRes,
-          };
-        }
+      if (resolveObjectRes?.state === "success") {
+        this.state.resolveObjectRes = resolveObjectRes;
       }
     }
   }
 
   async componentDidMount() {
     if (!this.state.isIsomorphic) {
-      const promises = [this.fetchCommunities()];
+      this.setState({
+        searchCommunitiesLoading: true,
+        searchCreatorLoading: true,
+      });
+
+      const promises = [
+        HttpService.client
+          .listCommunities({
+            type_: defaultListingType,
+            sort: defaultSortType,
+            limit: fetchLimit,
+          })
+          .then(res => {
+            if (res.state === "success") {
+              this.setState({
+                communitySearchOptions:
+                  res.data.communities.map(communityToChoice),
+              });
+            }
+          }),
+      ];
+
+      const { communityId, creatorId } = getSearchQueryParams();
+
+      if (communityId) {
+        promises.push(
+          HttpService.client.getCommunity({ id: communityId }).then(res => {
+            if (res.state === "success") {
+              this.setState(prev => {
+                prev.communitySearchOptions.unshift(
+                  communityToChoice(res.data.community_view),
+                );
+
+                return prev;
+              });
+            }
+          }),
+        );
+      }
+
+      if (creatorId) {
+        promises.push(
+          HttpService.client
+            .getPersonDetails({
+              person_id: creatorId,
+            })
+            .then(res => {
+              if (res.state === "success") {
+                this.setState(prev => {
+                  prev.creatorSearchOptions.push(
+                    personToChoice(res.data.person_view),
+                  );
+                });
+              }
+            }),
+        );
+      }
+
       if (this.state.searchText) {
         promises.push(this.search());
       }
 
       await Promise.all(promises);
-    }
-  }
 
-  async fetchCommunities() {
-    this.setState({ communitiesRes: LOADING_REQUEST });
-    this.setState({
-      communitiesRes: await HttpService.client.listCommunities({
-        type_: defaultListingType,
-        sort: defaultSortType,
-        limit: fetchLimit,
-      }),
-    });
+      this.setState({
+        searchCommunitiesLoading: false,
+        searchCreatorLoading: false,
+      });
+    }
   }
 
   componentWillUnmount() {
@@ -368,26 +388,20 @@ export class Search extends Component<any, SearchState> {
   }: InitialFetchRequest<QueryParams<SearchProps>>): Promise<SearchData> {
     const community_id = getIdFromString(communityId);
     let communityResponse: RequestState<GetCommunityResponse> = EMPTY_REQUEST;
-    let listCommunitiesResponse: RequestState<ListCommunitiesResponse> =
-      EMPTY_REQUEST;
     if (community_id) {
       const getCommunityForm: GetCommunity = {
         id: community_id,
       };
 
       communityResponse = await client.getCommunity(getCommunityForm);
-    } else {
-      const listCommunitiesForm: ListCommunities = {
-        type_: defaultListingType,
-        sort: defaultSortType,
-        limit: fetchLimit,
-      };
-
-      listCommunitiesResponse = await client.listCommunities(
-        listCommunitiesForm,
-      );
     }
 
+    const listCommunitiesResponse = await client.listCommunities({
+      type_: defaultListingType,
+      sort: defaultSortType,
+      limit: fetchLimit,
+    });
+
     const creator_id = getIdFromString(creatorId);
     let creatorDetailsResponse: RequestState<GetPersonDetailsResponse> =
       EMPTY_REQUEST;
@@ -417,21 +431,19 @@ export class Search extends Component<any, SearchState> {
         limit: fetchLimit,
       };
 
-      if (query !== "") {
-        searchResponse = await client.search(form);
-        if (myAuth()) {
-          const resolveObjectForm: ResolveObject = {
-            q: query,
-          };
-          resolveObjectResponse = await HttpService.silent_client.resolveObject(
-            resolveObjectForm,
-          );
+      searchResponse = await client.search(form);
+      if (myAuth()) {
+        const resolveObjectForm: ResolveObject = {
+          q: query,
+        };
+        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 = EMPTY_REQUEST;
-          }
+        // 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 = EMPTY_REQUEST;
         }
       }
     }
@@ -541,13 +553,8 @@ export class Search extends Component<any, SearchState> {
       creatorSearchOptions,
       searchCommunitiesLoading,
       searchCreatorLoading,
-      communitiesRes,
     } = this.state;
 
-    const hasCommunities =
-      communitiesRes.state === "success" &&
-      communitiesRes.data.communities.length > 0;
-
     return (
       <>
         <div className="row row-cols-auto g-2 g-sm-3 mb-2 mb-sm-3">
@@ -588,16 +595,14 @@ export class Search extends Component<any, SearchState> {
           </div>
         </div>
         <div className="row gy-2 gx-4 mb-3">
-          {hasCommunities && (
-            <Filter
-              filterType="community"
-              onChange={this.handleCommunityFilterChange}
-              onSearch={this.handleCommunitySearch}
-              options={communitySearchOptions}
-              value={communityId}
-              loading={searchCommunitiesLoading}
-            />
-          )}
+          <Filter
+            filterType="community"
+            onChange={this.handleCommunityFilterChange}
+            onSearch={this.handleCommunitySearch}
+            options={communitySearchOptions}
+            value={communityId}
+            loading={searchCommunitiesLoading}
+          />
           <Filter
             filterType="creator"
             onChange={this.handleCreatorFilterChange}
@@ -976,55 +981,41 @@ export class Search extends Component<any, SearchState> {
   }
 
   handleCreatorSearch = debounce(async (text: string) => {
-    const { creatorId } = getSearchQueryParams();
-    const { creatorSearchOptions } = this.state;
-    const newOptions: Choice[] = [];
-
-    this.setState({ searchCreatorLoading: true });
-
-    const selectedChoice = creatorSearchOptions.find(
-      choice => getIdFromString(choice.value) === creatorId,
-    );
-
-    if (selectedChoice) {
-      newOptions.push(selectedChoice);
-    }
-
     if (text.length > 0) {
-      newOptions.push(...(await fetchUsers(text)).map(personToChoice));
-    }
+      const { creatorId } = getSearchQueryParams();
+      const { creatorSearchOptions } = this.state;
 
-    this.setState({
-      searchCreatorLoading: false,
-      creatorSearchOptions: newOptions,
-    });
+      this.setState({ searchCreatorLoading: true });
+
+      const newOptions = creatorSearchOptions
+        .filter(choice => getIdFromString(choice.value) === creatorId)
+        .concat((await fetchUsers(text)).map(personToChoice));
+
+      this.setState({
+        searchCreatorLoading: false,
+        creatorSearchOptions: newOptions,
+      });
+    }
   });
 
   handleCommunitySearch = debounce(async (text: string) => {
-    const { communityId } = getSearchQueryParams();
-    const { communitySearchOptions } = this.state;
-    this.setState({
-      searchCommunitiesLoading: true,
-    });
-
-    const newOptions: Choice[] = [];
-
-    const selectedChoice = communitySearchOptions.find(
-      choice => getIdFromString(choice.value) === communityId,
-    );
-
-    if (selectedChoice) {
-      newOptions.push(selectedChoice);
-    }
-
     if (text.length > 0) {
-      newOptions.push(...(await fetchCommunities(text)).map(communityToChoice));
-    }
+      const { communityId } = getSearchQueryParams();
+      const { communitySearchOptions } = this.state;
 
-    this.setState({
-      searchCommunitiesLoading: false,
-      communitySearchOptions: newOptions,
-    });
+      this.setState({
+        searchCommunitiesLoading: true,
+      });
+
+      const newOptions = communitySearchOptions
+        .filter(choice => getIdFromString(choice.value) === communityId)
+        .concat((await fetchCommunities(text)).map(communityToChoice));
+
+      this.setState({
+        searchCommunitiesLoading: false,
+        communitySearchOptions: newOptions,
+      });
+    }
   });
 
   handleSortChange(sort: SortType) {

src/shared/utils/helpers/dedup-by-property.ts

@@ -0,0 +1,22 @@
+function dedupByProperty<
+  T extends Record<string, any>,
+  R extends number | string | boolean,
+>(collection: T[], keyFn: (obj: T) => R) {
+  return collection.reduce(
+    (acc, cur) => {
+      const key = keyFn(cur);
+      if (!acc.foundSet.has(key)) {
+        acc.output.push(cur);
+        acc.foundSet.add(key);
+      }
+
+      return acc;
+    },
+    {
+      output: [] as T[],
+      foundSet: new Set<R>(),
+    },
+  ).output;
+}
+
+export default dedupByProperty;

src/shared/utils/helpers/index.ts

@@ -22,6 +22,7 @@ import validEmail from "./valid-email";
 import validInstanceTLD from "./valid-instance-tld";
 import validTitle from "./valid-title";
 import validURL from "./valid-url";
+import dedupByProperty from "./dedup-by-property";
 
 export {
   capitalizeFirstLetter,
@@ -48,4 +49,5 @@ export {
   validInstanceTLD,
   validTitle,
   validURL,
+  dedupByProperty,
 };