mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-12-23 03:11:25 +00:00
Always show previous paginator, extract paginator component.
- Fixes #304
This commit is contained in:
parent
0e25ced312
commit
0361b2c700
8 changed files with 102 additions and 229 deletions
|
|
@ -26,6 +26,7 @@ import {
|
|||
setOptionalAuth,
|
||||
} from "../utils";
|
||||
import { CommunityLink } from "./community-link";
|
||||
import { Paginator } from "./paginator";
|
||||
import { Spinner } from "./icon";
|
||||
import { i18n } from "../i18next";
|
||||
import { InitialFetchRequest } from "shared/interfaces";
|
||||
|
|
@ -58,6 +59,7 @@ export class Communities extends Component<any, CommunitiesState> {
|
|||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.state = this.emptyState;
|
||||
this.handlePageChange = this.handlePageChange.bind(this);
|
||||
|
||||
this.parseMessage = this.parseMessage.bind(this);
|
||||
this.subscription = wsSubscribe(this.parseMessage);
|
||||
|
|
@ -178,7 +180,10 @@ export class Communities extends Component<any, CommunitiesState> {
|
|||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{this.paginator()}
|
||||
<Paginator
|
||||
page={this.state.page}
|
||||
onChange={this.handlePageChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -211,41 +216,13 @@ export class Communities extends Component<any, CommunitiesState> {
|
|||
);
|
||||
}
|
||||
|
||||
paginator() {
|
||||
return (
|
||||
<div class="mt-2">
|
||||
{this.state.page > 1 && (
|
||||
<button
|
||||
class="btn btn-secondary mr-1"
|
||||
onClick={linkEvent(this, this.prevPage)}
|
||||
>
|
||||
{i18n.t("prev")}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{this.state.communities.length > 0 && (
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
onClick={linkEvent(this, this.nextPage)}
|
||||
>
|
||||
{i18n.t("next")}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
updateUrl(paramUpdates: CommunitiesProps) {
|
||||
const page = paramUpdates.page || this.state.page;
|
||||
this.props.history.push(`/communities/page/${page}`);
|
||||
}
|
||||
|
||||
nextPage(i: Communities) {
|
||||
i.updateUrl({ page: i.state.page + 1 });
|
||||
}
|
||||
|
||||
prevPage(i: Communities) {
|
||||
i.updateUrl({ page: i.state.page - 1 });
|
||||
handlePageChange(page: number) {
|
||||
this.updateUrl({ page });
|
||||
}
|
||||
|
||||
handleUnsubscribe(communityId: number) {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Component, linkEvent } from "inferno";
|
||||
import { Component } from "inferno";
|
||||
import { Subscription } from "rxjs";
|
||||
import { DataType, InitialFetchRequest } from "../interfaces";
|
||||
import {
|
||||
|
|
@ -30,6 +30,7 @@ import { Sidebar } from "./sidebar";
|
|||
import { CommunityLink } from "./community-link";
|
||||
import { BannerIconHeader } from "./banner-icon-header";
|
||||
import { Icon, Spinner } from "./icon";
|
||||
import { Paginator } from "./paginator";
|
||||
import {
|
||||
wsJsonToRes,
|
||||
fetchLimit,
|
||||
|
|
@ -108,6 +109,7 @@ export class Community extends Component<any, State> {
|
|||
this.state = this.emptyState;
|
||||
this.handleSortChange = this.handleSortChange.bind(this);
|
||||
this.handleDataTypeChange = this.handleDataTypeChange.bind(this);
|
||||
this.handlePageChange = this.handlePageChange.bind(this);
|
||||
|
||||
this.parseMessage = this.parseMessage.bind(this);
|
||||
this.subscription = wsSubscribe(this.parseMessage);
|
||||
|
|
@ -255,7 +257,10 @@ export class Community extends Component<any, State> {
|
|||
{this.communityInfo()}
|
||||
{this.selects()}
|
||||
{this.listings()}
|
||||
{this.paginator()}
|
||||
<Paginator
|
||||
page={this.state.page}
|
||||
onChange={this.handlePageChange}
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
<Sidebar
|
||||
|
|
@ -345,36 +350,8 @@ export class Community extends Component<any, State> {
|
|||
);
|
||||
}
|
||||
|
||||
paginator() {
|
||||
return (
|
||||
<div class="my-2">
|
||||
{this.state.page > 1 && (
|
||||
<button
|
||||
class="btn btn-secondary mr-1"
|
||||
onClick={linkEvent(this, this.prevPage)}
|
||||
>
|
||||
{i18n.t("prev")}
|
||||
</button>
|
||||
)}
|
||||
{this.state.posts.length > 0 && (
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
onClick={linkEvent(this, this.nextPage)}
|
||||
>
|
||||
{i18n.t("next")}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
nextPage(i: Community) {
|
||||
i.updateUrl({ page: i.state.page + 1 });
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
|
||||
prevPage(i: Community) {
|
||||
i.updateUrl({ page: i.state.page - 1 });
|
||||
handlePageChange(page: number) {
|
||||
this.updateUrl({ page });
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@ import {
|
|||
import { CommentNodes } from "./comment-nodes";
|
||||
import { PrivateMessage } from "./private-message";
|
||||
import { HtmlTags } from "./html-tags";
|
||||
import { Paginator } from "./paginator";
|
||||
import { SortSelect } from "./sort-select";
|
||||
import { Icon, Spinner } from "./icon";
|
||||
import { i18n } from "../i18next";
|
||||
|
|
@ -100,6 +101,7 @@ export class Inbox extends Component<any, InboxState> {
|
|||
|
||||
this.state = this.emptyState;
|
||||
this.handleSortChange = this.handleSortChange.bind(this);
|
||||
this.handlePageChange = this.handlePageChange.bind(this);
|
||||
|
||||
if (!UserService.Instance.localUserView && isBrowser()) {
|
||||
toast(i18n.t("not_logged_in"), "danger");
|
||||
|
|
@ -183,7 +185,10 @@ export class Inbox extends Component<any, InboxState> {
|
|||
this.mentions()}
|
||||
{this.state.messageType == MessageType.Messages &&
|
||||
this.messages()}
|
||||
{this.paginator()}
|
||||
<Paginator
|
||||
page={this.state.page}
|
||||
onChange={this.handlePageChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -429,39 +434,9 @@ export class Inbox extends Component<any, InboxState> {
|
|||
);
|
||||
}
|
||||
|
||||
paginator() {
|
||||
return (
|
||||
<div class="mt-2">
|
||||
{this.state.page > 1 && (
|
||||
<button
|
||||
class="btn btn-secondary mr-1"
|
||||
onClick={linkEvent(this, this.prevPage)}
|
||||
>
|
||||
{i18n.t("prev")}
|
||||
</button>
|
||||
)}
|
||||
{this.unreadCount() > 0 && (
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
onClick={linkEvent(this, this.nextPage)}
|
||||
>
|
||||
{i18n.t("next")}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
nextPage(i: Inbox) {
|
||||
i.state.page++;
|
||||
i.setState(i.state);
|
||||
i.refetch();
|
||||
}
|
||||
|
||||
prevPage(i: Inbox) {
|
||||
i.state.page--;
|
||||
i.setState(i.state);
|
||||
i.refetch();
|
||||
handlePageChange(page: number) {
|
||||
this.setState({ page });
|
||||
this.refetch();
|
||||
}
|
||||
|
||||
handleUnreadOrAllChange(i: Inbox, event: any) {
|
||||
|
|
|
|||
|
|
@ -65,6 +65,7 @@ import {
|
|||
import { i18n } from "../i18next";
|
||||
import { T } from "inferno-i18next";
|
||||
import { HtmlTags } from "./html-tags";
|
||||
import { Paginator } from "./paginator";
|
||||
|
||||
interface MainState {
|
||||
subscribedCommunities: CommunityFollowerView[];
|
||||
|
|
@ -119,6 +120,7 @@ export class Main extends Component<any, MainState> {
|
|||
this.handleSortChange = this.handleSortChange.bind(this);
|
||||
this.handleListingTypeChange = this.handleListingTypeChange.bind(this);
|
||||
this.handleDataTypeChange = this.handleDataTypeChange.bind(this);
|
||||
this.handlePageChange = this.handlePageChange.bind(this);
|
||||
|
||||
this.parseMessage = this.parseMessage.bind(this);
|
||||
this.subscription = wsSubscribe(this.parseMessage);
|
||||
|
|
@ -132,7 +134,8 @@ export class Main extends Component<any, MainState> {
|
|||
}
|
||||
this.state.trendingCommunities = this.isoData.routeData[1].communities;
|
||||
if (UserService.Instance.localUserView) {
|
||||
this.state.subscribedCommunities = this.isoData.routeData[2].communities;
|
||||
this.state.subscribedCommunities =
|
||||
this.isoData.routeData[2].communities;
|
||||
}
|
||||
this.state.loading = false;
|
||||
} else {
|
||||
|
|
@ -553,7 +556,10 @@ export class Main extends Component<any, MainState> {
|
|||
<div>
|
||||
{this.selects()}
|
||||
{this.listings()}
|
||||
{this.paginator()}
|
||||
<Paginator
|
||||
page={this.state.page}
|
||||
onChange={this.handlePageChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -632,29 +638,6 @@ export class Main extends Component<any, MainState> {
|
|||
);
|
||||
}
|
||||
|
||||
paginator() {
|
||||
return (
|
||||
<div class="my-2">
|
||||
{this.state.page > 1 && (
|
||||
<button
|
||||
class="btn btn-secondary mr-1"
|
||||
onClick={linkEvent(this, this.prevPage)}
|
||||
>
|
||||
{i18n.t("prev")}
|
||||
</button>
|
||||
)}
|
||||
{this.state.posts.length > 0 && (
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
onClick={linkEvent(this, this.nextPage)}
|
||||
>
|
||||
{i18n.t("next")}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
get canAdmin(): boolean {
|
||||
return (
|
||||
UserService.Instance.localUserView &&
|
||||
|
|
@ -674,13 +657,8 @@ export class Main extends Component<any, MainState> {
|
|||
this.setState(this.state);
|
||||
}
|
||||
|
||||
nextPage(i: Main) {
|
||||
i.updateUrl({ page: i.state.page + 1 });
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
|
||||
prevPage(i: Main) {
|
||||
i.updateUrl({ page: i.state.page - 1 });
|
||||
handlePageChange(page: number) {
|
||||
this.updateUrl({ page });
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Component, linkEvent } from "inferno";
|
||||
import { Component } from "inferno";
|
||||
import { Link } from "inferno-router";
|
||||
import { Subscription } from "rxjs";
|
||||
import {
|
||||
|
|
@ -38,6 +38,7 @@ import { InitialFetchRequest } from "shared/interfaces";
|
|||
import { PersonListing } from "./person-listing";
|
||||
import { CommunityLink } from "./community-link";
|
||||
import { Spinner } from "./icon";
|
||||
import { Paginator } from "./paginator";
|
||||
|
||||
enum ModlogEnum {
|
||||
ModRemovePost,
|
||||
|
|
@ -101,6 +102,8 @@ export class Modlog extends Component<any, ModlogState> {
|
|||
super(props, context);
|
||||
|
||||
this.state = this.emptyState;
|
||||
this.handlePageChange = this.handlePageChange.bind(this);
|
||||
|
||||
this.state.communityId = this.props.match.params.community_id
|
||||
? Number(this.props.match.params.community_id)
|
||||
: undefined;
|
||||
|
|
@ -208,8 +211,9 @@ export class Modlog extends Component<any, ModlogState> {
|
|||
combined.push(...banned);
|
||||
|
||||
if (this.state.communityId && combined.length > 0) {
|
||||
this.state.communityName = (combined[0]
|
||||
.view as ModRemovePostView).community.name;
|
||||
this.state.communityName = (
|
||||
combined[0].view as ModRemovePostView
|
||||
).community.name;
|
||||
}
|
||||
|
||||
// Sort them by time
|
||||
|
|
@ -429,7 +433,10 @@ export class Modlog extends Component<any, ModlogState> {
|
|||
</thead>
|
||||
{this.combined()}
|
||||
</table>
|
||||
{this.paginator()}
|
||||
<Paginator
|
||||
page={this.state.page}
|
||||
onChange={this.handlePageChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -437,37 +444,9 @@ export class Modlog extends Component<any, ModlogState> {
|
|||
);
|
||||
}
|
||||
|
||||
paginator() {
|
||||
return (
|
||||
<div class="mt-2">
|
||||
{this.state.page > 1 && (
|
||||
<button
|
||||
class="btn btn-secondary mr-1"
|
||||
onClick={linkEvent(this, this.prevPage)}
|
||||
>
|
||||
{i18n.t("prev")}
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
onClick={linkEvent(this, this.nextPage)}
|
||||
>
|
||||
{i18n.t("next")}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
nextPage(i: Modlog) {
|
||||
i.state.page++;
|
||||
i.setState(i.state);
|
||||
i.refetch();
|
||||
}
|
||||
|
||||
prevPage(i: Modlog) {
|
||||
i.state.page--;
|
||||
i.setState(i.state);
|
||||
i.refetch();
|
||||
handlePageChange(val: number) {
|
||||
this.setState({ page: val });
|
||||
this.refetch();
|
||||
}
|
||||
|
||||
refetch() {
|
||||
|
|
|
|||
40
src/shared/components/paginator.tsx
Normal file
40
src/shared/components/paginator.tsx
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
import { Component, linkEvent } from "inferno";
|
||||
import { i18n } from "../i18next";
|
||||
|
||||
interface PaginatorProps {
|
||||
page: number;
|
||||
onChange(val: number): any;
|
||||
}
|
||||
|
||||
export class Paginator extends Component<PaginatorProps, any> {
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div class="my-2">
|
||||
<button
|
||||
class="btn btn-secondary mr-2"
|
||||
disabled={this.props.page == 1}
|
||||
onClick={linkEvent(this, this.handlePrev)}
|
||||
>
|
||||
{i18n.t("prev")}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
onClick={linkEvent(this, this.handleNext)}
|
||||
>
|
||||
{i18n.t("next")}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
handlePrev(i: Paginator) {
|
||||
i.props.onChange(i.props.page - 1);
|
||||
}
|
||||
|
||||
handleNext(i: Paginator) {
|
||||
i.props.onChange(i.props.page + 1);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
import { Component, linkEvent } from "inferno";
|
||||
import { i18n } from "../i18next";
|
||||
import { Component } from "inferno";
|
||||
import {
|
||||
PostView,
|
||||
CommentView,
|
||||
|
|
@ -11,6 +10,7 @@ import { PersonDetailsView } from "../interfaces";
|
|||
import { commentsToFlatNodes, setupTippy } from "../utils";
|
||||
import { PostListing } from "./post-listing";
|
||||
import { CommentNodes } from "./comment-nodes";
|
||||
import { Paginator } from "./paginator";
|
||||
|
||||
interface PersonDetailsProps {
|
||||
personRes: GetPersonDetailsResponse;
|
||||
|
|
@ -39,6 +39,7 @@ type ItemType = {
|
|||
export class PersonDetails extends Component<PersonDetailsProps, any> {
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.handlePageChange = this.handlePageChange.bind(this);
|
||||
}
|
||||
|
||||
// TODO needed here?
|
||||
|
|
@ -60,7 +61,8 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {
|
|||
return (
|
||||
<div>
|
||||
{this.viewSelector(this.props.view)}
|
||||
{this.paginator()}
|
||||
|
||||
<Paginator page={this.props.page} onChange={this.handlePageChange} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -182,36 +184,7 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {
|
|||
);
|
||||
}
|
||||
|
||||
paginator() {
|
||||
return (
|
||||
<div class="my-2">
|
||||
{this.props.page > 1 && (
|
||||
<button
|
||||
class="btn btn-secondary mr-1"
|
||||
onClick={linkEvent(this, this.prevPage)}
|
||||
>
|
||||
{i18n.t("prev")}
|
||||
</button>
|
||||
)}
|
||||
{this.props.personRes.comments.length +
|
||||
this.props.personRes.posts.length >
|
||||
0 && (
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
onClick={linkEvent(this, this.nextPage)}
|
||||
>
|
||||
{i18n.t("next")}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
nextPage(i: PersonDetails) {
|
||||
i.props.onPageChange(i.props.page + 1);
|
||||
}
|
||||
|
||||
prevPage(i: PersonDetails) {
|
||||
i.props.onPageChange(i.props.page - 1);
|
||||
handlePageChange(val: number) {
|
||||
this.props.onPageChange(val);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -58,6 +58,7 @@ import { CommunityLink } from "./community-link";
|
|||
import { SortSelect } from "./sort-select";
|
||||
import { ListingTypeSelect } from "./listing-type-select";
|
||||
import { CommentNodes } from "./comment-nodes";
|
||||
import { Paginator } from "./paginator";
|
||||
import { i18n } from "../i18next";
|
||||
import { InitialFetchRequest } from "shared/interfaces";
|
||||
|
||||
|
|
@ -166,6 +167,7 @@ export class Search extends Component<any, SearchState> {
|
|||
this.state = this.emptyState;
|
||||
this.handleSortChange = this.handleSortChange.bind(this);
|
||||
this.handleListingTypeChange = this.handleListingTypeChange.bind(this);
|
||||
this.handlePageChange = this.handlePageChange.bind(this);
|
||||
|
||||
this.parseMessage = this.parseMessage.bind(this);
|
||||
this.subscription = wsSubscribe(this.parseMessage);
|
||||
|
|
@ -328,7 +330,7 @@ export class Search extends Component<any, SearchState> {
|
|||
{this.state.type_ == SearchType.Users && this.users()}
|
||||
{this.state.type_ == SearchType.Url && this.posts()}
|
||||
{this.resultsCount() == 0 && <span>{i18n.t("no_results")}</span>}
|
||||
{this.paginator()}
|
||||
<Paginator page={this.state.page} onChange={this.handlePageChange} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -605,30 +607,6 @@ export class Search extends Component<any, SearchState> {
|
|||
);
|
||||
}
|
||||
|
||||
paginator() {
|
||||
return (
|
||||
<div class="mt-2">
|
||||
{this.state.page > 1 && (
|
||||
<button
|
||||
class="btn btn-secondary mr-1"
|
||||
onClick={linkEvent(this, this.prevPage)}
|
||||
>
|
||||
{i18n.t("prev")}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{this.resultsCount() > 0 && (
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
onClick={linkEvent(this, this.nextPage)}
|
||||
>
|
||||
{i18n.t("next")}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
resultsCount(): number {
|
||||
let res = this.state.searchResponse;
|
||||
return (
|
||||
|
|
@ -639,12 +617,8 @@ export class Search extends Component<any, SearchState> {
|
|||
);
|
||||
}
|
||||
|
||||
nextPage(i: Search) {
|
||||
i.updateUrl({ page: i.state.page + 1 });
|
||||
}
|
||||
|
||||
prevPage(i: Search) {
|
||||
i.updateUrl({ page: i.state.page - 1 });
|
||||
handlePageChange(page: number) {
|
||||
this.updateUrl({ page });
|
||||
}
|
||||
|
||||
search() {
|
||||
|
|
|
|||
Loading…
Reference in a new issue