Adding paging to user details

This commit is contained in:
Dessalines 2019-04-28 17:41:24 -07:00
parent 1769a62aac
commit 0443538c79
2 changed files with 51 additions and 7 deletions

View File

@ -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<any, UserState> {
@ -47,9 +48,10 @@ export class User extends Component<any, UserState> {
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<any, UserState> {
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 (
<div class="container">
{this.state.loading ?
<h5><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h5> :
<div class="row">
<div class="col-12 col-md-9">
<h5>/u/{this.state.user.name}</h5>
@ -102,6 +133,7 @@ export class User extends Component<any, UserState> {
{this.follows()}
</div>
</div>
}
</div>
)
}
@ -247,15 +279,23 @@ export class User extends Component<any, UserState> {
);
}
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<any, UserState> {
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<any, UserState> {
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<any, UserState> {
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) {

View File

@ -38,17 +38,18 @@ class Index extends Component<any, any> {
<Navbar />
<div class="mt-3 p-0">
<Switch>
<Route path="/home/type/:type/sort/:sort/page/:page" component={Main} />
<Route exact path="/" component={Main} />
<Route path={`/home/type/:type/sort/:sort/page/:page`} component={Main} />
<Route exact path={`/`} component={Main} />
<Route path={`/login`} component={Login} />
<Route path={`/create_post`} component={CreatePost} />
<Route path={`/create_community`} component={CreateCommunity} />
<Route path={`/communities`} component={Communities} />
<Route path={`/post/:id/comment/:comment_id`} component={Post} />
<Route path={`/post/:id`} component={Post} />
<Route path="/f/:name/sort/:sort/page/:page" component={Community} />
<Route path={`/f/:name/sort/:sort/page/:page`} component={Community} />
<Route path={`/community/:id`} component={Community} />
<Route path={`/f/:name`} component={Community} />
<Route path={`/u/:username/view/:view/sort/:sort/page/:page`} component={User} />
<Route path={`/user/:id`} component={User} />
<Route path={`/u/:username`} component={User} />
<Route path={`/inbox`} component={Inbox} />