summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--ui/src/components/communities.tsx10
-rw-r--r--ui/src/components/community.tsx26
-rw-r--r--ui/src/components/main.tsx33
-rw-r--r--ui/src/components/search.tsx57
-rw-r--r--ui/src/components/sort-select.tsx5
-rw-r--r--ui/src/components/user-details.tsx41
-rw-r--r--ui/src/components/user.tsx86
7 files changed, 152 insertions, 106 deletions
diff --git a/ui/src/components/communities.tsx b/ui/src/components/communities.tsx
index 71ea878d..ba362acc 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<any, CommunitiesState> {
private subscription: Subscription;
private emptyState: CommunitiesState = {
@@ -54,13 +58,13 @@ export class Communities extends Component<any, CommunitiesState> {
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<any, CommunitiesState> {
);
}
- 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 d7d08ee8..99b692ca 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<any, State> {
private subscription: Subscription;
private emptyState: State = {
@@ -143,7 +155,7 @@ export class Community extends Component<any, State> {
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<any, State> {
};
}
- 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<any, State> {
}
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 0460a639..0560e802 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<any, MainState> {
private subscription: Subscription;
private emptyState: MainState = {
@@ -141,7 +155,7 @@ export class Main extends Component<any, MainState> {
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<any, MainState> {
};
}
- 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<any, MainState> {
);
}
- 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<any, MainState> {
}
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 70a9faa2..d1d99cee 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<any, SearchState> {
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<any, SearchState> {
: 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<any, SearchState> {
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<any, SearchState> {
}
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<any, SearchState> {
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 736cbb30..33d65819 100644
--- a/ui/src/components/sort-select.tsx
+++ b/ui/src/components/sort-select.tsx
@@ -23,10 +23,9 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
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 a622985f..e4b4b24a 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<UserDetailsProps, UserDetailsState> {
}
render() {
- return this.viewSelector(this.props.view);
+ return (
+ <div>
+ {this.viewSelector(this.props.view)}
+ {this.paginator()}
+ </div>
+ );
}
viewSelector(view: UserDetailsView) {
@@ -196,6 +202,37 @@ export class UserDetails extends Component<UserDetailsProps, UserDetailsState> {
);
}
+ paginator() {
+ return (
+ <div class="my-2">
+ {this.props.page > 1 && (
+ <button
+ class="btn btn-sm btn-secondary mr-1"
+ onClick={linkEvent(this, this.prevPage)}
+ >
+ {i18n.t('prev')}
+ </button>
+ )}
+ {this.state.comments.length + this.state.posts.length > 0 && (
+ <button
+ class="btn btn-sm btn-secondary"
+ onClick={linkEvent(this, this.nextPage)}
+ >
+ {i18n.t('next')}
+ </button>
+ )}
+ </div>
+ );
+ }
+
+ 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 25aaf220..945206c1 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<any, UserState> {
private subscription: Subscription;
private emptyState: UserState = {
@@ -119,7 +133,7 @@ export class User extends Component<any, UserState> {
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<any, UserState> {
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<any, UserState> {
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<any, UserState> {
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()}
</div>
<div class="col-12 col-md-4">
{this.userInfo()}
@@ -794,67 +808,35 @@ export class User extends Component<any, UserState> {
);
}
- paginator() {
- return (
- <div class="my-2">
- {this.state.page > 1 && (
- <button
- class="btn btn-sm btn-secondary mr-1"
- onClick={linkEvent(this, this.prevPage)}
- >
- {i18n.t('prev')}
- </button>
- )}
- {this.state.comments.length + this.state.posts.length > 0 && (
- <button
- class="btn btn-sm btn-secondary"
- onClick={linkEvent(this, this.nextPage)}
- >
- {i18n.t('next')}
- </button>
- )}
- </div>
- );
- }
-
- 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) {
generated by cgit v1.2.3 (git 2.25.1) at 2024-04-16 13:23:04 +0000