grishka/lemmy
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

ui.components: fix ts types, move user pagination to user details

Browse source
This commit is contained in:
derek 2020-07-14 01:13:43 -04:00
parent 563a66b053
commit ef62f4698a
7 changed files with 152 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
ui/src/components/communities.tsx vendored
View file

@ -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}`);
}

26
ui/src/components/community.tsx vendored
View file

@ -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;

33
ui/src/components/main.tsx vendored
View file

@ -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);
}

57
ui/src/components/search.tsx vendored
View file

@ -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}`
);
}

5
ui/src/components/sort-select.tsx vendored
View file

@ -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,
};
}

41
ui/src/components/user-details.tsx vendored
View file

@ -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);

86
ui/src/components/user.tsx vendored
View file

@ -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) {