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

@@ -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": {

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({

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)"

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>

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; });
  }
 }

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 {

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}}

src/app/ngx-blog/components/posts/posts.component.ts

@@ -1,24 +1,21 @@
 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',
  templateUrl: 'posts.component.html'
 })
 
 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 ]);
  }
 }

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>

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) {