ui.components.search: fix duplicate requests

Deprecate componentWillReceiveProps for getDerivedStateFromProps
This commit is contained in:
derek 2020-07-12 22:58:48 -04:00
parent 2640efb3f0
commit af2141417a

View File

@ -44,15 +44,17 @@ interface SearchState {
searchResponse: SearchResponse;
loading: boolean;
site: Site;
searchText: string;
}
export class Search extends Component<any, SearchState> {
private subscription: Subscription;
private emptyState: SearchState = {
q: this.getSearchQueryFromProps(this.props),
type_: this.getSearchTypeFromProps(this.props),
sort: this.getSortTypeFromProps(this.props),
page: this.getPageFromProps(this.props),
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: [],
@ -77,23 +79,23 @@ export class Search extends Component<any, SearchState> {
},
};
getSearchQueryFromProps(props: any): string {
static getSearchQueryFromProps(props: any): string {
return props.match.params.q ? props.match.params.q : '';
}
getSearchTypeFromProps(props: any): SearchType {
static getSearchTypeFromProps(props: any): SearchType {
return props.match.params.type
? routeSearchTypeToEnum(props.match.params.type)
: SearchType.All;
}
getSortTypeFromProps(props: any): SortType {
static getSortTypeFromProps(props: any): SortType {
return props.match.params.sort
? routeSortTypeToEnum(props.match.params.sort)
: SortType.TopAll;
}
getPageFromProps(props: any): number {
static getPageFromProps(props: any): number {
return props.match.params.page ? Number(props.match.params.page) : 1;
}
@ -122,17 +124,23 @@ export class Search extends Component<any, SearchState> {
this.subscription.unsubscribe();
}
// Necessary for back button for some reason
componentWillReceiveProps(nextProps: any) {
static getDerivedStateFromProps(props) {
return {
q: Search.getSearchQueryFromProps(props),
type_: Search.getSearchTypeFromProps(props),
sort: Search.getSortTypeFromProps(props),
page: Search.getPageFromProps(props),
};
}
componentDidUpdate(_, lastState) {
if (
nextProps.history.action == 'POP' ||
nextProps.history.action == 'PUSH'
lastState.q !== this.state.q ||
lastState.type_ !== this.state.type_ ||
lastState.sort !== this.state.sort ||
lastState.page !== this.state.page
) {
this.state.q = this.getSearchQueryFromProps(nextProps);
this.state.type_ = this.getSearchTypeFromProps(nextProps);
this.state.sort = this.getSortTypeFromProps(nextProps);
this.state.page = this.getPageFromProps(nextProps);
this.setState(this.state);
this.setState({ loading: true, searchText: this.state.q });
this.search();
}
}
@ -163,7 +171,7 @@ export class Search extends Component<any, SearchState> {
<input
type="text"
class="form-control mr-2"
value={this.state.q}
value={this.state.searchText}
placeholder={`${i18n.t('search')}...`}
onInput={linkEvent(this, this.handleQChange)}
required
@ -413,17 +421,11 @@ export class Search extends Component<any, SearchState> {
}
nextPage(i: Search) {
i.state.page++;
i.setState(i.state);
i.updateUrl();
i.search();
i.updateUrl({ page: i.state.page + 1 });
}
prevPage(i: Search) {
i.state.page--;
i.setState(i.state);
i.updateUrl();
i.search();
i.updateUrl({ page: i.state.page - 1 });
}
search() {
@ -441,37 +443,43 @@ export class Search extends Component<any, SearchState> {
}
handleSortChange(val: SortType) {
this.state.sort = val;
this.state.page = 1;
this.setState(this.state);
this.updateUrl();
this.updateUrl({ sort: val, page: 1 });
}
handleTypeChange(i: Search, event: any) {
i.state.type_ = Number(event.target.value);
i.state.page = 1;
i.setState(i.state);
i.updateUrl();
i.updateUrl({ type_: Number(event.target.value), page: 1 });
}
handleSearchSubmit(i: Search, event: any) {
event.preventDefault();
i.state.loading = true;
i.search();
i.setState(i.state);
i.updateUrl();
i.updateUrl({
q: i.state.searchText,
type_: i.state.type_,
sort: i.state.sort,
page: i.state.page,
});
}
handleQChange(i: Search, event: any) {
i.state.q = event.target.value;
i.setState(i.state);
i.setState({ searchText: event.target.value });
}
updateUrl() {
let typeStr = SearchType[this.state.type_].toLowerCase();
let sortStr = SortType[this.state.sort].toLowerCase();
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/${this.state.q}/type/${typeStr}/sort/${sortStr}/page/${this.state.page}`
`/search/q/${qStr}/type/${typeStr.toLowerCase()}/sort/${sortStr.toLowerCase()}/page/${page}`
);
}