Merge pull request #327 from LemmyNet/fix/paginator-previous

Always show previous paginator, extract paginator component.

src/shared/components/communities.tsx

@@ -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) {
+  handlePageChange(page: number) {
-    i.updateUrl({ page: i.state.page + 1 });
+    this.updateUrl({ page });
-  }
-
-  prevPage(i: Communities) {
-    i.updateUrl({ page: i.state.page - 1 });
   }
 
   handleUnsubscribe(communityId: number) {

src/shared/components/community.tsx

@@ -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() {
+  handlePageChange(page: number) {
-    return (
+    this.updateUrl({ page });
-      <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 });
     window.scrollTo(0, 0);
   }
 

src/shared/components/inbox.tsx

@@ -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() {
+  handlePageChange(page: number) {
-    return (
+    this.setState({ page });
-      <div class="mt-2">
+    this.refetch();
-        {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();
   }
 
   handleUnreadOrAllChange(i: Inbox, event: any) {

src/shared/components/main.tsx

@@ -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) {
+  handlePageChange(page: number) {
-    i.updateUrl({ page: i.state.page + 1 });
+    this.updateUrl({ page });
-    window.scrollTo(0, 0);
-  }
-
-  prevPage(i: Main) {
-    i.updateUrl({ page: i.state.page - 1 });
     window.scrollTo(0, 0);
   }
 

src/shared/components/modlog.tsx

@@ -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]
+      this.state.communityName = (
-        .view as ModRemovePostView).community.name;
+        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() {
+  handlePageChange(val: number) {
-    return (
+    this.setState({ page: val });
-      <div class="mt-2">
+    this.refetch();
-        {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();
   }
 
   refetch() {

src/shared/components/paginator.tsx

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

src/shared/components/person-details.tsx

@@ -1,5 +1,4 @@
-import { Component, linkEvent } from "inferno";
+import { Component } from "inferno";
-import { i18n } from "../i18next";
 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() {
+  handlePageChange(val: number) {
-    return (
+    this.props.onPageChange(val);
-      <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);
   }
 }

src/shared/components/search.tsx

@@ -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) {
+  handlePageChange(page: number) {
-    i.updateUrl({ page: i.state.page + 1 });
+    this.updateUrl({ page });
-  }
-
-  prevPage(i: Search) {
-    i.updateUrl({ page: i.state.page - 1 });
   }
 
   search() {