improvement(better demo): a more complete demo (#231)

Author: SanderElias

projects/sampleBlog/src/app/user/post/post.component.css

@@ -0,0 +1,5 @@
+<section *ngIf="post$ | async as post">
+  <h4>{{ post.title }}</h4>
+
+  <p>{{ post.body }}</p>
+</section>

projects/sampleBlog/src/app/user/post/post.component.html

@@ -0,0 +1,24 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {PostComponent} from './post.component';
+
+describe('PostComponent', () => {
+  let component: PostComponent;
+  let fixture: ComponentFixture<PostComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [PostComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PostComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/sampleBlog/src/app/user/post/post.component.spec.ts

@@ -0,0 +1,50 @@
+import {Component, OnInit} from '@angular/core';
+import {Observable, of} from 'rxjs';
+import {pluck, shareReplay, switchMap, catchError, tap, filter, map} from 'rxjs/operators';
+import {Post} from '../posts/posts.component';
+import {isScullyGenerated, TransferStateService} from '@scullyio/ng-lib';
+import {ActivatedRoute} from '@angular/router';
+import {HttpClient} from '@angular/common/http';
+
+@Component({
+  selector: 'app-post',
+  templateUrl: './post.component.html',
+  styleUrls: ['./post.component.css'],
+})
+export class PostComponent implements OnInit {
+  postId$: Observable<number> = this.route.params.pipe(
+    pluck('post'),
+    filter(val => ![undefined, null].includes(val)),
+    map(val => parseInt(val, 10)),
+    shareReplay(1)
+  );
+
+  apiPosts$ = this.postId$.pipe(
+    switchMap(id =>
+      this.http.get<Post>(`https://jsonplaceholder.typicode.com/posts/${id}`).pipe(
+        catchError(() =>
+          of({
+            id,
+            title: 'not found',
+          } as Post)
+        )
+      )
+    ),
+    shareReplay(1)
+  );
+
+  // This is an example of using TransferState
+  post$ = isScullyGenerated()
+    ? this.transferState.getState<Post>('post')
+    : this.apiPosts$.pipe(tap(post => this.transferState.setState('post', post)));
+
+  constructor(
+    private route: ActivatedRoute,
+    private http: HttpClient,
+    private transferState: TransferStateService
+  ) {
+    console.log('post inits');
+  }
+
+  ngOnInit() {}
+}

projects/sampleBlog/src/app/user/post/post.component.ts

@@ -0,0 +1,8 @@
+<h4>User posts</h4>
+<section *ngIf="posts$ | async as posts">
+  <ul>
+    <li *ngFor="let post of posts">
+      <a [routerLink]="['post', post.id]">{{ post.title }}</a>
+    </li>
+  </ul>
+</section>

projects/sampleBlog/src/app/user/posts/posts.component.css

@@ -0,0 +1,24 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {PostsComponent} from './posts.component';
+
+describe('PostsComponent', () => {
+  let component: PostsComponent;
+  let fixture: ComponentFixture<PostsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [PostsComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PostsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/sampleBlog/src/app/user/posts/posts.component.html

@@ -0,0 +1,54 @@
+import {HttpClient} from '@angular/common/http';
+import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {isScullyGenerated, TransferStateService} from '@scullyio/ng-lib';
+import {Observable, of} from 'rxjs';
+import {catchError, filter, map, pluck, shareReplay, switchMap, tap} from 'rxjs/operators';
+
+export interface Post {
+  userId: number;
+  id: number;
+  title: string;
+  body: string;
+}
+
+@Component({
+  selector: 'app-posts',
+  templateUrl: './posts.component.html',
+  styleUrls: ['./posts.component.css'],
+})
+export class PostsComponent implements OnInit {
+  userId$: Observable<number> = this.route.params.pipe(
+    pluck('userId'),
+    filter(val => ![undefined, null].includes(val)),
+    map(val => parseInt(val, 10)),
+    shareReplay(1)
+  );
+
+  apiPosts$ = this.userId$.pipe(
+    switchMap(id =>
+      this.http.get<Post[]>(`https://jsonplaceholder.typicode.com/posts?userId=${id}`).pipe(
+        catchError(() =>
+          of({
+            id,
+            title: 'not found',
+          } as Post)
+        )
+      )
+    ),
+    shareReplay(1)
+  );
+
+  // This is an example of using TransferState
+  posts$ = isScullyGenerated()
+    ? this.transferState.getState('posts')
+    : this.apiPosts$.pipe(tap(posts => this.transferState.setState('posts', posts)));
+
+  constructor(
+    private route: ActivatedRoute,
+    private http: HttpClient,
+    private transferState: TransferStateService
+  ) {}
+
+  ngOnInit() {}
+}

projects/sampleBlog/src/app/user/posts/posts.component.spec.ts

@@ -2,12 +2,21 @@ import {NgModule} from '@angular/core';
 import {Routes, RouterModule} from '@angular/router';
 
 import {UserComponent} from './user.component';
+import {UsersComponent} from './users/users.component';
+import {PostsComponent} from './posts/posts.component';
+import {PostComponent} from './post/post.component';
 
 const routes: Routes = [
-  {path: '', component: UserComponent},
-  {path: ':userId', component: UserComponent},
-  {path: ':userId/:friendCode', component: UserComponent},
-  {path: ':userId/:posts/:comments', component: UserComponent},
+  {path: '', component: UsersComponent},
+  {
+    path: ':userId',
+    component: UserComponent,
+    children: [
+      {path: '', component: PostsComponent, pathMatch: 'full'},
+      {path: 'friend/:friendCode', component: UserComponent},
+      {path: 'post/:post', component: PostComponent},
+    ],
+  },
 ];
 
 @NgModule({

projects/sampleBlog/src/app/user/posts/posts.component.ts

@@ -1,9 +1,54 @@
-<section>user works!</section>
-<section>
-  <h4>User Data ({{ userId$ | async }})</h4>
-  <pre>
-    <code>{{user$ | async | json}}</code>
-  </pre>
+<style>
+  #user {
+    display: grid;
+    grid-template-columns: 10rem 1fr;
+    grid-template-rows: repeat(4, 1rem);
+  }
+
+  #user .label {
+    text-align: right;
+  }
+
+  #user .label::after {
+    content: ':';
+  }
+
+  strong {
+    display: inline-block;
+    padding: 5px;
+    border-radius: 5px;
+    background-color: #afafaf;
+    margin: 10px;
+  }
+  #sub {
+    padding: 20px;
+  }
+</style>
+<section *ngIf="user$ | async as user; else loading">
+  <h4>User Data</h4>
+
+  <section id="user">
+    <label>Id</label>
+    <p>{{ user.id }}</p>
+    <label>Name</label>
+    <p>{{ user.name }}</p>
+    <label>email</label>
+    <p>{{ user.email }}</p>
+    <label>company</label>
+    <p>{{ user.company.name }}</p>
+  </section>
+
+  <strong>{{ user.company.catchPhrase }}</strong>
 </section>
+<ng-template #loading>
+  <section>
+    Loading ...
+  </section>
+</ng-template>
 <a [routerLink]="['/user/' + (prev$ | async)]">Previous ({{ prev$ | async }})</a>
 <a [routerLink]="['/user/' + (next$ | async)]">Next ({{ next$ | async }})</a>
+
+<hr />
+<section id="sub">
+  <router-outlet></router-outlet>
+</section>