feat(example): add examples of effects not based on the Actions stream (

#1845)

As suggested, added two examples of effects not based on Actions stream:
- listen for router navigation events and update page title
- log out the user after a specified period of inactivity

Closes #1830

projects/example-app/src/app/app-routing.module.ts

@@ -11,7 +11,11 @@ export const routes: Routes = [
  loadChildren: '@example-app/books/books.module#BooksModule',
  canActivate: [AuthGuard],
  },
- { path: '**', component: NotFoundPageComponent },
+ {
+ path: '**',
+ component: NotFoundPageComponent,
+ data: { title: 'Not found' },
+ },
 ];
 
 @NgModule({

projects/example-app/src/app/app.module.ts

@@ -15,6 +15,7 @@ import { ROOT_REDUCERS, metaReducers } from '@example-app/reducers';
 
 import { CoreModule } from '@example-app/core';
 import { AppRoutingModule } from '@example-app/app-routing.module';
+import { UserEffects, RouterEffects } from '@example-app/core/effects';
 import { AppComponent } from '@example-app/core/containers';
 
 @NgModule({
@@ -73,7 +74,7 @@ import { AppComponent } from '@example-app/core/containers';
  *
  * See: https://ngrx.io/guide/effects#registering-root-effects
  */
- EffectsModule.forRoot([]),
+ EffectsModule.forRoot([UserEffects, RouterEffects]),
  CoreModule,
  ],
  bootstrap: [AppComponent],

projects/example-app/src/app/auth/auth-routing.module.ts

@@ -2,7 +2,9 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { LoginPageComponent } from '@example-app/auth/containers';
 
-const routes: Routes = [{ path: 'login', component: LoginPageComponent }];
+const routes: Routes = [
+ { path: 'login', component: LoginPageComponent, data: { title: 'Login' } },
+];
 
 @NgModule({
  imports: [RouterModule.forChild(routes)],

projects/example-app/src/app/auth/effects/auth.effects.ts

@@ -12,6 +12,7 @@ import {
 import { Credentials } from '@example-app/auth/models';
 import { AuthService } from '@example-app/auth/services';
 import { LogoutConfirmationDialogComponent } from '@example-app/auth/components';
+import { UserActions } from '@example-app/core/actions';
 
 @Injectable()
 export class AuthEffects {
@@ -69,6 +70,13 @@ export class AuthEffects {
  )
  );
 
+ logoutIdleUser$ = createEffect(() =>
+ this.actions$.pipe(
+ ofType(UserActions.idleTimeout),
+ map(() => AuthActions.logout())
+ )
+ );
+
  constructor(
  private actions$: Actions,
  private authService: AuthService,

projects/example-app/src/app/books/books-routing.module.ts

@@ -9,13 +9,22 @@ import {
 import { BookExistsGuard } from '@example-app/books/guards';
 
 export const routes: Routes = [
- { path: 'find', component: FindBookPageComponent },
+ {
+ path: 'find',
+ component: FindBookPageComponent,
+ data: { title: 'Find book' },
+ },
  {
  path: ':id',
  component: ViewBookPageComponent,
  canActivate: [BookExistsGuard],
+ data: { title: 'Book details' },
+ },
+ {
+ path: '',
+ component: CollectionPageComponent,
+ data: { title: 'Collection' },
  },
- { path: '', component: CollectionPageComponent },
 ];
 
 @NgModule({

projects/example-app/src/app/core/actions/index.ts

@@ -1,3 +1,4 @@
 import * as LayoutActions from './layout.actions';
+import * as UserActions from './user.actions';
 
-export { LayoutActions };
+export { LayoutActions, UserActions };

projects/example-app/src/app/core/actions/user.actions.ts

@@ -0,0 +1,3 @@
+import { createAction } from '@ngrx/store';
+
+export const idleTimeout = createAction('[User] Idle Timeout');

projects/example-app/src/app/core/effects/index.ts

@@ -0,0 +1,2 @@
+export * from './user.effects';
+export * from './router.effects';

projects/example-app/src/app/core/effects/router.effects.spec.ts

@@ -0,0 +1,41 @@
+import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
+import { Title } from '@angular/platform-browser';
+import { TestBed } from '@angular/core/testing';
+
+import { of } from 'rxjs';
+
+import { RouterEffects } from '@example-app/core/effects';
+
+describe('RouterEffects', () => {
+ let effects: RouterEffects;
+ let titleService: Title;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ providers: [
+ RouterEffects,
+ {
+ provide: Router,
+ useValue: { events: of(new NavigationEnd(1, '', '')) },
+ },
+ {
+ provide: ActivatedRoute,
+ useValue: { data: of({ title: 'Search' }) },
+ },
+ { provide: Title, useValue: { setTitle: jest.fn() } },
+ ],
+ });
+
+ effects = TestBed.get(RouterEffects);
+ titleService = TestBed.get(Title);
+ });
+
+ describe('updateTitle$', () => {
+ it('should update the title on router navigation', () => {
+ effects.updateTitle$.subscribe();
+ expect(titleService.setTitle).toHaveBeenCalledWith(
+ 'Book Collection - Search'
+ );
+ });
+ });
+});

projects/example-app/src/app/core/effects/router.effects.ts

@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
+import { Title } from '@angular/platform-browser';
+
+import { tap, filter, map, mergeMap } from 'rxjs/operators';
+
+import { createEffect } from '@ngrx/effects';
+
+@Injectable()
+export class RouterEffects {
+ updateTitle$ = createEffect(
+ () =>
+ this.router.events.pipe(
+ filter(event => event instanceof NavigationEnd),
+ map(() => {
+ let route = this.activatedRoute;
+ while (route.firstChild) route = route.firstChild;
+ return route;
+ }),
+ mergeMap(route => route.data),
+ map(data => `Book Collection - ${data['title']}`),
+ tap(title => this.titleService.setTitle(title))
+ ),
+ {
+ dispatch: false,
+ }
+ );
+
+ constructor(
+ private router: Router,
+ private titleService: Title,
+ private activatedRoute: ActivatedRoute
+ ) {}
+}

projects/example-app/src/app/core/effects/user.effects.spec.ts

@@ -0,0 +1,65 @@
+import { Action } from '@ngrx/store';
+import { TestBed, fakeAsync, tick } from '@angular/core/testing';
+
+import { UserEffects } from '@example-app/core/effects';
+import { UserActions } from '@example-app/core/actions';
+
+describe('UserEffects', () => {
+ let effects: UserEffects;
+ const eventsMap: { [key: string]: any } = {};
+
+ beforeAll(() => {
+ document.addEventListener = jest.fn((event, cb) => {
+ eventsMap[event] = cb;
+ });
+ });
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ providers: [UserEffects],
+ });
+
+ effects = TestBed.get(UserEffects);
+ });
+
+ describe('idle$', () => {
+ it(
+ 'should trigger idleTimeout action after 5 minutes',
+ fakeAsync(() => {
+ let action: Action | undefined;
+ effects.idle$.subscribe(res => (action = res));
+
+ // Initial action to trigger the effect
+ eventsMap['click']();
+
+ tick(2 * 60 * 1000);
+ expect(action).toBeUndefined();
+
+ tick(3 * 60 * 1000);
+ expect(action).toBeDefined();
+ expect(action!.type).toBe(UserActions.idleTimeout.type);
+ })
+ );
+
+ it(
+ 'should reset timeout on user activity',
+ fakeAsync(() => {
+ let action: Action | undefined;
+ effects.idle$.subscribe(res => (action = res));
+
+ // Initial action to trigger the effect
+ eventsMap['keydown']();
+
+ tick(4 * 60 * 1000);
+ eventsMap['mousemove']();
+
+ tick(4 * 60 * 1000);
+ expect(action).toBeUndefined();
+
+ tick(1 * 60 * 1000);
+ expect(action).toBeDefined();
+ expect(action!.type).toBe(UserActions.idleTimeout.type);
+ })
+ );
+ });
+});

projects/example-app/src/app/core/effects/user.effects.ts

@@ -0,0 +1,21 @@
+import { Injectable, Inject } from '@angular/core';
+
+import { fromEvent, merge, timer } from 'rxjs';
+import { map, switchMapTo } from 'rxjs/operators';
+
+import { createEffect } from '@ngrx/effects';
+import { UserActions } from '@example-app/core/actions';
+
+@Injectable()
+export class UserEffects {
+ clicks$ = fromEvent(document, 'click');
+ keys$ = fromEvent(document, 'keydown');
+ mouse$ = fromEvent(document, 'mousemove');
+
+ idle$ = createEffect(() =>
+ merge(this.clicks$, this.keys$, this.mouse$).pipe(
+ switchMapTo(timer(5 * 60 * 1000)), // 5 minute inactivity timeout
+ map(() => UserActions.idleTimeout())
+ )
+ );
+}