import { Component, linkEvent } from 'inferno'; import { Subscription } from "rxjs"; import { retryWhen, delay, take } from 'rxjs/operators'; import { UserOperation, Post, Comment, SortType, SearchForm, SearchResponse, SearchType } from '../interfaces'; import { WebSocketService } from '../services'; import { msgOp, fetchLimit } from '../utils'; import { PostListing } from './post-listing'; import { CommentNodes } from './comment-nodes'; interface SearchState { q: string, type_: SearchType, sort: SortType, page: number, searchResponse: SearchResponse; loading: boolean; } export class Search extends Component { private subscription: Subscription; private emptyState: SearchState = { q: undefined, type_: SearchType.Both, sort: SortType.TopAll, page: 1, searchResponse: { op: null, posts: [], comments: [], }, loading: false, } constructor(props: any, context: any) { super(props, context); this.state = this.emptyState; 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') ); } componentWillUnmount() { this.subscription.unsubscribe(); } componentDidMount() { document.title = `Search - ${WebSocketService.Instance.site.name}`; } render() { return (
Search
{this.selects()} {this.searchForm()} {this.state.type_ == SearchType.Both && this.both() } {this.state.type_ == SearchType.Comments && this.comments() } {this.state.type_ == SearchType.Posts && this.posts() } {this.noResults()} {this.paginator()}
) } searchForm() { return (
) } selects() { return (
) } both() { let combined: Array<{type_: string, data: Comment | Post}> = []; 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}}); combined.push(...comments); combined.push(...posts); // 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.score - a.data.score); } return (
{combined.map(i =>
{i.type_ == "posts" ? : }
) }
) } comments() { return (
{this.state.searchResponse.comments.map(comment => )}
); } posts() { return (
{this.state.searchResponse.posts.map(post => )}
); } paginator() { return (
{this.state.page > 1 && }
); } noResults() { let res = this.state.searchResponse; return (
{res && res.op && res.posts.length == 0 && res.comments.length == 0 && No Results }
) } nextPage(i: Search) { i.state.page++; i.setState(i.state); i.search(); } prevPage(i: Search) { i.state.page--; i.setState(i.state); i.search(); } search() { // TODO community let form: SearchForm = { q: this.state.q, type_: SearchType[this.state.type_], sort: SortType[this.state.sort], page: this.state.page, limit: fetchLimit, }; WebSocketService.Instance.search(form); } handleSortChange(i: Search, event: any) { i.state.sort = Number(event.target.value); i.state.page = 1; i.setState(i.state); i.search(); } handleTypeChange(i: Search, event: any) { i.state.type_ = Number(event.target.value); i.state.page = 1; i.setState(i.state); i.search(); } handleSearchSubmit(i: Search, event: any) { event.preventDefault(); i.state.loading = true; i.search(); i.setState(i.state); } handleQChange(i: Search, event: any) { i.state.q = event.target.value; i.setState(i.state); } parseMessage(msg: any) { console.log(msg); let op: UserOperation = msgOp(msg); if (msg.error) { alert(msg.error); return; } else if (op == UserOperation.Search) { let res: SearchResponse = msg; this.state.searchResponse = res; this.state.loading = false; document.title = `Search - ${this.state.q} - ${WebSocketService.Instance.site.name}`; window.scrollTo(0,0); this.setState(this.state); } } }