Add button to display full list in About page

3 files changed, 23 insertions, 16 deletions

diff --git a/client/src/app/+about/about-follows/about-follows.component.html b/client/src/app/+about/about-follows/about-follows.component.html
index 6d38e2109..fbca9f3b0 100644
--- a/client/src/app/+about/about-follows/about-follows.component.html
+++ b/client/src/app/+about/about-follows/about-follows.component.html
@@ -1,4 +1,4 @@
-<div class="row" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
+<div class="row">
   <h1 class="sr-only" i18n>Follows</h1>
   <div class="col-xl-6 col-md-12">
     <h2 i18n class="subtitle">Followers instances</h2>
@@ -8,6 +8,8 @@
     <a *ngFor="let follower of followers" [href]="buildLink(follower)" target="_blank" rel="noopener noreferrer">
       {{ follower }}
     </a>
+
+    <a id="showMore" href="javascript:;" *ngIf="!showMoreFollowers" (click)="loadAllFollowers()" (click)= "showMoreFollowers=true">Show full list</a> 
   </div>
 
   <div class="col-xl-6 col-md-12">
@@ -18,6 +20,8 @@
     <a *ngFor="let following of followings" [href]="buildLink(following)" target="_blank" rel="noopener noreferrer">
       {{ following }}
     </a>
+    
+    <a id="showMore" href="javascript:;" *ngIf="!showMoreFollowings" (click)="loadAllFollowings()" (click)= "showMoreFollowings=true">Show full list</a>   
   </div>
 
 </div>
diff --git a/client/src/app/+about/about-follows/about-follows.component.scss b/client/src/app/+about/about-follows/about-follows.component.scss
index c6114d270..32a015e89 100644
--- a/client/src/app/+about/about-follows/about-follows.component.scss
+++ b/client/src/app/+about/about-follows/about-follows.component.scss
@@ -16,3 +16,7 @@ a {
 .no-results {
   justify-content: flex-start;
 }
+
+#showMore {
+  color: black;
+}
diff --git a/client/src/app/+about/about-follows/about-follows.component.ts b/client/src/app/+about/about-follows/about-follows.component.ts
index 17c6903b8..d88974b59 100644
--- a/client/src/app/+about/about-follows/about-follows.component.ts
+++ b/client/src/app/+about/about-follows/about-follows.component.ts
@@ -14,6 +14,9 @@ export class AboutFollowsComponent implements OnInit {
   followers: string[] = []
   followings: string[] = []
 
+  showMoreFollowers = false;
+  showMoreFollowings = false;
+
   followersPagination: ComponentPagination = {
     currentPage: 1,
     itemsPerPage: 20,
@@ -45,24 +48,20 @@ export class AboutFollowsComponent implements OnInit {
     this.loadMoreFollowings()
   }
 
-  onNearOfBottom () {
-    this.onNearOfFollowersBottom()
+  loadAllFollowings () {
+    while(hasMoreItems(this.followingsPagination)) {
+      this.followingsPagination.currentPage += 1
 
-    this.onNearOfFollowingsBottom()
+      this.loadMoreFollowings()
+    }
   }
 
-  onNearOfFollowersBottom () {
-    if (!hasMoreItems(this.followersPagination)) return
-
-    this.followersPagination.currentPage += 1
-    this.loadMoreFollowers()
-  }
-
-  onNearOfFollowingsBottom () {
-    if (!hasMoreItems(this.followingsPagination)) return
-
-    this.followingsPagination.currentPage += 1
-    this.loadMoreFollowings()
+  loadAllFollowers () {
+    while(hasMoreItems(this.followersPagination)) {
+      this.followersPagination.currentPage += 1
+      
+      this.loadMoreFollowers();
+    }
   }
 
   buildLink (host: string) {