diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index 9da27bb..4a404b7 100644 --- a/src/app/app.component.spec.ts +++ b/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!'); - }); }); diff --git a/src/app/components/feed/postlist/postlist.component.html b/src/app/components/feed/postlist/postlist.component.html index 4667aad..1ce2508 100644 --- a/src/app/components/feed/postlist/postlist.component.html +++ b/src/app/components/feed/postlist/postlist.component.html @@ -1,6 +1,6 @@ -
+
@@ -14,7 +14,7 @@
- {{post.author.name}} + {{post.author.name}} @{{post.author.handle}}

  {{post.date}}

@@ -25,17 +25,24 @@

- - {{post.upvotes}} - - {{post.downvotes}} -
+
+ + {{post.activity.points}} points earned through {{post.activity.name}} + +
+
+ + {{post.upvotes}} + + {{post.downvotes}} +
+
{{post.activity.points}} points earned through {{post.activity.name}} diff --git a/src/app/components/feed/postlist/postlist.component.sass b/src/app/components/feed/postlist/postlist.component.sass index e1ac9d5..40be67b 100644 --- a/src/app/components/feed/postlist/postlist.component.sass +++ b/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 + diff --git a/src/app/services/feed/feed.service.ts b/src/app/services/feed/feed.service.ts index 0a83b24..62aea92 100644 --- a/src/app/services/feed/feed.service.ts +++ b/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); - this.posts.next(updatedPostList); + const previousPosts = this.posts.getValue(); + 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 date = temp.toLocaleString('en-GB'); + const postDate = new Date(Number(post.createdAt)); + 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 date = temp.toLocaleString('en-GB'); + const postDate = new Date(Number(post.createdAt)); + 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(