fix: ioet#141 load customers from api

Author: enriquezrene

src/app/modules/customer-management/components/customer-info/components/create-customer/create-customer.ts

@@ -1,3 +1,4 @@
+import { LoadCustomers } from './../../../../store/customer-management.actions';
 import { Component, Input, Output, EventEmitter, OnDestroy, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { Store, select } from '@ngrx/store';
@@ -40,6 +41,7 @@ export class CreateCustomerComponent implements OnInit, OnDestroy {
 
   onSubmit(customerData) {
     this.store.dispatch(new CreateCustomer(customerData));
+    this.store.dispatch(new LoadCustomers());
     this.showAlert = true;
   }
 

src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.ts

@@ -1,34 +1,32 @@
-import { Component } from '@angular/core';
+import { allCustomers } from './../../../../store/customer-management.selectors';
+import { Component, OnInit } from '@angular/core';
+import { Store, select } from '@ngrx/store';
+
+import { LoadCustomers } from './../../../../store/customer-management.actions';
+import { Customer } from './../../../../../shared/models/customer.model';
 import { ITEMS_PER_PAGE } from 'src/environments/environment';
 
+
 @Component({
   selector: 'app-customer-list',
   templateUrl: './customer-list.component.html',
   styleUrls: ['./customer-list.component.scss'],
 })
-export class CustomerListComponent {
+export class CustomerListComponent implements OnInit {
+
   initPage1 = 1;
   itemsPerPage = ITEMS_PER_PAGE;
 
-  customers = [
-    {
-      id: '1',
-      name: 'GoSpace',
-    },
-    {
-      id: '2',
-      name: 'GruHub',
-    },
-    {
-      id: '3',
-      name: 'e&y',
-    },
-    {
-      id: '4',
-      name: 'Mido',
-    },
-  ];
-
-  constructor() {}
+  customers: Customer[] = [];
+
+  constructor(private store: Store<Customer>) {}
+
+  ngOnInit(): void {
+    this.store.dispatch(new LoadCustomers());
+    const customers$ = this.store.pipe(select(allCustomers));
+    customers$.subscribe((response) => {
+      this.customers = response;
+    });
+  }
 
 }

src/app/modules/customer-management/services/customer.service.ts

@@ -20,4 +20,8 @@ export class CustomerService {
     };
     return this.http.post(this.baseUrl, body);
   }
+
+  getCustomers(): Observable<any> {
+    return this.http.get(this.baseUrl);
+  }
 }

src/app/modules/customer-management/store/customer-management.actions.ts

@@ -5,6 +5,24 @@ export enum CustomerManagementActionTypes {
   CREATE_CUSTOMER = '[CustomerManagement] CREATE_CUSTOMER',
   CREATE_CUSTOMER_SUCCESS = '[CustomerManagement] CREATE_CUSTOMER_SUCCESS',
   CREATE_CUSTOMER_FAIL = '[CustomerManagement] CREATE_CUSTOMER_FAIL',
+  LOAD_CUSTOMERS = '[CustomerManagement] LOAD_CUSTOMERS',
+  LOAD_CUSTOMERS_SUCCESS = '[CustomerManagement] LOAD_CUSTOMERS_SUCCESS',
+  LOAD_CUSTOMERS_FAIL = '[CustomerManagement] LOAD_CUSTOMERS_FAIL',
+}
+
+export class LoadCustomers implements Action {
+  public readonly type = CustomerManagementActionTypes.LOAD_CUSTOMERS;
+}
+
+export class LoadCustomersSuccess implements Action {
+  readonly type = CustomerManagementActionTypes.LOAD_CUSTOMERS_SUCCESS;
+  constructor(readonly payload: Customer[]) {}
+}
+
+export class LoadCustomersFail implements Action {
+  public readonly type = CustomerManagementActionTypes.LOAD_CUSTOMERS_FAIL;
+
+  constructor(public error: string) {}
 }
 
 export class CreateCustomer implements Action {
@@ -25,4 +43,6 @@ export class CreateCustomerFail implements Action {
   constructor(public error: string) {}
 }
 
-export type CustomerManagementActions = CreateCustomer | CreateCustomerSuccess | CreateCustomerFail;
+export type CustomerManagementActions =
+  CreateCustomer | CreateCustomerSuccess | CreateCustomerFail |
+  LoadCustomers | LoadCustomersFail | LoadCustomersSuccess;

src/app/modules/customer-management/store/customer-management.effects.ts

@@ -11,6 +11,19 @@ import { map, catchError, mergeMap } from 'rxjs/operators';
 export class CustomerEffects {
   constructor(private actions$: Actions, private customerService: CustomerService) {}
 
+  @Effect()
+  loadCustomers$: Observable<Action> = this.actions$.pipe(
+    ofType(actions.CustomerManagementActionTypes.LOAD_CUSTOMERS),
+    mergeMap(() =>
+      this.customerService.getCustomers().pipe(
+        map((customers) => {
+          return new actions.LoadCustomersSuccess(customers);
+        }),
+        catchError((error) => of(new actions.LoadCustomersFail(error)))
+      )
+    )
+  );
+
   @Effect()
   createCustomer$: Observable<Action> = this.actions$.pipe(
     ofType(actions.CustomerManagementActionTypes.CREATE_CUSTOMER),

src/app/modules/customer-management/store/customer-management.reducers.ts

@@ -5,19 +5,42 @@ export interface CustomerState {
   data: Customer[];
   isLoading: boolean;
   message: string;
+  customers: Customer[];
 }
 
 export const initialState: CustomerState = {
   data: [],
   isLoading: false,
   message: '',
+  customers: [],
 };
 
 export function customerManagementReducer(
   state: CustomerState = initialState,
   action: CustomerManagementActions
 ): CustomerState {
   switch (action.type) {
+    case CustomerManagementActionTypes.LOAD_CUSTOMERS: {
+      return {
+        ...state,
+        isLoading: true,
+      };
+    }
+    case CustomerManagementActionTypes.LOAD_CUSTOMERS_SUCCESS: {
+      return {
+        ...state,
+        customers: action.payload,
+        isLoading: false,
+      };
+    }
+    case CustomerManagementActionTypes.LOAD_CUSTOMERS_FAIL: {
+      return {
+        ...state,
+        customers: [],
+        isLoading: false,
+      };
+    }
+
     case CustomerManagementActionTypes.CREATE_CUSTOMER: {
       return {
         ...state,

src/app/modules/customer-management/store/customer-management.selectors.ts

@@ -8,3 +8,7 @@ export const getStatusMessage = createSelector(getCustomerState, (messageState)
     return messageState.message;
   }
 });
+
+export const allCustomers = createSelector(getCustomerState, (state: CustomerState) => {
+  return state.customers;
+});

src/environments/environment.ts

@@ -5,7 +5,7 @@ import * as keys from './keys';
 
 export const environment = {
   production: false,
-  timeTrackerApiUrl: 'https://tsheets-apim.azure-api.net',
+  timeTrackerApiUrl: 'https://timetracker-api.azurewebsites.net',
   stackexchangeApiUrl: 'https://api.stackexchange.com',
 };