src/shared/components/search.tsx

   1 import { None, Option, Some } from "@sniptt/monads";
   2 import { Component, linkEvent } from "inferno";
   3 import {
   4   CommentResponse,
   5   CommentView,
   6   CommunityView,
   7   GetCommunity,
   8   GetCommunityResponse,
   9   GetPersonDetails,
  10   GetPersonDetailsResponse,
  11   GetSiteResponse,
  12   ListCommunities,
  13   ListCommunitiesResponse,
  14   ListingType,
  15   PersonViewSafe,
  16   PostResponse,
  17   PostView,
  18   ResolveObject,
  19   ResolveObjectResponse,
  20   Search as SearchForm,
  21   SearchResponse,
  22   SearchType,
  23   SortType,
  24   UserOperation,
  25   wsJsonToRes,
  26   wsUserOp,
  27 } from "lemmy-js-client";
  28 import { Subscription } from "rxjs";
  29 import { InitialFetchRequest } from "shared/interfaces";
  30 import { i18n } from "../i18next";
  31 import { WebSocketService } from "../services";
  32 import {
  33   auth,
  34   capitalizeFirstLetter,
  35   choicesConfig,
  36   commentsToFlatNodes,
  37   communitySelectName,
  38   communityToChoice,
  39   createCommentLikeRes,
  40   createPostLikeFindRes,
  41   debounce,
  42   enableDownvotes,
  43   enableNsfw,
  44   fetchCommunities,
  45   fetchLimit,
  46   fetchUsers,
  47   isBrowser,
  48   numToSI,
  49   personSelectName,
  50   personToChoice,
  51   pushNotNull,
  52   restoreScrollPosition,
  53   routeListingTypeToEnum,
  54   routeSearchTypeToEnum,
  55   routeSortTypeToEnum,
  56   saveScrollPosition,
  57   setIsoData,
  58   showLocal,
  59   toast,
  60   wsClient,
  61   wsSubscribe,
  62 } from "../utils";
  63 import { CommentNodes } from "./comment/comment-nodes";
  64 import { HtmlTags } from "./common/html-tags";
  65 import { Spinner } from "./common/icon";
  66 import { ListingTypeSelect } from "./common/listing-type-select";
  67 import { Paginator } from "./common/paginator";
  68 import { SortSelect } from "./common/sort-select";
  69 import { CommunityLink } from "./community/community-link";
  70 import { PersonListing } from "./person/person-listing";
  71 import { PostListing } from "./post/post-listing";
  72
  73 var Choices: any;
  74 if (isBrowser()) {
  75   Choices = require("choices.js");
  76 }
  77
  78 interface SearchProps {
  79   q: string;
  80   type_: SearchType;
  81   sort: SortType;
  82   listingType: ListingType;
  83   communityId: number;
  84   creatorId: number;
  85   page: number;
  86 }
  87
  88 interface SearchState {
  89   q: string;
  90   type_: SearchType;
  91   sort: SortType;
  92   listingType: ListingType;
  93   communityId: number;
  94   creatorId: number;
  95   page: number;
  96   searchResponse: Option<SearchResponse>;
  97   communities: CommunityView[];
  98   creatorDetails: Option<GetPersonDetailsResponse>;
  99   loading: boolean;
 100   siteRes: GetSiteResponse;
 101   searchText: string;
 102   resolveObjectResponse: Option<ResolveObjectResponse>;
 103 }
 104
 105 interface UrlParams {
 106   q?: string;
 107   type_?: SearchType;
 108   sort?: SortType;
 109   listingType?: ListingType;
 110   communityId?: number;
 111   creatorId?: number;
 112   page?: number;
 113 }
 114
 115 interface Combined {
 116   type_: string;
 117   data: CommentView | PostView | CommunityView | PersonViewSafe;
 118   published: string;
 119 }
 120
 121 export class Search extends Component<any, SearchState> {
 122   private isoData = setIsoData(
 123     this.context,
 124     GetCommunityResponse,
 125     ListCommunitiesResponse,
 126     GetPersonDetailsResponse,
 127     SearchResponse,
 128     ResolveObjectResponse
 129   );
 130   private communityChoices: any;
 131   private creatorChoices: any;
 132   private subscription: Subscription;
 133   private emptyState: SearchState = {
 134     q: Search.getSearchQueryFromProps(this.props.match.params.q),
 135     type_: Search.getSearchTypeFromProps(this.props.match.params.type),
 136     sort: Search.getSortTypeFromProps(this.props.match.params.sort),
 137     listingType: Search.getListingTypeFromProps(
 138       this.props.match.params.listing_type
 139     ),
 140     page: Search.getPageFromProps(this.props.match.params.page),
 141     searchText: Search.getSearchQueryFromProps(this.props.match.params.q),
 142     communityId: Search.getCommunityIdFromProps(
 143       this.props.match.params.community_id
 144     ),
 145     creatorId: Search.getCreatorIdFromProps(this.props.match.params.creator_id),
 146     searchResponse: None,
 147     resolveObjectResponse: None,
 148     creatorDetails: None,
 149     loading: true,
 150     siteRes: this.isoData.site_res,
 151     communities: [],
 152   };
 153
 154   static getSearchQueryFromProps(q: string): string {
 155     return decodeURIComponent(q) || "";
 156   }
 157
 158   static getSearchTypeFromProps(type_: string): SearchType {
 159     return type_ ? routeSearchTypeToEnum(type_) : SearchType.All;
 160   }
 161
 162   static getSortTypeFromProps(sort: string): SortType {
 163     return sort ? routeSortTypeToEnum(sort) : SortType.TopAll;
 164   }
 165
 166   static getListingTypeFromProps(listingType: string): ListingType {
 167     return listingType ? routeListingTypeToEnum(listingType) : ListingType.All;
 168   }
 169
 170   static getCommunityIdFromProps(id: string): number {
 171     return id ? Number(id) : 0;
 172   }
 173
 174   static getCreatorIdFromProps(id: string): number {
 175     return id ? Number(id) : 0;
 176   }
 177
 178   static getPageFromProps(page: string): number {
 179     return page ? Number(page) : 1;
 180   }
 181
 182   constructor(props: any, context: any) {
 183     super(props, context);
 184
 185     this.state = this.emptyState;
 186     this.handleSortChange = this.handleSortChange.bind(this);
 187     this.handleListingTypeChange = this.handleListingTypeChange.bind(this);
 188     this.handlePageChange = this.handlePageChange.bind(this);
 189
 190     this.parseMessage = this.parseMessage.bind(this);
 191     this.subscription = wsSubscribe(this.parseMessage);
 192
 193     // Only fetch the data if coming from another route
 194     if (this.isoData.path == this.context.router.route.match.url) {
 195       let communityRes = Some(
 196         this.isoData.routeData[0] as GetCommunityResponse
 197       );
 198       let communitiesRes = Some(
 199         this.isoData.routeData[1] as ListCommunitiesResponse
 200       );
 201
 202       // This can be single or multiple communities given
 203       communitiesRes.match({
 204         some: res => (this.state.communities = res.communities),
 205         none: void 0,
 206       });
 207
 208       communityRes.match({
 209         some: res => (this.state.communities = [res.community_view]),
 210         none: void 0,
 211       });
 212
 213       this.state.creatorDetails = Some(
 214         this.isoData.routeData[2] as GetPersonDetailsResponse
 215       );
 216
 217       if (this.state.q != "") {
 218         this.state.searchResponse = Some(
 219           this.isoData.routeData[3] as SearchResponse
 220         );
 221         this.state.resolveObjectResponse = Some(
 222           this.isoData.routeData[4] as ResolveObjectResponse
 223         );
 224         this.state.loading = false;
 225       } else {
 226         this.search();
 227       }
 228     } else {
 229       this.fetchCommunities();
 230       this.search();
 231     }
 232   }
 233
 234   componentWillUnmount() {
 235     this.subscription.unsubscribe();
 236     saveScrollPosition(this.context);
 237   }
 238
 239   componentDidMount() {
 240     this.setupCommunityFilter();
 241     this.setupCreatorFilter();
 242   }
 243
 244   static getDerivedStateFromProps(props: any): SearchProps {
 245     return {
 246       q: Search.getSearchQueryFromProps(props.match.params.q),
 247       type_: Search.getSearchTypeFromProps(props.match.params.type),
 248       sort: Search.getSortTypeFromProps(props.match.params.sort),
 249       listingType: Search.getListingTypeFromProps(
 250         props.match.params.listing_type
 251       ),
 252       communityId: Search.getCommunityIdFromProps(
 253         props.match.params.community_id
 254       ),
 255       creatorId: Search.getCreatorIdFromProps(props.match.params.creator_id),
 256       page: Search.getPageFromProps(props.match.params.page),
 257     };
 258   }
 259
 260   fetchCommunities() {
 261     let listCommunitiesForm = new ListCommunities({
 262       type_: Some(ListingType.All),
 263       sort: Some(SortType.TopAll),
 264       limit: Some(fetchLimit),
 265       page: None,
 266       auth: auth(false).ok(),
 267     });
 268     WebSocketService.Instance.send(
 269       wsClient.listCommunities(listCommunitiesForm)
 270     );
 271   }
 272
 273   static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
 274     let pathSplit = req.path.split("/");
 275     let promises: Promise<any>[] = [];
 276
 277     let communityId = this.getCommunityIdFromProps(pathSplit[11]);
 278     let community_id: Option<number> =
 279       communityId == 0 ? None : Some(communityId);
 280     community_id.match({
 281       some: id => {
 282         let getCommunityForm = new GetCommunity({
 283           id: Some(id),
 284           name: None,
 285           auth: req.auth,
 286         });
 287         promises.push(req.client.getCommunity(getCommunityForm));
 288         promises.push(Promise.resolve());
 289       },
 290       none: () => {
 291         let listCommunitiesForm = new ListCommunities({
 292           type_: Some(ListingType.All),
 293           sort: Some(SortType.TopAll),
 294           limit: Some(fetchLimit),
 295           page: None,
 296           auth: req.auth,
 297         });
 298         promises.push(Promise.resolve());
 299         promises.push(req.client.listCommunities(listCommunitiesForm));
 300       },
 301     });
 302
 303     let creatorId = this.getCreatorIdFromProps(pathSplit[13]);
 304     let creator_id: Option<number> = creatorId == 0 ? None : Some(creatorId);
 305     creator_id.match({
 306       some: id => {
 307         let getCreatorForm = new GetPersonDetails({
 308           person_id: Some(id),
 309           username: None,
 310           sort: None,
 311           page: None,
 312           limit: None,
 313           community_id: None,
 314           saved_only: None,
 315           auth: req.auth,
 316         });
 317         promises.push(req.client.getPersonDetails(getCreatorForm));
 318       },
 319       none: () => {
 320         promises.push(Promise.resolve());
 321       },
 322     });
 323
 324     let form = new SearchForm({
 325       q: this.getSearchQueryFromProps(pathSplit[3]),
 326       community_id,
 327       community_name: None,
 328       creator_id,
 329       type_: Some(this.getSearchTypeFromProps(pathSplit[5])),
 330       sort: Some(this.getSortTypeFromProps(pathSplit[7])),
 331       listing_type: Some(this.getListingTypeFromProps(pathSplit[9])),
 332       page: Some(this.getPageFromProps(pathSplit[15])),
 333       limit: Some(fetchLimit),
 334       auth: req.auth,
 335     });
 336
 337     let resolveObjectForm = new ResolveObject({
 338       q: this.getSearchQueryFromProps(pathSplit[3]),
 339       auth: req.auth,
 340     });
 341
 342     if (form.q != "") {
 343       promises.push(req.client.search(form));
 344       promises.push(req.client.resolveObject(resolveObjectForm));
 345     } else {
 346       promises.push(Promise.resolve());
 347       promises.push(Promise.resolve());
 348     }
 349
 350     return promises;
 351   }
 352
 353   componentDidUpdate(_: any, lastState: SearchState) {
 354     if (
 355       lastState.q !== this.state.q ||
 356       lastState.type_ !== this.state.type_ ||
 357       lastState.sort !== this.state.sort ||
 358       lastState.listingType !== this.state.listingType ||
 359       lastState.communityId !== this.state.communityId ||
 360       lastState.creatorId !== this.state.creatorId ||
 361       lastState.page !== this.state.page
 362     ) {
 363       this.setState({
 364         loading: true,
 365         searchText: this.state.q,
 366         searchResponse: None,
 367         resolveObjectResponse: None,
 368       });
 369       this.search();
 370     }
 371   }
 372
 373   get documentTitle(): string {
 374     return this.state.siteRes.site_view.match({
 375       some: siteView =>
 376         this.state.q
 377           ? `${i18n.t("search")} - ${this.state.q} - ${siteView.site.name}`
 378           : `${i18n.t("search")} - ${siteView.site.name}`,
 379       none: "",
 380     });
 381   }
 382
 383   render() {
 384     return (
 385       <div class="container">
 386         <HtmlTags
 387           title={this.documentTitle}
 388           path={this.context.router.route.match.url}
 389           description={None}
 390           image={None}
 391         />
 392         <h5>{i18n.t("search")}</h5>
 393         {this.selects()}
 394         {this.searchForm()}
 395         {this.state.type_ == SearchType.All && this.all()}
 396         {this.state.type_ == SearchType.Comments && this.comments()}
 397         {this.state.type_ == SearchType.Posts && this.posts()}
 398         {this.state.type_ == SearchType.Communities && this.communities()}
 399         {this.state.type_ == SearchType.Users && this.users()}
 400         {this.state.type_ == SearchType.Url && this.posts()}
 401         {this.resultsCount() == 0 && <span>{i18n.t("no_results")}</span>}
 402         <Paginator page={this.state.page} onChange={this.handlePageChange} />
 403       </div>
 404     );
 405   }
 406
 407   searchForm() {
 408     return (
 409       <form
 410         class="form-inline"
 411         onSubmit={linkEvent(this, this.handleSearchSubmit)}
 412       >
 413         <input
 414           type="text"
 415           class="form-control mr-2 mb-2"
 416           value={this.state.searchText}
 417           placeholder={`${i18n.t("search")}...`}
 418           aria-label={i18n.t("search")}
 419           onInput={linkEvent(this, this.handleQChange)}
 420           required
 421           minLength={3}
 422         />
 423         <button type="submit" class="btn btn-secondary mr-2 mb-2">
 424           {this.state.loading ? <Spinner /> : <span>{i18n.t("search")}</span>}
 425         </button>
 426       </form>
 427     );
 428   }
 429
 430   selects() {
 431     return (
 432       <div className="mb-2">
 433         <select
 434           value={this.state.type_}
 435           onChange={linkEvent(this, this.handleTypeChange)}
 436           class="custom-select w-auto mb-2"
 437           aria-label={i18n.t("type")}
 438         >
 439           <option disabled aria-hidden="true">
 440             {i18n.t("type")}
 441           </option>
 442           <option value={SearchType.All}>{i18n.t("all")}</option>
 443           <option value={SearchType.Comments}>{i18n.t("comments")}</option>
 444           <option value={SearchType.Posts}>{i18n.t("posts")}</option>
 445           <option value={SearchType.Communities}>
 446             {i18n.t("communities")}
 447           </option>
 448           <option value={SearchType.Users}>{i18n.t("users")}</option>
 449           <option value={SearchType.Url}>{i18n.t("url")}</option>
 450         </select>
 451         <span class="ml-2">
 452           <ListingTypeSelect
 453             type_={this.state.listingType}
 454             showLocal={showLocal(this.isoData)}
 455             showSubscribed
 456             onChange={this.handleListingTypeChange}
 457           />
 458         </span>
 459         <span class="ml-2">
 460           <SortSelect
 461             sort={this.state.sort}
 462             onChange={this.handleSortChange}
 463             hideHot
 464             hideMostComments
 465           />
 466         </span>
 467         <div class="form-row">
 468           {this.state.communities.length > 0 && this.communityFilter()}
 469           {this.creatorFilter()}
 470         </div>
 471       </div>
 472     );
 473   }
 474
 475   postViewToCombined(postView: PostView): Combined {
 476     return {
 477       type_: "posts",
 478       data: postView,
 479       published: postView.post.published,
 480     };
 481   }
 482
 483   commentViewToCombined(commentView: CommentView): Combined {
 484     return {
 485       type_: "comments",
 486       data: commentView,
 487       published: commentView.comment.published,
 488     };
 489   }
 490
 491   communityViewToCombined(communityView: CommunityView): Combined {
 492     return {
 493       type_: "communities",
 494       data: communityView,
 495       published: communityView.community.published,
 496     };
 497   }
 498
 499   personViewSafeToCombined(personViewSafe: PersonViewSafe): Combined {
 500     return {
 501       type_: "users",
 502       data: personViewSafe,
 503       published: personViewSafe.person.published,
 504     };
 505   }
 506
 507   buildCombined(): Combined[] {
 508     let combined: Combined[] = [];
 509
 510     // Push the possible resolve / federated objects first
 511     this.state.resolveObjectResponse.match({
 512       some: res => {
 513         let resolveComment = res.comment;
 514         if (resolveComment.isSome()) {
 515           combined.push(this.commentViewToCombined(resolveComment.unwrap()));
 516         }
 517         let resolvePost = res.post;
 518         if (resolvePost.isSome()) {
 519           combined.push(this.postViewToCombined(resolvePost.unwrap()));
 520         }
 521         let resolveCommunity = res.community;
 522         if (resolveCommunity.isSome()) {
 523           combined.push(
 524             this.communityViewToCombined(resolveCommunity.unwrap())
 525           );
 526         }
 527         let resolveUser = res.person;
 528         if (resolveUser.isSome()) {
 529           combined.push(this.personViewSafeToCombined(resolveUser.unwrap()));
 530         }
 531       },
 532       none: void 0,
 533     });
 534
 535     // Push the search results
 536     this.state.searchResponse.match({
 537       some: res => {
 538         pushNotNull(
 539           combined,
 540           res.comments?.map(e => this.commentViewToCombined(e))
 541         );
 542         pushNotNull(
 543           combined,
 544           res.posts?.map(e => this.postViewToCombined(e))
 545         );
 546         pushNotNull(
 547           combined,
 548           res.communities?.map(e => this.communityViewToCombined(e))
 549         );
 550         pushNotNull(
 551           combined,
 552           res.users?.map(e => this.personViewSafeToCombined(e))
 553         );
 554       },
 555       none: void 0,
 556     });
 557
 558     // Sort it
 559     if (this.state.sort == SortType.New) {
 560       combined.sort((a, b) => b.published.localeCompare(a.published));
 561     } else {
 562       combined.sort(
 563         (a, b) =>
 564           ((b.data as CommentView | PostView).counts.score |
 565             (b.data as CommunityView).counts.subscribers |
 566             (b.data as PersonViewSafe).counts.comment_score) -
 567           ((a.data as CommentView | PostView).counts.score |
 568             (a.data as CommunityView).counts.subscribers |
 569             (a.data as PersonViewSafe).counts.comment_score)
 570       );
 571     }
 572     return combined;
 573   }
 574
 575   all() {
 576     let combined = this.buildCombined();
 577     return (
 578       <div>
 579         {combined.map(i => (
 580           <div class="row">
 581             <div class="col-12">
 582               {i.type_ == "posts" && (
 583                 <PostListing
 584                   key={(i.data as PostView).post.id}
 585                   post_view={i.data as PostView}
 586                   duplicates={None}
 587                   moderators={None}
 588                   admins={None}
 589                   showCommunity
 590                   enableDownvotes={enableDownvotes(this.state.siteRes)}
 591                   enableNsfw={enableNsfw(this.state.siteRes)}
 592                 />
 593               )}
 594               {i.type_ == "comments" && (
 595                 <CommentNodes
 596                   key={(i.data as CommentView).comment.id}
 597                   nodes={[{ comment_view: i.data as CommentView }]}
 598                   moderators={None}
 599                   admins={None}
 600                   maxCommentsShown={None}
 601                   locked
 602                   noIndent
 603                   enableDownvotes={enableDownvotes(this.state.siteRes)}
 604                 />
 605               )}
 606               {i.type_ == "communities" && (
 607                 <div>{this.communityListing(i.data as CommunityView)}</div>
 608               )}
 609               {i.type_ == "users" && (
 610                 <div>{this.userListing(i.data as PersonViewSafe)}</div>
 611               )}
 612             </div>
 613           </div>
 614         ))}
 615       </div>
 616     );
 617   }
 618
 619   comments() {
 620     let comments: CommentView[] = [];
 621
 622     this.state.resolveObjectResponse.match({
 623       some: res => pushNotNull(comments, res.comment),
 624       none: void 0,
 625     });
 626     this.state.searchResponse.match({
 627       some: res => pushNotNull(comments, res.comments),
 628       none: void 0,
 629     });
 630
 631     return (
 632       <CommentNodes
 633         nodes={commentsToFlatNodes(comments)}
 634         locked
 635         noIndent
 636         moderators={None}
 637         admins={None}
 638         maxCommentsShown={None}
 639         enableDownvotes={enableDownvotes(this.state.siteRes)}
 640       />
 641     );
 642   }
 643
 644   posts() {
 645     let posts: PostView[] = [];
 646
 647     this.state.resolveObjectResponse.match({
 648       some: res => pushNotNull(posts, res.post),
 649       none: void 0,
 650     });
 651     this.state.searchResponse.match({
 652       some: res => pushNotNull(posts, res.posts),
 653       none: void 0,
 654     });
 655
 656     return (
 657       <>
 658         {posts.map(post => (
 659           <div class="row">
 660             <div class="col-12">
 661               <PostListing
 662                 post_view={post}
 663                 showCommunity
 664                 duplicates={None}
 665                 moderators={None}
 666                 admins={None}
 667                 enableDownvotes={enableDownvotes(this.state.siteRes)}
 668                 enableNsfw={enableNsfw(this.state.siteRes)}
 669               />
 670             </div>
 671           </div>
 672         ))}
 673       </>
 674     );
 675   }
 676
 677   communities() {
 678     let communities: CommunityView[] = [];
 679
 680     this.state.resolveObjectResponse.match({
 681       some: res => pushNotNull(communities, res.community),
 682       none: void 0,
 683     });
 684     this.state.searchResponse.match({
 685       some: res => pushNotNull(communities, res.communities),
 686       none: void 0,
 687     });
 688
 689     return (
 690       <>
 691         {communities.map(community => (
 692           <div class="row">
 693             <div class="col-12">{this.communityListing(community)}</div>
 694           </div>
 695         ))}
 696       </>
 697     );
 698   }
 699
 700   users() {
 701     let users: PersonViewSafe[] = [];
 702
 703     this.state.resolveObjectResponse.match({
 704       some: res => pushNotNull(users, res.person),
 705       none: void 0,
 706     });
 707     this.state.searchResponse.match({
 708       some: res => pushNotNull(users, res.users),
 709       none: void 0,
 710     });
 711
 712     return (
 713       <>
 714         {users.map(user => (
 715           <div class="row">
 716             <div class="col-12">{this.userListing(user)}</div>
 717           </div>
 718         ))}
 719       </>
 720     );
 721   }
 722
 723   communityListing(community_view: CommunityView) {
 724     return (
 725       <>
 726         <span>
 727           <CommunityLink community={community_view.community} />
 728         </span>
 729         <span>{` -
 730         ${i18n.t("number_of_subscribers", {
 731           count: community_view.counts.subscribers,
 732           formattedCount: numToSI(community_view.counts.subscribers),
 733         })}
 734       `}</span>
 735       </>
 736     );
 737   }
 738
 739   userListing(person_view: PersonViewSafe) {
 740     return [
 741       <span>
 742         <PersonListing person={person_view.person} showApubName />
 743       </span>,
 744       <span>{` - ${i18n.t("number_of_comments", {
 745         count: person_view.counts.comment_count,
 746         formattedCount: numToSI(person_view.counts.comment_count),
 747       })}`}</span>,
 748     ];
 749   }
 750
 751   communityFilter() {
 752     return (
 753       <div class="form-group col-sm-6">
 754         <label class="col-form-label" htmlFor="community-filter">
 755           {i18n.t("community")}
 756         </label>
 757         <div>
 758           <select
 759             class="form-control"
 760             id="community-filter"
 761             value={this.state.communityId}
 762           >
 763             <option value="0">{i18n.t("all")}</option>
 764             {this.state.communities.map(cv => (
 765               <option value={cv.community.id}>{communitySelectName(cv)}</option>
 766             ))}
 767           </select>
 768         </div>
 769       </div>
 770     );
 771   }
 772
 773   creatorFilter() {
 774     return (
 775       <div class="form-group col-sm-6">
 776         <label class="col-form-label" htmlFor="creator-filter">
 777           {capitalizeFirstLetter(i18n.t("creator"))}
 778         </label>
 779         <div>
 780           <select
 781             class="form-control"
 782             id="creator-filter"
 783             value={this.state.creatorId}
 784           >
 785             <option value="0">{i18n.t("all")}</option>
 786             {this.state.creatorDetails.match({
 787               some: creator => (
 788                 <option value={creator.person_view.person.id}>
 789                   {personSelectName(creator.person_view)}
 790                 </option>
 791               ),
 792               none: <></>,
 793             })}
 794           </select>
 795         </div>
 796       </div>
 797     );
 798   }
 799
 800   resultsCount(): number {
 801     let searchCount = this.state.searchResponse
 802       .map(
 803         r =>
 804           r.posts?.length +
 805           r.comments?.length +
 806           r.communities?.length +
 807           r.users?.length
 808       )
 809       .unwrapOr(0);
 810
 811     let resObjCount = this.state.resolveObjectResponse
 812       .map(r => (r.post || r.person || r.community || r.comment ? 1 : 0))
 813       .unwrapOr(0);
 814
 815     return resObjCount + searchCount;
 816   }
 817
 818   handlePageChange(page: number) {
 819     this.updateUrl({ page });
 820   }
 821
 822   search() {
 823     let community_id: Option<number> =
 824       this.state.communityId == 0 ? None : Some(this.state.communityId);
 825     let creator_id: Option<number> =
 826       this.state.creatorId == 0 ? None : Some(this.state.creatorId);
 827
 828     let form = new SearchForm({
 829       q: this.state.q,
 830       community_id,
 831       community_name: None,
 832       creator_id,
 833       type_: Some(this.state.type_),
 834       sort: Some(this.state.sort),
 835       listing_type: Some(this.state.listingType),
 836       page: Some(this.state.page),
 837       limit: Some(fetchLimit),
 838       auth: auth(false).ok(),
 839     });
 840
 841     let resolveObjectForm = new ResolveObject({
 842       q: this.state.q,
 843       auth: auth(false).ok(),
 844     });
 845
 846     if (this.state.q != "") {
 847       this.state.searchResponse = None;
 848       this.state.resolveObjectResponse = None;
 849       this.state.loading = true;
 850       this.setState(this.state);
 851       WebSocketService.Instance.send(wsClient.search(form));
 852       WebSocketService.Instance.send(wsClient.resolveObject(resolveObjectForm));
 853     }
 854   }
 855
 856   setupCommunityFilter() {
 857     if (isBrowser()) {
 858       let selectId: any = document.getElementById("community-filter");
 859       if (selectId) {
 860         this.communityChoices = new Choices(selectId, choicesConfig);
 861         this.communityChoices.passedElement.element.addEventListener(
 862           "choice",
 863           (e: any) => {
 864             this.handleCommunityFilterChange(Number(e.detail.choice.value));
 865           },
 866           false
 867         );
 868         this.communityChoices.passedElement.element.addEventListener(
 869           "search",
 870           debounce(async (e: any) => {
 871             try {
 872               let communities = (await fetchCommunities(e.detail.value))
 873                 .communities;
 874               let choices = communities.map(cv => communityToChoice(cv));
 875               choices.unshift({ value: "0", label: i18n.t("all") });
 876               this.communityChoices.setChoices(choices, "value", "label", true);
 877             } catch (err) {
 878               console.error(err);
 879             }
 880           }),
 881           false
 882         );
 883       }
 884     }
 885   }
 886
 887   setupCreatorFilter() {
 888     if (isBrowser()) {
 889       let selectId: any = document.getElementById("creator-filter");
 890       if (selectId) {
 891         this.creatorChoices = new Choices(selectId, choicesConfig);
 892         this.creatorChoices.passedElement.element.addEventListener(
 893           "choice",
 894           (e: any) => {
 895             this.handleCreatorFilterChange(Number(e.detail.choice.value));
 896           },
 897           false
 898         );
 899         this.creatorChoices.passedElement.element.addEventListener(
 900           "search",
 901           debounce(async (e: any) => {
 902             try {
 903               let creators = (await fetchUsers(e.detail.value)).users;
 904               let choices = creators.map(pvs => personToChoice(pvs));
 905               choices.unshift({ value: "0", label: i18n.t("all") });
 906               this.creatorChoices.setChoices(choices, "value", "label", true);
 907             } catch (err) {
 908               console.log(err);
 909             }
 910           }),
 911           false
 912         );
 913       }
 914     }
 915   }
 916
 917   handleSortChange(val: SortType) {
 918     this.updateUrl({ sort: val, page: 1 });
 919   }
 920
 921   handleTypeChange(i: Search, event: any) {
 922     i.updateUrl({
 923       type_: SearchType[event.target.value],
 924       page: 1,
 925     });
 926   }
 927
 928   handleListingTypeChange(val: ListingType) {
 929     this.updateUrl({
 930       listingType: val,
 931       page: 1,
 932     });
 933   }
 934
 935   handleCommunityFilterChange(communityId: number) {
 936     this.updateUrl({
 937       communityId,
 938       page: 1,
 939     });
 940   }
 941
 942   handleCreatorFilterChange(creatorId: number) {
 943     this.updateUrl({
 944       creatorId,
 945       page: 1,
 946     });
 947   }
 948
 949   handleSearchSubmit(i: Search, event: any) {
 950     event.preventDefault();
 951     i.updateUrl({
 952       q: i.state.searchText,
 953       type_: i.state.type_,
 954       listingType: i.state.listingType,
 955       communityId: i.state.communityId,
 956       creatorId: i.state.creatorId,
 957       sort: i.state.sort,
 958       page: i.state.page,
 959     });
 960   }
 961
 962   handleQChange(i: Search, event: any) {
 963     i.setState({ searchText: event.target.value });
 964   }
 965
 966   updateUrl(paramUpdates: UrlParams) {
 967     const qStr = paramUpdates.q || this.state.q;
 968     const qStrEncoded = encodeURIComponent(qStr);
 969     const typeStr = paramUpdates.type_ || this.state.type_;
 970     const listingTypeStr = paramUpdates.listingType || this.state.listingType;
 971     const sortStr = paramUpdates.sort || this.state.sort;
 972     const communityId =
 973       paramUpdates.communityId == 0
 974         ? 0
 975         : paramUpdates.communityId || this.state.communityId;
 976     const creatorId =
 977       paramUpdates.creatorId == 0
 978         ? 0
 979         : paramUpdates.creatorId || this.state.creatorId;
 980     const page = paramUpdates.page || this.state.page;
 981     this.props.history.push(
 982       `/search/q/${qStrEncoded}/type/${typeStr}/sort/${sortStr}/listing_type/${listingTypeStr}/community_id/${communityId}/creator_id/${creatorId}/page/${page}`
 983     );
 984   }
 985
 986   parseMessage(msg: any) {
 987     console.log(msg);
 988     let op = wsUserOp(msg);
 989     if (msg.error) {
 990       if (msg.error == "couldnt_find_object") {
 991         this.state.resolveObjectResponse = Some({
 992           comment: None,
 993           post: None,
 994           community: None,
 995           person: None,
 996         });
 997         this.checkFinishedLoading();
 998       } else {
 999         toast(i18n.t(msg.error), "danger");
1000         return;
1001       }
1002     } else if (op == UserOperation.Search) {
1003       let data = wsJsonToRes<SearchResponse>(msg, SearchResponse);
1004       this.state.searchResponse = Some(data);
1005       window.scrollTo(0, 0);
1006       this.checkFinishedLoading();
1007       restoreScrollPosition(this.context);
1008     } else if (op == UserOperation.CreateCommentLike) {
1009       let data = wsJsonToRes<CommentResponse>(msg, CommentResponse);
1010       createCommentLikeRes(
1011         data.comment_view,
1012         this.state.searchResponse.map(r => r.comments).unwrapOr([])
1013       );
1014       this.setState(this.state);
1015     } else if (op == UserOperation.CreatePostLike) {
1016       let data = wsJsonToRes<PostResponse>(msg, PostResponse);
1017       createPostLikeFindRes(
1018         data.post_view,
1019         this.state.searchResponse.map(r => r.posts).unwrapOr([])
1020       );
1021       this.setState(this.state);
1022     } else if (op == UserOperation.ListCommunities) {
1023       let data = wsJsonToRes<ListCommunitiesResponse>(
1024         msg,
1025         ListCommunitiesResponse
1026       );
1027       this.state.communities = data.communities;
1028       this.setState(this.state);
1029       this.setupCommunityFilter();
1030     } else if (op == UserOperation.ResolveObject) {
1031       let data = wsJsonToRes<ResolveObjectResponse>(msg, ResolveObjectResponse);
1032       this.state.resolveObjectResponse = Some(data);
1033       this.checkFinishedLoading();
1034     }
1035   }
1036
1037   checkFinishedLoading() {
1038     if (
1039       this.state.searchResponse.isSome() &&
1040       this.state.resolveObjectResponse.isSome()
1041     ) {
1042       this.state.loading = false;
1043       this.setState(this.state);
1044     }
1045   }
1046 }