From a0ca214d99daabc675e0e9e188acb7a5dbf2d5e9 Mon Sep 17 00:00:00 2001 From: JCamiloo Date: Sun, 12 Jan 2020 22:27:31 -0500 Subject: [PATCH] [IncomeApp] using ngrx with lazyload --- 3. IncomeApp/src/app/app-routing.module.ts | 6 ++++++ 3. IncomeApp/src/app/app.module.ts | 15 +++++--------- 3. IncomeApp/src/app/app.reducer.ts | 3 --- 3. IncomeApp/src/app/auth/auth.module.ts | 11 ++++++---- .../src/app/auth/guards/auth-guard.service.ts | 9 +++++++-- .../src/app/dashboard/dashboard.module.ts | 10 ++++------ .../components/detail/detail.component.ts | 4 ++-- .../income-expenses.component.ts | 4 ++-- .../statistics/statistics.component.ts | 4 ++-- .../income-expenses/income-expenses.module.ts | 20 ++++++++++++------- .../income-expenses.reducer.ts | 10 ++++++++-- 3. IncomeApp/src/app/shared/shared.module.ts | 4 +++- 12 files changed, 59 insertions(+), 41 deletions(-) diff --git a/3. IncomeApp/src/app/app-routing.module.ts b/3. IncomeApp/src/app/app-routing.module.ts index 56aeaad..558f79f 100644 --- a/3. IncomeApp/src/app/app-routing.module.ts +++ b/3. IncomeApp/src/app/app-routing.module.ts @@ -2,10 +2,16 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { LoginComponent } from './auth/components/login/login.component'; import { RegisterComponent } from './auth/components/register/register.component'; +import { AuthGuardService } from './auth/guards/auth-guard.service'; const routes: Routes = [ { path: 'login', component: LoginComponent }, { path: 'register', component: RegisterComponent }, + { + path: '', + loadChildren: () => import('./income-expenses/income-expenses.module').then(m => m.IncomeExpensesModule), + canLoad: [ AuthGuardService ] + }, { path: '**', pathMatch: 'full', redirectTo: '' }, ]; diff --git a/3. IncomeApp/src/app/app.module.ts b/3. IncomeApp/src/app/app.module.ts index 479de14..30dffdf 100644 --- a/3. IncomeApp/src/app/app.module.ts +++ b/3. IncomeApp/src/app/app.module.ts @@ -1,8 +1,6 @@ -import { IncomeExpensesModule } from './income-expenses/income-expenses.module'; import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; -import { FormsModule } from '@angular/forms'; import { AngularFireModule } from '@angular/fire'; import { AngularFirestoreModule } from '@angular/fire/firestore'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @@ -15,28 +13,25 @@ import { AppComponent } from './app.component'; import { environment } from './../environments/environment'; import { appReducers } from './app.reducer'; import { AuthModule } from './auth/auth.module'; -import { SharedModule } from './shared/shared.module'; -import { DashboardComponent } from './dashboard/components/dashboard/dashboard.component'; @NgModule({ declarations: [ AppComponent, - DashboardComponent ], imports: [ AuthModule, - IncomeExpensesModule, - SharedModule, BrowserModule, AppRoutingModule, - FormsModule, AngularFireModule.initializeApp(environment.firebaseConfig), AngularFirestoreModule, BrowserAnimationsModule, - ToastrModule.forRoot({ progressBar: true }), ChartsModule, + ToastrModule.forRoot({ progressBar: true }), StoreModule.forRoot(appReducers), - StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: environment.production }) + StoreDevtoolsModule.instrument({ + maxAge: 25, + // logOnly: environment.production + }) ], providers: [], bootstrap: [AppComponent] diff --git a/3. IncomeApp/src/app/app.reducer.ts b/3. IncomeApp/src/app/app.reducer.ts index fe11749..b091044 100644 --- a/3. IncomeApp/src/app/app.reducer.ts +++ b/3. IncomeApp/src/app/app.reducer.ts @@ -1,16 +1,13 @@ import * as fromUI from './shared/ui.reducer'; import * as fromAuth from './auth/auth.reducer'; -import * as fromIncomeExpenses from './income-expenses/income-expenses.reducer'; import { ActionReducerMap } from '@ngrx/store'; export interface AppState { ui: fromUI.State; auth: fromAuth.AuthState - incomeExpenses: fromIncomeExpenses.IncomeExpensesState } export const appReducers: ActionReducerMap = { ui: fromUI.UIReducer, auth: fromAuth.AuthReducer, - incomeExpenses: fromIncomeExpenses.IncomeExpensesReducer } \ No newline at end of file diff --git a/3. IncomeApp/src/app/auth/auth.module.ts b/3. IncomeApp/src/app/auth/auth.module.ts index 3ac19ca..5804b71 100644 --- a/3. IncomeApp/src/app/auth/auth.module.ts +++ b/3. IncomeApp/src/app/auth/auth.module.ts @@ -4,16 +4,19 @@ import { RegisterComponent } from './components/register/register.component'; import { FormsModule } from '@angular/forms'; import { AngularFireAuthModule } from '@angular/fire/auth'; import { CommonModule } from '@angular/common'; +import { RouterModule, } from '@angular/router'; + @NgModule({ - declarations: [ - LoginComponent, - RegisterComponent - ], imports: [ CommonModule, + RouterModule, FormsModule, AngularFireAuthModule, + ], + declarations: [ + LoginComponent, + RegisterComponent ] }) export class AuthModule {} \ No newline at end of file diff --git a/3. IncomeApp/src/app/auth/guards/auth-guard.service.ts b/3. IncomeApp/src/app/auth/guards/auth-guard.service.ts index d194a01..3a24ea3 100644 --- a/3. IncomeApp/src/app/auth/guards/auth-guard.service.ts +++ b/3. IncomeApp/src/app/auth/guards/auth-guard.service.ts @@ -1,15 +1,20 @@ import { Injectable } from '@angular/core'; -import { CanActivate, Router } from '@angular/router'; +import { CanActivate, CanLoad } from '@angular/router'; import { AuthService } from '../services/auth.service'; +import { take } from 'rxjs/operators'; @Injectable({ providedIn: 'root' }) -export class AuthGuardService implements CanActivate{ +export class AuthGuardService implements CanActivate, CanLoad{ constructor(private authSrv: AuthService) { } canActivate() { return this.authSrv.isAuth(); } + + canLoad() { + return this.authSrv.isAuth().pipe(take(1)); + } } diff --git a/3. IncomeApp/src/app/dashboard/dashboard.module.ts b/3. IncomeApp/src/app/dashboard/dashboard.module.ts index 11cd0b4..f8cd7ca 100644 --- a/3. IncomeApp/src/app/dashboard/dashboard.module.ts +++ b/3. IncomeApp/src/app/dashboard/dashboard.module.ts @@ -1,4 +1,3 @@ -import { IncomeExpensesModule } from './../income-expenses/income-expenses.module'; import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { DashboardComponent } from './components/dashboard/dashboard.component'; @@ -21,13 +20,12 @@ const routes: Routes = [ ]; @NgModule({ - declarations: [], imports: [ - RouterModule.forChild(routes), - IncomeExpensesModule + RouterModule.forChild(routes) ], exports: [ - RouterModule - ] + RouterModule, + ], + declarations: [] }) export class DashboardModule { } diff --git a/3. IncomeApp/src/app/income-expenses/components/detail/detail.component.ts b/3. IncomeApp/src/app/income-expenses/components/detail/detail.component.ts index a1880d6..c2be3d9 100644 --- a/3. IncomeApp/src/app/income-expenses/components/detail/detail.component.ts +++ b/3. IncomeApp/src/app/income-expenses/components/detail/detail.component.ts @@ -1,7 +1,7 @@ +import { IncomeState } from './../../income-expenses.reducer'; import { map } from 'rxjs/operators'; import { Component, OnInit } from '@angular/core'; import { Store } from '@ngrx/store'; -import { AppState } from 'src/app/app.reducer'; import { Observable } from 'rxjs'; import { IncomeExpenses } from '../../models/income-expenses.model'; import { IncomeExpensesService } from '../../services/income-expenses.service'; @@ -15,7 +15,7 @@ export class DetailComponent implements OnInit { items$: Observable; - constructor(private store: Store, private incomeSrv: IncomeExpensesService) { } + constructor(private store: Store, private incomeSrv: IncomeExpensesService) { } ngOnInit() { this.items$ = this.store.select('incomeExpenses').pipe(map(incomeExpenses => incomeExpenses.items)); diff --git a/3. IncomeApp/src/app/income-expenses/components/income-expenses/income-expenses.component.ts b/3. IncomeApp/src/app/income-expenses/components/income-expenses/income-expenses.component.ts index 1101445..84ff449 100644 --- a/3. IncomeApp/src/app/income-expenses/components/income-expenses/income-expenses.component.ts +++ b/3. IncomeApp/src/app/income-expenses/components/income-expenses/income-expenses.component.ts @@ -1,9 +1,9 @@ +import { IncomeState } from './../../income-expenses.reducer'; import { IncomeExpensesService } from '../../services/income-expenses.service'; import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl, Validators } from '@angular/forms'; import { IncomeExpenses } from '../../models/income-expenses.model'; import { Store } from '@ngrx/store'; -import { AppState } from 'src/app/app.reducer'; import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; @@ -18,7 +18,7 @@ export class IncomeExpensesComponent implements OnInit { type: string = 'income'; loading$: Observable; - constructor(private incomeSrv: IncomeExpensesService, private store: Store) { } + constructor(private incomeSrv: IncomeExpensesService, private store: Store) { } ngOnInit() { this.loading$ = this.store.select('ui').pipe(map(ui => ui.isLoading)); diff --git a/3. IncomeApp/src/app/income-expenses/components/statistics/statistics.component.ts b/3. IncomeApp/src/app/income-expenses/components/statistics/statistics.component.ts index abca602..afd7052 100644 --- a/3. IncomeApp/src/app/income-expenses/components/statistics/statistics.component.ts +++ b/3. IncomeApp/src/app/income-expenses/components/statistics/statistics.component.ts @@ -1,7 +1,7 @@ +import { IncomeState } from './../../income-expenses.reducer'; import { IncomeExpenses } from '../../models/income-expenses.model'; import { Component, OnInit } from '@angular/core'; import { Store } from '@ngrx/store'; -import { AppState } from 'src/app/app.reducer'; import { Subscription } from 'rxjs'; import { Label } from 'ng2-charts'; @@ -20,7 +20,7 @@ export class StatisticsComponent implements OnInit { doughnutChartLabels: Label[] = ['Ingesos', 'Egresos']; doughnutChartData: number[] = []; - constructor(private store: Store) { } + constructor(private store: Store) { } ngOnInit() { this.dataSubscription = this.store.select('incomeExpenses').subscribe(data => { diff --git a/3. IncomeApp/src/app/income-expenses/income-expenses.module.ts b/3. IncomeApp/src/app/income-expenses/income-expenses.module.ts index f0d8333..761b2c3 100644 --- a/3. IncomeApp/src/app/income-expenses/income-expenses.module.ts +++ b/3. IncomeApp/src/app/income-expenses/income-expenses.module.ts @@ -8,19 +8,25 @@ import { ReactiveFormsModule } from '@angular/forms'; import { ChartsModule } from 'ng2-charts'; import { SharedModule } from '../shared/shared.module'; import { DashboardModule } from '../dashboard/dashboard.module'; +import { DashboardComponent } from '../dashboard/components/dashboard/dashboard.component'; +import { StoreModule } from '@ngrx/store'; +import { IncomeExpensesReducer } from './income-expenses.reducer'; @NgModule({ + imports: [ + CommonModule, + ReactiveFormsModule, + DashboardModule, + SharedModule, + ChartsModule, + StoreModule.forFeature('incomeExpenses', IncomeExpensesReducer) + ], declarations: [ + DashboardComponent, IncomeExpensesComponent, StatisticsComponent, DetailComponent, - OrderIncomesPipe - ], - imports: [ - CommonModule, - SharedModule, - ReactiveFormsModule, - ChartsModule + OrderIncomesPipe, ] }) export class IncomeExpensesModule { } diff --git a/3. IncomeApp/src/app/income-expenses/income-expenses.reducer.ts b/3. IncomeApp/src/app/income-expenses/income-expenses.reducer.ts index 2eecfa7..2561974 100644 --- a/3. IncomeApp/src/app/income-expenses/income-expenses.reducer.ts +++ b/3. IncomeApp/src/app/income-expenses/income-expenses.reducer.ts @@ -1,10 +1,16 @@ -import { IncomeExpenses } from './models/income-expenses.model'; import * as incomeExpensesActions from './income-expenses.actions'; +import { IncomeExpenses } from './models/income-expenses.model'; +import { AppState } from '../app.reducer'; export interface IncomeExpensesState { items: IncomeExpenses[]; } + +export interface IncomeState extends AppState { + incomeExpenses: IncomeExpensesState; +} + const initState: IncomeExpensesState = { items: [] }; -export function IncomeExpensesReducer (state = initState, action: incomeExpensesActions.actions) { +export function IncomeExpensesReducer (state = initState, action: incomeExpensesActions.actions): IncomeExpensesState { switch (action.type) { case incomeExpensesActions.SET_ITEMS: return { items: [ ...action.items ]}; diff --git a/3. IncomeApp/src/app/shared/shared.module.ts b/3. IncomeApp/src/app/shared/shared.module.ts index 8605b6d..83b6c6f 100644 --- a/3. IncomeApp/src/app/shared/shared.module.ts +++ b/3. IncomeApp/src/app/shared/shared.module.ts @@ -3,6 +3,7 @@ import { FooterComponent } from './components/footer/footer.component'; import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { NavbarComponent } from './components/navbar/navbar.component'; +import { RouterModule } from '@angular/router'; @NgModule({ declarations: [ @@ -11,7 +12,8 @@ import { NavbarComponent } from './components/navbar/navbar.component'; FooterComponent ], imports: [ - CommonModule + CommonModule, + RouterModule ], exports: [ NavbarComponent,