From d98009c7d50a1349697c972ce8ceb52b1a7244ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jaros=C5=82aw?= <cichojar@gmail.com>
Date: Thu, 7 Sep 2023 16:33:43 +0300
Subject: [PATCH] Disable "Next" button in Paginator when the next page is
 empty (#2114)

* Store communityLimit as a constant in the config

* Block Next button on communities list if the next page is empty

* Use this.props instead of undefined props, compare number to the length of the array, not the array itself

* Set nextDisabled prop for Paginator in registration-applications component

* Set nextDisabled prop in Paginator required

* Ignore nextDisabled prop in Paginator component used in person/inbox.tsx and modlog.tsx

* Set nextDisabled to true if community is not yet loaded or no more pages are expected

* Set nextDisabled to false for Paginator in emojis-form.tsx

* Fix swapped bool logic in community.tsx

* Set nextDisabled for Paginator in home.tsx

* Set nextDisabled for Comments and Posts in person-details.tsx

* Set nextDisabled for reports.tsx

* Set nextDisabled for search.tsx

---------

Co-authored-by: SleeplessOne1917 <abias1122@gmail.com>
---
 src/shared/components/common/paginator.tsx            |  2 ++
 src/shared/components/community/communities.tsx       | 11 +++++++++--
 src/shared/components/community/community.tsx         |  9 ++++++++-
 src/shared/components/home/emojis-form.tsx            |  6 +++++-
 src/shared/components/home/home.tsx                   |  9 ++++++++-
 src/shared/components/modlog.tsx                      |  6 +++++-
 src/shared/components/person/inbox.tsx                |  1 +
 src/shared/components/person/person-details.tsx       | 11 ++++++++++-
 .../components/person/registration-applications.tsx   |  1 +
 src/shared/components/person/reports.tsx              | 10 ++++++++++
 src/shared/components/search.tsx                      |  9 ++++++++-
 src/shared/config.ts                                  |  4 ++++
 12 files changed, 71 insertions(+), 8 deletions(-)

diff --git a/src/shared/components/common/paginator.tsx b/src/shared/components/common/paginator.tsx
index ed0ed211f..b1b452b61 100644
--- a/src/shared/components/common/paginator.tsx
+++ b/src/shared/components/common/paginator.tsx
@@ -4,6 +4,7 @@ import { I18NextService } from "../../services";
 interface PaginatorProps {
   page: number;
   onChange(val: number): any;
+  nextDisabled: boolean;
 }
 
 export class Paginator extends Component<PaginatorProps, any> {
@@ -23,6 +24,7 @@ export class Paginator extends Component<PaginatorProps, any> {
         <button
           className="btn btn-secondary"
           onClick={linkEvent(this, this.handleNext)}
+          disabled={this.props.nextDisabled || false}
         >
           {I18NextService.i18n.t("next")}
         </button>
diff --git a/src/shared/components/community/communities.tsx b/src/shared/components/community/communities.tsx
index 4d6a107fd..75038f569 100644
--- a/src/shared/components/community/communities.tsx
+++ b/src/shared/components/community/communities.tsx
@@ -32,7 +32,7 @@ import { Paginator } from "../common/paginator";
 import { SortSelect } from "../common/sort-select";
 import { CommunityLink } from "./community-link";
 
-const communityLimit = 50;
+import { communityLimit } from "../../config";
 
 type CommunitiesData = RouteDataResponse<{
   listCommunitiesResponse: ListCommunitiesResponse;
@@ -221,7 +221,14 @@ export class Communities extends Component<any, CommunitiesState> {
                 </tbody>
               </table>
             </div>
-            <Paginator page={page} onChange={this.handlePageChange} />
+            <Paginator
+              page={page}
+              onChange={this.handlePageChange}
+              nextDisabled={
+                communityLimit >
+                this.state.listCommunitiesResponse.data.communities.length
+              }
+            />
           </div>
         );
       }
diff --git a/src/shared/components/community/community.tsx b/src/shared/components/community/community.tsx
index b0787ecd9..02d88dfe5 100644
--- a/src/shared/components/community/community.tsx
+++ b/src/shared/components/community/community.tsx
@@ -344,7 +344,14 @@ export class Community extends Component<
                 </div>
                 {this.selects(res)}
                 {this.listings(res)}
-                <Paginator page={page} onChange={this.handlePageChange} />
+                <Paginator
+                  page={page}
+                  onChange={this.handlePageChange}
+                  nextDisabled={
+                    this.state.postsRes.state !== "success" ||
+                    fetchLimit > this.state.postsRes.data.posts.length
+                  }
+                />
               </main>
               <aside className="d-none d-md-block col-md-4 col-lg-3">
                 {this.sidebar(res)}
diff --git a/src/shared/components/home/emojis-form.tsx b/src/shared/components/home/emojis-form.tsx
index d6fc2ea36..93c5d2072 100644
--- a/src/shared/components/home/emojis-form.tsx
+++ b/src/shared/components/home/emojis-form.tsx
@@ -267,7 +267,11 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
             {I18NextService.i18n.t("add_custom_emoji")}
           </button>
 
-          <Paginator page={this.state.page} onChange={this.handlePageChange} />
+          <Paginator
+            page={this.state.page}
+            onChange={this.handlePageChange}
+            nextDisabled={false}
+          />
         </div>
       </div>
     );
diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx
index 64c61a369..1055700ae 100644
--- a/src/shared/components/home/home.tsx
+++ b/src/shared/components/home/home.tsx
@@ -653,7 +653,14 @@ export class Home extends Component<any, HomeState> {
         <div>
           {this.selects}
           {this.listings}
-          <Paginator page={page} onChange={this.handlePageChange} />
+          <Paginator
+            page={page}
+            onChange={this.handlePageChange}
+            nextDisabled={
+              this.state.postsRes?.state !== "success" ||
+              fetchLimit > this.state.postsRes.data.posts.length
+            }
+          />
         </div>
       </div>
     );
diff --git a/src/shared/components/modlog.tsx b/src/shared/components/modlog.tsx
index 31c226634..88b642c67 100644
--- a/src/shared/components/modlog.tsx
+++ b/src/shared/components/modlog.tsx
@@ -860,7 +860,11 @@ export class Modlog extends Component<
               </thead>
               {this.combined}
             </table>
-            <Paginator page={page} onChange={this.handlePageChange} />
+            <Paginator
+              page={page}
+              onChange={this.handlePageChange}
+              nextDisabled={false}
+            />
           </div>
         );
       }
diff --git a/src/shared/components/person/inbox.tsx b/src/shared/components/person/inbox.tsx
index a2c011439..bc4ee513b 100644
--- a/src/shared/components/person/inbox.tsx
+++ b/src/shared/components/person/inbox.tsx
@@ -256,6 +256,7 @@ export class Inbox extends Component<any, InboxState> {
             <Paginator
               page={this.state.page}
               onChange={this.handlePageChange}
+              nextDisabled={false}
             />
           </div>
         </div>
diff --git a/src/shared/components/person/person-details.tsx b/src/shared/components/person/person-details.tsx
index 259cde172..8e72005f9 100644
--- a/src/shared/components/person/person-details.tsx
+++ b/src/shared/components/person/person-details.tsx
@@ -115,7 +115,16 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {
       <div className="person-details">
         {this.viewSelector(this.props.view)}
 
-        <Paginator page={this.props.page} onChange={this.handlePageChange} />
+        <Paginator
+          page={this.props.page}
+          onChange={this.handlePageChange}
+          nextDisabled={
+            (this.props.view === PersonDetailsView.Comments &&
+              this.props.limit > this.props.personRes.comments.length) ||
+            (this.props.view === PersonDetailsView.Posts &&
+              this.props.limit > this.props.personRes.posts.length)
+          }
+        />
       </div>
     );
   }
diff --git a/src/shared/components/person/registration-applications.tsx b/src/shared/components/person/registration-applications.tsx
index e9ec843c0..fb603bf5c 100644
--- a/src/shared/components/person/registration-applications.tsx
+++ b/src/shared/components/person/registration-applications.tsx
@@ -110,6 +110,7 @@ export class RegistrationApplications extends Component<
               <Paginator
                 page={this.state.page}
                 onChange={this.handlePageChange}
+                nextDisabled={fetchLimit > apps.length}
               />
             </div>
           </div>
diff --git a/src/shared/components/person/reports.tsx b/src/shared/components/person/reports.tsx
index dc09a9570..35f8e7597 100644
--- a/src/shared/components/person/reports.tsx
+++ b/src/shared/components/person/reports.tsx
@@ -160,6 +160,16 @@ export class Reports extends Component<any, ReportsState> {
             <Paginator
               page={this.state.page}
               onChange={this.handlePageChange}
+              nextDisabled={
+                (this.state.messageType === MessageType.All &&
+                  fetchLimit > this.buildCombined.length) ||
+                (this.state.messageType === MessageType.CommentReport &&
+                  fetchLimit > this.commentReports.length) ||
+                (this.state.messageType === MessageType.PostReport &&
+                  fetchLimit > this.postReports.length) ||
+                (this.state.messageType === MessageType.PrivateMessageReport &&
+                  fetchLimit > this.privateMessageReports.length)
+              }
             />
           </div>
         </div>
diff --git a/src/shared/components/search.tsx b/src/shared/components/search.tsx
index 0fd908252..48f91e4c7 100644
--- a/src/shared/components/search.tsx
+++ b/src/shared/components/search.tsx
@@ -479,7 +479,14 @@ export class Search extends Component<any, SearchState> {
           this.state.searchRes.state === "success" && (
             <span>{I18NextService.i18n.t("no_results")}</span>
           )}
-        <Paginator page={page} onChange={this.handlePageChange} />
+        <Paginator
+          page={page}
+          onChange={this.handlePageChange}
+          nextDisabled={
+            this.state.searchRes.state !== "success" ||
+            fetchLimit > this.resultsCount
+          }
+        />
       </div>
     );
   }
diff --git a/src/shared/config.ts b/src/shared/config.ts
index 38c521ece..70019742a 100644
--- a/src/shared/config.ts
+++ b/src/shared/config.ts
@@ -28,6 +28,10 @@ export const relTags = "noopener nofollow";
 export const emDash = "\u2014";
 export const authCookieName = "jwt";
 
+// No. of max displayed communities per
+// page on route "/communities"
+export const communityLimit = 50;
+
 /**
  * Accepted formats:
  * !community@server.com