merge with master

Author: duncanhunter

APM-Demo0/src/app/products/edit/product-edit.component.css renamed to APM-Demo0/src/app/products/product-edit/product-edit.component.css

@@ -2,8 +2,8 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
 
 import { Subscription } from 'rxjs';
 
-import { Product } from './product';
-import { ProductService } from './product.service';
+import { Product } from '../product';
+import { ProductService } from '../product.service';
 
 @Component({
   selector: 'pm-product-list',

APM-Demo0/src/app/products/edit/product-edit.component.html renamed to APM-Demo0/src/app/products/product-edit/product-edit.component.html

@@ -3,9 +3,9 @@ import { RouterModule, Routes } from '@angular/router';
 
 import { SharedModule } from '../shared/shared.module';
 
-import { ProductShellComponent } from './product-shell.component';
-import { ProductListComponent } from './product-list.component';
-import { ProductEditComponent } from './edit/product-edit.component';
+import { ProductShellComponent } from './product-shell/product-shell.component';
+import { ProductListComponent } from './product-list/product-list.component';
+import { ProductEditComponent } from './product-edit/product-edit.component';
 import { ProductService } from './product.service';
 
 const productRoutes: Routes = [

APM-Demo0/src/app/products/edit/product-edit.component.ts renamed to APM-Demo0/src/app/products/product-edit/product-edit.component.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 
 import { Observable, of, BehaviorSubject, throwError } from 'rxjs';
 import { catchError, tap, map } from 'rxjs/operators';
@@ -93,7 +93,7 @@ export class ProductService {
       );
   }
 
-  private handleError(err: HttpErrorResponse) {
+  private handleError(err) {
     // in a real world app, we may send the server to some remote logging infrastructure
     // instead of just logging it to the console
     let errorMessage: string;
@@ -103,7 +103,7 @@ export class ProductService {
     } else {
       // The backend returned an unsuccessful response code.
       // The response body may contain clues as to what went wrong,
-      errorMessage = `Backend returned code ${err.status}, body was: ${err.error}`;
+      errorMessage = `Backend returned code ${err.status}: ${err.body.error}`;
     }
     console.error(err);
     return throwError(errorMessage);

APM-Demo0/src/app/products/product-list.component.css renamed to APM-Demo0/src/app/products/product-list/product-list.component.css

@@ -2,8 +2,8 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
 
 import { Subscription } from 'rxjs';
 
-import { Product } from './product';
-import { ProductService } from './product.service';
+import { Product } from '../product';
+import { ProductService } from '../product.service';
 
 /* NgRx */
 import { Store } from '@ngrx/store';
@@ -38,6 +38,7 @@ export class ProductListComponent implements OnInit, OnDestroy {
       (err: any) => this.errorMessage = err.error
     );
 
+    // TODO: Unsubscribe
     this.store.select('products').subscribe(
       products => {
         if (products) {

APM-Demo0/src/app/products/product-list.component.html renamed to APM-Demo0/src/app/products/product-list/product-list.component.html

@@ -3,9 +3,9 @@ import { RouterModule, Routes } from '@angular/router';
 
 import { SharedModule } from '../shared/shared.module';
 
-import { ProductShellComponent } from './product-shell.component';
-import { ProductListComponent } from './product-list.component';
-import { ProductEditComponent } from './edit/product-edit.component';
+import { ProductShellComponent } from './product-shell/product-shell.component';
+import { ProductListComponent } from './product-list/product-list.component';
+import { ProductEditComponent } from './product-edit/product-edit.component';
 import { ProductService } from './product.service';
 
 /* NgRx */

APM-Demo0/src/app/products/product-list.component.ts renamed to APM-Demo0/src/app/products/product-list/product-list.component.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 
 import { Observable, of, BehaviorSubject, throwError } from 'rxjs';
 import { catchError, tap, map } from 'rxjs/operators';
@@ -93,7 +93,7 @@ export class ProductService {
       );
   }
 
-  private handleError(err: HttpErrorResponse) {
+  private handleError(err) {
     // in a real world app, we may send the server to some remote logging infrastructure
     // instead of just logging it to the console
     let errorMessage: string;
@@ -103,7 +103,7 @@ export class ProductService {
     } else {
       // The backend returned an unsuccessful response code.
       // The response body may contain clues as to what went wrong,
-      errorMessage = `Backend returned code ${err.status}, body was: ${err.error}`;
+      errorMessage = `Backend returned code ${err.status}: ${err.body.error}`;
     }
     console.error(err);
     return throwError(errorMessage);

APM-Demo0/src/app/products/product-shell.component.html renamed to APM-Demo0/src/app/products/product-shell/product-shell.component.html

@@ -22,8 +22,8 @@ export class LoginComponent implements OnInit {
               private router: Router) {
   }
 
-  // Homework
   ngOnInit(): void {
+    // TODO: Unsubscribe
     this.store.select('users').subscribe(
       users => {
         if (users) {
@@ -37,7 +37,6 @@ export class LoginComponent implements OnInit {
     this.router.navigate(['welcome']);
   }
 
-  // Homework
   checkChanged(value: boolean): void {
     this.store.dispatch({
       type: 'MASK_USER_NAME',

APM-Demo0/src/app/products/product-shell.component.ts renamed to APM-Demo0/src/app/products/product-shell/product-shell.component.ts

@@ -65,6 +65,7 @@ export class ProductEditComponent implements OnInit, OnDestroy {
     });
 
     // Watch for changes to the currently selected product
+    // TODO: Unsubscribe
     this.store.pipe(select(fromProduct.getCurrentProduct)).subscribe(
       selectedProduct => this.displayProduct(selectedProduct)
     );
@@ -76,7 +77,7 @@ export class ProductEditComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    // TODO: Should we be unsubscribing?
+
   }
 
   // Also validate on blur

APM-Demo0/src/app/products/product.module.ts

@@ -1,12 +1,12 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 
-import { Product } from './product';
-import { ProductService } from './product.service';
+import { Product } from '../product';
+import { ProductService } from '../product.service';
 
 /* NgRx */
 import { Store, select } from '@ngrx/store';
-import * as fromProduct from './state/product.reducer';
-import * as productActions from './state/product.actions';
+import * as fromProduct from '../state/product.reducer';
+import * as productActions from '../state/product.actions';
 
 @Component({
   selector: 'pm-product-list',
@@ -28,22 +28,24 @@ export class ProductListComponent implements OnInit, OnDestroy {
               private productService: ProductService) { }
 
   ngOnInit(): void {
+    // TODO: Unsubscribe
+    this.store.pipe(select(fromProduct.getCurrentProduct)).subscribe(
+      currentProduct => this.selectedProduct = currentProduct
+    );
+
     this.productService.getProducts().subscribe(
       (products: Product[]) => this.products = products,
       (err: any) => this.errorMessage = err.error
     );
 
-    this.store.pipe(select(fromProduct.getCurrentProduct)).subscribe(
-      currentProduct => this.selectedProduct = currentProduct
-    );
-
+    // TODO: Unsubscribe
     this.store.pipe(select(fromProduct.getShowProductCode)).subscribe(
       showProductCode => this.displayCode = showProductCode
     );
   }
 
   ngOnDestroy(): void {
-    // TODO: Should we unsubscribe?
+
   }
 
   checkChanged(value: boolean): void {

APM-Demo0/src/app/products/product.service.ts

@@ -3,9 +3,9 @@ import { RouterModule, Routes } from '@angular/router';
 
 import { SharedModule } from '../shared/shared.module';
 
-import { ProductShellComponent } from './product-shell.component';
-import { ProductListComponent } from './product-list.component';
-import { ProductEditComponent } from './edit/product-edit.component';
+import { ProductShellComponent } from './product-shell/product-shell.component';
+import { ProductListComponent } from './product-list/product-list.component';
+import { ProductEditComponent } from './product-edit/product-edit.component';
 import { ProductService } from './product.service';
 
 /* NgRx */

APM-Demo1/src/app/products/edit/product-edit.component.css renamed to APM-Demo1/src/app/products/product-edit/product-edit.component.css

@@ -47,7 +47,7 @@ export function reducer(state = initialState, action: ProductActions): ProductSt
     case ProductActionTypes.SetCurrentProduct:
       return {
         ...state,
-        currentProduct: { ... action.payload }
+        currentProduct: { ...action.payload }
       };
 
     case ProductActionTypes.ClearCurrentProduct:

APM-Demo1/src/app/products/edit/product-edit.component.html renamed to APM-Demo1/src/app/products/product-edit/product-edit.component.html

@@ -23,8 +23,8 @@ export class LoginComponent implements OnInit {
               private authService: AuthService,
               private router: Router) {}
 
-  // Homework
   ngOnInit(): void {
+    // TODO: Unsubscribe
     this.store.pipe(select(fromUser.getMaskUserName)).subscribe(
       maskUserName => this.maskUserName = maskUserName
     );
@@ -34,7 +34,6 @@ export class LoginComponent implements OnInit {
     this.router.navigate(['welcome']);
   }
 
-  // Homework
   checkChanged(value: boolean): void {
     this.store.dispatch(new userActions.MaskUserName(value));
   }

APM-Demo1/src/app/products/edit/product-edit.component.ts renamed to APM-Demo1/src/app/products/product-edit/product-edit.component.ts

@@ -19,7 +19,6 @@ const userRoutes: Routes = [
   imports: [
     SharedModule,
     RouterModule.forChild(userRoutes),
-    // Homework
     StoreModule.forFeature('users', reducer)
   ],
   declarations: [

APM-Demo1/src/app/products/product-list.component.css renamed to APM-Demo1/src/app/products/product-list/product-list.component.css

@@ -6,6 +6,8 @@ import { ProductService } from '../product.service';
 import { GenericValidator } from '../../shared/generic-validator';
 import { NumberValidators } from '../../shared/number.validator';
 
+import { takeWhile } from 'rxjs/operators';
+
 /* NgRx */
 import { Store, select } from '@ngrx/store';
 import * as fromProduct from '../state/product.reducer';
@@ -19,6 +21,7 @@ import * as productActions from '../state/product.actions';
 export class ProductEditComponent implements OnInit, OnDestroy {
   pageTitle = 'Product Edit';
   errorMessage = '';
+  alive = true;
   productForm: FormGroup;
 
   product: Product | null;
@@ -64,8 +67,10 @@ export class ProductEditComponent implements OnInit, OnDestroy {
       description: ''
     });
 
-    // Watch for changes to the currently selected product
-    this.store.pipe(select(fromProduct.getCurrentProduct)).subscribe(
+    this.store.pipe(
+      select(fromProduct.getCurrentProduct),
+      takeWhile(() => this.alive)
+    ).subscribe(
       selectedProduct => this.displayProduct(selectedProduct)
     );
 
@@ -76,7 +81,7 @@ export class ProductEditComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    // TODO: Should we be unsubscribing?
+    this.alive = false;
   }
 
   // Also validate on blur

APM-Demo1/src/app/products/product-list.component.html renamed to APM-Demo1/src/app/products/product-list/product-list.component.html

@@ -1,13 +1,14 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 
-import { Observable } from 'rxjs';
+import { Product } from '../product';
 
-import { Product } from './product';
+import { Observable } from 'rxjs';
+import { takeWhile } from 'rxjs/operators';
 
 /* NgRx */
 import { Store, select } from '@ngrx/store';
-import * as fromProduct from './state/product.reducer';
-import * as productActions from './state/product.actions';
+import * as fromProduct from '../state/product.reducer';
+import * as productActions from '../state/product.actions';
 
 @Component({
   selector: 'pm-product-list',
@@ -17,6 +18,7 @@ import * as productActions from './state/product.actions';
 export class ProductListComponent implements OnInit, OnDestroy {
   pageTitle = 'Products';
   errorMessage$: Observable<string>;
+  alive = true;
 
   displayCode: boolean;
 
@@ -25,7 +27,7 @@ export class ProductListComponent implements OnInit, OnDestroy {
   // Used to highlight the selected product in the list
   selectedProduct: Product | null;
 
-  constructor(private store: Store<fromProduct.ProductState>) {}
+  constructor(private store: Store<fromProduct.ProductState>) { }
 
   ngOnInit(): void {
 
@@ -39,18 +41,24 @@ export class ProductListComponent implements OnInit, OnDestroy {
     this.store.dispatch(new productActions.Load());
 
     // Subscribe here because it does not use an async pipe
-    this.store.pipe(select(fromProduct.getCurrentProduct)).subscribe(
+    this.store.pipe(
+      select(fromProduct.getCurrentProduct),
+      takeWhile(() => this.alive)
+    ).subscribe(
       currentProduct => this.selectedProduct = currentProduct
     );
 
     // Subscribe here because it does not use an async pipe
-    this.store.pipe(select(fromProduct.getShowProductCode)).subscribe(
+    this.store.pipe(
+      select(fromProduct.getShowProductCode),
+      takeWhile(() => this.alive)
+    ).subscribe(
       showProductCode => this.displayCode = showProductCode
     );
   }
 
   ngOnDestroy(): void {
-    // TODO: Should we unsubscribe?
+    this.alive = false;
   }
 
   checkChanged(value: boolean): void {

APM-Demo1/src/app/products/product-list.component.ts renamed to APM-Demo1/src/app/products/product-list/product-list.component.ts

@@ -3,9 +3,9 @@ import { RouterModule, Routes } from '@angular/router';
 
 import { SharedModule } from '../shared/shared.module';
 
-import { ProductShellComponent } from './product-shell.component';
-import { ProductListComponent } from './product-list.component';
-import { ProductEditComponent } from './edit/product-edit.component';
+import { ProductShellComponent } from './product-shell/product-shell.component';
+import { ProductListComponent } from './product-list/product-list.component';
+import { ProductEditComponent } from './product-edit/product-edit.component';
 import { ProductService } from './product.service';
 
 /* NgRx */

APM-Demo1/src/app/products/product-shell.component.html renamed to APM-Demo1/src/app/products/product-shell/product-shell.component.html

@@ -1,9 +1,11 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { NgForm } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 
 import { AuthService } from './auth.service';
 
+import { takeWhile } from 'rxjs/operators';
+
 /* NgRx */
 import { Store, select } from '@ngrx/store';
 import * as fromUser from './state/user.reducer';
@@ -13,22 +15,30 @@ import * as userActions from './state/user.actions';
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.css']
 })
-export class LoginComponent implements OnInit {
+export class LoginComponent implements OnInit, OnDestroy {
   pageTitle = 'Log In';
   errorMessage: string;
+  alive = true;
 
   maskUserName: boolean;
 
   constructor(private store: Store<fromUser.UserState>,
               private authService: AuthService,
-              private router: Router) {}
+              private router: Router) { }
 
   ngOnInit(): void {
-    this.store.pipe(select(fromUser.getMaskUserName)).subscribe(
+    this.store.pipe(
+      select(fromUser.getMaskUserName),
+      takeWhile(() => this.alive)
+    ).subscribe(
       maskUserName => this.maskUserName = maskUserName
     );
   }
 
+  ngOnDestroy(): void {
+    this.alive = false;
+  }
+
   cancel(): void {
     this.router.navigate(['welcome']);
   }