Adding listing_type to search. #143 (#264)

* Adding listing_type to search. #143

* Adding async community searching. Fixes #262

* Some search additions.

- Adding an async community picker.
- Adding community_id to search page.

* Adding creator search.

* Accidentally removed line.

package.json

@@ -68,7 +68,7 @@
     "eslint-plugin-prettier": "^3.3.1",
     "husky": "^6.0.0",
     "iso-639-1": "^2.1.9",
-    "lemmy-js-client": "0.11.0-rc.6",
+    "lemmy-js-client": "0.11.0-rc.9",
     "lint-staged": "^10.5.4",
     "mini-css-extract-plugin": "^1.4.1",
     "node-fetch": "^2.6.1",

src/shared/components/communities.tsx

@@ -273,7 +273,7 @@ export class Communities extends Component<any, CommunitiesState> {
   handleSearchSubmit(i: Communities) {
     const searchParamEncoded = encodeURIComponent(i.state.searchText);
     i.context.router.history.push(
-      `/search/q/${searchParamEncoded}/type/Communities/sort/TopAll/page/1`
+      `/search/q/${searchParamEncoded}/type/Communities/sort/TopAll/listing_type/All/community_id/0/creator_id/0/page/1`
     );
   }
 

src/shared/components/create-post.tsx

@@ -5,6 +5,7 @@ import { HtmlTags } from "./html-tags";
 import { Spinner } from "./icon";
 import {
   authField,
+  fetchLimit,
   isBrowser,
   setIsoData,
   setOptionalAuth,
@@ -24,6 +25,8 @@ import {
   SortType,
   ListingType,
   PostView,
+  GetCommunity,
+  GetCommunityResponse,
 } from "lemmy-js-client";
 import { i18n } from "../i18next";
 import { InitialFetchRequest, PostFormParams } from "shared/interfaces";
@@ -66,15 +69,27 @@ export class CreatePost extends Component<any, CreatePostState> {
   }
 
   refetch() {
-    let listCommunitiesForm: ListCommunities = {
+    if (this.params.community_id) {
-      type_: ListingType.All,
+      let form: GetCommunity = {
-      sort: SortType.TopAll,
+        id: this.params.community_id,
-      limit: 9999,
+      };
-      auth: authField(false),
+      WebSocketService.Instance.send(wsClient.getCommunity(form));
-    };
+    } else if (this.params.community_name) {
-    WebSocketService.Instance.send(
+      let form: GetCommunity = {
-      wsClient.listCommunities(listCommunitiesForm)
+        name: this.params.community_name,
-    );
+      };
+      WebSocketService.Instance.send(wsClient.getCommunity(form));
+    } else {
+      let listCommunitiesForm: ListCommunities = {
+        type_: ListingType.All,
+        sort: SortType.TopAll,
+        limit: fetchLimit,
+        auth: authField(false),
+      };
+      WebSocketService.Instance.send(
+        wsClient.listCommunities(listCommunitiesForm)
+      );
+    }
   }
 
   componentWillUnmount() {
@@ -163,7 +178,7 @@ export class CreatePost extends Component<any, CreatePostState> {
     let listCommunitiesForm: ListCommunities = {
       type_: ListingType.All,
       sort: SortType.TopAll,
-      limit: 9999,
+      limit: fetchLimit,
     };
     setOptionalAuth(listCommunitiesForm, req.auth);
     return [req.client.listCommunities(listCommunitiesForm)];
@@ -180,6 +195,11 @@ export class CreatePost extends Component<any, CreatePostState> {
       this.state.communities = data.communities;
       this.state.loading = false;
       this.setState(this.state);
+    } else if (op == UserOperation.GetCommunity) {
+      let data = wsJsonToRes<GetCommunityResponse>(msg).data;
+      this.state.communities = [data.community_view];
+      this.state.loading = false;
+      this.setState(this.state);
     }
   }
 }

src/shared/components/main.tsx

@@ -60,6 +60,7 @@ import {
   authField,
   saveScrollPosition,
   restoreScrollPosition,
+  showLocal,
 } from "../utils";
 import { i18n } from "../i18next";
 import { T } from "inferno-i18next";
@@ -588,7 +589,7 @@ export class Main extends Component<any, MainState> {
         <span class="mr-3">
           <ListingTypeSelect
             type_={this.state.listingType}
-            showLocal={this.showLocal}
+            showLocal={showLocal(this.isoData)}
             onChange={this.handleListingTypeChange}
           />
         </span>
@@ -650,10 +651,6 @@ export class Main extends Component<any, MainState> {
     );
   }
 
-  get showLocal(): boolean {
-    return this.isoData.site_res.federated_instances?.linked.length > 0;
-  }
-
   get canAdmin(): boolean {
     return (
       UserService.Instance.localUserView &&

src/shared/components/navbar.tsx

@@ -134,7 +134,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
     } else {
       const searchParamEncoded = encodeURIComponent(searchParam);
       this.context.router.history.push(
-        `/search/q/${searchParamEncoded}/type/All/sort/TopAll/page/1`
+        `/search/q/${searchParamEncoded}/type/All/sort/TopAll/listing_type/All/community_id/0/creator_id/0/page/1`
       );
     }
   }

src/shared/components/person.tsx

@@ -49,6 +49,7 @@ import {
   setOptionalAuth,
   saveScrollPosition,
   restoreScrollPosition,
+  showLocal,
 } from "../utils";
 import { PersonListing } from "./person-listing";
 import { HtmlTags } from "./html-tags";
@@ -655,9 +656,7 @@ export class Person extends Component<any, PersonState> {
                   this.state.saveUserSettingsForm.default_listing_type
                 ]
               }
-              showLocal={
+              showLocal={showLocal(this.isoData)}
-                this.state.siteRes.federated_instances?.linked.length > 0
-              }
               onChange={this.handleUserSettingsListingTypeChange}
             />
           </form>

src/shared/components/post-form.tsx

@@ -15,6 +15,7 @@ import {
   Search,
   SearchType,
   SearchResponse,
+  ListingType,
 } from "lemmy-js-client";
 import { WebSocketService, UserService } from "../services";
 import { PostFormParams } from "../interfaces";
@@ -36,6 +37,9 @@ import {
   wsUserOp,
   wsClient,
   authField,
+  communityToChoice,
+  fetchCommunities,
+  choicesConfig,
 } from "../utils";
 import autosize from "autosize";
 
@@ -406,6 +410,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
         q: this.state.postForm.url,
         type_: SearchType.Url,
         sort: SortType.TopAll,
+        listing_type: ListingType.All,
         page: 1,
         limit: 6,
         auth: authField(false),
@@ -435,6 +440,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
       q: this.state.postForm.name,
       type_: SearchType.Posts,
       sort: SortType.TopAll,
+      listing_type: ListingType.All,
       community_id: this.state.postForm.community_id,
       page: 1,
       limit: 6,
@@ -536,37 +542,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
     if (isBrowser()) {
       let selectId: any = document.getElementById("post-community");
       if (selectId) {
-        this.choices = new Choices(selectId, {
+        this.choices = new Choices(selectId, choicesConfig);
-          shouldSort: false,
-          classNames: {
-            containerOuter: "choices",
-            containerInner: "choices__inner bg-light border-0",
-            input: "form-control",
-            inputCloned: "choices__input--cloned",
-            list: "choices__list",
-            listItems: "choices__list--multiple",
-            listSingle: "choices__list--single",
-            listDropdown: "choices__list--dropdown",
-            item: "choices__item bg-light",
-            itemSelectable: "choices__item--selectable",
-            itemDisabled: "choices__item--disabled",
-            itemChoice: "choices__item--choice",
-            placeholder: "choices__placeholder",
-            group: "choices__group",
-            groupHeading: "choices__heading",
-            button: "choices__button",
-            activeState: "is-active",
-            focusState: "is-focused",
-            openState: "is-open",
-            disabledState: "is-disabled",
-            highlightedState: "text-info",
-            selectedState: "text-info",
-            flippedState: "is-flipped",
-            loadingState: "is-loading",
-            noResults: "has-no-results",
-            noChoices: "has-no-choices",
-          },
-        });
         this.choices.passedElement.element.addEventListener(
           "choice",
           (e: any) => {
@@ -575,6 +551,20 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
           },
           false
         );
+        this.choices.passedElement.element.addEventListener(
+          "search",
+          debounce(async (e: any) => {
+            let communities = (await fetchCommunities(e.detail.value))
+              .communities;
+            this.choices.setChoices(
+              communities.map(cv => communityToChoice(cv)),
+              "value",
+              "label",
+              true
+            );
+          }, 400),
+          false
+        );
       }
     }
 

src/shared/components/post.tsx

@@ -21,6 +21,7 @@ import {
   SearchResponse,
   GetSiteResponse,
   GetCommunityResponse,
+  ListingType,
 } from "lemmy-js-client";
 import {
   CommentSortType,
@@ -132,6 +133,7 @@ export class Post extends Component<any, PostState> {
         q: this.state.postRes.post_view.post.url,
         type_: SearchType.Url,
         sort: SortType.TopAll,
+        listing_type: ListingType.All,
         page: 1,
         limit: 6,
         auth: authField(false),

src/shared/components/search.tsx

@@ -13,6 +13,11 @@ import {
   PostResponse,
   CommentResponse,
   Site,
+  ListingType,
+  ListCommunities,
+  ListCommunitiesResponse,
+  GetCommunity,
+  GetPersonDetails,
 } from "lemmy-js-client";
 import { WebSocketService } from "../services";
 import {
@@ -32,6 +37,17 @@ import {
   setOptionalAuth,
   saveScrollPosition,
   restoreScrollPosition,
+  routeListingTypeToEnum,
+  showLocal,
+  isBrowser,
+  choicesConfig,
+  debounce,
+  fetchCommunities,
+  communityToChoice,
+  hostname,
+  fetchUsers,
+  personToChoice,
+  capitalizeFirstLetter,
 } from "../utils";
 import { PostListing } from "./post-listing";
 import { HtmlTags } from "./html-tags";
@@ -39,14 +55,23 @@ import { Spinner } from "./icon";
 import { PersonListing } from "./person-listing";
 import { CommunityLink } from "./community-link";
 import { SortSelect } from "./sort-select";
+import { ListingTypeSelect } from "./listing-type-select";
 import { CommentNodes } from "./comment-nodes";
 import { i18n } from "../i18next";
 import { InitialFetchRequest } from "shared/interfaces";
 
+var Choices;
+if (isBrowser()) {
+  Choices = require("choices.js");
+}
+
 interface SearchProps {
   q: string;
   type_: SearchType;
   sort: SortType;
+  listingType: ListingType;
+  communityId: number;
+  creatorId: number;
   page: number;
 }
 
@@ -54,8 +79,13 @@ interface SearchState {
   q: string;
   type_: SearchType;
   sort: SortType;
+  listingType: ListingType;
+  communityId: number;
+  creatorId: number;
   page: number;
   searchResponse: SearchResponse;
+  communities: CommunityView[];
+  creator?: PersonViewSafe;
   loading: boolean;
   site: Site;
   searchText: string;
@@ -65,18 +95,30 @@ interface UrlParams {
   q?: string;
   type_?: SearchType;
   sort?: SortType;
+  listingType?: ListingType;
+  communityId?: number;
+  creatorId?: number;
   page?: number;
 }
 
 export class Search extends Component<any, SearchState> {
   private isoData = setIsoData(this.context);
+  private communityChoices: any;
+  private creatorChoices: any;
   private subscription: Subscription;
   private emptyState: SearchState = {
     q: Search.getSearchQueryFromProps(this.props.match.params.q),
     type_: Search.getSearchTypeFromProps(this.props.match.params.type),
     sort: Search.getSortTypeFromProps(this.props.match.params.sort),
+    listingType: Search.getListingTypeFromProps(
+      this.props.match.params.listing_type
+    ),
     page: Search.getPageFromProps(this.props.match.params.page),
     searchText: Search.getSearchQueryFromProps(this.props.match.params.q),
+    communityId: Search.getCommunityIdFromProps(
+      this.props.match.params.community_id
+    ),
+    creatorId: Search.getCreatorIdFromProps(this.props.match.params.creator_id),
     searchResponse: {
       type_: null,
       posts: [],
@@ -86,6 +128,7 @@ export class Search extends Component<any, SearchState> {
     },
     loading: true,
     site: this.isoData.site_res.site_view.site,
+    communities: [],
   };
 
   static getSearchQueryFromProps(q: string): string {
@@ -100,6 +143,18 @@ export class Search extends Component<any, SearchState> {
     return sort ? routeSortTypeToEnum(sort) : SortType.TopAll;
   }
 
+  static getListingTypeFromProps(listingType: string): ListingType {
+    return listingType ? routeListingTypeToEnum(listingType) : ListingType.All;
+  }
+
+  static getCommunityIdFromProps(id: string): number {
+    return id ? Number(id) : 0;
+  }
+
+  static getCreatorIdFromProps(id: string): number {
+    return id ? Number(id) : 0;
+  }
+
   static getPageFromProps(page: string): number {
     return page ? Number(page) : 1;
   }
@@ -109,18 +164,33 @@ export class Search extends Component<any, SearchState> {
 
     this.state = this.emptyState;
     this.handleSortChange = this.handleSortChange.bind(this);
+    this.handleListingTypeChange = this.handleListingTypeChange.bind(this);
 
     this.parseMessage = this.parseMessage.bind(this);
     this.subscription = wsSubscribe(this.parseMessage);
 
     // Only fetch the data if coming from another route
-    if (this.state.q != "") {
+    if (this.isoData.path == this.context.router.route.match.url) {
-      if (this.isoData.path == this.context.router.route.match.url) {
+      let singleOrMultipleCommunities = this.isoData.routeData[0];
-        this.state.searchResponse = this.isoData.routeData[0];
+      if (singleOrMultipleCommunities.communities) {
+        this.state.communities = this.isoData.routeData[0].communities;
+      } else {
+        this.state.communities = [this.isoData.routeData[0].community_view];
+      }
+
+      let creator = this.isoData.routeData[1];
+      if (creator?.person_view) {
+        this.state.creator = this.isoData.routeData[1].person_view;
+      }
+      if (this.state.q != "") {
+        this.state.searchResponse = this.isoData.routeData[2];
         this.state.loading = false;
       } else {
         this.search();
       }
+    } else {
+      this.fetchCommunities();
+      this.search();
     }
   }
 
@@ -129,26 +199,85 @@ export class Search extends Component<any, SearchState> {
     saveScrollPosition(this.context);
   }
 
+  componentDidMount() {
+    this.setupCommunityFilter();
+    this.setupCreatorFilter();
+  }
+
   static getDerivedStateFromProps(props: any): SearchProps {
     return {
       q: Search.getSearchQueryFromProps(props.match.params.q),
       type_: Search.getSearchTypeFromProps(props.match.params.type),
       sort: Search.getSortTypeFromProps(props.match.params.sort),
+      listingType: Search.getListingTypeFromProps(
+        props.match.params.listing_type
+      ),
+      communityId: Search.getCommunityIdFromProps(
+        props.match.params.community_id
+      ),
+      creatorId: Search.getCreatorIdFromProps(props.match.params.creator_id),
       page: Search.getPageFromProps(props.match.params.page),
     };
   }
 
+  fetchCommunities() {
+    let listCommunitiesForm: ListCommunities = {
+      type_: ListingType.All,
+      sort: SortType.TopAll,
+      limit: fetchLimit,
+      auth: authField(false),
+    };
+    WebSocketService.Instance.send(
+      wsClient.listCommunities(listCommunitiesForm)
+    );
+  }
+
   static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
     let pathSplit = req.path.split("/");
     let promises: Promise<any>[] = [];
 
+    let communityId = this.getCommunityIdFromProps(pathSplit[11]);
+    if (communityId !== 0) {
+      let getCommunityForm: GetCommunity = {
+        id: communityId,
+      };
+      setOptionalAuth(getCommunityForm, req.auth);
+      promises.push(req.client.getCommunity(getCommunityForm));
+    } else {
+      let listCommunitiesForm: ListCommunities = {
+        type_: ListingType.All,
+        sort: SortType.TopAll,
+        limit: fetchLimit,
+      };
+      setOptionalAuth(listCommunitiesForm, req.auth);
+      promises.push(req.client.listCommunities(listCommunitiesForm));
+    }
+
+    let creatorId = this.getCreatorIdFromProps(pathSplit[13]);
+    if (creatorId !== 0) {
+      let getCreatorForm: GetPersonDetails = {
+        person_id: creatorId,
+      };
+      setOptionalAuth(getCreatorForm, req.auth);
+      promises.push(req.client.getPersonDetails(getCreatorForm));
+    } else {
+      promises.push(Promise.resolve());
+    }
+
     let form: SearchForm = {
       q: this.getSearchQueryFromProps(pathSplit[3]),
       type_: this.getSearchTypeFromProps(pathSplit[5]),
       sort: this.getSortTypeFromProps(pathSplit[7]),
-      page: this.getPageFromProps(pathSplit[9]),
+      listing_type: this.getListingTypeFromProps(pathSplit[9]),
+      page: this.getPageFromProps(pathSplit[15]),
       limit: fetchLimit,
     };
+    if (communityId !== 0) {
+      form.community_id = communityId;
+    }
+    if (creatorId !== 0) {
+      form.creator_id = creatorId;
+    }
     setOptionalAuth(form, req.auth);
 
     if (form.q != "") {
@@ -163,6 +292,9 @@ export class Search extends Component<any, SearchState> {
       lastState.q !== this.state.q ||
       lastState.type_ !== this.state.type_ ||
       lastState.sort !== this.state.sort ||
+      lastState.listingType !== this.state.listingType ||
+      lastState.communityId !== this.state.communityId ||
+      lastState.creatorId !== this.state.creatorId ||
       lastState.page !== this.state.page
     ) {
       this.setState({ loading: true, searchText: this.state.q });
@@ -242,6 +374,13 @@ export class Search extends Component<any, SearchState> {
           </option>
           <option value={SearchType.Users}>{i18n.t("users")}</option>
         </select>
+        <span class="ml-2">
+          <ListingTypeSelect
+            type_={this.state.listingType}
+            showLocal={showLocal(this.isoData)}
+            onChange={this.handleListingTypeChange}
+          />
+        </span>
         <span class="ml-2">
           <SortSelect
             sort={this.state.sort}
@@ -250,6 +389,10 @@ export class Search extends Component<any, SearchState> {
             hideMostComments
           />
         </span>
+        <div class="form-row">
+          {this.state.communities.length > 0 && this.communityFilter()}
+          {this.creatorFilter()}
+        </div>
       </div>
     );
   }
@@ -413,6 +556,60 @@ export class Search extends Component<any, SearchState> {
     );
   }
 
+  communityFilter() {
+    return (
+      <div class="form-group col-sm-6">
+        <label class="col-form-label" htmlFor="community-filter">
+          {i18n.t("community")}
+        </label>
+        <div>
+          <select
+            class="form-control"
+            id="community-filter"
+            value={this.state.communityId}
+          >
+            <option value="0">{i18n.t("all")}</option>
+            {this.state.communities.map(cv => (
+              <option value={cv.community.id}>
+                {cv.community.local
+                  ? cv.community.name
+                  : `${hostname(cv.community.actor_id)}/${cv.community.name}`}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+    );
+  }
+
+  creatorFilter() {
+    return (
+      <div class="form-group col-sm-6">
+        <label class="col-form-label" htmlFor="creator-filter">
+          {capitalizeFirstLetter(i18n.t("creator"))}
+        </label>
+        <div>
+          <select
+            class="form-control"
+            id="creator-filter"
+            value={this.state.creatorId}
+          >
+            <option value="0">{i18n.t("all")}</option>
+            {this.state.creator && (
+              <option value={this.state.creator.person.id}>
+                {this.state.creator.person.local
+                  ? this.state.creator.person.name
+                  : `${hostname(this.state.creator.person.actor_id)}/${
+                      this.state.creator.person.name
+                    }`}
+              </option>
+            )}
+          </select>
+        </div>
+      </div>
+    );
+  }
+
   paginator() {
     return (
       <div class="mt-2">
@@ -460,16 +657,76 @@ export class Search extends Component<any, SearchState> {
       q: this.state.q,
       type_: this.state.type_,
       sort: this.state.sort,
+      listing_type: this.state.listingType,
       page: this.state.page,
       limit: fetchLimit,
       auth: authField(false),
     };
+    if (this.state.communityId !== 0) {
+      form.community_id = this.state.communityId;
+    }
+    if (this.state.creatorId !== 0) {
+      form.creator_id = this.state.creatorId;
+    }
 
     if (this.state.q != "") {
       WebSocketService.Instance.send(wsClient.search(form));
     }
   }
 
+  setupCommunityFilter() {
+    if (isBrowser()) {
+      let selectId: any = document.getElementById("community-filter");
+      if (selectId) {
+        this.communityChoices = new Choices(selectId, choicesConfig);
+        this.communityChoices.passedElement.element.addEventListener(
+          "choice",
+          (e: any) => {
+            this.handleCommunityFilterChange(Number(e.detail.choice.value));
+          },
+          false
+        );
+        this.communityChoices.passedElement.element.addEventListener(
+          "search",
+          debounce(async (e: any) => {
+            let communities = (await fetchCommunities(e.detail.value))
+              .communities;
+            let choices = communities.map(cv => communityToChoice(cv));
+            choices.unshift({ value: "0", label: i18n.t("all") });
+            this.communityChoices.setChoices(choices, "value", "label", true);
+          }, 400),
+          false
+        );
+      }
+    }
+  }
+
+  setupCreatorFilter() {
+    if (isBrowser()) {
+      let selectId: any = document.getElementById("creator-filter");
+      if (selectId) {
+        this.creatorChoices = new Choices(selectId, choicesConfig);
+        this.creatorChoices.passedElement.element.addEventListener(
+          "choice",
+          (e: any) => {
+            this.handleCreatorFilterChange(Number(e.detail.choice.value));
+          },
+          false
+        );
+        this.creatorChoices.passedElement.element.addEventListener(
+          "search",
+          debounce(async (e: any) => {
+            let creators = (await fetchUsers(e.detail.value)).users;
+            let choices = creators.map(pvs => personToChoice(pvs));
+            choices.unshift({ value: "0", label: i18n.t("all") });
+            this.creatorChoices.setChoices(choices, "value", "label", true);
+          }, 400),
+          false
+        );
+      }
+    }
+  }
+
   handleSortChange(val: SortType) {
     this.updateUrl({ sort: val, page: 1 });
   }
@@ -481,11 +738,35 @@ export class Search extends Component<any, SearchState> {
     });
   }
 
+  handleListingTypeChange(val: ListingType) {
+    this.updateUrl({
+      listingType: val,
+      page: 1,
+    });
+  }
+
+  handleCommunityFilterChange(communityId: number) {
+    this.updateUrl({
+      communityId,
+      page: 1,
+    });
+  }
+
+  handleCreatorFilterChange(creatorId: number) {
+    this.updateUrl({
+      creatorId,
+      page: 1,
+    });
+  }
+
   handleSearchSubmit(i: Search, event: any) {
     event.preventDefault();
     i.updateUrl({
       q: i.state.searchText,
       type_: i.state.type_,
+      listingType: i.state.listingType,
+      communityId: i.state.communityId,
+      creatorId: i.state.creatorId,
       sort: i.state.sort,
       page: i.state.page,
     });
@@ -499,10 +780,19 @@ export class Search extends Component<any, SearchState> {
     const qStr = paramUpdates.q || this.state.q;
     const qStrEncoded = encodeURIComponent(qStr);
     const typeStr = paramUpdates.type_ || this.state.type_;
+    const listingTypeStr = paramUpdates.listingType || this.state.listingType;
     const sortStr = paramUpdates.sort || this.state.sort;
+    const communityId =
+      paramUpdates.communityId == 0
+        ? 0
+        : paramUpdates.communityId || this.state.communityId;
+    const creatorId =
+      paramUpdates.creatorId == 0
+        ? 0
+        : paramUpdates.creatorId || this.state.creatorId;
     const page = paramUpdates.page || this.state.page;
     this.props.history.push(
-      `/search/q/${qStrEncoded}/type/${typeStr}/sort/${sortStr}/page/${page}`
+      `/search/q/${qStrEncoded}/type/${typeStr}/sort/${sortStr}/listing_type/${listingTypeStr}/community_id/${communityId}/creator_id/${creatorId}/page/${page}`
     );
   }
 
@@ -530,6 +820,11 @@ export class Search extends Component<any, SearchState> {
       let data = wsJsonToRes<PostResponse>(msg).data;
       createPostLikeFindRes(data.post_view, this.state.searchResponse.posts);
       this.setState(this.state);
+    } else if (op == UserOperation.ListCommunities) {
+      let data = wsJsonToRes<ListCommunitiesResponse>(msg).data;
+      this.state.communities = data.communities;
+      this.setState(this.state);
+      this.setupCommunityFilter();
     }
   }
 }

src/shared/components/site-form.tsx

@@ -3,7 +3,7 @@ import { Prompt } from "inferno-router";
 import { MarkdownTextArea } from "./markdown-textarea";
 import { Spinner } from "./icon";
 import { ImageUploadForm } from "./image-upload-form";
-import { Site, EditSite } from "lemmy-js-client";
+import { Site, EditSite, CreateSite } from "lemmy-js-client";
 import { WebSocketService } from "../services";
 import {
   authField,
@@ -250,7 +250,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
     if (i.props.site) {
       WebSocketService.Instance.send(wsClient.editSite(i.state.siteForm));
     } else {
-      WebSocketService.Instance.send(wsClient.createSite(i.state.siteForm));
+      let form: CreateSite = {
+        name: i.state.siteForm.name || "My site",
+        ...i.state.siteForm,
+      };
+      WebSocketService.Instance.send(wsClient.createSite(form));
     }
     i.setState(i.state);
   }

src/shared/routes.ts

@@ -133,7 +133,7 @@ export const routes: IRoutePropsWithFetch[] = [
     fetchInitialData: req => AdminSettings.fetchInitialData(req),
   },
   {
-    path: `/search/q/:q/type/:type/sort/:sort/page/:page`,
+    path: `/search/q/:q/type/:type/sort/:sort/listing_type/:listing_type/community_id/:community_id/creator_id/:creator_id/page/:page`,
     component: Search,
     fetchInitialData: req => Search.fetchInitialData(req),
   },

src/shared/utils.ts

@@ -46,6 +46,7 @@ import {
   LemmyWebsocket,
   PersonViewSafe,
   CommunityView,
+  LemmyHttp,
 } from "lemmy-js-client";
 
 import {
@@ -70,6 +71,7 @@ import moment from "moment";
 import { Subscription } from "rxjs";
 import { retryWhen, delay, take } from "rxjs/operators";
 import { i18n } from "./i18next";
+import { httpBase } from "./env";
 
 export const wsClient = new LemmyWebsocket();
 
@@ -747,6 +749,7 @@ function personSearch(text: string, cb: (persons: PersonTribute[]) => any) {
       q: text,
       type_: SearchType.Users,
       sort: SortType.TopAll,
+      listing_type: ListingType.All,
       page: 1,
       limit: mentionDropdownFetchLimit,
       auth: authField(false),
@@ -792,6 +795,7 @@ function communitySearch(
       q: text,
       type_: SearchType.Communities,
       sort: SortType.TopAll,
+      listing_type: ListingType.All,
       page: 1,
       limit: mentionDropdownFetchLimit,
       auth: authField(false),
@@ -1226,3 +1230,89 @@ export function restoreScrollPosition(context: any) {
   let y = Number(sessionStorage.getItem(`scrollPosition_${path}`));
   window.scrollTo(0, y);
 }
+
+export function showLocal(isoData: IsoData): boolean {
+  return isoData.site_res.federated_instances?.linked.length > 0;
+}
+
+interface ChoicesValue {
+  value: string;
+  label: string;
+}
+
+export function communityToChoice(cv: CommunityView): ChoicesValue {
+  let choice: ChoicesValue = {
+    value: cv.community.id.toString(),
+    label: cv.community.name,
+  };
+  return choice;
+}
+
+export function personToChoice(pvs: PersonViewSafe): ChoicesValue {
+  let choice: ChoicesValue = {
+    value: pvs.person.id.toString(),
+    label: pvs.person.name,
+  };
+  return choice;
+}
+
+export async function fetchCommunities(q: string) {
+  let form: Search = {
+    q,
+    type_: SearchType.Communities,
+    sort: SortType.TopAll,
+    listing_type: ListingType.All,
+    page: 1,
+    limit: fetchLimit,
+    auth: authField(false),
+  };
+  let client = new LemmyHttp(httpBase);
+  return client.search(form);
+}
+
+export async function fetchUsers(q: string) {
+  let form: Search = {
+    q,
+    type_: SearchType.Users,
+    sort: SortType.TopAll,
+    listing_type: ListingType.All,
+    page: 1,
+    limit: fetchLimit,
+    auth: authField(false),
+  };
+  let client = new LemmyHttp(httpBase);
+  return client.search(form);
+}
+
+export const choicesConfig = {
+  shouldSort: false,
+  searchResultLimit: fetchLimit,
+  classNames: {
+    containerOuter: "choices",
+    containerInner: "choices__inner bg-light border-0",
+    input: "form-control",
+    inputCloned: "choices__input--cloned",
+    list: "choices__list",
+    listItems: "choices__list--multiple",
+    listSingle: "choices__list--single",
+    listDropdown: "choices__list--dropdown",
+    item: "choices__item bg-light",
+    itemSelectable: "choices__item--selectable",
+    itemDisabled: "choices__item--disabled",
+    itemChoice: "choices__item--choice",
+    placeholder: "choices__placeholder",
+    group: "choices__group",
+    groupHeading: "choices__heading",
+    button: "choices__button",
+    activeState: "is-active",
+    focusState: "is-focused",
+    openState: "is-open",
+    disabledState: "is-disabled",
+    highlightedState: "text-info",
+    selectedState: "text-info",
+    flippedState: "is-flipped",
+    loadingState: "is-loading",
+    noResults: "has-no-results",
+    noChoices: "has-no-choices",
+  },
+};

yarn.lock

@@ -5125,10 +5125,10 @@ lcid@^1.0.0:
   dependencies:
     invert-kv "^1.0.0"
 
-lemmy-js-client@0.11.0-rc.6:
+lemmy-js-client@0.11.0-rc.9:
-  version "0.11.0-rc.6"
+  version "0.11.0-rc.9"
-  resolved "https://registry.yarnpkg.com/lemmy-js-client/-/lemmy-js-client-0.11.0-rc.6.tgz#897671c8e24be8ba2a6074efc63264c421969380"
+  resolved "https://registry.yarnpkg.com/lemmy-js-client/-/lemmy-js-client-0.11.0-rc.9.tgz#f8b1e3924388c6e7f719f052ba1568f4d210cabc"
-  integrity sha512-/AIws5bidcNIi8wSzJx7mwo5Ip2u78s4/bMdEyfEqWKWqdNwEKV/6eYnyThA3j9gYXjd8ty731s0l0kSs/vmhA==
+  integrity sha512-697hLvHPr5+ZkJkFTaXl3y7Dt1va2Dghx9uvu/kZyZQZGVk2lL10R50SDaWsThyQKFBT4kiS1JZI+R3szzZEZQ==
 
 levn@^0.4.1:
   version "0.4.1"