import { Component, linkEvent } from 'inferno';
-import { Link } from 'inferno-router';
+import { Helmet } from 'inferno-helmet';
import { Subscription } from 'rxjs';
import { retryWhen, delay, take } from 'rxjs/operators';
import {
WebSocketJsonResponse,
GetSiteResponse,
Site,
-} from '../interfaces';
+} from 'lemmy-js-client';
import { WebSocketService } from '../services';
import {
wsJsonToRes,
interface UrlParams {
q?: string;
- type_?: string;
- sort?: string;
+ type_?: SearchType;
+ sort?: SortType;
page?: number;
}
}
}
+ get documentTitle(): string {
+ if (this.state.site.name) {
+ if (this.state.q) {
+ return `${i18n.t('search')} - ${this.state.q} - ${
+ this.state.site.name
+ }`;
+ } else {
+ return `${i18n.t('search')} - ${this.state.site.name}`;
+ }
+ } else {
+ return 'Lemmy';
+ }
+ }
+
render() {
return (
<div class="container">
+ <Helmet title={this.documentTitle} />
<h5>{i18n.t('search')}</h5>
{this.selects()}
{this.searchForm()}
>
<input
type="text"
- class="form-control mr-2"
+ class="form-control mr-2 mb-2"
value={this.state.searchText}
placeholder={`${i18n.t('search')}...`}
onInput={linkEvent(this, this.handleQChange)}
required
minLength={3}
/>
- <button type="submit" class="btn btn-secondary mr-2">
+ <button type="submit" class="btn btn-secondary mr-2 mb-2">
{this.state.loading ? (
<svg class="icon icon-spinner spin">
<use xlinkHref="#icon-spinner"></use>
<select
value={this.state.type_}
onChange={linkEvent(this, this.handleTypeChange)}
- class="custom-select w-auto"
+ class="custom-select w-auto mb-2"
>
<option disabled>{i18n.t('type')}</option>
<option value={SearchType.All}>{i18n.t('all')}</option>
<div class="col-12">
{i.type_ == 'posts' && (
<PostListing
+ key={(i.data as Post).id}
post={i.data as Post}
showCommunity
enableDownvotes={this.state.site.enable_downvotes}
)}
{i.type_ == 'comments' && (
<CommentNodes
+ key={(i.data as Comment).id}
nodes={[{ comment: i.data as Comment }]}
locked
noIndent
{i.type_ == 'users' && (
<div>
<span>
- @
<UserListing
user={{
name: (i.data as UserView).name,
+ preferred_username: (i.data as UserView)
+ .preferred_username,
avatar: (i.data as UserView).avatar,
}}
/>
<div class="row">
<div class="col-12">
<span>
- @
<UserListing
user={{
name: user.name,
avatar: user.avatar,
+ preferred_username: user.preferred_username,
}}
/>
</span>
search() {
let form: SearchForm = {
q: this.state.q,
- type_: SearchType[this.state.type_],
- sort: SortType[this.state.sort],
+ type_: this.state.type_,
+ sort: this.state.sort,
page: this.state.page,
limit: fetchLimit,
};
}
handleSortChange(val: SortType) {
- this.updateUrl({ sort: SortType[val].toLowerCase(), page: 1 });
+ this.updateUrl({ sort: val, page: 1 });
}
handleTypeChange(i: Search, event: any) {
i.updateUrl({
- type_: SearchType[Number(event.target.value)].toLowerCase(),
+ type_: SearchType[event.target.value],
page: 1,
});
}
event.preventDefault();
i.updateUrl({
q: i.state.searchText,
- type_: SearchType[i.state.type_].toLowerCase(),
- sort: SortType[i.state.sort].toLowerCase(),
+ type_: i.state.type_,
+ sort: i.state.sort,
page: i.state.page,
});
}
updateUrl(paramUpdates: UrlParams) {
const qStr = paramUpdates.q || this.state.q;
- const typeStr =
- paramUpdates.type_ || SearchType[this.state.type_].toLowerCase();
- const sortStr =
- paramUpdates.sort || SortType[this.state.sort].toLowerCase();
+ 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/${qStr}/type/${typeStr}/sort/${sortStr}/page/${page}`
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 GetSiteResponse;
this.state.site = data.site;
this.setState(this.state);
- document.title = `${i18n.t('search')} - ${data.site.name}`;
}
}
}