Correctly hide next / prev in paginators. Fixes #914

ui/src/components/communities.tsx

@@ -160,7 +160,7 @@ export class Communities extends Component<any, CommunitiesState> {
           </button>
         )}
 
-        {this.state.communities.length == communityLimit && (
+        {this.state.communities.length > 0 && (
           <button
             class="btn btn-sm btn-secondary"
             onClick={linkEvent(this, this.nextPage)}

ui/src/components/community.tsx

@@ -260,7 +260,7 @@ export class Community extends Component<any, State> {
             {i18n.t('prev')}
           </button>
         )}
-        {this.state.posts.length == fetchLimit && (
+        {this.state.posts.length > 0 && (
           <button
             class="btn btn-sm btn-secondary"
             onClick={linkEvent(this, this.nextPage)}

ui/src/components/inbox.tsx

@@ -329,12 +329,14 @@ export class Inbox extends Component<any, InboxState> {
             {i18n.t('prev')}
           </button>
         )}
+        {this.unreadCount() > 0 && (
           <button
             class="btn btn-sm btn-secondary"
             onClick={linkEvent(this, this.nextPage)}
           >
             {i18n.t('next')}
           </button>
+        )}
       </div>
     );
   }
@@ -534,15 +536,19 @@ export class Inbox extends Component<any, InboxState> {
   }
 
   sendUnreadCount() {
-    let count =
-      this.state.replies.filter(r => !r.read).length +
-      this.state.mentions.filter(r => !r.read).length +
-      this.state.messages.filter(
-        r => !r.read && r.creator_id !== UserService.Instance.user.id
-      ).length;
-    UserService.Instance.user.unreadCount = count;
+    UserService.Instance.user.unreadCount = this.unreadCount();
     UserService.Instance.sub.next({
       user: UserService.Instance.user,
     });
   }
+
+  unreadCount(): number {
+    return (
+      this.state.replies.filter(r => !r.read).length +
+      this.state.mentions.filter(r => !r.read).length +
+      this.state.messages.filter(
+        r => !r.read && r.creator_id !== UserService.Instance.user.id
+      ).length
+    );
+  }
 }

ui/src/components/main.tsx

@@ -497,7 +497,7 @@ export class Main extends Component<any, MainState> {
             {i18n.t('prev')}
           </button>
         )}
-        {this.state.posts.length == fetchLimit && (
+        {this.state.posts.length > 0 && (
           <button
             class="btn btn-sm btn-secondary"
             onClick={linkEvent(this, this.nextPage)}

ui/src/components/search.tsx

@@ -148,7 +148,7 @@ export class Search extends Component<any, SearchState> {
         {this.state.type_ == SearchType.Posts && this.posts()}
         {this.state.type_ == SearchType.Communities && this.communities()}
         {this.state.type_ == SearchType.Users && this.users()}
-        {this.noResults()}
+        {this.resultsCount() == 0 && <span>{i18n.t('no_results')}</span>}
         {this.paginator()}
       </div>
     );
@@ -383,26 +383,26 @@ export class Search extends Component<any, SearchState> {
             {i18n.t('prev')}
           </button>
         )}
+
+        {this.resultsCount() > 0 && (
           <button
             class="btn btn-sm btn-secondary"
             onClick={linkEvent(this, this.nextPage)}
           >
             {i18n.t('next')}
           </button>
+        )}
       </div>
     );
   }
 
-  noResults() {
+  resultsCount(): number {
     let res = this.state.searchResponse;
     return (
-      <div>
-        {res &&
-          res.posts.length == 0 &&
-          res.comments.length == 0 &&
-          res.communities.length == 0 &&
-          res.users.length == 0 && <span>{i18n.t('no_results')}</span>}
-      </div>
+      res.posts.length +
+      res.comments.length +
+      res.communities.length +
+      res.users.length
     );
   }
 

ui/src/components/user.tsx

@@ -883,12 +883,14 @@ export class User extends Component<any, UserState> {
             {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>
     );
   }