Infinite scroll to list our subscriptions

[github/Chocobozzz/PeerTube.git] / client / src / app / +my-account / my-account-subscriptions / my-account-subscriptions.component.ts

diff --git a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts
index 9434b196fc3c160513d3c0bba57ef7e3780dc837..9517a37059fbc97d9f9f5ba224c529a391ea2ae6 100644 (file)
--- a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts
+++ b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts
@@ -3,6 +3,7 @@ import { NotificationsService } from 'angular2-notifications'
 import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { UserSubscriptionService } from '@app/shared/user-subscription'
+import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
 
 @Component({
   selector: 'my-account-subscriptions',
@@ -12,6 +13,12 @@ import { UserSubscriptionService } from '@app/shared/user-subscription'
 export class MyAccountSubscriptionsComponent implements OnInit {
   videoChannels: VideoChannel[] = []
 
+  pagination: ComponentPagination = {
+    currentPage: 1,
+    itemsPerPage: 10,
+    totalItems: null
+  }
+
   constructor (
     private userSubscriptionService: UserSubscriptionService,
     private notificationsService: NotificationsService,
@@ -19,12 +26,27 @@ export class MyAccountSubscriptionsComponent implements OnInit {
   ) {}
 
   ngOnInit () {
-    this.userSubscriptionService.listSubscriptions()
-      .subscribe(
-        res => this.videoChannels = res.data,
+    this.loadSubscriptions()
+  }
+
+  loadSubscriptions () {
+    this.userSubscriptionService.listSubscriptions(this.pagination)
+        .subscribe(
+          res => {
+            this.videoChannels = this.videoChannels.concat(res.data)
+            this.pagination.totalItems = res.total
+          },
+
+          error => this.notificationsService.error(this.i18n('Error'), error.message)
+        )
+  }
+
+  onNearOfBottom () {
+    // Last page
+    if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return
 
-        error => this.notificationsService.error(this.i18n('Error'), error.message)
-      )
+    this.pagination.currentPage += 1
+    this.loadSubscriptions()
   }
 
 }