42. Create spinner side effect for loadproduct

Author: mike1477

src/app/modules/products/product-item/product-item.component.ts

@@ -52,15 +52,6 @@ export class ProductItemComponent implements OnInit {
         );
       })
     );
-    // this.spinner.show();
-
-    // this.product$ = this.service.getProduct(
-    //   this.route.snapshot.paramMap.get('id')
-    // );
-
-    // setTimeout(() => {
-    //   this.spinner.hide();
-    // }, 1000);
   }
 
   deleteProduct(id: number) {

src/app/modules/products/product-view/product-view.component.ts

@@ -1,9 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { MockProductApiService } from '../resources/mock-product-api.service';
 import { Product } from '../resources/product';
-import { NgxSpinnerService } from 'ngx-spinner';
-import { AlertService } from 'ngx-alerts';
 import * as fromProductSelectors from '../state/product.selectors';
 import { Store, select } from '@ngrx/store';
 import { AppState } from 'src/app/store';
@@ -21,12 +18,7 @@ export class ProductViewComponent implements OnInit {
   isProductInStore$: Observable<boolean>;
   product$: Observable<Product>;
 
-  constructor(
-    private route: ActivatedRoute,
-    private productService: MockProductApiService,
-    private spinner: NgxSpinnerService,
-    private store: Store<AppState>
-  ) {}
+  constructor(private route: ActivatedRoute, private store: Store<AppState>) {}
 
   ngOnInit(): void {
     this.productId = this.route.snapshot.paramMap.get('id');
@@ -50,22 +42,5 @@ export class ProductViewComponent implements OnInit {
         );
       })
     );
-
-    // this.spinner.show();
-    // const observer = {
-    //   next: (product) => {
-    //     this.product = product;
-    //     setTimeout(() => {
-    //       this.spinner.hide();
-    //     }, 1000);
-    //   },
-    //   error: (err) => {
-    //     this.spinner.hide();
-    //     console.error(err);
-    //   },
-    // };
-    // this.productService
-    //   .getProduct(this.route.snapshot.paramMap.get('id'))
-    //   .subscribe(observer);
   }
 }

src/app/store/effects/spinner.effects.ts

@@ -15,7 +15,9 @@ export class SpinnerEffects {
           fromAuthActions.loginPage,
           fromAuthActions.loginModal,
           fromProductActions.loadProducts,
-          fromProductActions.loadAdminProducts
+          fromProductActions.loadAdminProducts,
+          fromProductActions.loadProduct,
+          fromProductActions.loadAdminProduct
         ),
         tap(() => this.spinner.show())
       ),
@@ -29,7 +31,9 @@ export class SpinnerEffects {
           fromAuthActions.loginSuccess,
           fromAuthActions.loginFailure,
           fromProductActions.loadProductsFailure,
-          fromProductActions.loadProductsSuccess
+          fromProductActions.loadProductsSuccess,
+          fromProductActions.loadProductFailure,
+          fromProductActions.loadProductSuccess
         ),
         tap(() => {
           setTimeout(() => {