From ef62f4698a62e996bcd54faa1f360eff89b8ac4b Mon Sep 17 00:00:00 2001 From: derek Date: Tue, 14 Jul 2020 01:13:43 -0400 Subject: [PATCH] ui.components: fix ts types, move user pagination to user details --- ui/src/components/communities.tsx | 10 ++-- ui/src/components/community.tsx | 26 +++++---- ui/src/components/main.tsx | 33 +++++++----- ui/src/components/search.tsx | 57 +++++++++++--------- ui/src/components/sort-select.tsx | 5 +- ui/src/components/user-details.tsx | 41 +++++++++++++- ui/src/components/user.tsx | 86 ++++++++++++------------------ 7 files changed, 152 insertions(+), 106 deletions(-) diff --git a/ui/src/components/communities.tsx b/ui/src/components/communities.tsx index 71ea878de..ba362accd 100644 --- a/ui/src/components/communities.tsx +++ b/ui/src/components/communities.tsx @@ -27,6 +27,10 @@ interface CommunitiesState { loading: boolean; } +interface CommunitiesProps { + page: number; +} + export class Communities extends Component { private subscription: Subscription; private emptyState: CommunitiesState = { @@ -54,13 +58,13 @@ export class Communities extends Component { this.subscription.unsubscribe(); } - static getDerivedStateFromProps(props) { + static getDerivedStateFromProps(props: any): CommunitiesProps { return { page: getPageFromProps(props), }; } - componentDidUpdate(_, lastState) { + componentDidUpdate(_: any, lastState: CommunitiesState) { if (lastState.page !== this.state.page) { this.setState({ loading: true }); this.refetch(); @@ -172,7 +176,7 @@ export class Communities extends Component { ); } - updateUrl(paramUpdates: { page: number }) { + updateUrl(paramUpdates: CommunitiesProps) { const page = paramUpdates.page || this.state.page; this.props.history.push(`/communities/page/${page}`); } diff --git a/ui/src/components/community.tsx b/ui/src/components/community.tsx index d7d08ee8b..99b692cac 100644 --- a/ui/src/components/community.tsx +++ b/ui/src/components/community.tsx @@ -65,6 +65,18 @@ interface State { site: Site; } +interface CommunityProps { + dataType: DataType; + sort: SortType; + page: number; +} + +interface UrlParams { + dataType?: string; + sort?: string; + page?: number; +} + export class Community extends Component { private subscription: Subscription; private emptyState: State = { @@ -143,7 +155,7 @@ export class Community extends Component { this.subscription.unsubscribe(); } - static getDerivedStateFromProps(props) { + static getDerivedStateFromProps(props: any): CommunityProps { return { dataType: getDataTypeFromProps(props), sort: getSortTypeFromProps(props), @@ -151,7 +163,7 @@ export class Community extends Component { }; } - componentDidUpdate(_, lastState) { + componentDidUpdate(_: any, lastState: State) { if ( lastState.dataType !== this.state.dataType || lastState.sort !== this.state.sort || @@ -293,17 +305,13 @@ export class Community extends Component { } handleDataTypeChange(val: DataType) { - this.updateUrl({ data_type: DataType[val].toLowerCase(), page: 1 }); + this.updateUrl({ dataType: DataType[val].toLowerCase(), page: 1 }); window.scrollTo(0, 0); } - updateUrl(paramUpdates: { - data_type?: string; - sort?: string; - page?: number; - }) { + updateUrl(paramUpdates: UrlParams) { const dataTypeStr = - paramUpdates.data_type || DataType[this.state.dataType].toLowerCase(); + paramUpdates.dataType || DataType[this.state.dataType].toLowerCase(); const sortStr = paramUpdates.sort || SortType[this.state.sort].toLowerCase(); const page = paramUpdates.page || this.state.page; diff --git a/ui/src/components/main.tsx b/ui/src/components/main.tsx index 0460a6394..0560e802e 100644 --- a/ui/src/components/main.tsx +++ b/ui/src/components/main.tsx @@ -70,6 +70,20 @@ interface MainState { page: number; } +interface MainProps { + listingType: ListingType; + dataType: DataType; + sort: SortType; + page: number; +} + +interface UrlParams { + listingType?: string; + dataType?: string; + sort?: string; + page?: number; +} + export class Main extends Component { private subscription: Subscription; private emptyState: MainState = { @@ -141,7 +155,7 @@ export class Main extends Component { this.subscription.unsubscribe(); } - static getDerivedStateFromProps(props) { + static getDerivedStateFromProps(props: any): MainProps { return { listingType: getListingTypeFromProps(props), dataType: getDataTypeFromProps(props), @@ -150,7 +164,7 @@ export class Main extends Component { }; } - componentDidUpdate(_, lastState) { + componentDidUpdate(_: any, lastState: MainState) { if ( lastState.listingType !== this.state.listingType || lastState.dataType !== this.state.dataType || @@ -263,17 +277,12 @@ export class Main extends Component { ); } - updateUrl(paramUpdates: { - listing_type?: string; - data_type?: string; - sort?: string; - page?: number; - }) { + updateUrl(paramUpdates: UrlParams) { const listingTypeStr = - paramUpdates.listing_type || + paramUpdates.listingType || ListingType[this.state.listingType].toLowerCase(); const dataTypeStr = - paramUpdates.data_type || DataType[this.state.dataType].toLowerCase(); + paramUpdates.dataType || DataType[this.state.dataType].toLowerCase(); const sortStr = paramUpdates.sort || SortType[this.state.sort].toLowerCase(); const page = paramUpdates.page || this.state.page; @@ -560,12 +569,12 @@ export class Main extends Component { } handleListingTypeChange(val: ListingType) { - this.updateUrl({ listing_type: ListingType[val].toLowerCase(), page: 1 }); + this.updateUrl({ listingType: ListingType[val].toLowerCase(), page: 1 }); window.scrollTo(0, 0); } handleDataTypeChange(val: DataType) { - this.updateUrl({ data_type: DataType[val].toLowerCase(), page: 1 }); + this.updateUrl({ dataType: DataType[val].toLowerCase(), page: 1 }); window.scrollTo(0, 0); } diff --git a/ui/src/components/search.tsx b/ui/src/components/search.tsx index 70a9faa2e..d1d99cee8 100644 --- a/ui/src/components/search.tsx +++ b/ui/src/components/search.tsx @@ -28,6 +28,7 @@ import { createCommentLikeRes, createPostLikeFindRes, commentsToFlatNodes, + getPageFromProps, } from '../utils'; import { PostListing } from './post-listing'; import { UserListing } from './user-listing'; @@ -47,13 +48,27 @@ interface SearchState { searchText: string; } +interface SearchProps { + q: string; + type_: SearchType; + sort: SortType; + page: number; +} + +interface UrlParams { + q?: string; + type_?: string; + sort?: string; + page?: number; +} + 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), + page: getPageFromProps(this.props), searchText: Search.getSearchQueryFromProps(this.props), searchResponse: { type_: null, @@ -95,10 +110,6 @@ export class Search extends Component { : 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); @@ -124,16 +135,16 @@ export class Search extends Component { this.subscription.unsubscribe(); } - static getDerivedStateFromProps(props) { + static getDerivedStateFromProps(props: any): SearchProps { return { q: Search.getSearchQueryFromProps(props), type_: Search.getSearchTypeFromProps(props), sort: Search.getSortTypeFromProps(props), - page: Search.getPageFromProps(props), + page: getPageFromProps(props), }; } - componentDidUpdate(_, lastState) { + componentDidUpdate(_: any, lastState: SearchState) { if ( lastState.q !== this.state.q || lastState.type_ !== this.state.type_ || @@ -443,19 +454,22 @@ export class Search extends Component { } handleSortChange(val: SortType) { - this.updateUrl({ sort: val, page: 1 }); + this.updateUrl({ sort: SortType[val].toLowerCase(), page: 1 }); } handleTypeChange(i: Search, event: any) { - i.updateUrl({ type_: Number(event.target.value), page: 1 }); + i.updateUrl({ + type_: SearchType[Number(event.target.value)].toLowerCase(), + page: 1, + }); } handleSearchSubmit(i: Search, event: any) { event.preventDefault(); i.updateUrl({ q: i.state.searchText, - type_: i.state.type_, - sort: i.state.sort, + type_: SearchType[i.state.type_].toLowerCase(), + sort: SortType[i.state.sort].toLowerCase(), page: i.state.page, }); } @@ -464,22 +478,15 @@ export class Search extends Component { i.setState({ searchText: event.target.value }); } - updateUrl(paramUpdates: { - q?: string; - type_?: number; - sort?: SortType; - page?: number; - }) { - const qStr = paramUpdates.q || Search.getSearchQueryFromProps(this.props); + updateUrl(paramUpdates: UrlParams) { + const qStr = paramUpdates.q || this.state.q; const typeStr = - SearchType[paramUpdates.type_] || - SearchType[Search.getSearchTypeFromProps(this.props)]; + paramUpdates.type_ || SearchType[this.state.type_].toLowerCase(); const sortStr = - SortType[paramUpdates.sort] || - SortType[Search.getSortTypeFromProps(this.props)]; - const page = paramUpdates.page || Search.getPageFromProps(this.props); + paramUpdates.sort || SortType[this.state.sort].toLowerCase(); + const page = paramUpdates.page || this.state.page; this.props.history.push( - `/search/q/${qStr}/type/${typeStr.toLowerCase()}/sort/${sortStr.toLowerCase()}/page/${page}` + `/search/q/${qStr}/type/${typeStr}/sort/${sortStr}/page/${page}` ); } diff --git a/ui/src/components/sort-select.tsx b/ui/src/components/sort-select.tsx index 736cbb30f..33d658199 100644 --- a/ui/src/components/sort-select.tsx +++ b/ui/src/components/sort-select.tsx @@ -23,10 +23,9 @@ export class SortSelect extends Component { this.state = this.emptyState; } - static getDerivedStateFromProps(props) { - console.log('sort-select', props); + static getDerivedStateFromProps(props: any): SortSelectState { return { - sort: Number(props.sort), + sort: props.sort, }; } diff --git a/ui/src/components/user-details.tsx b/ui/src/components/user-details.tsx index a622985ff..e4b4b24a3 100644 --- a/ui/src/components/user-details.tsx +++ b/ui/src/components/user-details.tsx @@ -1,4 +1,4 @@ -import { Component } from 'inferno'; +import { Component, linkEvent } from 'inferno'; import { WebSocketService, UserService } from '../services'; import { Subscription } from 'rxjs'; import { retryWhen, delay, take, last } from 'rxjs/operators'; @@ -40,6 +40,7 @@ interface UserDetailsProps { enableDownvotes: boolean; enableNsfw: boolean; view: UserDetailsView; + onPageChange(page: number): number | any; } interface UserDetailsState { @@ -104,7 +105,12 @@ export class UserDetails extends Component { } render() { - return this.viewSelector(this.props.view); + return ( +
+ {this.viewSelector(this.props.view)} + {this.paginator()} +
+ ); } viewSelector(view: UserDetailsView) { @@ -196,6 +202,37 @@ export class UserDetails extends Component { ); } + paginator() { + return ( +
+ {this.props.page > 1 && ( + + )} + {this.state.comments.length + this.state.posts.length > 0 && ( + + )} +
+ ); + } + + nextPage(i: UserDetails) { + i.props.onPageChange(i.props.page + 1); + } + + prevPage(i: UserDetails) { + i.props.onPageChange(i.props.page - 1); + } + parseMessage(msg: WebSocketJsonResponse) { const res = wsJsonToRes(msg); diff --git a/ui/src/components/user.tsx b/ui/src/components/user.tsx index 25aaf2208..945206c1d 100644 --- a/ui/src/components/user.tsx +++ b/ui/src/components/user.tsx @@ -57,6 +57,20 @@ interface UserState { site: Site; } +interface UserProps { + view: UserDetailsView; + sort: SortType; + page: number; + user_id: number | null; + username: string; +} + +interface UrlParams { + view?: string; + sort?: string; + page?: number; +} + export class User extends Component { private subscription: Subscription; private emptyState: UserState = { @@ -119,7 +133,7 @@ export class User extends Component { constructor(props: any, context: any) { super(props, context); - this.state = Object.assign({}, this.emptyState); + this.state = this.emptyState; this.handleSortChange = this.handleSortChange.bind(this); this.handleUserSettingsSortTypeChange = this.handleUserSettingsSortTypeChange.bind( this @@ -127,6 +141,7 @@ export class User extends Component { this.handleUserSettingsListingTypeChange = this.handleUserSettingsListingTypeChange.bind( this ); + this.handlePageChange = this.handlePageChange.bind(this); this.state.user_id = Number(this.props.match.params.id) || null; this.state.username = this.props.match.params.username; @@ -167,7 +182,7 @@ export class User extends Component { this.subscription.unsubscribe(); } - static getDerivedStateFromProps(props) { + static getDerivedStateFromProps(props: any): UserProps { return { view: this.getViewFromProps(props.match.params.view), sort: this.getSortTypeFromProps(props.match.params.sort), @@ -223,9 +238,8 @@ export class User extends Component { enableDownvotes={this.state.site.enable_downvotes} enableNsfw={this.state.site.enable_nsfw} view={this.state.view} - key={this.state.user_id || this.state.username} + onPageChange={this.handlePageChange} /> - {this.paginator()}
{this.userInfo()} @@ -794,67 +808,35 @@ export class User extends Component { ); } - paginator() { - return ( -
- {this.state.page > 1 && ( - - )} - {this.state.comments.length + this.state.posts.length > 0 && ( - - )} -
- ); - } - - updateUrl() { - let viewStr = UserDetailsView[this.state.view].toLowerCase(); - let sortStr = SortType[this.state.sort].toLowerCase(); + updateUrl(paramUpdates: UrlParams) { + const page = paramUpdates.page || this.state.page; + const viewStr = + paramUpdates.view || UserDetailsView[this.state.view].toLowerCase(); + const sortStr = + paramUpdates.sort || SortType[this.state.sort].toLowerCase(); this.props.history.push( - `/u/${this.state.username}/view/${viewStr}/sort/${sortStr}/page/${this.state.page}` + `/u/${this.state.username}/view/${viewStr}/sort/${sortStr}/page/${page}` ); - this.setState(this.state); } - nextPage(i: User) { - i.state.page++; - i.updateUrl(); - } - - prevPage(i: User) { - i.state.page--; - i.updateUrl(); + handlePageChange(page: number) { + this.updateUrl({ page }); } handleSortChange(val: SortType) { - this.state.sort = val; - this.state.page = 1; - this.updateUrl(); + this.updateUrl({ sort: SortType[val].toLowerCase(), page: 1 }); } handleViewChange(i: User, event: any) { - i.state.view = Number(event.target.value); - i.state.page = 1; - i.updateUrl(); + i.updateUrl({ + view: UserDetailsView[Number(event.target.value)].toLowerCase(), + page: 1, + }); } handleUserSettingsShowNsfwChange(i: User, event: any) { - i.setState({ - userSettingsForm: { - ...i.state.userSettingsForm, - show_nsfw: event.target.checked, - }, - }); + i.state.userSettingsForm.show_nsfw = event.target.checked; + i.setState(i.state); } handleUserSettingsShowAvatarsChange(i: User, event: any) {