progress

projects/combining-streams/src/lib/exercises/comparison/docs/comparison.exercise.md

@@ -3,6 +3,7 @@
 ## Intro
 
 ![Combination operators comparison - screenshot](./assets/images/Reactive-architecture-and-ux-patterns_angular_combination-operators-comparison-solution-screenshot_michael-hladky.png)
+_Combination operators comparison - screenshot_
 
 In the start component you will find a screen split into 2 sections.
 Left and right. In the center 

projects/combining-streams/src/lib/exercises/forkJoin/docs/forkJoin.exercise.md

@@ -9,7 +9,7 @@ order to get the final list of `BlogPost`;
 ## Exercise
 
 Use the `forkJoin` operator to combine the http calls for `Comment` & `Post`.
-You can find the methods `httpGetComments` and `httpGetPosts` in the `ForkJoinBlogService` service.
+You can find the methods `httpGetComments` and `httpGetPosts` in the `ZipService` service.
   
 After retrieving the 2 results from the `forkJoin` creation function,
 we use the `map` operator to calculate the new list of `BlogPost` with `toBlogPosts`.
@@ -20,7 +20,7 @@ This `Component` will be the starting point for you. All needed dependencies are
 ```Typescript
 // start.forkJoin.component.ts 
 import {BlogPost, toBlogPosts} from 'shared';
-import {ForkJoinBlogService} from './fork-join-blog.service';
+import {ZipService} from './fork-join-blog.service';
 
 
 export class StartForkJoinComponent {
@@ -28,7 +28,7 @@ export class StartForkJoinComponent {
 
   blog$: Observable<BlogPost[]>; // join http calls and mat to blog posts here 
   
-  constructor(private blogPostService: ForkJoinBlogService) {
+  constructor(private blogPostService: ZipService) {
   }
 
 }

projects/combining-streams/src/lib/exercises/forkJoin/docs/forkJoin.solution.md

@@ -9,7 +9,7 @@
 import {forkJoin, Observable} from 'rxjs';
 import {map} from 'rxjs/operators';
 import {BlogPost, toBlogPosts} from 'shared';
-import {ForkJoinBlogService} from './fork-join-blog.service';
+import {ZipService} from './fork-join-blog.service';
 
 export class SolutionForkJoinComponent {
   // ...
@@ -22,7 +22,7 @@ export class SolutionForkJoinComponent {
        map(([posts, comments]) => toBlogPosts(posts, comments))
     )
       
-  constructor(private blogPostService: ForkJoinBlogService) {
+  constructor(private blogPostService: ZipService) {
   }
 
 }

projects/combining-streams/src/lib/exercises/zip/docs/zip.theory.md

+# zip behavior and gotchas
+
+## Behavior 
+
+![zip - inner ongoing](./assets/images/Reactive-architecture-and-ux-patterns_angular_combination-operators-zip-inner-ongoing_michael-hladky.png)
+_zip - inner ongoing_
+
+![zip - inner error](./assets/images/Reactive-architecture-and-ux-patterns_angular_combination-operators-zip-inner-error_michael-hladky.png)
+_zip - inner error_
+
+![zip - inner complete](./assets/images/Reactive-architecture-and-ux-patterns_angular_combination-operators-zip-inner-complete_michael-hladky.png)
+_zip - inner complete_
+
+## 💡 Gotcha(s)!
+![zip - never emits if one source never emits](./assets/images/Reactive-architecture-and-ux-patterns_angular_combination-operators-zip-never-emits_michael-hladky.png)
+_zip - never emits if one source never emits_
+
+![zip - EMPTY results in  immediate completion](./assets/images/Reactive-architecture-and-ux-patterns_angular_combination-operators-zip-never-emits_michael-hladky.png)
+_zip - EMPTY results in  immediate completion_
+

projects/combining-streams/src/lib/exercises/zip/solution.zip.component.ts

-import { Component } from '@angular/core';
-import { combineLatest, Observable, zip } from 'rxjs';
-import { filter, map, shareReplay, tap } from 'rxjs/operators';
-import { BlogBasicService, BlogPost, toBlogPosts } from 'shared';
+import {Component} from '@angular/core';
+import {combineLatest, Observable,} from 'rxjs';
+import {map, share, shareReplay, tap} from 'rxjs/operators';
+import {BlogPost, toBlogPosts} from 'shared';
+import {ZipBlogService} from "combining-streams/lib/exercises/zip/zip-blog-post.service";
 
 @Component({
   selector: 'solution-zip',
-  template: `<h3>(solution) zip</h3>
+  template: `<h3>(Solution) zip</h3>
 
   <mat-form-field>
     <label>Name</label>
-    <input matInput name="comment" [(ngModel)]="comment"/>
+    <input matInput name="post" [(ngModel)]="title"/>
   </mat-form-field>
-  <button mat-raised-button color="primary" (click)="listService.addComment({'text': comment, 'postId': 1})">AddItem</button>
+  <button mat-raised-button color="primary" (click)="blogPostService.addPost({title: title})">Add Comment
+  </button>
 
   <p><b>renders: {{renders()}}</b></p>
   <p><b>processJoinedList: {{processJoinedList()}}</b></p>
   <p><b>processLikedList: {{processLikedList()}}</b></p>
   <div class="row">
-    <div style="width: 49%" *ngIf="joinedList$ | async as list">
+
+    <div style="width: 49%" *ngIf="blog$ | async as list">
       <b>All items</b>
       <mat-list>
         <mat-list-item *ngFor="let item of list">
@@ -26,10 +29,11 @@ import { BlogBasicService, BlogPost, toBlogPosts } from 'shared';
       </mat-list>
     </div>
 
-    <div style="width: 49%" *ngIf="commentedPosts$ | async as commentedPosts">
+
+    <div style="width: 49%" *ngIf="commentedPosts$ | async as likedItems">
       <b>Liked items</b>
       <mat-list>
-        <mat-list-item *ngFor="let item of commentedPosts">
+        <mat-list-item *ngFor="let item of likedItems">
           {{item.title}} - Comments: {{item.commentCount}}
         </mat-list-item>
       </mat-list>
@@ -46,42 +50,36 @@ import { BlogBasicService, BlogPost, toBlogPosts } from 'shared';
   ]
 })
 export class SolutionZipComponent {
-  comment = 'my new item';
-
+  title = 'my new Title';
   numProcessJoinedList = 0;
   numRenders = 0;
   numProcessLikedList = 0;
 
-
-  joinedList$ = combineLatest([
-    this.listService.posts$.pipe(
-      filter(l => !!l.length)
-    ),
-    this.listService.comments$.pipe(
-      filter(l => !!l.length)
-    )
+  blog$ = combineLatest([
+    this.blogPostService.posts$,
+    this.blogPostService.comments$
   ]).pipe(
     map(([list, items]) => toBlogPosts(list, items)),
-    tap(v => ++this.numProcessJoinedList),
-    shareReplay(1)
+    tap(v => ++this.numProcessJoinedList)
   );
-  commentedIds$ = this.joinedList$.pipe(map(list => list
+
+  commentedIds$ = this.blog$.pipe(map(list => list
     .filter(i => i.commentCount > 0)
     .map(i => i.id))
   );
 
-  commentedPosts$: Observable<BlogPost[]> = zip(
-    this.joinedList$,
+  commentedPosts$: Observable<BlogPost[]> = combineLatest([
+    this.blog$,
     this.commentedIds$
-  )
+  ])
     .pipe(
       map(([mergedList, likedIds]) => (mergedList.filter(i => likedIds.find(li => li === i.id)))),
       tap(v => ++this.numProcessLikedList)
     );
 
-  constructor(public listService: BlogBasicService) {
-    this.listService.fetchPosts();
-    this.listService.fetchComments();
+  constructor(public blogPostService: ZipBlogService) {
+    this.blogPostService.fetchPosts();
+    this.blogPostService.fetchComments();
   }
 
   processJoinedList() {

projects/combining-streams/src/lib/exercises/zip/start.zip.component.ts

-import { Component } from '@angular/core';
-import { combineLatest, Observable, } from 'rxjs';
-import { map, tap } from 'rxjs/operators';
-import { BlogBasicService, BlogPost, toBlogPosts } from 'shared';
+import {Component} from '@angular/core';
+import {combineLatest, Observable, zip,} from 'rxjs';
+import {distinctUntilChanged, filter, map, share, shareReplay, tap} from 'rxjs/operators';
+import {BlogPost, toBlogPosts} from 'shared';
+import {ZipBlogService} from "combining-streams/lib/exercises/zip/zip-blog-post.service";
 
 @Component({
   selector: 'zip',
@@ -9,9 +10,10 @@ import { BlogBasicService, BlogPost, toBlogPosts } from 'shared';
 
   <mat-form-field>
     <label>Name</label>
-    <input matInput name="comment" [(ngModel)]="comment"/>
+    <input matInput name="post" [(ngModel)]="title"/>
   </mat-form-field>
-  <button mat-raised-button color="primary" (click)="listService.addComment({'text': comment, 'postId': 1})">AddItem</button>
+  <button mat-raised-button color="primary" (click)="blogPostService.addPost({title: title})">Add Comment
+  </button>
 
   <p><b>renders: {{renders()}}</b></p>
   <p><b>processJoinedList: {{processJoinedList()}}</b></p>
@@ -48,35 +50,41 @@ import { BlogBasicService, BlogPost, toBlogPosts } from 'shared';
   ]
 })
 export class StartZipComponent {
-  comment = 'my new item';
+  title = 'my new Title';
   numProcessJoinedList = 0;
   numRenders = 0;
   numProcessLikedList = 0;
 
   blog$ = combineLatest([
-    this.listService.posts$,
-    this.listService.comments$
+    this.blogPostService.posts$,
+    this.blogPostService.comments$
   ]).pipe(
     map(([list, items]) => toBlogPosts(list, items)),
-    tap(v => ++this.numProcessJoinedList)
+    tap(v => ++this.numProcessJoinedList),
+    share()
   );
-  commentedIds$ = this.blog$.pipe(map(list => list
+
+  commentedIds$ = this.blog$.pipe(
+    map(list => list
     .filter(i => i.commentCount > 0)
-    .map(i => i.id))
+    .map(i => i.id)
+    ),
+    distinctUntilChanged()
   );
 
-  commentedPosts$: Observable<BlogPost[]> = combineLatest([
+  //
+  commentedPosts$: Observable<BlogPost[]> = zip(
     this.blog$,
     this.commentedIds$
-  ])
+  )
     .pipe(
       map(([mergedList, likedIds]) => (mergedList.filter(i => likedIds.find(li => li === i.id)))),
       tap(v => ++this.numProcessLikedList)
     );
 
-  constructor(public listService: BlogBasicService) {
-    this.listService.fetchPosts();
-    this.listService.fetchComments();
+  constructor(public blogPostService: ZipBlogService) {
+    this.blogPostService.fetchPosts();
+    this.blogPostService.fetchComments();
   }
 
   processJoinedList() {

projects/combining-streams/src/lib/exercises/zip/zip-blog-post.service.ts

+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import {BehaviorSubject, Observable, of} from 'rxjs';
+import {catchError, distinctUntilChanged, map} from 'rxjs/operators';
+import {Comment, Post, upsertEntities} from 'shared';
+
+interface BlogServiceState {
+  posts: Post[];
+  comments: Comment[];
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ZipBlogService {
+
+  private readonly baseUrl = 'api';
+  private readonly commentUrl = [this.baseUrl, 'comment'].join('/');
+  private readonly postUrl = [this.baseUrl, 'post'].join('/');
+
+  private readonly state$ = new BehaviorSubject<BlogServiceState>({
+    posts: [] as Post[],
+    comments: [] as Comment[]
+  });
+
+  readonly posts$ = this.state$.pipe(map(s => s.posts));
+  readonly comments$ = this.state$.pipe(map(s => s.comments));
+
+  constructor(private http: HttpClient) {
+    this.fetchPosts();
+    this.fetchComments();
+  }
+
+  fetchPosts() {
+    this.httpGetPosts()
+      .subscribe(posts => {
+        this.state$.next({
+          ...this.state$.getValue(),
+          posts: upsertEntities(this.state$.getValue().posts, posts, 'id')
+        });
+      });
+  }
+
+  fetchComments() {
+    this.httpGetComments()
+      .subscribe(comments => {
+        this.state$.next({
+          ...this.state$.getValue(),
+          comments: upsertEntities(this.state$.getValue().comments, comments, 'id')
+        });
+      });
+  }
+
+  addPost(post: Pick<Post, 'title'>) {
+    this.httpPostPost(post)
+      .subscribe((newPost) => {
+        console.log('saved ', newPost , 'to the server');
+        this.state$.next({
+          ...this.state$.getValue(),
+          posts: upsertEntities(this.state$.getValue().posts, [newPost], 'id')
+        });
+      }, console.log);
+  }
+
+  httpGetPosts(): Observable<Post[]> {
+    return this.http.get<Post[]>(this.postUrl).pipe(
+      catchError(() => of([] as Post[]))
+    );
+  }
+
+  httpPostComment(item: Pick<Comment, 'text' | 'postId'>): Observable<Comment[]> {
+    return this.http.post<Comment[]>(this.commentUrl, item);
+  }
+
+  httpPostPost(post: Pick<Post, 'title'>): Observable<Post> {
+    return this.http.post<Post>(this.postUrl, post);
+  }
+
+  httpGetComments(): Observable<Comment[]> {
+    return this.http.get<Comment[]>(this.commentUrl).pipe(
+      catchError(() => of([] as Comment[]))
+    );
+  }
+}
+

projects/shared/src/lib/in-memory-data/in-memory-data.service.ts

@@ -24,7 +24,8 @@ export class InMemoryDataService implements InMemoryDbService {
     const posts: Post[] = [
       {id: 1, title: 'Post 1'},
       {id: 2, title: 'Post 2'},
-      {id: 3, title: 'Post 3'}
+      {id: 3, title: 'Post 3'},
+      {id: 4, title: 'Post 4'}
     ];
     return {comment: comments, post: posts};
   }