diff options
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(); + } + } } |