Merge branch 'max_dev' of Software_Engineering_I/greenvironment-frontend into master

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",

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",

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(

src/app/components/feed/feed.component.html

@@ -1,4 +1,8 @@
-<div id="home">
+<div id="home"
+infinite-scroll
+[infiniteScrollDistance]="0.5"
+[scrollWindow]="false"
+(scrolled)="onScroll()">
   <div [hidden]="!loggedIn">
     <mat-card >      
       <mat-card-content>
@@ -45,7 +49,10 @@
 <div id="complete-feed">
   <div id="feedlist">
     <feed-postlist [childPostList]="parentSelectedPostList"></feed-postlist>
-    <mat-spinner *ngIf="loading" style="margin:0 auto; margin-top: 5em;" diameter="50"></mat-spinner>
+    <div style="height: 60px;" [hidden]='(!loadingNew && view === "new") || (!loadingMostLiked && view === "mostLiked") '>
+      <!--<mat-spinner *ngIf='loadingNew && view === "mostLiked"' style="margin:0 auto; margin-top: 2em;" diameter="50"></mat-spinner>-->
+        <mat-spinner style="margin:0 auto; margin-top: 2em;" diameter="50"></mat-spinner>
+    </div>
   </div>
 </div>
 </div>

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

src/app/components/feed/feed.component.ts

@@ -12,7 +12,8 @@ import { User } from 'src/app/models/user';
   styleUrls: ['./feed.component.sass']
 })
 export class FeedComponent implements OnInit {
-  loading = true;
+  loadingNew = true;
+  loadingMostLiked = true;
 
   checked = false; // if the "I protected the environment."-box is checked
   view = 'new';
@@ -41,11 +42,20 @@ export class FeedComponent implements OnInit {
     this.activityService.activitylist.subscribe(response => {
       this.actionlist = response;
     });
-    this.feedService.getNewPosts();
+    this.feedService.getPosts('NEW');
     this.feedService.posts.subscribe(response => {
-      if (response.length > 0) {this.loading = false; }
+      if (response.length > 0) {
+        // this.loading = false;
+      }
       this.parentSelectedPostList = response;
     });
+    this.feedService.newPostsAvailable.subscribe(response => {
+      this.loadingNew = response;
+    });
+    this.feedService.topPostsAvailable.subscribe(response => {
+      console.log(response);
+      this.loadingMostLiked = response;
+    });
   }
 
   createPost(pElement, activityId: string) {
@@ -62,11 +72,17 @@ export class FeedComponent implements OnInit {
     }
   }
 
+  onScroll() {
+    console.log('scrolled');
+    this.feedService.getNextPosts();
+  }
+
   showNew() {
-    this.feedService.getNewPosts();
+    this.feedService.getPosts('NEW');
   }
 
   showMostLiked() {
-    this.feedService.getMostLikedPosts();
+    this.view = 'mostLiked';
+    this.feedService.getPosts('TOP');
   }
 }

src/app/services/feed/feed.service.ts

@@ -12,9 +12,14 @@ import { User } from 'src/app/models/user';
 })
 export class FeedService {
 
+  public newPostsAvailable = new BehaviorSubject<boolean>(true);
+  public topPostsAvailable = new BehaviorSubject<boolean>(true);
   public posts: BehaviorSubject<Post[]> = new BehaviorSubject(new Array());
   public newPosts: BehaviorSubject<Post[]> = new BehaviorSubject(new Array());
   public mostLikedPosts: BehaviorSubject<Post[]> = new BehaviorSubject(new Array());
+  private activePostList = 'NEW';
+  private mostLikedOffset = 0;
+  private newOffset = 0;
 
   constructor(private http: Http) { }
 
@@ -49,7 +54,7 @@ export class FeedService {
         const updatedposts = this.newPosts.getValue();
         updatedposts.unshift(this.renderPost(response.json()));
         this.newPosts.next(updatedposts);
-        this.posts.next(this.newPosts.getValue());
+        this.setPost('NEW');
       });
   }
 
@@ -85,7 +90,7 @@ export class FeedService {
         const updatedposts = this.newPosts.getValue();
         updatedposts.unshift(this.renderPost(response.json()));
         this.newPosts.next(updatedposts);
-        this.posts.next(this.newPosts.getValue());
+        this.setPost('NEW');
       });
   }
 
@@ -132,59 +137,67 @@ export class FeedService {
     return this.http.post(environment.graphQLUrl, body);
   }
 
-  public getNewPosts() {
+  public getPosts(sort: string) {
-    if (this.newPosts.getValue().length === 0) {
+    if ((sort === 'NEW' && this.newPosts.getValue().length === 0) ||
+    (sort === 'TOP' && this.mostLikedPosts.getValue().length === 0)) {
       const headers = new Headers();
       headers.set('Content-Type', 'application/json');
-      this.http.post(environment.graphQLUrl, this.buildJsonNew())
+      this.http.post(environment.graphQLUrl, this.buildJson(sort, 0))
       .subscribe(response => {
+        if (sort === 'NEW') {
           this.newPosts.next(this.renderAllPosts(response.json()));
-        this.posts.next(this.newPosts.getValue());
+        } else if (sort === 'TOP') {
+          this.mostLikedPosts.next(this.renderAllPosts(response.json()));
+        }
+        this.setPost(sort);
       });
-    } else {this.posts.next(this.newPosts.getValue()); }
+    } this.setPost(sort);
   }
 
-  public getMostLikedPosts() {
+  public getNextPosts() {
-    if (this.mostLikedPosts.getValue().length === 0) {
+    if (this.activePostList === 'NEW' && this.newPostsAvailable) {
+      this.newOffset += 10;
       const headers = new Headers();
       headers.set('Content-Type', 'application/json');
-      this.http.post(environment.graphQLUrl, this.buildJsonMostLiked())
+      this.http.post(environment.graphQLUrl, this.buildJson(this.activePostList, this.newOffset))
       .subscribe(response => {
-        this.mostLikedPosts.next(this.renderAllPosts(response.json()));
+        let updatedposts = this.newPosts.getValue();
-        this.posts.next(this.mostLikedPosts.getValue());
+        updatedposts = updatedposts.concat(this.renderAllPosts(response.json()));
+        if (this.renderAllPosts(response.json()).length < 1) {
+          this.newPostsAvailable.next(false);
+        }
+        this.newPosts.next(updatedposts);
+        this.setPost('NEW');
+      });
+    } else if (this.activePostList === 'TOP' && this.topPostsAvailable) {
+      this.mostLikedOffset += 10;
+      const headers = new Headers();
+      headers.set('Content-Type', 'application/json');
+      this.http.post(environment.graphQLUrl, this.buildJson(this.activePostList, this.mostLikedOffset))
+      .subscribe(response => {
+        let updatedposts = this.mostLikedPosts.getValue();
+        updatedposts = updatedposts.concat(this.renderAllPosts(response.json()));
+        if (this.renderAllPosts(response.json()).length < 1) {
+          this.topPostsAvailable.next(false);
+        }
+        this.mostLikedPosts.next(updatedposts);
+        this.setPost('TOP');
       });
-    } else {this.posts.next(this.mostLikedPosts.getValue()); }
+    }
   }
 
-  buildJsonNew() {
+  setPost(sort: string) {
-    const body =  {query: `{
+    this.activePostList = sort;
-        getPosts (first: 1000, offset: 0) {
+    if (sort === 'NEW') {
-          id,
+      this.posts.next(this.newPosts.getValue());
-          content,
+    } else if (sort === 'TOP') {
-          htmlContent,
+      this.posts.next(this.mostLikedPosts.getValue());
-          upvotes,
+    }
-          downvotes,
-          userVote,
-          deletable,
-          activity{
-            id
-            name
-            description
-            points
-          },
-          author{
-            name,
-            handle,
-            id},
-          createdAt}
-      }`, variables: {
-      }};
-      return body;
   }
 
-  buildJsonMostLiked() {
+  buildJson(sort: string, offset: number) {
-    const body =  {query: `{
+    const body =  {query: `query($offset: Int, $sort: SortType){
-        getPosts (first: 1000, offset: 0, sort: TOP) {
+        getPosts (first: 10, offset: $offset, sort: $sort) {
           id,
           content,
           htmlContent,
@@ -204,6 +217,8 @@ export class FeedService {
             id},
           createdAt}
       }`, variables: {
+        offset,
+        sort
       }};
       return body;
   }