Refactor postlist and feed

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

@@ -1,6 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 import {Post} from 'src/app/models/post';
-import {FeedService} from 'src/app/services/feed/feed.service';
+import {FeedService, Sort} from 'src/app/services/feed/feed.service';
 import {Activitylist} from 'src/app/models/activity';
 import {DatasharingService} from '../../services/datasharing.service';
 import {ActivityService} from 'src/app/services/activity/activity.service';
@@ -47,32 +47,33 @@ export class FeedComponent implements OnInit {
     this.activityService.activitylist.subscribe(response => {
       this.actionlist = response;
     });
-    this.feedService.getPosts('NEW');
+    this.feedService.getPosts(Sort.NEW);
     this.feedService.posts.subscribe(response => {
       this.parentSelectedPostList = response;
     });
-    this.feedService.newPostsAvailable.subscribe(response => {
+    this.feedService.postsAvailable.subscribe(available => {
-      this.loadingNew = response;
+      this.loadingMostLiked = this.loadingNew = available;
-    });
-    this.feedService.topPostsAvailable.subscribe(response => {
-      console.log(response);
-      this.loadingMostLiked = response;
     });
   }
 
-  createPost(pElement, activityId: string) {
+  /**
-    if (pElement && activityId && this.checked) {
+   * Creates a new post
-      this.feedService.createPostActivity(pElement.value, activityId).subscribe(() => {
+   * @param postElement
-        pElement.value = '';
+   * @param activityId
+   */
+  createPost(postElement, activityId: string) {
+    if (postElement && activityId && this.checked) {
+      this.feedService.createPostActivity(postElement.value, activityId).subscribe(() => {
+        postElement.value = '';
         this.textInputValue = '';
         this.view = 'new';
       }, (error: IErrorResponse) => {
         this.errorOccurred = true;
         this.errorMessage = error.error.errors[0].message;
       });
-    } else if (pElement) {
+    } else if (postElement) {
-      this.feedService.createPost(pElement.value).subscribe(() => {
+      this.feedService.createPost(postElement.value).subscribe(() => {
-        pElement.value = '';
+        postElement.value = '';
         this.textInputValue = '';
         this.view = 'new';
       }, (error: IErrorResponse) => {
@@ -82,17 +83,25 @@ export class FeedComponent implements OnInit {
     }
   }
 
+  /**
+   * Fetches the next posts when scrolled
+   */
   onScroll() {
-    console.log('scrolled');
     this.feedService.getNextPosts();
   }
 
+  /**
+   * Shows the feed sorted by new
+   */
   showNew() {
-    this.feedService.getPosts('NEW');
+    this.feedService.getPosts(Sort.NEW);
   }
 
+  /**
+   * Shows the feed sorted by top
+   */
   showMostLiked() {
-    this.feedService.getPosts('TOP');
+    this.feedService.getPosts(Sort.TOP);
   }
 
   /**

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

@@ -1,24 +1,3 @@
-<!--<div class="feeditem" *ngFor = "let post of childPostList" [class.selected]="post === selectedPost">
-  <div class="itemhead">
-    <div class="usertag">
-      <span class="title">{{post.author.name}}</span>
-      <span class="handle"><a href="profile/{{post.author.id}}">@{{post.author.handle}}</a></span>
-    </div>
-    <span class="date">{{post.date}}</span>
-  </div>
-  <div class="itembody">
-    <div class='text'>
-        <p [innerHTML]="post.htmlContent" id="content"></p>
-    </div>
-    <div class="vote">
-      <button id="down" type='submit'><span><i class="fa fa-thumbs-o-down fa-2x" aria-hidden="true" (click)="voteDown(post)"></i></span></button>
-      <span id="downvotes">{{post.downvotes}}</span>
-      <button id="up" type='submit'><span><i class="fa fa-thumbs-o-up fa-2x" aria-hidden="true" (click)="voteUp(post)"></i></span></button>
-      <span id="upvotes">{{post.upvotes}}</span>
-    </div>
-  </div>
-</div>-->
-
 <mat-card class="post" *ngFor="let post of childPostList" [class.selected]="post === selectedPost" tabindex="0">
   <mat-card-header>
     <div mat-card-avatar>
@@ -34,17 +13,14 @@
         </button>
       </mat-menu>
     </div>
-    <!-- <div mat-card-avatar class="example-header-image"></div> -->
     <mat-card-title>
       {{post.author.name}}
-      <!--<a class="mat-card-subtitle" routerLink="/profile/{{post.author.id}}">@{{post.author.handle}}</a>-->
       <a class="mat-card-subtitle" (click)="showUserProfile(this.post)">@{{post.author.handle}}</a>
       <p class="mat-card-subtitle">&nbsp; {{post.date}}</p>
     </mat-card-title>
     <mat-card-subtitle>
     </mat-card-subtitle>
   </mat-card-header>
-  <!--<img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">-->
   <mat-card-content>
     <p [innerHTML]="post.htmlContent"></p>
   </mat-card-content>
@@ -66,4 +42,3 @@
     </div>
   </mat-card-actions>
 </mat-card>
-

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

@@ -10,7 +10,7 @@ import {Router} from '@angular/router';
 })
 export class PostlistComponent implements OnInit {
 
-  @Input() childPostList: Array<Post>;
+  @Input() childPostList: Post[];
   @Output() voteEvent = new EventEmitter<boolean>();
   selectedPost: Post;
 

src/app/models/post.ts

@@ -13,28 +13,27 @@ export class Post {
   author: Author;
   activity: Activity;
 
-  // TODO: constructor properties need normal names
   constructor(
-    pId: number,
+    id: number,
-    pContent: string,
+    content: string,
-    pHtmlContent: string,
+    htmlContent: string,
-    pUpvotes: number,
+    upvotes: number,
-    pDownvotes: number,
+    downvotes: number,
-    pUserVote: string,
+    userVotes: string,
-    pDeletable: boolean,
+    deletable: boolean,
-    pDate: string,
+    date: string,
-    pAuthor: Author,
+    author: Author,
-    pactivity: Activity
+    activity: Activity
   ) {
-    this.id = pId;
+    this.id = id;
-    this.content = pContent;
+    this.content = content;
-    this.htmlContent = pHtmlContent;
+    this.htmlContent = htmlContent;
-    this.upvotes = pUpvotes;
+    this.upvotes = upvotes;
-    this.downvotes = pDownvotes;
+    this.downvotes = downvotes;
-    this.userVote = pUserVote;
+    this.userVote = userVotes;
-    this.deletable = pDeletable;
+    this.deletable = deletable;
-    this.date = pDate;
+    this.date = date;
-    this.author = pAuthor;
+    this.author = author;
-    this.activity = pactivity;
+    this.activity = activity;
   }
 }

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

@@ -6,139 +6,202 @@ import {environment} from 'src/environments/environment';
 import {Activity} from 'src/app/models/activity';
 import {BehaviorSubject} from 'rxjs';
 import {tap} from 'rxjs/operators';
+import {BaseService} from '../base.service';
+
+const createPostGqlQuery = `mutation($content: String!) {
+  createPost(content: $content) {
+    id,
+    content,
+    htmlContent,
+    upvotes,
+    downvotes,
+    userVote,
+    deletable,
+    activity{
+      id
+      name
+      description
+      points
+    },
+    author{
+      name,
+      handle,
+      profilePicture,
+      id},
+    createdAt}
+}`;
+
+const createPostActivityGqlQuery = `mutation($content: String!, $id: ID) {
+  createPost(content: $content activityId: $id) {
+    id,
+    content,
+    htmlContent,
+    upvotes,
+    downvotes,
+    userVote,
+    deletable,
+    activity{
+      id
+      name
+      description
+      points
+    },
+    author{
+      name,
+      handle,
+      profilePicture,
+      id},
+    createdAt}
+}`;
+
+const upvotePostGqlQuery = `mutation($postId: ID!) {
+  vote(postId: $postId, type: UPVOTE) {
+    post{userVote upvotes downvotes}
+  }
+}`;
+
+const downvotePostGqlQuery = `mutation($postId: ID!) {
+  vote(postId: $postId, type: DOWNVOTE) {
+    post{userVote upvotes downvotes}
+  }
+}`;
+
+const getPostGqlQuery = `query($first: Int, $offset: Int, $sort: SortType){
+  getPosts (first: $first, offset: $offset, sort: $sort) {
+    id,
+    content,
+    htmlContent,
+    upvotes,
+    downvotes,
+    userVote,
+    deletable,
+    activity{
+      id
+      name
+      description
+      points
+    },
+    author{
+      name,
+      handle,
+      profilePicture,
+      id},
+    createdAt}
+}`;
+
+export enum Sort {
+  NEW = 'NEW',
+  TOP = 'TOP',
+}
 
 @Injectable({
   providedIn: 'root'
 })
-export class FeedService {
+export class FeedService extends BaseService {
+
+  constructor(private http: HttpClient) {
+    super();
+  }
 
-  public newPostsAvailable = new BehaviorSubject<boolean>(true);
+  public postsAvailable = new BehaviorSubject<boolean>(true);
-  public topPostsAvailable = new BehaviorSubject<boolean>(true);
   public posts: BehaviorSubject<Post[]> = new BehaviorSubject([]);
-  public newPosts: BehaviorSubject<Post[]> = new BehaviorSubject([]);
+  private activePostList: Sort = Sort.NEW;
-  public mostLikedPosts: BehaviorSubject<Post[]> = new BehaviorSubject([]);
+  private offset = 0;
-  private activePostList = 'NEW';
+  private offsetStep = 10;
-  private mostLikedOffset = 0;
-  private newOffset = 0;
 
-  constructor(private http: HttpClient) {
+  /**
+   * Builds the body for a getPost request
+   * @param sort
+   * @param offset
+   * @param first
+   */
+  private static buildGetPostBody(sort: string, offset: number, first: number = 10) {
+    return {
+      query: getPostGqlQuery, variables: {
+        first,
+        offset,
+        sort
+      }
+    };
   }
 
+  /**
+   * Creates a new post
+   * @param pContent
+   */
   public createPost(pContent: String) {
-    const headers = new Headers();
-    headers.set('Content-Type', 'application/json');
-
     const body = {
-      query: `mutation($content: String!) {
+      query: createPostGqlQuery,
-        createPost(content: $content) {
+      variables: {
-          id,
-          content,
-          htmlContent,
-          upvotes,
-          downvotes,
-          userVote,
-          deletable,
-          activity{
-            id
-            name
-            description
-            points
-          },
-          author{
-            name,
-            handle,
-            profilePicture,
-            id},
-          createdAt}
-      }`, variables: {
         content: pContent
       }
     };
-    return this.http.post(environment.graphQLUrl, body).pipe(tap(response => {
+    return this.createPostRequest(body);
-      const updatedposts = this.newPosts.getValue();
-      updatedposts.unshift(this.renderPost(response));
-      this.newPosts.next(updatedposts);
-      this.setPost('NEW');
-    }));
   }
 
+  /**
+   * Creates a post with an activity
+   * @param pContent
+   * @param activityId
+   */
   public createPostActivity(pContent: String, activityId: String) {
-    const headers = new Headers();
-    headers.set('Content-Type', 'application/json');
-
     const body = {
-      query: `mutation($content: String!, $id: ID) {
+      query: createPostActivityGqlQuery, variables: {
-        createPost(content: $content activityId: $id) {
-          id,
-          content,
-          htmlContent,
-          upvotes,
-          downvotes,
-          userVote,
-          deletable,
-          activity{
-            id
-            name
-            description
-            points
-          },
-          author{
-            name,
-            handle,
-            profilePicture,
-            id},
-          createdAt}
-      }`, variables: {
         content: pContent,
         id: activityId
       }
     };
-    return this.http.post(environment.graphQLUrl, body).pipe(tap(response => {
+    return this.createPostRequest(body);
-      const updatedposts = this.newPosts.getValue();
-      updatedposts.unshift(this.renderPost(response));
-      this.newPosts.next(updatedposts);
-      this.setPost('NEW');
-    }));
   }
 
-  public upvote(postId: number): any {
+  /**
-    const headers = new Headers();
+   * Creates a new post with a given request.
-    headers.set('Content-Type', 'application/json');
+   * @param body
+   */
+  private createPostRequest(body: { variables: any; query: string }) {
+    return this.http.post(environment.graphQLUrl, body, {headers: this.headers})
+      .pipe(tap(response => {
+        if (this.activePostList === Sort.NEW) {
+          const updatedPosts = this.posts.getValue();
+          updatedPosts.push(this.constructPost(response));
+          this.posts.next(updatedPosts);
+        }
+      }));
+  }
 
+  /**
+   * Upvotes a post
+   * @param postId
+   */
+  public upvote(postId: number): any {
     const body = {
-      query: `mutation($postId: ID!) {
+      query: upvotePostGqlQuery, variables: {
-        vote(postId: $postId, type: UPVOTE) {
-          post{userVote upvotes downvotes}
-        }
-      }`, variables: {
         postId
       }
     };
 
-    return this.http.post(environment.graphQLUrl, body);
+    return this.http.post(environment.graphQLUrl, body, {headers: this.headers});
   }
 
-  public downvote(pPostID: number): any {
+  /**
-    const headers = new Headers();
+   * Downvotes a post
-    headers.set('Content-Type', 'application/json');
+   * @param postId
-
+   */
+  public downvote(postId: number): any {
     const body = {
-      query: `mutation($postId: ID!) {
+      query: downvotePostGqlQuery, variables: {
-        vote(postId: $postId, type: DOWNVOTE) {
+        postId
-          post{userVote upvotes downvotes}
-        }
-      }`, variables: {
-        postId: pPostID
       }
     };
 
-    return this.http.post(environment.graphQLUrl, body);
+    return this.http.post(environment.graphQLUrl, body, {headers: this.headers});
   }
 
+  /**
+   * Deletes a post
+   * @param pPostID
+   */
   public deletePost(pPostID: number): any {
-    const headers = new Headers();
-    headers.set('Content-Type', 'application/json');
-
     const body = {
       query: `mutation($postId: ID!) {
         deletePost(postId: $postId)
@@ -147,108 +210,43 @@ export class FeedService {
       }
     };
 
-    return this.http.post(environment.graphQLUrl, body);
+    return this.http.post(environment.graphQLUrl, body, {headers: this.headers});
   }
 
-  public getPosts(sort: string) {
+  /**
-    if ((sort === 'NEW' && this.newPosts.getValue().length === 0) ||
+   * Resets the post list and fetches new posts for the given sorting
-      (sort === 'TOP' && this.mostLikedPosts.getValue().length === 0)) {
+   * @param sort
-      const headers = new Headers();
+   */
-      headers.set('Content-Type', 'application/json');
+  public getPosts(sort: Sort) {
-      this.http.post(environment.graphQLUrl, this.buildJson(sort, 0))
+    this.offset = 0;
-        .subscribe(response => {
+    this.postsAvailable.next(true);
-          if (sort === 'NEW') {
+    this.posts.next([]);
-            this.newPosts.next(this.renderAllPosts(response));
+    return this.http.post(environment.graphQLUrl, FeedService.buildGetPostBody(sort, 0),
-          } else if (sort === 'TOP') {
+      {headers: this.headers}).subscribe(response => {
-            this.mostLikedPosts.next(this.renderAllPosts(response));
+        this.posts.next(this.constructAllPosts(response));
-          }
+        this.activePostList = sort;
-          this.setPost(sort);
+      });
-        });
-    }
-    this.setPost(sort);
   }
 
+  /**
+   * Fetches the next posts for the current sorting
+   */
   public getNextPosts() {
-    if (this.activePostList === 'NEW' && this.newPostsAvailable) {
+    this.offset += this.offsetStep;
-      this.newOffset += 10;
+    const body = FeedService.buildGetPostBody(this.activePostList, this.offset);
-      const headers = new Headers();
+    this.http.post(environment.graphQLUrl, body, {headers: this.headers})
-      headers.set('Content-Type', 'application/json');
+      .subscribe(response => {
-      this.http.post(environment.graphQLUrl, this.buildJson(this.activePostList, this.newOffset))
+        const posts = this.constructAllPosts(response);
-        .subscribe(response => {
+        const updatedPostList = this.posts.getValue().concat(posts);
-          let updatedposts = this.newPosts.getValue();
+        this.posts.next(updatedPostList);
-          updatedposts = updatedposts.concat(this.renderAllPosts(response));
+        if (posts.length < this.offsetStep) {
-          if (this.renderAllPosts(response).length < 1) {
+          this.postsAvailable.next(false);
-            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));
-          if (this.renderAllPosts(response).length < 1) {
-            this.topPostsAvailable.next(false);
-          }
-          this.mostLikedPosts.next(updatedposts);
-          this.setPost('TOP');
-        });
-    }
-  }
-
-  setPost(sort: string) {
-    this.activePostList = sort;
-    if (sort === 'NEW') {
-      this.posts.next(this.newPosts.getValue());
-    } else if (sort === 'TOP') {
-      this.posts.next(this.mostLikedPosts.getValue());
-    }
-  }
-
-  buildJson(sort: string, offset: number) {
-    const body = {
-      query: `query($offset: Int, $sort: SortType){
-        getPosts (first: 10, offset: $offset, sort: $sort) {
-          id,
-          content,
-          htmlContent,
-          upvotes,
-          downvotes,
-          userVote,
-          deletable,
-          activity{
-            id
-            name
-            description
-            points
-          },
-          author{
-            name,
-            handle,
-            profilePicture,
-            id},
-          createdAt}
-      }`, variables: {
-        offset,
-        sort
-      }
-    };
-    return body;
   }
 
-  public renderPost(response: any): Post {
+  public constructPost(response: any): Post {
     const post = response.data.createPost;
-    const id: number = post.id;
-    const content: string = post.content;
-    const htmlContent: string = post.htmlContent;
-    const upvotes: number = post.upvotes;
-    const downvotes: number = post.downvotes;
-    const userVote: string = post.userVote;
-    const deletable: boolean = post.deletable;
     let profilePicture: string;
     if (post.author.profilePicture) {
       profilePicture = environment.greenvironmentUrl + post.author.profilePicture;
@@ -269,20 +267,22 @@ export class FeedService {
       activity = null;
     }
 
-    return new Post(id, content, htmlContent, upvotes, downvotes, userVote, deletable, date, author, activity);
+    return new Post(
+      post.id,
+      post.content,
+      post.htmlContent,
+      post.upvotes,
+      post.downvotes,
+      post.userVote,
+      post.deletable,
+      date,
+      author,
+      activity);
   }
 
-  public renderAllPosts(pResponse: any): Array<Post> {
+  public constructAllPosts(response: any): Post[] {
     const posts = new Array<Post>();
-    // let options = {year: 'numeric', month: 'short', day: 'numeric', hour: '' }
+    for (const post of response.data.getPosts) {
-    for (const post of pResponse.data.getPosts) {
-      const id: number = post.id;
-      const content: string = post.content;
-      const htmlContent: string = post.htmlContent;
-      const upvotes: number = post.upvotes;
-      const downvotes: number = post.downvotes;
-      const userVote: string = post.userVote;
-      const deletable: boolean = post.deletable;
       let profilePicture: string;
       if (post.author.profilePicture) {
         profilePicture = environment.greenvironmentUrl + post.author.profilePicture;
@@ -302,7 +302,17 @@ export class FeedService {
       } else {
         activity = null;
       }
-      posts.push(new Post(id, content, htmlContent, upvotes, downvotes, userVote, deletable, date, author, activity));
+      posts.push(new Post(
+        post.id,
+        post.content,
+        post.htmlContent,
+        post.upvotes,
+        post.downvotes,
+        post.userVote,
+        post.deletable,
+        date,
+        author,
+        activity));
     }
     return posts;
   }

src/manifest.webmanifest

@@ -48,4 +48,4 @@
       "type": "image/png"
     }
   ]
-}
+}