Entity pessimistic add

package.json

@@ -25,12 +25,12 @@
     "@angular/platform-browser": "^8.0.2",
     "@angular/platform-browser-dynamic": "^8.0.2",
     "@angular/router": "^8.0.2",
-    "@ngrx/data": "^8.0.1",
-    "@ngrx/effects": "^8.0.1",
-    "@ngrx/entity": "^8.0.1",
-    "@ngrx/router-store": "^8.0.1",
-    "@ngrx/store": "^8.0.1",
-    "@ngrx/store-devtools": "^8.0.1",
+    "@ngrx/data": "^8.6.0",
+    "@ngrx/effects": "^8.6.0",
+    "@ngrx/entity": "^8.6.0",
+    "@ngrx/router-store": "^8.6.0",
+    "@ngrx/store": "^8.6.0",
+    "@ngrx/store-devtools": "^8.6.0",
     "body-parser": "^1.18.2",
     "core-js": "^2.4.1",
     "express": "^4.16.2",
@@ -44,7 +44,7 @@
     "@angular/cli": "^8.0.1",
     "@angular/compiler-cli": "^8.0.2",
     "@angular/language-service": "^8.0.2",
-    "@ngrx/schematics": "^8.0.1",
+    "@ngrx/schematics": "^8.6.0",
     "@types/express": "^4.0.39",
     "@types/jasmine": "~2.5.53",
     "@types/jasminewd2": "~2.0.2",

src/app/courses/course.actions.ts

@@ -8,6 +8,32 @@ export const loadAllCourses = createAction(
     "[Courses Resolver] Load All Courses"
 );
 
+export const addCourse = createAction(
+    "[Edit Course Dialog] Add Course",
+    props<{ course: Course }>()
+);
+
+export const courseAddedSuccess = createAction(
+    "[Courses/API] Add Course Success",
+    props<{ course: Course }>()
+);
+
+export const courseAddedFailure = createAction(
+    "[Courses/API] Add Course Failure",
+    props<{ course: Course }>()
+);
+
+
+export const courseUpdatedSuccess = createAction(
+    "[Courses/API] Update Course Success",
+    props<{ course: Course }>()
+);
+
+export const courseUpdatedFailure = createAction(
+    "[Courses/API] Update Course Failure",
+    props<{ course: Partial<Course> }>()
+);
+
 
 export const allCoursesLoaded = createAction(
     "[Load Courses Effect] All Courses Loaded",

src/app/courses/courses.effects.ts

@@ -2,8 +2,9 @@ import {Injectable} from '@angular/core';
 import {Actions, createEffect, ofType} from '@ngrx/effects';
 import {CourseActions} from './action-types';
 import {CoursesHttpService} from './services/courses-http.service';
-import {concatMap, map} from 'rxjs/operators';
+import {concatMap, map, catchError} from 'rxjs/operators';
 import {allCoursesLoaded} from './course.actions';
+import { of } from 'rxjs';
 
 
 @Injectable()
@@ -25,12 +26,31 @@ export class CoursesEffects {
         () => this.actions$
             .pipe(
                 ofType(CourseActions.courseUpdated),
-                concatMap(action => this.coursesHttpService.saveCourse(
-                    action.update.id,
-                    action.update.changes
-                ))
-            ),
-        {dispatch: false}
+                concatMap(action =>
+                    this.coursesHttpService.saveCourse(
+                        action.update.id,
+                        action.update.changes
+                    ).pipe(
+                        map(course => CourseActions.courseUpdatedSuccess({ course })),
+                        catchError(() => of(CourseActions.courseUpdatedFailure({ course: action.update.changes })))
+                    )
+                )
+            )
+    );
+
+    addCourse$ = createEffect(
+        () => this.actions$
+            .pipe(
+                ofType(CourseActions.addCourse),
+                concatMap(action =>
+                    this.coursesHttpService.addCourse(
+                        action.course
+                    ).pipe(
+                        map(course => CourseActions.courseAddedSuccess({ course })),
+                        catchError(() => of(CourseActions.courseAddedFailure({ course: action.course })))
+                    )
+                )
+            )
     );
 
     constructor(private actions$: Actions,

src/app/courses/courses.selectors.ts

@@ -34,3 +34,8 @@ export const areCoursesLoaded = createSelector(
     selectCoursesState,
     state => state.allCoursesLoaded
 );
+
+export const selectCourseSaving = createSelector(
+    selectCoursesState,
+    state => state.saving
+);

src/app/courses/edit-course-dialog/edit-course-dialog.component.html

@@ -5,12 +5,6 @@ <h2 mat-dialog-title>{{dialogTitle}}</h2>
 
   <ng-container *ngIf="form">
 
-    <div class="spinner-container" *ngIf="loading$ | async">
-
-      <mat-spinner></mat-spinner>
-
-    </div>
-
     <ng-container [formGroup]="form">
 
       <mat-form-field>
@@ -83,8 +77,8 @@ <h2 mat-dialog-title>{{dialogTitle}}</h2>
   </button>
 
   <button mat-raised-button color="primary"
-          [disabled]="!form?.valid || (this.loading$ | async)"
-          (click)="onSave()">
+          [disabled]="!form?.valid || (this.saving$ | async)"
+          (click)="saves.next(true)">
     Save
   </button>
 

src/app/courses/edit-course-dialog/edit-course-dialog.component.ts

@@ -2,12 +2,14 @@ import {Component, Inject} from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
 import {Course} from '../model/course';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
-import {Observable} from 'rxjs';
+import {Subject, of} from 'rxjs';
 import {CoursesHttpService} from '../services/courses-http.service';
 import {AppState} from '../../reducers';
 import {Store} from '@ngrx/store';
 import {Update} from '@ngrx/entity';
-import {courseUpdated} from '../course.actions';
+import {addCourse, courseUpdated} from '../course.actions';
+import {filter, map, mergeMap, tap} from 'rxjs/operators';
+import {selectCourseSaving} from '../courses.selectors';
 
 @Component({
   selector: 'course-dialog',
@@ -24,7 +26,8 @@ export class EditCourseDialogComponent {
 
   mode: 'create' | 'update';
 
-  loading$:Observable<boolean>;
+  saves = new Subject<any>();
+  saving$ = this.store.select(selectCourseSaving);
 
   constructor(
     private fb: FormBuilder,
@@ -54,30 +57,38 @@ export class EditCourseDialogComponent {
         iconUrl: ['', Validators.required]
       });
     }
+
+    const saved$ = this.saving$.pipe(
+      filter(saving => !saving)
+    );
+    this.saves.pipe(
+      map(_ => this.createSaveAction()),
+      tap(action => this.store.dispatch(action)),
+      mergeMap(_ => this.mode === 'create' ? saved$ : of(true))
+    )
+    // no need to unsubscribe here as stream dies with component
+    .subscribe(_ => {
+      this.dialogRef.close();
+    });
   }
 
   onClose() {
     this.dialogRef.close();
   }
 
-  onSave() {
-
+  private createSaveAction() {
     const course: Course = {
       ...this.course,
       ...this.form.value
     };
-
-    const update: Update<Course> = {
-      id: course.id,
-      changes: course
-    };
-
-    this.store.dispatch(courseUpdated({update}));
-
-    this.dialogRef.close();
-
-
+    if (this.mode === 'update') {
+      const update: Update<Course> = {
+          id: course.id,
+          changes: course
+      };
+      return courseUpdated({update});
+    } else {
+      return addCourse({ course });
+    }
   }
-
-
 }

src/app/courses/reducers/course.reducers.ts

@@ -5,7 +5,8 @@ import {CourseActions} from '../action-types';
 
 
 export interface CoursesState extends EntityState<Course> {
-    allCoursesLoaded: boolean
+    allCoursesLoaded: boolean;
+    saving: boolean;
 }
 
 
@@ -14,8 +15,9 @@ export const adapter = createEntityAdapter<Course>({
 });
 
 
-export const initialCoursesState = adapter.getInitialState({
-    allCoursesLoaded:false
+export const initialCoursesState: CoursesState = adapter.getInitialState({
+    allCoursesLoaded: false,
+    saving: false
 });
 
 
@@ -32,7 +34,22 @@ export const coursesReducer = createReducer(
 
 
     on(CourseActions.courseUpdated, (state, action) =>
-        adapter.updateOne(action.update, state) )
+        adapter.updateOne(
+            action.update,
+            { ...state, saving: true })),
+
+    on(CourseActions.addCourse, (state, _action) => ({ ...state, saving: true })),
+    on(CourseActions.courseAddedSuccess, (state, action) =>
+        adapter.addOne(
+            action.course,
+            { ...state, saving: false })),
+
+    on(
+        CourseActions.courseUpdatedFailure,
+        CourseActions.courseUpdatedSuccess,
+        CourseActions.courseAddedFailure,
+        (state, _action) => ({ ...state, saving: false }
+    ))
 
 );
 

src/app/courses/services/courses-http.service.ts

@@ -15,6 +15,10 @@ export class CoursesHttpService {
 
     }
 
+    addCourse(course: Course) {
+        return this.http.post<Course>('/api/course/', course);
+    }
+
     findAllCourses(): Observable<Course[]> {
         return this.http.get('/api/courses')
             .pipe(
@@ -41,8 +45,7 @@ export class CoursesHttpService {
 
 
     saveCourse(courseId: string | number, changes: Partial<Course>) {
-        return this.http.put('/api/course/' + courseId, changes);
+        return this.http.put<Course>('/api/course/' + courseId, changes);
     }
 
-
 }