enabled arrow icons to jump to previous and next lessons

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,52 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { CodelabClosingSlideComponent } from './codelab-closing-slide.component';
+import { Router, ActivatedRoute } from '@angular/router';
+import { SlidesDeckComponent } from '@codelab/slides/src/lib/deck/deck.component';
+import { MENU_ROUTES, MenuRoutes } from '../../../common';
 
 describe('CodelabClosingSlideComponent', () => {
   let component: CodelabClosingSlideComponent;
   let fixture: ComponentFixture<CodelabClosingSlideComponent>;
+  const routerStub = {
+    url: '/ngtest/currentlesson'
+  };
+
+  const slidesDeckComponentStub = {
+    previousLink: '',
+    nextLink: '',
+    setNext: jasmine.createSpy('setNext')
+  };
+
+  const menuRoutes: MenuRoutes = [
+    {
+      path: 'currentlesson',
+      prod: true
+
+    },
+    {
+      path: 'nextlesson',
+      prod: true
+    }
+  ];
+
+  const activatedRouteStub = {
+    snapshot: {
+      pathFromRoot: [
+        {
+          routeConfig: menuRoutes[0]
+        }
+      ]
+    }
+  };
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useValue: routerStub },
+        { provide: SlidesDeckComponent, useValue: slidesDeckComponentStub },
+        { provide: MENU_ROUTES, useValue: menuRoutes }
+      ],
       declarations: [CodelabClosingSlideComponent]
     }).compileComponents();
   }));
@@ -21,4 +60,8 @@ describe('CodelabClosingSlideComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should call setNextLink', () => {
+    expect(slidesDeckComponentStub.setNext).toHaveBeenCalled();
+  });
 });

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 { Component, Input, OnInit, Inject, Optional } from '@angular/core';
+import { SlidesDeckComponent } from '@codelab/slides/src/lib/deck/deck.component';
+import { MENU_ROUTES, MenuRoute } from '../../../common';
+import { Router, ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'codelab-closing-slide',
@@ -10,7 +13,28 @@ export class CodelabClosingSlideComponent implements OnInit {
   @Input() body: String;
   @Input() footer: String;
 
-  constructor() {}
+  constructor(
+    private readonly activeRoute: ActivatedRoute,
+    private readonly router: Router,
+    private readonly presentation: SlidesDeckComponent,
+    @Inject(MENU_ROUTES) private readonly menuRoutes
+  ) {
+    if (this.menuRoutes != null) {
+      this.setupNext();
+    }
+  }
+
+  private setupNext() {
+    const config = this.activeRoute.snapshot.pathFromRoot
+      .map(a => a.routeConfig)
+      .find(r => r && (r as MenuRoute).prod);
+    const index = this.menuRoutes.findIndex(c => c.path === config.path);
+    let nextLink = '';
+    if (index < this.menuRoutes.length - 1) {
+      nextLink = '../../' + this.menuRoutes[index + 1].path;
+    }
+    this.presentation.setNext(nextLink);
+  }
 
   ngOnInit() {}
 }

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

@@ -1,15 +1,56 @@
 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 { MenuRoutes, MENU_ROUTES } from '../../../common';
+import { Router, ActivatedRoute } from '@angular/router';
+import { SlidesDeckComponent } from '@codelab/slides/src/lib/deck/deck.component';
 
 describe('TitleSlideComponent', () => {
   let component: TitleSlideComponent;
   let fixture: ComponentFixture<TitleSlideComponent>;
+  const routerStub = {
+    url: '/ngtest/currentlesson'
+  };
+
+  const slidesDeckComponentStub = {
+    previousLink: '',
+    nextLink: '',
+    setPrevious: jasmine.createSpy('setPrevious')
+  };
+
+  const menuRoutes: MenuRoutes = [
+    {
+      path: 'previouslesson',
+      prod: true
+    },
+    {
+      path: 'currentlesson',
+      prod: true
+    }
+  ];
+
+  const activatedRouteStub = {
+    snapshot: {
+      pathFromRoot: [
+        {
+          routeConfig: menuRoutes[1]
+        }
+      ]
+    }
+  };
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRouteStub},
+        { provide: Router, useValue: routerStub },
+        { provide: SlidesDeckComponent, useFactory: () => slidesDeckComponentStub },
+        { provide: MENU_ROUTES, useValue: menuRoutes }
+      ],
+      imports: [RouterTestingModule],
       declarations: [CodelabRippleAnimationComponent, TitleSlideComponent]
     }).compileComponents();
   }));
@@ -24,6 +65,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 { Component, Input, Optional, Inject } from '@angular/core';
+import { SlidesDeckComponent } from '@codelab/slides/src/lib/deck/deck.component';
+import { MENU_ROUTES, MenuRoutes, MenuRoute } from '../../../common';
+import { Router, ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'codelab-title-slide',
@@ -9,4 +12,27 @@ export class TitleSlideComponent {
   @Input() title: string;
   @Input() description: string;
   @Input() prereqs: string;
+
+  constructor(
+    private readonly activeRoute: ActivatedRoute,
+    private readonly router: Router,
+    private readonly presentation: SlidesDeckComponent,
+    @Inject(MENU_ROUTES) private readonly menuRoutes
+  ) {
+    if (this.presentation != null) {
+      this.setupPrevious();
+    }
+  }
+
+  private setupPrevious() {
+    const config = this.activeRoute.snapshot.pathFromRoot
+      .map(a => a.routeConfig)
+      .find((r) => r && (r as MenuRoute).prod);
+    const index = this.menuRoutes.findIndex(c => c.path === config.path);
+    let previousLink = '';
+    if (index > 0) {
+      previousLink = '../../' + this.menuRoutes[index - 1].path;
+    }
+    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';
 
 /**
@@ -20,11 +20,11 @@ export class SlidesArrowsComponent {
   constructor(private presentation: SlidesDeckComponent) {}
 
   goToPreviousSlide() {
-    this.presentation.previousSlide();
+      this.presentation.previousSlide();
   }
 
   goToNextSlide() {
-    this.presentation.nextSlide();
+      this.presentation.nextSlide();
   }
 
   canGoNext(): boolean {

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,9 +27,12 @@ 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,
+    private readonly router: Router,
     @Optional() private readonly route: ActivatedRoute
   ) {
     if (route) {
@@ -51,18 +54,34 @@ 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.route });
+    }
   }
 
   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.route});
+    }
   }
 
   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;
   }
 }