feat(posts): enhance post component

- enhance layout
- show link domain
- show comment count
- show time since added

src/app/core/core.module.ts

@@ -4,10 +4,11 @@ import { HttpClientModule } from '@angular/common/http';
 import { NgxModelModule } from 'ngx-model';
 
 import { BackendService } from './backend/backend.service';
+import { TimeService } from './util/time.service';
 
 @NgModule({
   imports: [CommonModule, HttpClientModule, NgxModelModule],
   declarations: [],
-  providers: [BackendService]
+  providers: [BackendService, TimeService]
 })
 export class CoreModule {}

src/app/core/index.ts

@@ -1,3 +1,4 @@
 export * from './core.module';
 export * from './backend/backend.service';
 export * from './animations/list.animations';
+export * from './util/time.service';

src/app/core/util/time.service.ts

@@ -0,0 +1,33 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class TimeService {
+  constructor() {}
+
+  timeSince(timestamp: number) {
+    const seconds = Math.floor(new Date().getTime() / 1000 - timestamp);
+
+    let interval = Math.floor(seconds / 31536000);
+
+    if (interval > 1) {
+      return `${interval} years`;
+    }
+    interval = Math.floor(seconds / 2592000);
+    if (interval > 1) {
+      return `${interval} months`;
+    }
+    interval = Math.floor(seconds / 86400);
+    if (interval > 1) {
+      return `${interval} days`;
+    }
+    interval = Math.floor(seconds / 3600);
+    if (interval > 1) {
+      return `${interval} hours`;
+    }
+    interval = Math.floor(seconds / 60);
+    if (interval > 1) {
+      return `${interval} minutes`;
+    }
+    return `${Math.floor(seconds)} seconds`;
+  }
+}

src/app/posts/post-list/post-list.component.html

@@ -1,7 +1,8 @@
 <div class="list" [@listTransitions]="(postsService.posts$ | async).length">
   <nmhne-post *ngFor="let post of postsService.posts$ | async;
-                      trackBy: trackByPostId"
-              [post]="post"></nmhne-post>
+                      trackBy: trackByPostId; let i = index"
+              [post]="post"
+              [index]="i + 1"></nmhne-post>
 </div>
 <div class="action">
   <button mat-fab color="primary"

src/app/posts/post/post.component.html

@@ -1,4 +1,10 @@
 <mat-card>
-  <p class="user">{{post.by}} <mat-icon>person</mat-icon></p>
-  <h2><span><mat-icon>thumb_up</mat-icon> {{post.score}}</span> <a [href]="post.url" target="_blank">{{post.title}}</a></h2>
+  <div class="score"><mat-icon>thumb_up</mat-icon> {{post.score}}</div>
+  <div class="content">
+    <h2><a [href]="post.url" target="_blank"><mat-icon>link</mat-icon> {{post.title}}</a> <span>({{post.domain}})</span></h2>
+    <p><mat-icon>info</mat-icon>#{{index}} by {{post.by}} {{post.timeSince}} ago</p>
+  </div>
+  <button mat-fab *ngIf="post.descendants > 0">
+    <mat-icon>comment</mat-icon> <span>{{post.descendants}}</span>
+  </button>
 </mat-card>

src/app/posts/post/post.component.scss

@@ -2,27 +2,66 @@
   display: block;
   margin: 10px;
 
-  mat-icon {
-    position: relative;
-    top: 6px;
-  }
+  mat-card {
+    display: flex;
+    flex-direction: row;
+    padding: 5px 20px;
+
+    mat-icon {
+      position: relative;
+      top: 6px;
+    }
 
-  h2 {
-    font-size: 16px;
-    position: relative;
+    .score {
+      min-width: 80px;
+      font-weight: bold;
 
-    span {
-      display: inline-block;
-      width: 100px;
+      &:hover {
+        cursor: pointer;
+      }
     }
 
-    a {
-      display: inline-block;
-      max-width: 60%;
+    .content {
+      flex: 1 1;
+
+      mat-icon {
+        margin: 0 5px 0 0;
+      }
+
+      h2 {
+        font-size: 16px;
+        position: relative;
+        margin: 0;
+
+        a {
+          text-decoration: none;
+          display: inline-block;
+        }
+
+        span {
+          opacity: 0.3;
+        }
+      }
+
+      p {
+        position: relative;
+        top: -5px;
+        font-size: 14px;
+        margin: 0;
+        opacity: 0.35;
+      }
     }
-  }
 
-  .user {
-    float: right;
+    button {
+      mat-icon {
+        top: 1px;
+      }
+
+      span {
+        position: relative;
+        left: -2px;
+        top: 1px;
+      }
+    }
   }
 }

src/app/posts/post/post.component.scss-theme.scss

@@ -3,8 +3,14 @@
 @mixin nmhne-posts-component-theme($theme) {
   $primary: map-get($theme, primary);
   $foreground: map-get($theme, foreground);
+  $background: map-get($theme, background);
 
   nmhne-post {
+    .score {
+      &:hover {
+        color: mat-color($primary);
+      }
+    }
     h2 {
       a {
         color: mat-color($foreground, text);
@@ -14,5 +20,9 @@
         }
       }
     }
+
+    button {
+      background-color: mat-color($background, card) !important;
+    }
   }
 }

src/app/posts/post/post.component.spec.ts

@@ -20,14 +20,17 @@ describe('PostComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(PostComponent);
     component = fixture.componentInstance;
+    component.index = 0;
     component.post = {
       id: 0,
       url: '',
+      domain: '',
       by: '',
       title: '',
       descendants: 0,
       kids: [],
       time: 0,
+      timeSince: '',
       type: '',
       score: 0
     };

src/app/posts/post/post.component.ts

@@ -8,6 +8,7 @@ import { Post } from '../posts.service';
   styleUrls: ['./post.component.scss']
 })
 export class PostComponent implements OnInit {
+  @Input() index: number;
   @Input() post: Post;
 
   constructor() {}

src/app/posts/posts.service.ts

@@ -6,7 +6,7 @@ import { from } from 'rxjs/observable/from';
 import { concatMap } from 'rxjs/operators/concatMap';
 import { mergeMap } from 'rxjs/operators/mergeMap';
 
-import { BackendService } from '@app/core';
+import { BackendService, TimeService } from '@app/core';
 
 const RESOURCES = {
   top: 'topstories.json',
@@ -27,6 +27,7 @@ export class PostsService {
 
   constructor(
     private backend: BackendService,
+    private time: TimeService,
     private modelFactory: ModelFactory<Post[]>
   ) {
     this.model = this.modelFactory.create([]);
@@ -53,6 +54,12 @@ export class PostsService {
   }
 
   private addPost(post: Post) {
+    post.domain = post.url
+      .slice()
+      .replace(/https?:\/\//, '')
+      .replace(/www\./, '')
+      .split('/')[0];
+    post.timeSince = this.time.timeSince(post.time);
     this.model.set([...this.model.get(), post]);
   }
 
@@ -71,10 +78,12 @@ export interface Post {
   id: number;
   title: string;
   url: string;
+  domain: string;
   by: string;
   type: string;
   score: number;
   time: number;
+  timeSince: string;
   kids: number[];
   descendants: number;
 }