From 1d0c5bfda73f1a1abf4e4e3332323c6d17caa40a Mon Sep 17 00:00:00 2001 From: Dessalines Date: Sun, 28 Apr 2019 17:41:24 -0700 Subject: [PATCH] Adding paging to user details --- ui/src/components/user.tsx | 51 +++++++++++++++++++++++++++++++++++--- ui/src/index.tsx | 7 +++--- 2 files changed, 51 insertions(+), 7 deletions(-) diff --git a/ui/src/components/user.tsx b/ui/src/components/user.tsx index 1d1f8e638..cccba8526 100644 --- a/ui/src/components/user.tsx +++ b/ui/src/components/user.tsx @@ -4,7 +4,7 @@ import { Subscription } from "rxjs"; import { retryWhen, delay, take } from 'rxjs/operators'; import { UserOperation, Post, Comment, CommunityUser, GetUserDetailsForm, SortType, UserDetailsResponse, UserView, CommentResponse } from '../interfaces'; import { WebSocketService } from '../services'; -import { msgOp, fetchLimit } from '../utils'; +import { msgOp, fetchLimit, routeSortTypeToEnum, capitalizeFirstLetter } from '../utils'; import { PostListing } from './post-listing'; import { CommentNodes } from './comment-nodes'; import { MomentTime } from './moment-time'; @@ -25,6 +25,7 @@ interface UserState { view: View; sort: SortType; page: number; + loading: boolean; } export class User extends Component { @@ -47,9 +48,10 @@ export class User extends Component { moderates: [], comments: [], posts: [], - view: View.Overview, - sort: SortType.New, - page: 1, + loading: true, + view: this.getViewFromProps(this.props), + sort: this.getSortTypeFromProps(this.props), + page: this.getPageFromProps(this.props), } constructor(props: any, context: any) { @@ -71,13 +73,42 @@ export class User extends Component { this.refetch(); } + getViewFromProps(props: any): View { + return (props.match.params.view) ? + View[capitalizeFirstLetter(props.match.params.view)] : + View.Overview; + } + + getSortTypeFromProps(props: any): SortType { + return (props.match.params.sort) ? + routeSortTypeToEnum(props.match.params.sort) : + SortType.New; + } + + getPageFromProps(props: any): number { + return (props.match.params.page) ? Number(props.match.params.page) : 1; + } + componentWillUnmount() { this.subscription.unsubscribe(); } + // Necessary for back button for some reason + componentWillReceiveProps(nextProps: any) { + if (nextProps.history.action == 'POP') { + this.state = this.emptyState; + this.state.view = this.getViewFromProps(nextProps); + this.state.sort = this.getSortTypeFromProps(nextProps); + this.state.page = this.getPageFromProps(nextProps); + this.refetch(); + } + } + render() { return (
+ {this.state.loading ? +
:
/u/{this.state.user.name}
@@ -102,6 +133,7 @@ export class User extends Component { {this.follows()}
+ }
) } @@ -247,15 +279,23 @@ export class User extends Component { ); } + updateUrl() { + let viewStr = View[this.state.view].toLowerCase(); + let sortStr = SortType[this.state.sort].toLowerCase(); + this.props.history.push(`/u/${this.state.user.name}/view/${viewStr}/sort/${sortStr}/page/${this.state.page}`); + } + nextPage(i: User) { i.state.page++; i.setState(i.state); + i.updateUrl(); i.refetch(); } prevPage(i: User) { i.state.page--; i.setState(i.state); + i.updateUrl(); i.refetch(); } @@ -275,6 +315,7 @@ export class User extends Component { i.state.sort = Number(event.target.value); i.state.page = 1; i.setState(i.state); + i.updateUrl(); i.refetch(); } @@ -282,6 +323,7 @@ export class User extends Component { i.state.view = Number(event.target.value); i.state.page = 1; i.setState(i.state); + i.updateUrl(); i.refetch(); } @@ -298,6 +340,7 @@ export class User extends Component { this.state.follows = res.follows; this.state.moderates = res.moderates; this.state.posts = res.posts; + this.state.loading = false; document.title = `/u/${this.state.user.name} - Lemmy`; this.setState(this.state); } else if (op == UserOperation.EditComment) { diff --git a/ui/src/index.tsx b/ui/src/index.tsx index 0164f50e0..2f25dffec 100644 --- a/ui/src/index.tsx +++ b/ui/src/index.tsx @@ -38,17 +38,18 @@ class Index extends Component {
- - + + - + +