summaryrefslogtreecommitdiffstats
path: root/ui/src
diff options
context:
space:
mode:
Diffstat (limited to 'ui/src')
-rw-r--r--ui/src/components/post-listings.tsx58
-rw-r--r--ui/src/components/user.tsx58
-rw-r--r--ui/src/interfaces.ts10
-rw-r--r--ui/src/utils.ts2
4 files changed, 91 insertions, 37 deletions
diff --git a/ui/src/components/post-listings.tsx b/ui/src/components/post-listings.tsx
index 34814400..5fbb6cbf 100644
--- a/ui/src/components/post-listings.tsx
+++ b/ui/src/components/post-listings.tsx
@@ -5,8 +5,7 @@ import { retryWhen, delay, take } from 'rxjs/operators';
import { UserOperation, Community as CommunityI, Post, GetPostsForm, SortType, ListingType, GetPostsResponse, CreatePostLikeResponse, CommunityUser} from '../interfaces';
import { WebSocketService, UserService } from '../services';
import { PostListing } from './post-listing';
-import { msgOp } from '../utils';
-
+import { msgOp, fetchLimit } from '../utils';
interface PostListingsProps {
communityId?: number;
@@ -18,6 +17,7 @@ interface PostListingsState {
posts: Array<Post>;
sortType: SortType;
type_: ListingType;
+ page: number;
loading: boolean;
}
@@ -46,6 +46,7 @@ export class PostListings extends Component<PostListingsProps, PostListingsState
: UserService.Instance.user
? ListingType.Subscribed
: ListingType.All,
+ page: 1,
loading: true
}
@@ -63,13 +64,7 @@ export class PostListings extends Component<PostListingsProps, PostListingsState
() => console.log('complete')
);
- let getPostsForm: GetPostsForm = {
- type_: ListingType[this.state.type_],
- community_id: this.props.communityId,
- limit: 10,
- sort: SortType[SortType.Hot],
- }
- WebSocketService.Instance.getPosts(getPostsForm);
+ this.refetch();
}
componentWillUnmount() {
@@ -82,12 +77,13 @@ export class PostListings extends Component<PostListingsProps, PostListingsState
{this.state.loading ?
<h4><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h4> :
<div>
- <div>{this.selects()}</div>
+ {this.selects()}
{this.state.posts.length > 0
? this.state.posts.map(post =>
<PostListing post={post} showCommunity={!this.props.communityId}/>)
: <div>No Listings. {!this.props.communityId && <span>Subscribe to some <Link to="/communities">forums</Link>.</span>}</div>
}
+ {this.paginator()}
</div>
}
</div>
@@ -119,17 +115,44 @@ export class PostListings extends Component<PostListingsProps, PostListingsState
}
</div>
)
+ }
+ paginator() {
+ return (
+ <div class="mt-2">
+ {this.state.page > 1 &&
+ <button class="btn btn-sm btn-secondary mr-1" onClick={linkEvent(this, this.prevPage)}>Prev</button>
+ }
+ <button class="btn btn-sm btn-secondary" onClick={linkEvent(this, this.nextPage)}>Next</button>
+ </div>
+ );
+ }
+
+ nextPage(i: PostListings) {
+ i.state.page++;
+ i.setState(i.state);
+ i.refetch();
+ }
+
+ prevPage(i: PostListings) {
+ i.state.page--;
+ i.setState(i.state);
+ i.refetch();
}
handleSortChange(i: PostListings, event: any) {
i.state.sortType = Number(event.target.value);
+ i.state.page = 1;
i.setState(i.state);
+ i.refetch();
+ }
+ refetch() {
let getPostsForm: GetPostsForm = {
- community_id: i.state.community.id,
- limit: 10,
- sort: SortType[i.state.sortType],
+ community_id: this.state.community.id,
+ page: this.state.page,
+ limit: fetchLimit,
+ sort: SortType[this.state.sortType],
type_: ListingType[ListingType.Community]
}
WebSocketService.Instance.getPosts(getPostsForm);
@@ -137,14 +160,9 @@ export class PostListings extends Component<PostListingsProps, PostListingsState
handleTypeChange(i: PostListings, event: any) {
i.state.type_ = Number(event.target.value);
+ i.state.page = 1;
i.setState(i.state);
-
- let getPostsForm: GetPostsForm = {
- limit: 10,
- sort: SortType[i.state.sortType],
- type_: ListingType[i.state.type_]
- }
- WebSocketService.Instance.getPosts(getPostsForm);
+ i.refetch();
}
parseMessage(msg: any) {
diff --git a/ui/src/components/user.tsx b/ui/src/components/user.tsx
index b899686a..fdcd378e 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 } from '../interfaces';
import { WebSocketService } from '../services';
-import { msgOp } from '../utils';
+import { msgOp, fetchLimit } from '../utils';
import { PostListing } from './post-listing';
import { CommentNodes } from './comment-nodes';
import { MomentTime } from './moment-time';
@@ -15,6 +15,7 @@ enum View {
interface UserState {
user: UserView;
+ user_id: number;
follows: Array<CommunityUser>;
moderates: Array<CommunityUser>;
comments: Array<Comment>;
@@ -22,6 +23,7 @@ interface UserState {
saved?: Array<Post>;
view: View;
sort: SortType;
+ page: number;
}
export class User extends Component<any, UserState> {
@@ -38,12 +40,14 @@ export class User extends Component<any, UserState> {
number_of_comments: null,
comment_score: null,
},
+ user_id: null,
follows: [],
moderates: [],
comments: [],
posts: [],
view: View.Overview,
- sort: SortType.New
+ sort: SortType.New,
+ page: 1,
}
constructor(props: any, context: any) {
@@ -51,7 +55,7 @@ export class User extends Component<any, UserState> {
this.state = this.emptyState;
- let userId = Number(this.props.match.params.id);
+ this.state.user_id = Number(this.props.match.params.id);
this.subscription = WebSocketService.Instance.subject
.pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
@@ -61,12 +65,7 @@ export class User extends Component<any, UserState> {
() => console.log('complete')
);
- let form: GetUserDetailsForm = {
- user_id: userId,
- sort: SortType[this.state.sort],
- limit: 999
- };
- WebSocketService.Instance.getUserDetails(form);
+ this.refetch();
}
componentWillUnmount() {
@@ -89,6 +88,7 @@ export class User extends Component<any, UserState> {
{this.state.view == View.Posts &&
this.posts()
}
+ {this.paginator()}
</div>
<div class="col-12 col-md-3">
{this.userInfo()}
@@ -230,21 +230,51 @@ export class User extends Component<any, UserState> {
)
}
- handleSortChange(i: User, event: any) {
- i.state.sort = Number(event.target.value);
+ paginator() {
+ return (
+ <div class="mt-2">
+ {this.state.page > 1 &&
+ <button class="btn btn-sm btn-secondary mr-1" onClick={linkEvent(this, this.prevPage)}>Prev</button>
+ }
+ <button class="btn btn-sm btn-secondary" onClick={linkEvent(this, this.nextPage)}>Next</button>
+ </div>
+ );
+ }
+
+ nextPage(i: User) {
+ i.state.page++;
+ i.setState(i.state);
+ i.refetch();
+ }
+
+ prevPage(i: User) {
+ i.state.page--;
i.setState(i.state);
+ i.refetch();
+ }
+ refetch() {
let form: GetUserDetailsForm = {
- user_id: i.state.user.id,
- sort: SortType[i.state.sort],
- limit: 999
+ user_id: this.state.user_id,
+ sort: SortType[this.state.sort],
+ page: this.state.page,
+ limit: fetchLimit,
};
WebSocketService.Instance.getUserDetails(form);
}
+ handleSortChange(i: User, event: any) {
+ i.state.sort = Number(event.target.value);
+ i.state.page = 1;
+ i.setState(i.state);
+ i.refetch();
+ }
+
handleViewChange(i: User, event: any) {
i.state.view = Number(event.target.value);
+ i.state.page = 1;
i.setState(i.state);
+ i.refetch();
}
parseMessage(msg: any) {
diff --git a/ui/src/interfaces.ts b/ui/src/interfaces.ts
index 869fb60b..6affc0e1 100644
--- a/ui/src/interfaces.ts
+++ b/ui/src/interfaces.ts
@@ -134,7 +134,8 @@ export interface GetFollowedCommunitiesResponse {
export interface GetUserDetailsForm {
user_id: number;
sort: string; // TODO figure this one out
- limit: number;
+ page?: number;
+ limit?: number;
community_id?: number;
auth?: string;
}
@@ -179,8 +180,8 @@ export interface AddModToCommunityResponse {
export interface GetModlogForm {
mod_user_id?: number;
community_id?: number;
- limit?: number;
page?: number;
+ limit?: number;
}
export interface GetModlogResponse {
@@ -343,6 +344,7 @@ export interface CommunityResponse {
export interface ListCommunitiesForm {
sort: string;
+ page?: number;
limit?: number;
auth?: string;
}
@@ -356,6 +358,7 @@ export interface ListCategoriesResponse {
op: string;
categories: Array<Category>;
}
+
export interface PostForm {
name: string;
url?: string;
@@ -414,7 +417,8 @@ export interface CommentNode {
export interface GetPostsForm {
type_: string;
sort: string;
- limit: number;
+ page?: number;
+ limit?: number;
community_id?: number;
auth?: string;
}
diff --git a/ui/src/utils.ts b/ui/src/utils.ts
index 4bd0d90d..c7f3bad8 100644
--- a/ui/src/utils.ts
+++ b/ui/src/utils.ts
@@ -39,3 +39,5 @@ export function getUnixTime(text: string): number {
export function addTypeInfo<T>(arr: Array<T>, name: string): Array<{type_: string, data: T}> {
return arr.map(e => {return {type_: name, data: e}});
}
+
+export let fetchLimit: number = 20;
generated by cgit v1.2.3 (git 2.25.1) at 2024-06-09 05:28:57 +0000