Add navigation service

Author: NothingEverHappens

apps/codelab/src/app/admin/content/presentation-editor/content.component.ts

@@ -1,9 +1,10 @@
 import { Component } from '@angular/core';
-import { ContentService } from './content.service';
+import { ContentService } from './services/content.service';
 import { ActivatedRoute } from '@angular/router';
 import { map } from 'rxjs/operators';
 import { combineLatest } from 'rxjs';
 import { ContentPresentation } from './types';
+import { NavigationService } from './services/navigation.service';
 
 declare const require;
 
@@ -14,31 +15,36 @@ declare const require;
 })
 export class ContentComponent {
   readonly presentation$ = combineLatest([
-    this.activeRoute.params,
+    this.navigationService.selectedPresentationId$,
     this.contentService.state$
   ]).pipe(
-    map(([params, presentations]) => {
+    map(([presentationId, presentations]) => {
+      debugger;
       return presentations.find(
-        (p: ContentPresentation) => p.id === params.presentation
+        (p: ContentPresentation) => p.id === presentationId
       );
     })
   );
 
   selectedSlide$ = this.contentService.selectedSlide$;
 
   currentSlide$ = combineLatest([
-    this.activeRoute.params,
+    this.navigationService.selectedSlide$,
     this.presentation$
   ]).pipe(
-    map(([params, presentation]) => {
-      return presentation.slides[params.slide || 0];
+    map(([slide, presentation]) => {
+      debugger;
+      return presentation.slides[slide || 0];
     })
   );
 
   constructor(
     readonly contentService: ContentService,
+    readonly navigationService: NavigationService,
     readonly activeRoute: ActivatedRoute
-  ) {}
+  ) {
+    this.contentService.state$.subscribe(a => console.log());
+  }
 
   addSlide(presentationId: string) {
     this.contentService.addSlide(presentationId);

apps/codelab/src/app/admin/content/presentation-editor/content.module.ts

@@ -6,7 +6,7 @@ import { AngularFirestoreModule } from '@angular/fire/firestore';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { RouterModule } from '@angular/router';
 import { SidePanelModule } from './side-panel/side-panel.module';
-import { ContentService } from './content.service';
+import { ContentService } from './services/content.service';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { Observable, OperatorFunction } from 'rxjs';

apps/codelab/src/app/admin/content/presentation-editor/preview/preview.component.ts

@@ -1,22 +1,27 @@
 import { Component, HostListener } from '@angular/core';
-import { ContentService } from '../content.service';
+import { NavigationService } from '../services/navigation.service';
+import { ContentService } from '../services/content.service';
 
 @Component({
   selector: 'slides-preview',
   templateUrl: './preview.component.html',
   styleUrls: ['./preview.component.css']
 })
 export class PreviewComponent {
-  constructor(readonly contentService: ContentService) {}
+  constructor(
+    readonly navigationService: NavigationService,
+    readonly contentService: ContentService
+  ) {}
+
   presentationId = 'TBD';
 
   @HostListener('window:keydown.arrowleft')
   previousSlide() {
-    this.contentService.previousSlide(this.presentationId);
+    this.navigationService.previousSlide(this.presentationId);
   }
 
   @HostListener('window:keydown.arrowright')
   nextSlide() {
-    this.contentService.nextSlide(this.presentationId);
+    this.navigationService.nextSlide(this.presentationId);
   }
 }

apps/codelab/src/app/admin/content/presentation-editor/content.service.ts renamed to apps/codelab/src/app/admin/content/presentation-editor/services/content.service.ts

@@ -2,12 +2,19 @@ import { Injectable, OnDestroy } from '@angular/core';
 import { AngularFirestore } from '@angular/fire/firestore';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Location } from '@angular/common';
-import { BehaviorSubject, combineLatest, merge, Subject } from 'rxjs';
-import { auditTime, map, scan, share, takeUntil } from 'rxjs/operators';
-import { ContentBlock, ContentPresentation } from './types';
+import { BehaviorSubject, merge, Subject } from 'rxjs';
+import {
+  auditTime,
+  map,
+  scan,
+  share,
+  shareReplay,
+  takeUntil
+} from 'rxjs/operators';
 import { nanoid } from 'nanoid';
 import * as firebase from 'firebase';
-import { reducer } from './reducer';
+import { ContentBlock, ContentPresentation } from '../types';
+import { reducer } from '../reducer';
 
 const DOC_KEY = 'presentations';
 
@@ -31,8 +38,8 @@ export class ContentService implements OnDestroy {
   private readonly localActions$ = new Subject();
 
   readonly appliedActions = new Set();
-  const;
-  allActions2$ = merge(
+
+  readonly allActions$ = merge(
     this.presentations$.pipe(
       map((presentations: ContentPresentation[] = []) => ({
         type: 'init',
@@ -42,11 +49,11 @@ export class ContentService implements OnDestroy {
     this.localActions$
   );
 
-  public readonly state$ = this.allActions2$.pipe(
+  public readonly state$ = this.allActions$.pipe(
     scan((state: ContentPresentation[], action: any) => {
       return reducer(state, action);
     }, {}),
-    share()
+    shareReplay(1)
   );
 
   constructor(
@@ -75,16 +82,6 @@ export class ContentService implements OnDestroy {
     this.onDestroy.complete();
   }
 
-  // TODO: Move this out
-  goToSlide(presentationId: string, index: number) {
-    if (index >= 0) {
-      this.selectedSlideSubject.next(index);
-      this.location.replaceState(
-        'admin/content/' + presentationId + '/' + index
-      );
-    }
-  }
-
   dispatch(presentationId, action) {
     const a = {
       ...action,
@@ -96,16 +93,6 @@ export class ContentService implements OnDestroy {
     this.localActions$.next(a);
   }
 
-  // TODO: Move out
-  nextSlide(presentationId: string) {
-    this.goToSlide(presentationId, this.selectedSlide$.value + 1);
-  }
-
-  // TODO: Move out
-  previousSlide(presentationId: string) {
-    this.goToSlide(presentationId, this.selectedSlide$.value - 1);
-  }
-
   addSlide(presentationId: string) {
     const index = this.selectedSlide$.value;
     const action = {

apps/codelab/src/app/admin/content/presentation-editor/services/navigation.service.ts

@@ -0,0 +1,51 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Location } from '@angular/common';
+import { take } from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class NavigationService {
+  private readonly selectedSlideSubject = new BehaviorSubject(0);
+  private readonly selectedPresentationIdSubject = new BehaviorSubject<
+    string | undefined
+  >(undefined);
+  public selectedSlide$ = this.selectedSlideSubject.asObservable();
+  public selectedPresentationId$ = this.selectedPresentationIdSubject.asObservable();
+
+  constructor(
+    readonly route: ActivatedRoute,
+    readonly router: Router,
+    readonly location: Location
+  ) {
+    // TODO(kirjs): need a better way
+    const params =
+      router.routerState.snapshot.root.firstChild.firstChild.firstChild.params;
+    this.selectedPresentationIdSubject.next(params.presentation);
+    this.selectedSlideSubject.next(params.slide);
+  }
+
+  goToPresentation(presentationId: string) {
+    this.selectedPresentationIdSubject.next(presentationId);
+    this.router.navigate(['admin', 'content', presentationId, '0']);
+  }
+
+  goToSlide(presentationId: string, index: number) {
+    if (index >= 0) {
+      this.selectedSlideSubject.next(index);
+      this.location.replaceState(
+        'admin/content/' + presentationId + '/' + index
+      );
+    }
+  }
+
+  nextSlide(presentationId: string) {
+    this.goToSlide(presentationId, this.selectedSlideSubject.value + 1);
+  }
+
+  previousSlide(presentationId: string) {
+    this.goToSlide(presentationId, this.selectedSlideSubject.value - 1);
+  }
+}

apps/codelab/src/app/admin/content/presentation-editor/side-panel/side-panel.component.html

@@ -7,7 +7,7 @@
       *ngFor="let slide of slides; let i = index"
       [class.selected]="i === selectedSlide"
       inert="true"
-      (click)="this.contentService.goToSlide(presentationId, i)"
+      (click)="this.navigationService.goToSlide(presentationId, i)"
     >
       <div
         cdkDrag

apps/codelab/src/app/admin/content/presentation-editor/side-panel/side-panel.component.ts

@@ -8,7 +8,8 @@ import {
 import { Location } from '@angular/common';
 
 import { ActivatedRoute, Router } from '@angular/router';
-import { ContentService } from '../content.service';
+import { ContentService } from '../services/content.service';
+import { NavigationService } from '../services/navigation.service';
 
 @Component({
   selector: 'slides-side-panel',
@@ -25,7 +26,8 @@ export class SidePanelComponent {
     readonly location: Location,
     readonly route: ActivatedRoute,
     readonly router: Router,
-    readonly contentService: ContentService
+    readonly contentService: ContentService,
+    readonly navigationService: NavigationService
   ) {}
 
   addSlide() {
@@ -34,11 +36,11 @@ export class SidePanelComponent {
 
   @HostListener('keydown.arrowdown')
   nextSlide() {
-    this.contentService.nextSlide(this.presentationId);
+    this.navigationService.nextSlide(this.presentationId);
   }
 
   @HostListener('keydown.arrowup')
   prevSlide() {
-    this.contentService.previousSlide(this.presentationId);
+    this.navigationService.previousSlide(this.presentationId);
   }
 }

apps/codelab/src/app/admin/content/presentation-editor/slide-editor/action-bar/action-bar.component.ts

@@ -1,6 +1,6 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { ContentBlock, ContentSlide } from '../../types';
-import { ContentService } from '../../content.service';
+import { ContentService } from '../../services/content.service';
 
 @Component({
   selector: 'slides-action-bar',

apps/codelab/src/app/admin/content/presentation-editor/slide-editor/slide-editor.component.ts

@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { ContentService } from '../content.service';
+import { ContentService } from '../services/content.service';
 import { assertIsHtmlBlock, ContentBlock, ContentSlide } from '../types';
 
 @Component({

apps/codelab/src/app/admin/content/presentation-editor/slide-editor/slide-meta-editor/slide-meta-editor.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { ContentService } from '../../content.service';
+import { ContentService } from '../../services/content.service';
 
 @Component({
   selector: 'slides-slide-meta-editor',