Fix and improve feed

- Fix duplicated posts getting displayed in top sort due to pagination
- Move the vote buttons to the right on the mobile layout
- Change the activity text to italic on the mobile layout
- Scale the buttons in the mobile layout larger

src/app/app.component.spec.ts

@@ -21,11 +21,4 @@ describe('AppComponent', () => {
     const app = fixture.debugElement.componentInstance;
     expect(app.title).toEqual('greenvironment');
   });
-
-  it('should render title in a h1 tag', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('Welcome to greenvironment!');
-  });
 });

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

@@ -1,6 +1,6 @@
 <mat-card class="post" *ngFor="let post of childPostList" [class.selected]="post === selectedPost" tabindex="0">
   <mat-card-header>
-    <div mat-card-avatar>
+    <div mat-card-avatar (click)="showUserProfile(this.post)">
       <img class="profile-picture" [src]="post.author.profilePicture"/>
     </div>
     <div id="button-box">
@@ -14,7 +14,7 @@
       </mat-menu>
     </div>
     <mat-card-title>
-      {{post.author.name}}
+      <span class="postlistUsername" (click)="showUserProfile(this.post)">{{post.author.name}}</span>
       <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>
@@ -25,17 +25,24 @@
     <p [innerHTML]="post.htmlContent"></p>
   </mat-card-content>
   <mat-card-actions>
-    <button mat-button (click)="voteUp(post)" matTooltip="vote up" matTooltipShowDelay="500">
+    <div *ngIf="post.activity" class="activity-info" fxHide.gt-sm="true">
-      <mat-icon class="voteButton voted" aria-hidden="false" color="primary" *ngIf="post.userVote == 'UPVOTE'">thumb_up</mat-icon>
+      <span class="span" [matTooltip]="post.activity.description" matTooltipShowDelay="200">
-      <mat-icon class="voteButton" aria-hidden="false" *ngIf="!post.userVote || post.userVote == 'DOWNVOTE'">thumb_up</mat-icon>
+        {{post.activity.points}} points earned through <b>{{post.activity.name}}</b>
-    </button>
+      </span>
-    {{post.upvotes}}
+    </div>
-    <button mat-button (click)="voteDown(post)" matTooltip="vote down" matTooltipShowDelay="500">
+    <div class="postVoteButtons">
-      <mat-icon class="voteButton voted" aria-hidden="false" color="primary" *ngIf="post.userVote == 'DOWNVOTE'">thumb_down</mat-icon>
+      <button mat-button (click)="voteUp(post)" matTooltip="vote up" matTooltipShowDelay="500">
-      <mat-icon class="voteButton" aria-hidden="false" *ngIf="!post.userVote || post.userVote == 'UPVOTE'">thumb_down</mat-icon>
+        <mat-icon class="voteButton voted" aria-hidden="false" color="primary" *ngIf="post.userVote == 'UPVOTE'">thumb_up</mat-icon>
-    </button>
+        <mat-icon class="voteButton" aria-hidden="false" *ngIf="!post.userVote || post.userVote == 'DOWNVOTE'">thumb_up</mat-icon>
-    {{post.downvotes}}
+      </button>
-    <div *ngIf="post.activity" class="activity-info">
+      {{post.upvotes}}
+      <button mat-button (click)="voteDown(post)" matTooltip="vote down" matTooltipShowDelay="500">
+        <mat-icon class="voteButton voted" aria-hidden="false" color="primary" *ngIf="post.userVote == 'DOWNVOTE'">thumb_down</mat-icon>
+        <mat-icon class="voteButton" aria-hidden="false" *ngIf="!post.userVote || post.userVote == 'UPVOTE'">thumb_down</mat-icon>
+      </button>
+      {{post.downvotes}}
+    </div>
+    <div *ngIf="post.activity" class="activity-info" fxHide.lt-md="true">
       <span class="span" [matTooltip]="post.activity.description" matTooltipShowDelay="200">
         {{post.activity.points}} points earned through <b>{{post.activity.name}}</b>
       </span>

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

@@ -17,7 +17,7 @@ $mat-card-header-size: 40px !default
 
   .mat-card-content
     overflow: auto
-    margin: 0 1em
+    margin: 0.5em 1em 0
     ::ng-deep a
       color: $primary-color
   .mat-card-actions
@@ -26,8 +26,14 @@ $mat-card-header-size: 40px !default
   ::ng-deep p
     margin: 0
 
-  a:hover
+  .postlistUsername, a
     cursor: pointer
+    margin-right: 0.4em
+    &:hover
+      text-decoration: underline
+
+  .postVoteButtons
+    display: inline-block
 
   #button-box
     text-align: right
@@ -58,6 +64,7 @@ $mat-card-header-size: 40px !default
     border-radius: 50%
     width: $mat-card-header-size
     height: $mat-card-header-size
+    cursor: pointer
 
   .activity-info
     display: contents
@@ -71,4 +78,22 @@ $mat-card-header-size: 40px !default
     &.voted
      scale: 0.9
 
+  @media (max-width: 959px)
+    .activity-info > .span
+      margin-left: 1em
+      width: calc(100% - 1em)
+      display: block
+      text-align: left
+      font-style: italic
+    .postVoteButtons
+      text-align: end
+      margin-right: 0.5em
+      .voteButton
+        scale: 1
+        &.voted
+          scale: 1.1
+
+    .mat-card-actions
+      text-align: end
+
 

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

@@ -7,6 +7,7 @@ import {Activity} from 'src/app/models/activity';
 import {BehaviorSubject} from 'rxjs';
 import {tap} from 'rxjs/operators';
 import {BaseService} from '../base.service';
+import {formatDate} from '@angular/common';
 
 const createPostGqlQuery = `mutation($content: String!) {
   createPost(content: $content) {
@@ -125,6 +126,15 @@ export class FeedService extends BaseService {
     };
   }
 
+  /**
+   * Returns if the input date is today
+   * @param date
+   */
+  private static dateIsToday(date: Date) {
+    date = new Date(date);
+    return new Date().setHours(0, 0, 0, 0) === date.setHours(0, 0, 0, 0);
+  }
+
   /**
    * Creates a new post
    * @param pContent
@@ -240,8 +250,13 @@ export class FeedService extends BaseService {
       .pipe(this.retryRated())
       .subscribe(response => {
         const posts = this.constructAllPosts(response);
-        const updatedPostList = this.posts.getValue().concat(posts);
+        const previousPosts = this.posts.getValue();
-        this.posts.next(updatedPostList);
+        for (const post of previousPosts.reverse()) {
+          if (!posts.find(p => p.id === post.id)) {
+            posts.unshift(post);
+          }
+        }
+        this.posts.next(posts);
         if (posts.length < this.offsetStep) {
           this.postsAvailable.next(false);
         }
@@ -257,8 +272,13 @@ export class FeedService extends BaseService {
       profilePicture = 'assets/images/default-profilepic.svg';
     }
     const author = new Author(post.author.id, post.author.name, post.author.handle, profilePicture);
-    const temp = new Date(Number(post.createdAt));
+    const postDate = new Date(Number(post.createdAt));
-    const date = temp.toLocaleString('en-GB');
+    let date: string;
+    if (FeedService.dateIsToday(postDate)) {
+      date = formatDate(postDate, 'HH:mm', 'en-GB');
+    } else {
+      date = formatDate(postDate, 'dd.MM.yy HH:mm', 'en-GB');
+    }
     let activity: Activity;
     if (post.activity) {
       activity = new Activity(
@@ -293,8 +313,13 @@ export class FeedService extends BaseService {
         profilePicture = 'assets/images/default-profilepic.svg';
       }
       const author = new Author(post.author.id, post.author.name, post.author.handle, profilePicture);
-      const temp = new Date(Number(post.createdAt));
+      const postDate = new Date(Number(post.createdAt));
-      const date = temp.toLocaleString('en-GB');
+      let date: string;
+      if (FeedService.dateIsToday(postDate)) {
+        date = formatDate(postDate, 'HH:mm', 'en-GB');
+      } else {
+        date = formatDate(postDate, 'dd.MM.yy HH:mm', 'en-GB');
+      }
       let activity: Activity;
       if (post.activity) {
         activity = new Activity(