+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 { Subscription } from "rxjs";
import {
- UserOperation,
- PostView,
CommentView,
CommunityView,
- UserViewSafe,
- SortType,
+ GetCommunity,
+ GetCommunityResponse,
+ GetPersonDetails,
+ GetPersonDetailsResponse,
+ GetSiteResponse,
+ ListCommunities,
+ ListCommunitiesResponse,
+ ListingType,
+ PersonView,
+ PostView,
+ ResolveObject,
+ ResolveObjectResponse,
Search as SearchForm,
SearchResponse,
SearchType,
- PostResponse,
- CommentResponse,
- Site,
+ SortType,
} from "lemmy-js-client";
-import { WebSocketService } from "../services";
-import {
- wsJsonToRes,
- fetchLimit,
- routeSearchTypeToEnum,
- routeSortTypeToEnum,
- toast,
- createCommentLikeRes,
- createPostLikeFindRes,
- commentsToFlatNodes,
- setIsoData,
- wsSubscribe,
- wsUserOp,
- wsClient,
- authField,
- setOptionalAuth,
- saveScrollPosition,
- restoreScrollPosition,
-} from "../utils";
-import { PostListing } from "./post-listing";
-import { HtmlTags } from "./html-tags";
-import { Spinner } from "./icon";
-import { UserListing } from "./user-listing";
-import { CommunityLink } from "./community-link";
-import { SortSelect } from "./sort-select";
-import { CommentNodes } from "./comment-nodes";
-import { i18n } from "../i18next";
-import { InitialFetchRequest } from "shared/interfaces";
+import { fetchLimit } from "../config";
+import { CommentViewType, InitialFetchRequest } from "../interfaces";
+import { FirstLoadService, I18NextService } from "../services";
+import { HttpService, RequestState } from "../services/HttpService";
+import { CommentNodes } from "./comment/comment-nodes";
+import { HtmlTags } from "./common/html-tags";
+import { Spinner } from "./common/icon";
+import { ListingTypeSelect } from "./common/listing-type-select";
+import { Paginator } from "./common/paginator";
+import { SearchableSelect } from "./common/searchable-select";
+import { SortSelect } from "./common/sort-select";
+import { CommunityLink } from "./community/community-link";
+import { PersonListing } from "./person/person-listing";
+import { PostListing } from "./post/post-listing";
interface SearchProps {
- q: string;
- type_: SearchType;
+ q?: string;
+ type: SearchType;
sort: SortType;
+ listingType: ListingType;
+ communityId?: number | null;
+ creatorId?: number | null;
page: number;
}
-interface SearchState {
- q: string;
- type_: SearchType;
- sort: SortType;
- page: number;
+type SearchData = RouteDataResponse<{
+ communityResponse: GetCommunityResponse;
+ listCommunitiesResponse: ListCommunitiesResponse;
+ creatorDetailsResponse: GetPersonDetailsResponse;
searchResponse: SearchResponse;
- loading: boolean;
- site: Site;
- searchText: string;
+ resolveObjectResponse: ResolveObjectResponse;
+}>;
+
+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[];
+ creatorSearchOptions: Choice[];
+ searchCreatorLoading: boolean;
+ searchCommunitiesLoading: boolean;
+ isIsomorphic: boolean;
}
-interface UrlParams {
- q?: string;
- type_?: SearchType;
- sort?: SortType;
- page?: number;
+interface Combined {
+ type_: string;
+ data: CommentView | PostView | CommunityView | PersonView;
+ published: string;
}
-export class Search extends Component<any, SearchState> {
- private isoData = setIsoData(this.context);
- 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),
- page: Search.getPageFromProps(this.props.match.params.page),
- searchText: Search.getSearchQueryFromProps(this.props.match.params.q),
- searchResponse: {
- type_: null,
- posts: [],
- comments: [],
- communities: [],
- users: [],
- },
- loading: false,
- site: this.isoData.site_res.site_view.site,
+const defaultSearchType = "All";
+const defaultSortType = "TopAll";
+const defaultListingType = "All";
+
+const searchTypes = ["All", "Comments", "Posts", "Communities", "Users", "Url"];
+
+const getSearchQueryParams = () =>
+ getQueryParams<SearchProps>({
+ q: getSearchQueryFromQuery,
+ type: getSearchTypeFromQuery,
+ sort: getSortTypeFromQuery,
+ listingType: getListingTypeFromQuery,
+ communityId: getIdFromString,
+ creatorId: getIdFromString,
+ page: getPageFromString,
+ });
+
+const getSearchQueryFromQuery = (q?: string): string | undefined =>
+ q ? decodeURIComponent(q) : undefined;
+
+function getSearchTypeFromQuery(type_?: string): SearchType {
+ return type_ ? (type_ as SearchType) : defaultSearchType;
+}
+
+function getSortTypeFromQuery(sort?: string): SortType {
+ return sort ? (sort as SortType) : defaultSortType;
+}
+
+function getListingTypeFromQuery(listingType?: string): ListingType {
+ return listingType ? (listingType as ListingType) : defaultListingType;
+}
+
+function postViewToCombined(data: PostView): Combined {
+ return {
+ type_: "posts",
+ data,
+ published: data.post.published,
};
+}
- static getSearchQueryFromProps(q: string): string {
- return decodeURIComponent(q) || "";
- }
+function commentViewToCombined(data: CommentView): Combined {
+ return {
+ type_: "comments",
+ data,
+ published: data.comment.published,
+ };
+}
- static getSearchTypeFromProps(type_: string): SearchType {
- return type_ ? routeSearchTypeToEnum(type_) : SearchType.All;
- }
+function communityViewToCombined(data: CommunityView): Combined {
+ return {
+ type_: "communities",
+ data,
+ published: data.community.published,
+ };
+}
- static getSortTypeFromProps(sort: string): SortType {
- return sort ? routeSortTypeToEnum(sort) : SortType.TopAll;
- }
+function personViewSafeToCombined(data: PersonView): Combined {
+ return {
+ type_: "users",
+ data,
+ published: data.person.published,
+ };
+}
- static getPageFromProps(page: string): number {
- return page ? Number(page) : 1;
- }
+const Filter = ({
+ filterType,
+ options,
+ onChange,
+ onSearch,
+ value,
+ loading,
+}: {
+ filterType: FilterType;
+ options: Choice[];
+ onSearch: (text: string) => void;
+ onChange: (choice: Choice) => void;
+ value?: number | null;
+ loading: boolean;
+}) => {
+ return (
+ <div className="col-sm-6">
+ <label className="mb-1" htmlFor={`${filterType}-filter`}>
+ {capitalizeFirstLetter(I18NextService.i18n.t(filterType))}
+ </label>
+ <SearchableSelect
+ id={`${filterType}-filter`}
+ options={[
+ {
+ label: I18NextService.i18n.t("all"),
+ value: "0",
+ },
+ ].concat(options)}
+ value={value ?? 0}
+ onSearch={onSearch}
+ onChange={onChange}
+ loading={loading}
+ />
+ </div>
+ );
+};
+
+const communityListing = ({
+ community,
+ counts: { subscribers },
+}: CommunityView) =>
+ getListing(
+ <CommunityLink community={community} />,
+ subscribers,
+ "number_of_subscribers"
+ );
+
+const personListing = ({ person, counts: { comment_count } }: PersonView) =>
+ getListing(
+ <PersonListing person={person} showApubName />,
+ comment_count,
+ "number_of_comments"
+ );
+
+function getListing(
+ listing: JSX.ElementClass,
+ count: number,
+ translationKey: "number_of_comments" | "number_of_subscribers"
+) {
+ return (
+ <>
+ <span>{listing}</span>
+ <span>{` - ${I18NextService.i18n.t(translationKey, {
+ count: Number(count),
+ formattedCount: numToSI(count),
+ })}`}</span>
+ </>
+ );
+}
+
+export class Search extends Component<any, SearchState> {
+ private isoData = setIsoData<SearchData>(this.context);
+
+ state: SearchState = {
+ resolveObjectRes: { state: "empty" },
+ creatorDetailsRes: { state: "empty" },
+ communitiesRes: { state: "empty" },
+ communityRes: { state: "empty" },
+ siteRes: this.isoData.site_res,
+ creatorSearchOptions: [],
+ communitySearchOptions: [],
+ searchRes: { state: "empty" },
+ searchCreatorLoading: false,
+ searchCommunitiesLoading: false,
+ isIsomorphic: false,
+ };
constructor(props: any, context: any) {
super(props, context);
- this.state = this.emptyState;
this.handleSortChange = this.handleSortChange.bind(this);
+ this.handleListingTypeChange = this.handleListingTypeChange.bind(this);
+ this.handlePageChange = this.handlePageChange.bind(this);
+ this.handleCommunityFilterChange =
+ this.handleCommunityFilterChange.bind(this);
+ this.handleCreatorFilterChange = this.handleCreatorFilterChange.bind(this);
- this.parseMessage = this.parseMessage.bind(this);
- this.subscription = wsSubscribe(this.parseMessage);
+ const { q } = getSearchQueryParams();
+
+ this.state = {
+ ...this.state,
+ searchText: q,
+ };
// Only fetch the data if coming from another route
- if (this.state.q != "") {
- if (this.isoData.path == this.context.router.route.match.url) {
- this.state.searchResponse = this.isoData.routeData[0];
- this.state.loading = false;
- } else {
- this.search();
+ if (FirstLoadService.isFirstLoad) {
+ const {
+ communityResponse: communityRes,
+ creatorDetailsResponse: creatorDetailsRes,
+ listCommunitiesResponse: communitiesRes,
+ resolveObjectResponse: resolveObjectRes,
+ searchResponse: searchRes,
+ } = this.isoData.routeData;
+
+ this.state = {
+ ...this.state,
+ isIsomorphic: true,
+ };
+
+ 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,
+ communitiesRes,
+ };
+ }
+
+ if (communityRes?.state === "success") {
+ this.state = {
+ ...this.state,
+ 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,
+ };
+ }
}
}
}
+ async componentDidMount() {
+ if (!this.state.isIsomorphic) {
+ const promises = [this.fetchCommunities()];
+ if (this.state.searchText) {
+ promises.push(this.search());
+ }
+
+ await Promise.all(promises);
+ }
+ }
+
+ async fetchCommunities() {
+ this.setState({ communitiesRes: { state: "loading" } });
+ this.setState({
+ communitiesRes: await HttpService.client.listCommunities({
+ type_: defaultListingType,
+ sort: defaultSortType,
+ limit: fetchLimit,
+ auth: myAuth(),
+ }),
+ });
+ }
+
componentWillUnmount() {
- this.subscription.unsubscribe();
saveScrollPosition(this.context);
}
- 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),
- page: Search.getPageFromProps(props.match.params.page),
+ static async fetchInitialData({
+ client,
+ auth,
+ query: { communityId, creatorId, q, type, sort, listingType, page },
+ }: 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,
+ };
+
+ communityResponse = await client.getCommunity(getCommunityForm);
+ } else {
+ const listCommunitiesForm: ListCommunities = {
+ type_: defaultListingType,
+ sort: defaultSortType,
+ limit: fetchLimit,
+ auth,
+ };
- static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
- let pathSplit = req.path.split("/");
- let promises: Promise<any>[] = [];
+ listCommunitiesResponse = await client.listCommunities(
+ listCommunitiesForm
+ );
+ }
- let form: SearchForm = {
- q: this.getSearchQueryFromProps(pathSplit[3]),
- type_: this.getSearchTypeFromProps(pathSplit[5]),
- sort: this.getSortTypeFromProps(pathSplit[7]),
- page: this.getPageFromProps(pathSplit[9]),
- limit: fetchLimit,
+ const creator_id = getIdFromString(creatorId);
+ let creatorDetailsResponse: RequestState<GetPersonDetailsResponse> = {
+ state: "empty",
};
- setOptionalAuth(form, req.auth);
+ if (creator_id) {
+ const getCreatorForm: GetPersonDetails = {
+ person_id: creator_id,
+ auth,
+ };
- if (form.q != "") {
- promises.push(req.client.search(form));
+ creatorDetailsResponse = await client.getPersonDetails(getCreatorForm);
}
- return promises;
- }
+ const query = getSearchQueryFromQuery(q);
- componentDidUpdate(_: any, lastState: SearchState) {
- if (
- lastState.q !== this.state.q ||
- lastState.type_ !== this.state.type_ ||
- lastState.sort !== this.state.sort ||
- lastState.page !== this.state.page
- ) {
- this.setState({ loading: true, searchText: this.state.q });
- this.search();
+ let searchResponse: RequestState<SearchResponse> = { state: "empty" };
+ let resolveObjectResponse: RequestState<ResolveObjectResponse> = {
+ state: "empty",
+ };
+
+ if (query) {
+ const form: SearchForm = {
+ q: query,
+ community_id,
+ creator_id,
+ type_: getSearchTypeFromQuery(type),
+ sort: getSortTypeFromQuery(sort),
+ listing_type: getListingTypeFromQuery(listingType),
+ page: getPageFromString(page),
+ limit: fetchLimit,
+ auth,
+ };
+
+ if (query !== "") {
+ searchResponse = await client.search(form);
+ if (auth) {
+ const resolveObjectForm: ResolveObject = {
+ q: query,
+ auth,
+ };
+ 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" };
+ }
+ }
+ }
}
+
+ return {
+ communityResponse,
+ creatorDetailsResponse,
+ listCommunitiesResponse,
+ resolveObjectResponse,
+ searchResponse,
+ };
}
get documentTitle(): string {
- if (this.state.q) {
- return `${i18n.t("search")} - ${this.state.q} - ${this.state.site.name}`;
- } else {
- return `${i18n.t("search")} - ${this.state.site.name}`;
- }
+ const { q } = getSearchQueryParams();
+ const name = this.state.siteRes.site_view.site.name;
+ return `${I18NextService.i18n.t("search")} - ${q ? `${q} - ` : ""}${name}`;
}
render() {
+ const { type, page } = getSearchQueryParams();
+
return (
- <div class="container">
+ <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>
- {this.selects()}
- {this.searchForm()}
- {this.state.type_ == SearchType.All && this.all()}
- {this.state.type_ == SearchType.Comments && this.comments()}
- {this.state.type_ == SearchType.Posts && this.posts()}
- {this.state.type_ == SearchType.Communities && this.communities()}
- {this.state.type_ == SearchType.Users && this.users()}
- {this.resultsCount() == 0 && <span>{i18n.t("no_results")}</span>}
- {this.paginator()}
+ <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>{I18NextService.i18n.t("no_results")}</span>
+ )}
+ <Paginator page={page} onChange={this.handlePageChange} />
</div>
);
}
- searchForm() {
+ displayResults(type: SearchType) {
+ switch (type) {
+ case "All":
+ return this.all;
+ case "Comments":
+ return this.comments;
+ case "Posts":
+ case "Url":
+ return this.posts;
+ case "Communities":
+ return this.communities;
+ case "Users":
+ return this.users;
+ default:
+ return <></>;
+ }
+ }
+
+ get searchForm() {
return (
<form
- class="form-inline"
+ className="row gx-2 gy-3"
onSubmit={linkEvent(this, this.handleSearchSubmit)}
>
- <input
- type="text"
- class="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={3}
- />
- <button type="submit" class="btn btn-secondary mr-2 mb-2">
- {this.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>
);
}
- selects() {
+ get selects() {
+ const { type, listingType, sort, communityId, creatorId } =
+ getSearchQueryParams();
+ const {
+ communitySearchOptions,
+ creatorSearchOptions,
+ searchCommunitiesLoading,
+ searchCreatorLoading,
+ communitiesRes,
+ } = this.state;
+
+ const hasCommunities =
+ communitiesRes.state == "success" &&
+ communitiesRes.data.communities.length > 0;
+
return (
- <div className="mb-2">
- <select
- value={this.state.type_}
- onChange={linkEvent(this, this.handleTypeChange)}
- class="custom-select w-auto mb-2"
- aria-label={i18n.t("type")}
- >
- <option disabled aria-hidden="true">
- {i18n.t("type")}
- </option>
- <option value={SearchType.All}>{i18n.t("all")}</option>
- <option value={SearchType.Comments}>{i18n.t("comments")}</option>
- <option value={SearchType.Posts}>{i18n.t("posts")}</option>
- <option value={SearchType.Communities}>
- {i18n.t("communities")}
- </option>
- <option value={SearchType.Users}>{i18n.t("users")}</option>
- </select>
- <span class="ml-2">
- <SortSelect
- sort={this.state.sort}
- onChange={this.handleSortChange}
- hideHot
- hideMostComments
+ <>
+ <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"
+ onChange={this.handleCommunityFilterChange}
+ onSearch={this.handleCommunitySearch}
+ options={communitySearchOptions}
+ value={communityId}
+ loading={searchCommunitiesLoading}
+ />
+ )}
+ <Filter
+ filterType="creator"
+ onChange={this.handleCreatorFilterChange}
+ onSearch={this.handleCreatorSearch}
+ options={creatorSearchOptions}
+ value={creatorId}
+ loading={searchCreatorLoading}
/>
- </span>
- </div>
+ </div>
+ </>
);
}
- all() {
- let combined: {
- type_: string;
- data: CommentView | PostView | CommunityView | UserViewSafe;
- published: string;
- }[] = [];
- let comments = this.state.searchResponse.comments.map(e => {
- return { type_: "comments", data: e, published: e.comment.published };
- });
- let posts = this.state.searchResponse.posts.map(e => {
- return { type_: "posts", data: e, published: e.post.published };
- });
- let communities = this.state.searchResponse.communities.map(e => {
- return {
- type_: "communities",
- data: e,
- published: e.community.published,
- };
- });
- let users = this.state.searchResponse.users.map(e => {
- return { type_: "users", data: e, published: e.user.published };
- });
+ buildCombined(): Combined[] {
+ const combined: Combined[] = [];
+ const {
+ resolveObjectRes: resolveObjectResponse,
+ searchRes: searchResponse,
+ } = this.state;
+
+ // Push the possible resolve / federated objects first
+ if (resolveObjectResponse.state == "success") {
+ const { comment, post, community, person } = resolveObjectResponse.data;
- combined.push(...comments);
- combined.push(...posts);
- combined.push(...communities);
- combined.push(...users);
+ if (comment) {
+ combined.push(commentViewToCombined(comment));
+ }
+ if (post) {
+ combined.push(postViewToCombined(post));
+ }
+ if (community) {
+ combined.push(communityViewToCombined(community));
+ }
+ if (person) {
+ combined.push(personViewSafeToCombined(person));
+ }
+ }
+
+ // Push the search results
+ if (searchResponse.state === "success") {
+ const { comments, posts, communities, users } = searchResponse.data;
+
+ combined.push(
+ ...[
+ ...(comments?.map(commentViewToCombined) ?? []),
+ ...(posts?.map(postViewToCombined) ?? []),
+ ...(communities?.map(communityViewToCombined) ?? []),
+ ...(users?.map(personViewSafeToCombined) ?? []),
+ ]
+ );
+ }
+
+ const { sort } = getSearchQueryParams();
// Sort it
- if (this.state.sort == SortType.New) {
+ if (sort === "New") {
combined.sort((a, b) => b.published.localeCompare(a.published));
} else {
- combined.sort(
- (a, b) =>
+ combined.sort((a, b) =>
+ Number(
((b.data as CommentView | PostView).counts.score |
(b.data as CommunityView).counts.subscribers |
- (b.data as UserViewSafe).counts.comment_score) -
- ((a.data as CommentView | PostView).counts.score |
- (a.data as CommunityView).counts.subscribers |
- (a.data as UserViewSafe).counts.comment_score)
+ (b.data as PersonView).counts.comment_score) -
+ ((a.data as CommentView | PostView).counts.score |
+ (a.data as CommunityView).counts.subscribers |
+ (a.data as PersonView).counts.comment_score)
+ )
);
}
+ return combined;
+ }
+
+ get all() {
+ const combined = this.buildCombined();
+
return (
<div>
{combined.map(i => (
- <div class="row">
- <div class="col-12">
- {i.type_ == "posts" && (
+ <div key={i.published} className="row">
+ <div className="col-12">
+ {i.type_ === "posts" && (
<PostListing
key={(i.data as PostView).post.id}
post_view={i.data as PostView}
showCommunity
- enableDownvotes={this.state.site.enable_downvotes}
- enableNsfw={this.state.site.enable_nsfw}
+ enableDownvotes={enableDownvotes(this.state.siteRes)}
+ enableNsfw={enableNsfw(this.state.siteRes)}
+ allLanguages={this.state.siteRes.all_languages}
+ siteLanguages={this.state.siteRes.discussion_languages}
+ viewOnly
+ // All of these are unused, since its view only
+ onPostEdit={() => {}}
+ onPostVote={() => {}}
+ onPostReport={() => {}}
+ onBlockPerson={() => {}}
+ onLockPost={() => {}}
+ onDeletePost={() => {}}
+ onRemovePost={() => {}}
+ onSavePost={() => {}}
+ onFeaturePost={() => {}}
+ onPurgePerson={() => {}}
+ onPurgePost={() => {}}
+ onBanPersonFromCommunity={() => {}}
+ onBanPerson={() => {}}
+ onAddModToCommunity={() => {}}
+ onAddAdmin={() => {}}
+ onTransferCommunity={() => {}}
/>
)}
- {i.type_ == "comments" && (
+ {i.type_ === "comments" && (
<CommentNodes
key={(i.data as CommentView).comment.id}
- nodes={[{ comment_view: i.data as CommentView }]}
+ nodes={[
+ {
+ comment_view: i.data as CommentView,
+ children: [],
+ depth: 0,
+ },
+ ]}
+ viewType={CommentViewType.Flat}
+ viewOnly
locked
noIndent
- enableDownvotes={this.state.site.enable_downvotes}
+ enableDownvotes={enableDownvotes(this.state.siteRes)}
+ allLanguages={this.state.siteRes.all_languages}
+ siteLanguages={this.state.siteRes.discussion_languages}
+ // All of these are unused, since its viewonly
+ finished={new Map()}
+ onSaveComment={() => {}}
+ onBlockPerson={() => {}}
+ onDeleteComment={() => {}}
+ onRemoveComment={() => {}}
+ onCommentVote={() => {}}
+ onCommentReport={() => {}}
+ onDistinguishComment={() => {}}
+ onAddModToCommunity={() => {}}
+ onAddAdmin={() => {}}
+ onTransferCommunity={() => {}}
+ onPurgeComment={() => {}}
+ onPurgePerson={() => {}}
+ onCommentReplyRead={() => {}}
+ onPersonMentionRead={() => {}}
+ onBanPersonFromCommunity={() => {}}
+ onBanPerson={() => {}}
+ onCreateComment={() => Promise.resolve({ state: "empty" })}
+ onEditComment={() => Promise.resolve({ state: "empty" })}
/>
)}
- {i.type_ == "communities" && (
- <div>{this.communityListing(i.data as CommunityView)}</div>
+ {i.type_ === "communities" && (
+ <div>{communityListing(i.data as CommunityView)}</div>
)}
- {i.type_ == "users" && (
- <div>{this.userListing(i.data as UserViewSafe)}</div>
+ {i.type_ === "users" && (
+ <div>{personListing(i.data as PersonView)}</div>
)}
</div>
</div>
);
}
- comments() {
+ get comments() {
+ const {
+ searchRes: searchResponse,
+ resolveObjectRes: resolveObjectResponse,
+ siteRes,
+ } = this.state;
+ const comments =
+ searchResponse.state === "success" ? searchResponse.data.comments : [];
+
+ if (
+ resolveObjectResponse.state === "success" &&
+ resolveObjectResponse.data.comment
+ ) {
+ comments.unshift(resolveObjectResponse.data.comment);
+ }
+
return (
<CommentNodes
- nodes={commentsToFlatNodes(this.state.searchResponse.comments)}
+ nodes={commentsToFlatNodes(comments)}
+ viewType={CommentViewType.Flat}
+ viewOnly
locked
noIndent
- enableDownvotes={this.state.site.enable_downvotes}
+ enableDownvotes={enableDownvotes(siteRes)}
+ allLanguages={siteRes.all_languages}
+ siteLanguages={siteRes.discussion_languages}
+ // All of these are unused, since its viewonly
+ finished={new Map()}
+ onSaveComment={() => {}}
+ onBlockPerson={() => {}}
+ onDeleteComment={() => {}}
+ onRemoveComment={() => {}}
+ onCommentVote={() => {}}
+ onCommentReport={() => {}}
+ onDistinguishComment={() => {}}
+ onAddModToCommunity={() => {}}
+ onAddAdmin={() => {}}
+ onTransferCommunity={() => {}}
+ onPurgeComment={() => {}}
+ onPurgePerson={() => {}}
+ onCommentReplyRead={() => {}}
+ onPersonMentionRead={() => {}}
+ onBanPersonFromCommunity={() => {}}
+ onBanPerson={() => {}}
+ onCreateComment={() => Promise.resolve({ state: "empty" })}
+ onEditComment={() => Promise.resolve({ state: "empty" })}
/>
);
}
- posts() {
+ get posts() {
+ const {
+ searchRes: searchResponse,
+ resolveObjectRes: resolveObjectResponse,
+ siteRes,
+ } = this.state;
+ const posts =
+ searchResponse.state === "success" ? searchResponse.data.posts : [];
+
+ if (
+ resolveObjectResponse.state === "success" &&
+ resolveObjectResponse.data.post
+ ) {
+ posts.unshift(resolveObjectResponse.data.post);
+ }
+
return (
<>
- {this.state.searchResponse.posts.map(post => (
- <div class="row">
- <div class="col-12">
+ {posts.map(pv => (
+ <div key={pv.post.id} className="row">
+ <div className="col-12">
<PostListing
- post_view={post}
+ post_view={pv}
showCommunity
- enableDownvotes={this.state.site.enable_downvotes}
- enableNsfw={this.state.site.enable_nsfw}
+ enableDownvotes={enableDownvotes(siteRes)}
+ enableNsfw={enableNsfw(siteRes)}
+ allLanguages={siteRes.all_languages}
+ siteLanguages={siteRes.discussion_languages}
+ viewOnly
+ // All of these are unused, since its view only
+ onPostEdit={() => {}}
+ onPostVote={() => {}}
+ onPostReport={() => {}}
+ onBlockPerson={() => {}}
+ onLockPost={() => {}}
+ onDeletePost={() => {}}
+ onRemovePost={() => {}}
+ onSavePost={() => {}}
+ onFeaturePost={() => {}}
+ onPurgePerson={() => {}}
+ onPurgePost={() => {}}
+ onBanPersonFromCommunity={() => {}}
+ onBanPerson={() => {}}
+ onAddModToCommunity={() => {}}
+ onAddAdmin={() => {}}
+ onTransferCommunity={() => {}}
/>
</div>
</div>
);
}
- communities() {
+ get communities() {
+ const {
+ searchRes: searchResponse,
+ resolveObjectRes: resolveObjectResponse,
+ } = this.state;
+ const communities =
+ searchResponse.state === "success" ? searchResponse.data.communities : [];
+
+ if (
+ resolveObjectResponse.state === "success" &&
+ resolveObjectResponse.data.community
+ ) {
+ communities.unshift(resolveObjectResponse.data.community);
+ }
+
return (
<>
- {this.state.searchResponse.communities.map(community => (
- <div class="row">
- <div class="col-12">{this.communityListing(community)}</div>
+ {communities.map(cv => (
+ <div key={cv.community.id} className="row">
+ <div className="col-12">{communityListing(cv)}</div>
</div>
))}
</>
);
}
- communityListing(community_view: CommunityView) {
- return (
- <>
- <span>
- <CommunityLink community={community_view.community} />
- </span>
- <span>{` -
- ${i18n.t("number_of_subscribers", {
- count: community_view.counts.subscribers,
- })}
- `}</span>
- </>
- );
- }
+ get users() {
+ const {
+ searchRes: searchResponse,
+ resolveObjectRes: resolveObjectResponse,
+ } = this.state;
+ const users =
+ searchResponse.state === "success" ? searchResponse.data.users : [];
- userListing(user_view: UserViewSafe) {
- return [
- <span>
- <UserListing user={user_view.user} showApubName />
- </span>,
- <span>{` - ${i18n.t("number_of_comments", {
- count: user_view.counts.comment_count,
- })}`}</span>,
- ];
- }
+ if (
+ resolveObjectResponse.state === "success" &&
+ resolveObjectResponse.data.person
+ ) {
+ users.unshift(resolveObjectResponse.data.person);
+ }
- users() {
return (
<>
- {this.state.searchResponse.users.map(user => (
- <div class="row">
- <div class="col-12">{this.userListing(user)}</div>
+ {users.map(pvs => (
+ <div key={pvs.person.id} className="row">
+ <div className="col-12">{personListing(pvs)}</div>
</div>
))}
</>
);
}
- paginator() {
- return (
- <div class="mt-2">
- {this.state.page > 1 && (
- <button
- class="btn btn-secondary mr-1"
- onClick={linkEvent(this, this.prevPage)}
- >
- {i18n.t("prev")}
- </button>
- )}
-
- {this.resultsCount() > 0 && (
- <button
- class="btn btn-secondary"
- onClick={linkEvent(this, this.nextPage)}
- >
- {i18n.t("next")}
- </button>
- )}
- </div>
- );
- }
+ get resultsCount(): number {
+ const { searchRes: r, resolveObjectRes: resolveRes } = this.state;
- resultsCount(): number {
- let res = this.state.searchResponse;
- return (
- res.posts.length +
- res.comments.length +
- res.communities.length +
- res.users.length
- );
- }
+ const searchCount =
+ r.state === "success"
+ ? r.data.posts.length +
+ r.data.comments.length +
+ r.data.communities.length +
+ r.data.users.length
+ : 0;
- nextPage(i: Search) {
- i.updateUrl({ page: i.state.page + 1 });
- }
+ const resObjCount =
+ resolveRes.state === "success"
+ ? resolveRes.data.post ||
+ resolveRes.data.person ||
+ resolveRes.data.community ||
+ resolveRes.data.comment
+ ? 1
+ : 0
+ : 0;
- prevPage(i: Search) {
- i.updateUrl({ page: i.state.page - 1 });
+ return resObjCount + searchCount;
}
- search() {
- let form: SearchForm = {
- q: this.state.q,
- type_: this.state.type_,
- sort: this.state.sort,
- page: this.state.page,
- limit: fetchLimit,
- auth: authField(false),
- };
+ async search() {
+ const auth = myAuth();
+ const { searchText: q } = this.state;
+ const { communityId, creatorId, type, sort, listingType, page } =
+ getSearchQueryParams();
- if (this.state.q != "") {
- WebSocketService.Instance.send(wsClient.search(form));
+ if (q) {
+ this.setState({ searchRes: { state: "loading" } });
+ this.setState({
+ searchRes: await HttpService.client.search({
+ q,
+ community_id: communityId ?? undefined,
+ creator_id: creatorId ?? undefined,
+ type_: type,
+ sort,
+ listing_type: listingType,
+ page,
+ limit: fetchLimit,
+ auth,
+ }),
+ });
+ window.scrollTo(0, 0);
+ restoreScrollPosition(this.context);
+
+ if (auth) {
+ this.setState({ resolveObjectRes: { state: "loading" } });
+ this.setState({
+ resolveObjectRes: await HttpService.silent_client.resolveObject({
+ q,
+ auth,
+ }),
+ });
+ }
}
}
- handleSortChange(val: SortType) {
- this.updateUrl({ sort: val, page: 1 });
+ 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));
+ }
+
+ 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));
+ }
+
+ this.setState({
+ searchCommunitiesLoading: false,
+ communitySearchOptions: newOptions,
+ });
+ });
+
+ handleSortChange(sort: SortType) {
+ this.updateUrl({ sort, page: 1 });
}
handleTypeChange(i: Search, event: any) {
+ const type = event.target.value as SearchType;
+
i.updateUrl({
- type_: SearchType[event.target.value],
+ type,
+ page: 1,
+ });
+ }
+
+ handlePageChange(page: number) {
+ this.updateUrl({ page });
+ }
+
+ handleListingTypeChange(listingType: ListingType) {
+ this.updateUrl({
+ listingType,
+ page: 1,
+ });
+ }
+
+ handleCommunityFilterChange({ value }: Choice) {
+ this.updateUrl({
+ communityId: getIdFromString(value) ?? null,
+ page: 1,
+ });
+ }
+
+ handleCreatorFilterChange({ value }: Choice) {
+ this.updateUrl({
+ creatorId: getIdFromString(value) ?? null,
page: 1,
});
}
handleSearchSubmit(i: Search, event: any) {
event.preventDefault();
+
i.updateUrl({
q: i.state.searchText,
- type_: i.state.type_,
- sort: i.state.sort,
- page: i.state.page,
+ page: 1,
});
}
i.setState({ searchText: event.target.value });
}
- updateUrl(paramUpdates: UrlParams) {
- const qStr = paramUpdates.q || this.state.q;
- const qStrEncoded = encodeURIComponent(qStr);
- const typeStr = paramUpdates.type_ || this.state.type_;
- const sortStr = paramUpdates.sort || this.state.sort;
- const page = paramUpdates.page || this.state.page;
- this.props.history.push(
- `/search/q/${qStrEncoded}/type/${typeStr}/sort/${sortStr}/page/${page}`
- );
- }
+ async updateUrl({
+ q,
+ type,
+ listingType,
+ sort,
+ communityId,
+ creatorId,
+ page,
+ }: Partial<SearchProps>) {
+ const {
+ q: urlQ,
+ type: urlType,
+ listingType: urlListingType,
+ communityId: urlCommunityId,
+ sort: urlSort,
+ creatorId: urlCreatorId,
+ page: urlPage,
+ } = getSearchQueryParams();
- parseMessage(msg: any) {
- console.log(msg);
- let op = wsUserOp(msg);
- if (msg.error) {
- toast(i18n.t(msg.error), "danger");
- return;
- } else if (op == UserOperation.Search) {
- let data = wsJsonToRes<SearchResponse>(msg).data;
- this.state.searchResponse = data;
- this.state.loading = false;
- window.scrollTo(0, 0);
- this.setState(this.state);
- restoreScrollPosition(this.context);
- } else if (op == UserOperation.CreateCommentLike) {
- let data = wsJsonToRes<CommentResponse>(msg).data;
- createCommentLikeRes(
- data.comment_view,
- this.state.searchResponse.comments
- );
- this.setState(this.state);
- } else if (op == UserOperation.CreatePostLike) {
- let data = wsJsonToRes<PostResponse>(msg).data;
- createPostLikeFindRes(data.post_view, this.state.searchResponse.posts);
- this.setState(this.state);
+ let query = q ?? this.state.searchText ?? urlQ;
+
+ if (query && query.length > 0) {
+ query = encodeURIComponent(query);
}
+
+ const queryParams: QueryParams<SearchProps> = {
+ q: query,
+ type: type ?? urlType,
+ listingType: listingType ?? urlListingType,
+ communityId: getUpdatedSearchId(communityId, urlCommunityId),
+ creatorId: getUpdatedSearchId(creatorId, urlCreatorId),
+ page: (page ?? urlPage).toString(),
+ sort: sort ?? urlSort,
+ };
+
+ this.props.history.push(`/search${getQueryString(queryParams)}`);
}
}
projects / lemmy-ui.git / blobdiff