enabled arrow icons to jump to previous and next lessons

apps/codelab/src/app/codelabs/angular/menu-route.service.spec.ts

@@ -0,0 +1,55 @@
+import { TestBed } from '@angular/core/testing';
+
+import { MenuRouteService } from './menu-route.service';
+import { ActivatedRoute } from '@angular/router';
+import { MENU_ROUTES, MenuRoutes } from '../../common';
+
+describe('MenuRouteService', () => {
+  const menuRoutes: MenuRoutes = [
+    {
+      path: 'previouslesson',
+      prod: true
+    },
+    {
+      path: 'currentlesson',
+      prod: true
+    },
+    {
+      path: 'nextlesson',
+      prod: true
+    }
+  ];
+
+  const activatedRouteStub = {
+    snapshot: {
+      pathFromRoot: [
+        {
+          routeConfig: menuRoutes[1]
+        }
+      ]
+    }
+  } as ActivatedRoute;
+
+  beforeEach(() =>
+    TestBed.configureTestingModule({
+      providers: [{ provide: MENU_ROUTES, useValue: menuRoutes }]
+    })
+  );
+
+  it('should be created', () => {
+    const service: MenuRouteService = TestBed.inject(MenuRouteService);
+    expect(service).toBeTruthy();
+  });
+
+  it('getPreviousLink should return previouslesson', () => {
+    const service: MenuRouteService = TestBed.inject(MenuRouteService);
+    const previousLink = service.getPreviousLink(activatedRouteStub);
+    expect(previousLink).toEqual('../../' + menuRoutes[0].path);
+  });
+
+  it('getNextLink should return nextlesson', () => {
+    const service: MenuRouteService = TestBed.inject(MenuRouteService);
+    const nextLink = service.getNextLink(activatedRouteStub);
+    expect(nextLink).toEqual('../../' + menuRoutes[2].path);
+  });
+});

apps/codelab/src/app/codelabs/angular/menu-route.service.ts

@@ -0,0 +1,63 @@
+import { Injectable, Inject } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MENU_ROUTES, MenuRoute } from '../../common';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MenuRouteService {
+  constructor(@Inject(MENU_ROUTES) private readonly menuRoutes) {}
+
+  getPreviousLink(activeRoute: ActivatedRoute): string {
+    const index = this.getCurrentIndex(activeRoute);
+    if (index > 0) {
+      return this.getMenuRoutePathByIndex(index - 1);
+    }
+    return '';
+  }
+
+  getNextLink(activeRoute: ActivatedRoute): string {
+    const index = this.getCurrentIndex(activeRoute);
+    if (index < this.menuRoutes.length - 1) {
+      return this.getMenuRoutePathByIndex(index + 1);
+    }
+    return '';
+  }
+
+  private getCurrentIndex(activeRoute: ActivatedRoute): number {
+    // TODO: figure out a way to inject the ActivatedRoute instead of parameter
+    // This method gets the index of the current menuRoute. Ideally we should be able
+    // to inject in the ActivatedRoute in the constructor. However we noticed that
+    // probably because this is a service, activatedRoute has the value when the
+    // service is constructed and not the current activated route. We are using a
+    // workaround now which expects the calling method to pass the current activated
+    // route. Fix this to use DI.
+    const config = activeRoute.snapshot.pathFromRoot
+      .map(a => a.routeConfig)
+      .find(r => r && (r as MenuRoute).prod);
+    if (config == null) {
+      return -1;
+    }
+    const index = this.menuRoutes.findIndex(c => c.path === config.path);
+    return index;
+  }
+
+  private getMenuRouteByIndex(index: number) {
+    if (index >= 0 && index < this.menuRoutes.length) {
+      return this.menuRoutes[index];
+    }
+    return null;
+  }
+
+  private getMenuRoutePathByIndex(index: number): string {
+    const indexRoute = this.getMenuRouteByIndex(index);
+    if (indexRoute != null) {
+      let path = indexRoute.path;
+      if (path) {
+        path = '../../' + path;
+      }
+      return path;
+    }
+    return '';
+  }
+}

apps/codelab/src/app/common.ts

@@ -3,7 +3,7 @@ import { Route } from '@angular/router';
 
 export type MenuRoutes = MenuRoute[];
 
-interface MenuRoute extends Route {
+export interface MenuRoute extends Route {
   name?: string;
   description?: string;
   page?: string;

apps/codelab/src/app/components/slides/closing-slide/codelab-closing-slide.component.spec.ts

@@ -1,13 +1,50 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { CodelabClosingSlideComponent } from './codelab-closing-slide.component';
+import { ActivatedRoute } from '@angular/router';
+import { SlidesDeckComponent } from '@codelab/slides/src/lib/deck/deck.component';
+import { MenuRoutes } from '../../../common';
+import { MenuRouteService } from '../../../codelabs/angular/menu-route.service';
 
 describe('CodelabClosingSlideComponent', () => {
   let component: CodelabClosingSlideComponent;
   let fixture: ComponentFixture<CodelabClosingSlideComponent>;
 
+  const menuRouteService = {
+    getNextLink: function() {
+      return 'nextlesson';
+    }
+  };
+
+  const slidesDeckComponentStub = {
+    setNext: jasmine.createSpy('setNext')
+  };
+
+  const menuRoutes: MenuRoutes = [
+    {
+      path: 'previouslesson',
+      prod: true
+    },
+    {
+      path: 'currentlesson',
+      prod: true
+    },
+    {
+      path: 'nextlesson',
+      prod: true
+    }
+  ];
+
+  const activatedRouteStub = {
+    snapshot: { pathFromRoot: [{ routeConfig: menuRoutes[1] }] }
+  };
+
   beforeEach(async(() => {
     TestBed.configureTestingModule({
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: MenuRouteService, useValue: menuRouteService },
+        { provide: SlidesDeckComponent, useValue: slidesDeckComponentStub }
+      ],
       declarations: [CodelabClosingSlideComponent]
     }).compileComponents();
   }));

apps/codelab/src/app/components/slides/closing-slide/codelab-closing-slide.component.ts

@@ -1,4 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
+import { SlidesDeckComponent } from '@codelab/slides/src/lib/deck/deck.component';
+import { MenuRouteService } from '../../../codelabs/angular/menu-route.service';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'codelab-closing-slide',
@@ -10,7 +13,16 @@ export class CodelabClosingSlideComponent implements OnInit {
   @Input() body: String;
   @Input() footer: String;
 
-  constructor() {}
+  constructor(
+    private readonly activeRoute: ActivatedRoute,
+    private readonly menuRouteService: MenuRouteService,
+    private readonly presentation: SlidesDeckComponent
+  ) {
+    if (this.presentation != null) {
+      const nextLink = this.menuRouteService.getNextLink(this.activeRoute);
+      this.presentation.setNext(nextLink);
+    }
+  }
 
   ngOnInit() {}
 }

apps/codelab/src/app/components/slides/title-slide/title-slide.component.spec.ts

@@ -1,15 +1,66 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 import { By } from '@angular/platform-browser';
 
 import { TitleSlideComponent } from './title-slide.component';
 import { CodelabRippleAnimationComponent } from './ripple-animation/codelab-ripple-animation.component';
+import { SlidesDeckComponent } from '@codelab/slides/src/lib/deck/deck.component';
+import { MenuRouteService } from '../../../codelabs/angular/menu-route.service';
+import { MenuRoutes } from '../../../common';
+import { ActivatedRoute } from '@angular/router';
 
 describe('TitleSlideComponent', () => {
   let component: TitleSlideComponent;
   let fixture: ComponentFixture<TitleSlideComponent>;
 
+  const menuRouteService = {
+    getPreviousLink: function() {
+      return 'previouslesson';
+    }
+  };
+
+  const slidesDeckComponentStub = {
+    previousLink: '',
+    nextLink: '',
+    setPrevious: jasmine.createSpy('setPrevious')
+  };
+
+  const menuRoutes: MenuRoutes = [
+    {
+      path: 'previouslesson',
+      prod: true
+    },
+    {
+      path: 'currentlesson',
+      prod: true
+    },
+    {
+      path: 'nextlesson',
+      prod: true
+    }
+  ];
+
+  const activatedRouteStub = {
+    snapshot: {
+      pathFromRoot: [
+        {
+          routeConfig: menuRoutes[1]
+        }
+      ]
+    }
+  };
+
   beforeEach(async(() => {
     TestBed.configureTestingModule({
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: MenuRouteService, useValue: menuRouteService },
+        {
+          provide: SlidesDeckComponent,
+          useFactory: () => slidesDeckComponentStub
+        }
+      ],
+      imports: [RouterTestingModule],
       declarations: [CodelabRippleAnimationComponent, TitleSlideComponent]
     }).compileComponents();
   }));
@@ -24,6 +75,10 @@ describe('TitleSlideComponent', () => {
     expect(component).toBeTruthy();
   });
 
+  it('should call setPrevious', () => {
+    expect(slidesDeckComponentStub.setPrevious).toHaveBeenCalled();
+  });
+
   it('should render a title', () => {
     component.title = 'awesome title';
     fixture.detectChanges();

apps/codelab/src/app/components/slides/title-slide/title-slide.component.ts

@@ -1,4 +1,7 @@
 import { Component, Input } from '@angular/core';
+import { SlidesDeckComponent } from '@codelab/slides/src/lib/deck/deck.component';
+import { MenuRouteService } from '../../../codelabs/angular/menu-route.service';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'codelab-title-slide',
@@ -9,4 +12,17 @@ export class TitleSlideComponent {
   @Input() title: string;
   @Input() description: string;
   @Input() prereqs: string;
+
+  constructor(
+    private readonly activeRoute: ActivatedRoute,
+    private readonly menuRouteService: MenuRouteService,
+    private readonly presentation: SlidesDeckComponent
+  ) {
+    if (this.presentation != null) {
+      const previousLink = this.menuRouteService.getPreviousLink(
+        this.activeRoute
+      );
+      this.presentation.setPrevious(previousLink);
+    }
+  }
 }

libs/slides/src/lib/arrows/slides-arrows.component.ts

@@ -1,4 +1,4 @@
-import { Component, HostBinding } from '@angular/core';
+import { Component, HostBinding, Input } from '@angular/core';
 import { SlidesDeckComponent } from '../deck/deck.component';
 
 /**

libs/slides/src/lib/deck/deck.component.ts

@@ -11,7 +11,7 @@ import {
   TemplateRef
 } from '@angular/core';
 
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
   selector: 'slide-deck',
@@ -27,13 +27,16 @@ export class SlidesDeckComponent {
   @Output() slideAdded = new EventEmitter<{ index: number; id: string }>();
   @HostBinding('class.has-milestone') hasMilestone = false;
   private milestone = '';
+  private previousLink: string;
+  private nextLink: string;
 
   constructor(
     private readonly cdr: ChangeDetectorRef,
-    @Optional() private readonly route: ActivatedRoute
+    private readonly router: Router,
+    @Optional() private readonly activeRoute: ActivatedRoute
   ) {
-    if (route) {
-      this.milestone = route.snapshot.queryParams.milestone;
+    if (activeRoute) {
+      this.milestone = activeRoute.snapshot.queryParams.milestone;
       this.hasMilestone = !!this.milestone;
     }
   }
@@ -51,18 +54,36 @@ export class SlidesDeckComponent {
   }
 
   nextSlide() {
-    this.goToSlide(this.activeSlideIndex + 1);
+    if (this.activeSlideIndex + 1 < this.slides.length) {
+      this.goToSlide(this.activeSlideIndex + 1);
+    } else if (this.nextLink) {
+      this.router.navigate([this.nextLink], { relativeTo: this.activeRoute });
+    }
   }
 
   previousSlide() {
-    this.goToSlide(this.activeSlideIndex - 1);
+    if (this.activeSlideIndex > 0) {
+      this.goToSlide(this.activeSlideIndex - 1);
+    } else if (this.previousLink) {
+      this.router.navigate([this.previousLink], {
+        relativeTo: this.activeRoute
+      });
+    }
   }
 
   canGoNext(): boolean {
-    return this.activeSlideIndex + 1 < this.slides.length;
+    return this.activeSlideIndex + 1 < this.slides.length || !!this.nextLink;
   }
 
   canGoPrevious(): boolean {
-    return this.activeSlideIndex > 0;
+    return this.activeSlideIndex > 0 || !!this.previousLink;
+  }
+
+  public setPrevious(previousLink) {
+    this.previousLink = previousLink;
+  }
+
+  public setNext(nextLink) {
+    this.nextLink = nextLink;
   }
 }