diff --git a/package-lock.json b/package-lock.json index 4be04a3..82a6089 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9337,6 +9337,14 @@ "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==", "dev": true }, + "ngx-infinite-scroll": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/ngx-infinite-scroll/-/ngx-infinite-scroll-8.0.1.tgz", + "integrity": "sha512-YpgkTPDNT7UCEp0GRX178V1nF+M2slCPJ2TX3CpvPZb5AR99JYwj/fNivcue5lN51oUaTySEG27qjVU73vKhjw==", + "requires": { + "opencollective-postinstall": "^2.0.2" + } + }, "ngx-socket-io": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/ngx-socket-io/-/ngx-socket-io-2.1.1.tgz", @@ -9823,6 +9831,11 @@ "is-wsl": "^1.1.0" } }, + "opencollective-postinstall": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.2.tgz", + "integrity": "sha512-pVOEP16TrAO2/fjej1IdOyupJY8KDUM1CvsaScRbw6oddvpQoOfGk4ywha0HKKVAD6RkW4x6Q+tNBwhf3Bgpuw==" + }, "opn": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/opn/-/opn-5.5.0.tgz", diff --git a/package.json b/package.json index abb61d3..388a508 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "graphql-tag": "^2.10.0", "hammerjs": "^2.0.8", "js-sha512": "^0.8.0", + "ngx-infinite-scroll": "^8.0.1", "ngx-socket-io": "^2.1.1", "node-sass": "^4.13.0", "rxjs": "~6.3.3", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 595c8f7..f2300c3 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -30,6 +30,8 @@ import { AboutComponent } from './components/about/about.component'; import { ChatcontactsComponent } from './components/chatmanager/chatcontacts/chatcontacts.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import {MatTableModule} from '@angular/material/table'; +import { InfiniteScrollModule } from 'ngx-infinite-scroll'; + import { MatSliderModule } from '@angular/material/slider'; import { MatFormFieldModule } from '@angular/material/form-field'; @@ -114,6 +116,7 @@ const appRoutes: Routes = [ SocketIoModule.forRoot(config), GraphQLModule, HttpClientModule, + InfiniteScrollModule, MatDatepickerModule, MatNativeDateModule, RouterModule.forRoot( diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html index de81a86..4d2ac35 100644 --- a/src/app/components/feed/feed.component.html +++ b/src/app/components/feed/feed.component.html @@ -1,4 +1,8 @@ -
+
@@ -45,7 +49,7 @@
- +
\ No newline at end of file diff --git a/src/app/components/feed/feed.component.sass b/src/app/components/feed/feed.component.sass index 2780ae2..c3d660c 100644 --- a/src/app/components/feed/feed.component.sass +++ b/src/app/components/feed/feed.component.sass @@ -8,6 +8,7 @@ #home width: 100% height: 100% + overflow-y: scroll #complete-feed box-sizing: border-box diff --git a/src/app/components/feed/feed.component.ts b/src/app/components/feed/feed.component.ts index d242979..9483348 100644 --- a/src/app/components/feed/feed.component.ts +++ b/src/app/components/feed/feed.component.ts @@ -43,7 +43,9 @@ export class FeedComponent implements OnInit { }); this.feedService.getNewPosts(); this.feedService.posts.subscribe(response => { - if (response.length > 0) {this.loading = false; } + if (response.length > 0) { + // this.loading = false; + } this.parentSelectedPostList = response; }); } @@ -62,6 +64,10 @@ export class FeedComponent implements OnInit { } } + onScroll() { + console.log('scrolled'); + } + showNew() { this.feedService.getNewPosts(); } diff --git a/src/app/services/feed/feed.service.ts b/src/app/services/feed/feed.service.ts index 6e94178..84f9d7c 100644 --- a/src/app/services/feed/feed.service.ts +++ b/src/app/services/feed/feed.service.ts @@ -158,7 +158,7 @@ export class FeedService { buildJsonNew() { const body = {query: `{ - getPosts (first: 1000, offset: 0) { + getPosts (first: 3, offset: 0) { id, content, htmlContent,