update: ractoring and cleaning up

Author: Lukas Ruebbelke

apps/dashboard/src/app/projects/projects-routing.module.ts

@@ -1,16 +1,10 @@
 import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-import { AuthGuardService as AuthGuard } from '@workshop/core-data';
+import { RouterModule, Routes } from '@angular/router';
 
 import { ProjectsComponent } from './projects.component';
 
 const routes: Routes = [
-  {
-    path: '',
-    component: ProjectsComponent,
-    canActivate: [AuthGuard]
-  }
+  { path: '', component: ProjectsComponent }
 ];
 
 @NgModule({

apps/dashboard/src/app/projects/projects.component.html

@@ -9,7 +9,7 @@
 
   <div class="col-50">
     <app-project-details
-      [project]="currentProject"
+      [project]="currentProject$ | async"
       [customers]="customers$ | async"
       (saved)="saveProject($event)"
       (cancelled)="resetCurrentProject($event)">

apps/dashboard/src/app/projects/projects.component.ts

@@ -1,90 +1,116 @@
-import { Observable } from 'rxjs';
 import { Component, OnInit } from '@angular/core';
-import { Customer, Project, ProjectsService, NotificationsService, CustomersService } from '@workshop/core-data';
-
-const emptyProject: Project = {
-  id: null,
-  title: '',
-  details: '',
-  percentComplete: 0,
-  approved: false,
-  customerId: null
-}
+import { Project, ProjectsFacade, Customer, CustomersFacade } from '@workshop/core-data';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-projects',
   templateUrl: './projects.component.html',
   styleUrls: ['./projects.component.scss']
 })
 export class ProjectsComponent implements OnInit {
-  projects$: Observable<Project[]>;
-  customers$: Observable<Customer[]>;
-  currentProject: Project;
+  customers$: Observable<Customer[]> = this.customersFacade.allCustomers$;
+  projects$: Observable<Project[]> = this.projectsFacade.allProjects$;
+  currentProject$: Observable<Project> = this.projectsFacade.currentProject$;
 
   constructor(
-    private projectsService: ProjectsService,
-    private customerService: CustomersService,
-    private ns: NotificationsService) { }
+    private projectsFacade: ProjectsFacade,
+    private customersFacade: CustomersFacade
+  ) { }
 
   ngOnInit() {
-    this.getProjects();
-    this.getCustomers();
+    this.customersFacade.loadCustomers();
+    this.projectsFacade.loadProjects();
+    this.projectsFacade.mutations$.subscribe(_ => this.resetCurrentProject());
     this.resetCurrentProject();
   }
 
   resetCurrentProject() {
-    this.currentProject = emptyProject;
+    this.selectProject({id: null});
   }
 
   selectProject(project) {
-    this.currentProject = project;
-  }
-
-  cancel(project) {
-    this.resetCurrentProject();
-  }
-
-  getCustomers() {
-    this.customers$ = this.customerService.all();
-  }
-
-  getProjects() {
-    this.projects$ = this.projectsService.all();
+    this.projectsFacade.selectProject(project.id);
   }
 
   saveProject(project) {
     if (!project.id) {
-      this.createProject(project);
+      this.projectsFacade.addProject(project);
     } else {
-      this.updateProject(project);
+      this.projectsFacade.updateProject(project);
     }
   }
 
-  createProject(project) {
-    this.projectsService.create(project)
-      .subscribe(response => {
-        this.ns.emit('Project created!');
-        this.getProjects();
-        this.resetCurrentProject();
-      });
+  deleteProject(project) {
+    this.projectsFacade.deleteProject(project);
   }
+  // projects$: Observable<Project[]>;
+  // customers$: Observable<Customer[]>;
+  // currentProject: Project;
 
-  updateProject(project) {
-    this.projectsService.update(project)
-      .subscribe(response => {
-        this.ns.emit('Project saved!');
-        this.getProjects();
-        this.resetCurrentProject();
-      });
-  }
+  // constructor(
+  //   private projectsService: ProjectsService,
+  //   private customerService: CustomersService,
+  //   private ns: NotificationsService) { }
 
-  deleteProject(project) {
-    this.projectsService.delete(project)
-      .subscribe(response => {
-        this.ns.emit('Project deleted!');
-        this.getProjects();
-        this.resetCurrentProject();
-      });
-  }
+  // ngOnInit() {
+  //   this.getProjects();
+  //   this.getCustomers();
+  //   this.resetCurrentProject();
+  // }
+
+  // resetCurrentProject() {
+  //   this.currentProject = emptyProject;
+  // }
+
+  // selectProject(project) {
+  //   this.currentProject = project;
+  // }
+
+  // cancel(project) {
+  //   this.resetCurrentProject();
+  // }
+
+  // getCustomers() {
+  //   this.customers$ = this.customerService.all();
+  // }
+
+  // getProjects() {
+  //   this.projects$ = this.projectsService.all();
+  // }
+
+  // saveProject(project) {
+  //   if (!project.id) {
+  //     this.createProject(project);
+  //   } else {
+  //     this.updateProject(project);
+  //   }
+  // }
+
+  // createProject(project) {
+  //   this.projectsService.create(project)
+  //     .subscribe(response => {
+  //       this.ns.emit('Project created!');
+  //       this.getProjects();
+  //       this.resetCurrentProject();
+  //     });
+  // }
+
+  // updateProject(project) {
+  //   this.projectsService.update(project)
+  //     .subscribe(response => {
+  //       this.ns.emit('Project saved!');
+  //       this.getProjects();
+  //       this.resetCurrentProject();
+  //     });
+  // }
+
+  // deleteProject(project) {
+  //   this.projectsService.delete(project)
+  //     .subscribe(response => {
+  //       this.ns.emit('Project deleted!');
+  //       this.getProjects();
+  //       this.resetCurrentProject();
+  //     });
+  // }
 }
 

libs/core-data/src/index.ts

@@ -6,3 +6,5 @@ export { CustomersService } from './lib/customers/customers.service';
 export { Customer } from './lib/customers/customer.model';
 export { Project } from './lib/projects/project.model';
 export { ProjectsService } from './lib/projects/projects.service';
+export { ProjectsFacade } from './lib/state/projects/projects.facade';
+export { CustomersFacade } from './lib/state/customers/customers.facade';

libs/core-data/src/lib/core-data.module.ts

@@ -1,33 +1,26 @@
-import { AuthGuardService } from './auth/auth-guard.service';
 import { CommonModule } from '@angular/common';
-import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
+import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 
+import { AuthGuardService } from './auth/auth-guard.service';
 import { AuthService } from './auth/auth.service';
-import { TokenInterceptor } from './auth/token.interceptor';
+import { CustomersService } from './customers/customers.service';
 import { NotificationsService } from './notifications/notifications.service';
 import { ProjectsService } from './projects/projects.service';
-import { ErrorInterceptor } from './error/error.interceptor';
-import { CustomersService } from './customers/customers.service';
+import { StateModule } from './state/state.module';
 
 @NgModule({
   providers: [
     AuthService,
     AuthGuardService,
     NotificationsService,
     CustomersService,
-    ProjectsService,
-    {
-      provide: HTTP_INTERCEPTORS,
-      useClass: TokenInterceptor,
-      multi: true
-    },
-    {
-      provide: HTTP_INTERCEPTORS,
-      useClass: ErrorInterceptor,
-      multi: true
-    }
+    ProjectsService
+  ],
+  imports: [
+    CommonModule,
+    HttpClientModule,
+    StateModule
   ],
-  imports: [CommonModule, HttpClientModule],
 })
 export class CoreDataModule {}

libs/core-data/src/lib/state/customers/customers.actions.ts

@@ -0,0 +1,18 @@
+import { Action } from '@ngrx/store';
+
+export enum CustomersActionTypes {
+  LoadCustomers = '[Customers] Load Data',
+  CustomersLoaded = '[Customers] Data Loaded'
+}
+
+export class LoadCustomers implements Action {
+  readonly type = CustomersActionTypes.LoadCustomers;
+  constructor() {}
+}
+
+export class CustomersLoaded implements Action {
+  readonly type = CustomersActionTypes.CustomersLoaded;
+  constructor(public payload: any) {}
+}
+
+export type CustomersActions = LoadCustomers | CustomersLoaded;

libs/core-data/src/lib/state/customers/customers.effects.ts

@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { Actions, Effect } from '@ngrx/effects';
+import { DataPersistence } from '@nrwl/nx';
+import { map } from 'rxjs/operators';
+
+import { Customer } from '../../customers/customer.model';
+import { CustomersService } from '../../customers/customers.service';
+import { CustomersActionTypes, CustomersLoaded, LoadCustomers } from './customers.actions';
+import { CustomersState } from './customers.reducer';
+
+@Injectable()
+export class CustomersEffects {
+  @Effect()
+  loadCustomers$ = this.dataPersistence.fetch(CustomersActionTypes.LoadCustomers, {
+    run: (action: LoadCustomers, state: CustomersState) => {
+      return this.customersService.all().pipe(map((res: Customer[]) => new CustomersLoaded(res)))
+    },
+
+    onError: (action: LoadCustomers, error) => {
+      console.error('Error', error);
+    }
+  });
+
+  constructor(
+    private actions$: Actions,
+    private dataPersistence: DataPersistence<CustomersState>,
+    private customersService: CustomersService
+  ) {}
+}

libs/core-data/src/lib/state/customers/customers.facade.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { select, Store } from '@ngrx/store';
+
+import * as CustomersActions from './customers.actions';
+import { CustomersState } from './customers.reducer';
+import { selectAllCustomers } from '..';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CustomersFacade {
+  allCustomers$ = this.store.pipe(select(selectAllCustomers));
+
+  constructor(private store: Store<CustomersState>) {}
+
+  loadCustomers() {
+    this.store.dispatch(new CustomersActions.LoadCustomers());
+  }
+}

libs/core-data/src/lib/state/customers/customers.reducer.ts

@@ -0,0 +1,40 @@
+import { createEntityAdapter, EntityAdapter, EntityState } from '@ngrx/entity';
+
+import { Customer } from '../../customers/customer.model';
+import { CustomersActions, CustomersActionTypes } from './customers.actions';
+
+/**
+ * Interface to the part of the Store containing CustomersState
+ * and other information related to Customer.
+ */
+export interface CustomersState extends EntityState<Customer> {}
+
+export const adapter: EntityAdapter<Customer> = createEntityAdapter<Customer>();
+export const initialState: CustomersState = adapter.getInitialState();
+
+export function customersReducer(
+  state = initialState,
+  action: CustomersActions
+): CustomersState {
+  switch (action.type) {
+    case CustomersActionTypes.CustomersLoaded: {
+      return adapter.addAll(action.payload, state);
+    }
+
+    default:
+      return state;
+  }
+}
+
+// get the selectors
+const { selectIds, selectEntities, selectAll } = adapter.getSelectors();
+
+// select the array of widget ids
+export const selectCustomerIds = selectIds;
+
+// select the dictionary of widget entities
+export const selectCustomerEntities = selectEntities;
+
+// select the array of widgets
+export const selectAllCustomers = selectAll;
+