import { Component, linkEvent } from 'inferno'; import { Link } from 'inferno-router'; import { Subscription } from 'rxjs'; import { retryWhen, delay, take } from 'rxjs/operators'; import { UserOperation, Post, Comment, Community, UserView, SortType, SearchForm, SearchResponse, SearchType, PostResponse, CommentResponse, WebSocketJsonResponse, GetSiteResponse, Site, } from '../interfaces'; import { WebSocketService } from '../services'; import { wsJsonToRes, fetchLimit, routeSearchTypeToEnum, routeSortTypeToEnum, toast, createCommentLikeRes, createPostLikeFindRes, commentsToFlatNodes, } from '../utils'; import { PostListing } from './post-listing'; import { UserListing } from './user-listing'; import { CommunityLink } from './community-link'; import { SortSelect } from './sort-select'; import { CommentNodes } from './comment-nodes'; import { i18n } from '../i18next'; interface SearchState { q: string; type_: SearchType; sort: SortType; page: number; searchResponse: SearchResponse; loading: boolean; site: Site; searchText: string; } export class Search extends Component { private subscription: Subscription; private emptyState: SearchState = { q: Search.getSearchQueryFromProps(this.props), type_: Search.getSearchTypeFromProps(this.props), sort: Search.getSortTypeFromProps(this.props), page: Search.getPageFromProps(this.props), searchText: Search.getSearchQueryFromProps(this.props), searchResponse: { type_: null, posts: [], comments: [], communities: [], users: [], }, loading: false, site: { id: undefined, name: undefined, creator_id: undefined, published: undefined, creator_name: undefined, number_of_users: undefined, number_of_posts: undefined, number_of_comments: undefined, number_of_communities: undefined, enable_downvotes: undefined, open_registration: undefined, enable_nsfw: undefined, }, }; static getSearchQueryFromProps(props: any): string { return props.match.params.q ? props.match.params.q : ''; } static getSearchTypeFromProps(props: any): SearchType { return props.match.params.type ? routeSearchTypeToEnum(props.match.params.type) : SearchType.All; } static getSortTypeFromProps(props: any): SortType { return props.match.params.sort ? routeSortTypeToEnum(props.match.params.sort) : SortType.TopAll; } static getPageFromProps(props: any): number { return props.match.params.page ? Number(props.match.params.page) : 1; } constructor(props: any, context: any) { super(props, context); this.state = this.emptyState; this.handleSortChange = this.handleSortChange.bind(this); this.subscription = WebSocketService.Instance.subject .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10)))) .subscribe( msg => this.parseMessage(msg), err => console.error(err), () => console.log('complete') ); WebSocketService.Instance.getSite(); if (this.state.q) { this.search(); } } componentWillUnmount() { this.subscription.unsubscribe(); } static getDerivedStateFromProps(props) { return { q: Search.getSearchQueryFromProps(props), type_: Search.getSearchTypeFromProps(props), sort: Search.getSortTypeFromProps(props), page: Search.getPageFromProps(props), }; } componentDidUpdate(_, lastState) { 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(); } } render() { return (
{i18n.t('search')}
{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 && {i18n.t('no_results')}} {this.paginator()}
); } searchForm() { return (
); } selects() { return (
); } all() { let combined: Array<{ type_: string; data: Comment | Post | Community | UserView; }> = []; let comments = this.state.searchResponse.comments.map(e => { return { type_: 'comments', data: e }; }); let posts = this.state.searchResponse.posts.map(e => { return { type_: 'posts', data: e }; }); let communities = this.state.searchResponse.communities.map(e => { return { type_: 'communities', data: e }; }); let users = this.state.searchResponse.users.map(e => { return { type_: 'users', data: e }; }); combined.push(...comments); combined.push(...posts); combined.push(...communities); combined.push(...users); // Sort it if (this.state.sort == SortType.New) { combined.sort((a, b) => b.data.published.localeCompare(a.data.published)); } else { combined.sort( (a, b) => ((b.data as Comment | Post).score | (b.data as Community).number_of_subscribers | (b.data as UserView).comment_score) - ((a.data as Comment | Post).score | (a.data as Community).number_of_subscribers | (a.data as UserView).comment_score) ); } return (
{combined.map(i => (
{i.type_ == 'posts' && ( )} {i.type_ == 'comments' && ( )} {i.type_ == 'communities' && (
{this.communityListing(i.data as Community)}
)} {i.type_ == 'users' && (
@ {` - ${i18n.t('number_of_comments', { count: (i.data as UserView).number_of_comments, })}`}
)}
))}
); } comments() { return ( ); } posts() { return ( <> {this.state.searchResponse.posts.map(post => (
))} ); } // Todo possibly create UserListing and CommunityListing communities() { return ( <> {this.state.searchResponse.communities.map(community => (
{this.communityListing(community)}
))} ); } communityListing(community: Community) { return ( <> {` - ${community.title} - ${i18n.t('number_of_subscribers', { count: community.number_of_subscribers, })} `} ); } users() { return ( <> {this.state.searchResponse.users.map(user => (
@ {` - ${i18n.t('number_of_comments', { count: user.number_of_comments, })}`}
))} ); } paginator() { return (
{this.state.page > 1 && ( )} {this.resultsCount() > 0 && ( )}
); } resultsCount(): number { let res = this.state.searchResponse; return ( res.posts.length + res.comments.length + res.communities.length + res.users.length ); } nextPage(i: Search) { i.updateUrl({ page: i.state.page + 1 }); } prevPage(i: Search) { i.updateUrl({ page: i.state.page - 1 }); } search() { let form: SearchForm = { q: this.state.q, type_: SearchType[this.state.type_], sort: SortType[this.state.sort], page: this.state.page, limit: fetchLimit, }; if (this.state.q != '') { WebSocketService.Instance.search(form); } } handleSortChange(val: SortType) { this.updateUrl({ sort: val, page: 1 }); } handleTypeChange(i: Search, event: any) { i.updateUrl({ type_: Number(event.target.value), 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, }); } handleQChange(i: Search, event: any) { i.setState({ searchText: event.target.value }); } updateUrl(paramUpdates: { q?: string; type_?: number; sort?: SortType; page?: number; }) { const qStr = paramUpdates.q || Search.getSearchQueryFromProps(this.props); const typeStr = SearchType[paramUpdates.type_] || SearchType[Search.getSearchTypeFromProps(this.props)]; const sortStr = SortType[paramUpdates.sort] || SortType[Search.getSortTypeFromProps(this.props)]; const page = paramUpdates.page || Search.getPageFromProps(this.props); this.props.history.push( `/search/q/${qStr}/type/${typeStr.toLowerCase()}/sort/${sortStr.toLowerCase()}/page/${page}` ); } parseMessage(msg: WebSocketJsonResponse) { console.log(msg); let res = wsJsonToRes(msg); if (msg.error) { toast(i18n.t(msg.error), 'danger'); return; } else if (res.op == UserOperation.Search) { let data = res.data as SearchResponse; this.state.searchResponse = data; this.state.loading = false; document.title = `${i18n.t('search')} - ${this.state.q} - ${ this.state.site.name }`; window.scrollTo(0, 0); this.setState(this.state); } else if (res.op == UserOperation.CreateCommentLike) { let data = res.data as CommentResponse; createCommentLikeRes(data, this.state.searchResponse.comments); this.setState(this.state); } else if (res.op == UserOperation.CreatePostLike) { let data = res.data as PostResponse; createPostLikeFindRes(data, this.state.searchResponse.posts); this.setState(this.state); } else if (res.op == UserOperation.GetSite) { let data = res.data as GetSiteResponse; this.state.site = data.site; this.setState(this.state); document.title = `${i18n.t('search')} - ${data.site.name}`; } } }