Finished implementation of feed

3 files changed, 13 insertions, 4 deletions

diff --git a/src/DevHive.Angular/src/app/app-constants.module.ts b/src/DevHive.Angular/src/app/app-constants.module.ts
index 5252474..d72af53 100644
--- a/src/DevHive.Angular/src/app/app-constants.module.ts
+++ b/src/DevHive.Angular/src/app/app-constants.module.ts
@@ -12,7 +12,7 @@ export class AppConstants {
   public static API_FEED_URL = AppConstants.BASE_API_URL + '/Feed';
   public static API_COMMENT_URL = AppConstants.BASE_API_URL + '/Comment';
 
-  public static PAGE_SIZE = 5;
+  public static PAGE_SIZE = 10;
   public static FALLBACK_PROFILE_ICON = 'assets/images/feed/profile-pic.png';
 
   public static SESSION_TOKEN_KEY = 'UserCred';
diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.html b/src/DevHive.Angular/src/app/components/feed/feed.component.html
index c584055..1a03dcc 100644
--- a/src/DevHive.Angular/src/app/components/feed/feed.component.html
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.html
@@ -39,7 +39,7 @@
 				</a>
 			</div>
 		</nav>
-		<div id="posts" class="scroll-standalone">
+		<div id="posts" class="scroll-standalone" (scroll)="onScroll($event)">
 			<div id="no-posts-msg" *ngIf="posts.length === 0">
 				None of your friends have posted anything yet!<br>
 				Try refreshing your page!
diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.ts b/src/DevHive.Angular/src/app/components/feed/feed.component.ts
index 1d9a7c2..8e9ffbc 100644
--- a/src/DevHive.Angular/src/app/components/feed/feed.component.ts
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.ts
@@ -19,6 +19,7 @@ import { TokenService } from 'src/app/services/token.service';
 export class FeedComponent implements OnInit {
   private _title = 'Feed';
   private _timeLoaded: string; // we send the time to the api as a string
+  private _currentPage: number;
   public dataArrived = false;
   public user: User;
   public posts: Post[];
@@ -35,6 +36,7 @@ export class FeedComponent implements OnInit {
       return;
     }
 
+    this._currentPage = 1;
     this.posts = [];
     this.user = this._userService.getDefaultUser();
     this.files = [];
@@ -60,9 +62,9 @@ export class FeedComponent implements OnInit {
   }
 
   private loadFeed(): void {
-    this._feedService.getUserFeedFromSessionStorageRequest(1, this._timeLoaded, AppConstants.PAGE_SIZE).subscribe(
+    this._feedService.getUserFeedFromSessionStorageRequest(this._currentPage++, this._timeLoaded, AppConstants.PAGE_SIZE).subscribe(
       (result: object) => {
-        this.posts = Object.values(result)[0];
+        this.posts.push(...Object.values(result)[0]);
         this.finishUserLoading();
       },
       (err) => {
@@ -106,4 +108,11 @@ export class FeedComponent implements OnInit {
       }
     );
   }
+
+  onScroll(event: any): void {
+    // Detects when the element has reached the bottom, thx https://stackoverflow.com/a/50038429/12036073
+    if (event.target.offsetHeight + event.target.scrollTop >= event.target.scrollHeight && this._currentPage > 0) {
+      this.loadFeed();
+    }
+  }
 }