From 46002fffab52b7215a43e031f7644e41067f2592 Mon Sep 17 00:00:00 2001
From: Jason Hodges <jason.hodges@clickfox.com>
Date: Tue, 5 Sep 2017 17:36:49 -0600
Subject: [PATCH] feat($posts, $routing): make route to single post use
 urlTitle only

make urlTitle the route param that is used to get single post. Now url is blog/urlTitle
---
 package.json                                        |  3 ++-
 src/app/app-routing.module.ts                       |  2 +-
 src/app/app.component.html                          |  4 ++--
 .../ngx-blog/components/blog/blog.component.html    |  2 +-
 src/app/ngx-blog/components/blog/blog.component.ts  | 13 +++----------
 src/app/ngx-blog/components/post/post.component.ts  |  4 +---
 .../ngx-blog/components/posts/posts.component.html  |  6 ++----
 .../ngx-blog/components/posts/posts.component.ts    | 12 ++++--------
 .../ngx-blog/containers/home/home.component.html    |  8 --------
 src/app/ngx-blog/services/posts.service.ts          |  3 +--
 10 files changed, 17 insertions(+), 40 deletions(-)

diff --git a/package.json b/package.json
index 16f983b..70a59e2 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,8 @@
     "serve:upgrade": "http-server",
     "start": "webpack-dev-server --inline --progress --port 8080",
     "test": "karma start karma.webpack.conf.js",
-    "test:once": "karma start karma.conf.js --single-run"
+    "test:once": "karma start karma.conf.js --single-run",
+    "nni": "node-nightly --inspect-brk"
   },
   "keywords": [],
   "config": {
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 370a7d8..16df9d8 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -8,7 +8,7 @@ const routes: Routes = [
   { path: '', redirectTo: '/home', pathMatch: 'full' },
   { path: 'home', component: HomeComponent },
   { path: 'posts', component: PostsComponent },
-  { path: 'blog/:id', component: BlogComponent }
+  { path: 'blog/:urlTitle', component: BlogComponent }
 ];
 
 @NgModule({
diff --git a/src/app/app.component.html b/src/app/app.component.html
index eb70990..84ac219 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -5,8 +5,8 @@
   <a routerLink="/"
      routerLinkActive="active"
      [routerLinkActiveOptions]="{exact: true}">Home</a>
-  <a routerLink="posts" routerLinkActive="active">Posts</a>
-  <a routerLink="blog/:id" routerLinkActive="active">Blog</a>
+  <a routerLink="posts"
+     routerLinkActive="active">Posts</a>
 </nav>
 <router-outlet
     (activate)="onActivate($event)"
diff --git a/src/app/ngx-blog/components/blog/blog.component.html b/src/app/ngx-blog/components/blog/blog.component.html
index 16d3897..f75531b 100644
--- a/src/app/ngx-blog/components/blog/blog.component.html
+++ b/src/app/ngx-blog/components/blog/blog.component.html
@@ -1,2 +1,2 @@
-<span>this is blog</span>
+<span>Blog</span>
 <ngxb-post *ngIf="entry">{{entry.body}}</ngxb-post>
\ No newline at end of file
diff --git a/src/app/ngx-blog/components/blog/blog.component.ts b/src/app/ngx-blog/components/blog/blog.component.ts
index a9a8ef9..76d879b 100644
--- a/src/app/ngx-blog/components/blog/blog.component.ts
+++ b/src/app/ngx-blog/components/blog/blog.component.ts
@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-import { tap } from '../../../../../config/util';
 import { ActivatedRoute } from '@angular/router';
 import { PostsService } from '../../services/posts.service';
 
@@ -9,24 +8,18 @@ import { PostsService } from '../../services/posts.service';
 })
 
 export class BlogComponent implements OnInit {
-  id: number = -1;
+  id: number | string = -1;
   entry: Post;
   entries: Post[];
 
   constructor(private _route: ActivatedRoute,
               private _postsService: PostsService) { }
 
-
   ngOnInit() {
-    this.id = +this._route.snapshot.paramMap.get('id');
-    tap(this.id, 'blog id');
+    this.id = this._route.snapshot.paramMap.get('urlTitle');
 
     this._postsService.getPosts().subscribe((e: any) => this.entries = e);
 
-    this._postsService.getPost(this.id).subscribe((p: any) => {
-      tap(JSON.stringify(p), 'getPost p');
-      this.entry = p.post;
-      tap(this.entry, 'this.entry');
-    });
+    this._postsService.getPost(this.id).subscribe((p: any) => { this.entry = p.post; });
   }
 }
diff --git a/src/app/ngx-blog/components/post/post.component.ts b/src/app/ngx-blog/components/post/post.component.ts
index cd87591..602af82 100644
--- a/src/app/ngx-blog/components/post/post.component.ts
+++ b/src/app/ngx-blog/components/post/post.component.ts
@@ -27,9 +27,7 @@ import 'prismjs/components/prism-typescript';
   template: `
     <ng-content></ng-content>`,
   encapsulation: ViewEncapsulation.None,
-  styleUrls: [
-    'theme.scss'
-  ]
+  styleUrls: [ 'theme.scss' ]
 })
 
 export class PostComponent implements OnInit, OnChanges, AfterViewInit {
diff --git a/src/app/ngx-blog/components/posts/posts.component.html b/src/app/ngx-blog/components/posts/posts.component.html
index 795f4d3..b40f7b6 100644
--- a/src/app/ngx-blog/components/posts/posts.component.html
+++ b/src/app/ngx-blog/components/posts/posts.component.html
@@ -1,8 +1,6 @@
+<span>Posts</span>
 <ng-container *ngFor='let post of mainPosts'>
-  <article class="posts-card">
-    <ngxb-post [src]="'src/app/ngx-blog/components/posts/posts.component.html'"></ngxb-post>
-  </article>
-  <article class="posts-card" (click)="onSelect(post.id)">
+  <article class="posts-card" (click)="onSelect(post)">
     <span class="posts-card--title">{{post.id}} | {{post.title}} | {{post.description}}</span>
     <ngxb-post>
       {{post.body}}
diff --git a/src/app/ngx-blog/components/posts/posts.component.ts b/src/app/ngx-blog/components/posts/posts.component.ts
index 04a9ee9..59001a7 100644
--- a/src/app/ngx-blog/components/posts/posts.component.ts
+++ b/src/app/ngx-blog/components/posts/posts.component.ts
@@ -1,8 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { PostsService } from '../../services/posts.service';
 import { Router } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
-import { tap } from '../../../../../config/util';
 
 @Component({
   selector: 'ngxb-posts',
@@ -10,15 +8,14 @@ import { tap } from '../../../../../config/util';
 })
 
 export class PostsComponent implements OnInit {
-  mainPosts: any = [];
-  posts: Observable<Post[]>;
+  postsList: any = [];
 
   constructor(public postsService: PostsService, private _router: Router) { }
 
   ngOnInit() {
     this.postsService.getPosts().subscribe((e) => {
       e.map((p: any) => {
-        this.mainPosts.push({
+        this.postsList.push({
           id: p.post.attributes.id,
           title: p.post.attributes.title,
           urlTitle: p.post.attributes.urlTitle,
@@ -29,8 +26,7 @@ export class PostsComponent implements OnInit {
     });
   }
 
-  onSelect(id: number) {
-    tap(id, 'id');
-    this._router.navigate(['/blog', id ]);
+  onSelect(id: any) {
+    this._router.navigate([`/blog`, id.urlTitle ]);
   }
 }
diff --git a/src/app/ngx-blog/containers/home/home.component.html b/src/app/ngx-blog/containers/home/home.component.html
index db0958b..33bab9f 100644
--- a/src/app/ngx-blog/containers/home/home.component.html
+++ b/src/app/ngx-blog/containers/home/home.component.html
@@ -4,12 +4,4 @@ <h2>Home</h2>
 <section>
   <ngxb-posts>
   </ngxb-posts>
-
-  <!--TODO: (Jason) this breaks when removing prepare(raw)-->
-  <!--<ngxb-post>-->
-  <!--```typescript-->
-  <!--const someVal = 'this is raw on home.component'-->
-
-  <!--```-->
-  <!--</ngxb-post>-->
 </section>
\ No newline at end of file
diff --git a/src/app/ngx-blog/services/posts.service.ts b/src/app/ngx-blog/services/posts.service.ts
index d4bad5a..4af610a 100644
--- a/src/app/ngx-blog/services/posts.service.ts
+++ b/src/app/ngx-blog/services/posts.service.ts
@@ -5,7 +5,6 @@ import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
 
 const postsUrl = require('../../../assets/_posts/posts.json');
-let postsPromise = Promise.resolve(postsUrl);
 
 @Injectable()
 export class PostsService {
@@ -53,7 +52,7 @@ export class PostsService {
   }
 
   getPost(id: number | string): Observable<Post> {
-    return this.getPosts().map((posts: any) => posts.find((p: any) => p.post.attributes.id === id));
+    return this.getPosts().map((posts: any) => posts.find((p: any) => p.post.attributes.urlTitle === id));
   }
 
   getSource(src: string) {