refactor(operators): Separate operators in multiple pages

Author: feloy

src/app/operators/components/operator/operator.component.ts

@@ -2,28 +2,46 @@ import {
   Component,
   Input,
   OnInit,
-  ChangeDetectionStrategy
-} from "@angular/core";
-import { OperatorDoc } from "../../../../operator-docs/operator.model";
+  ChangeDetectionStrategy,
+  Inject,
+  InjectionToken
+} from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { OperatorDoc } from '../../../../operator-docs/operator.model';
+import 'rxjs/add/operator/pluck';
+
+export const OPERATOR_TOKEN = new InjectionToken<string>('operators');
 
 @Component({
-  selector: "app-operator",
-  templateUrl: "./operator.component.html",
-  styleUrls: ["./operator.component.scss"],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  selector: 'app-operator',
+  templateUrl: './operator.component.html',
+  styleUrls: ['./operator.component.scss']
 })
-export class OperatorComponent {
-  @Input() operator: OperatorDoc;
-
-  private readonly baseSourceUrl = "https://github.com/ReactiveX/rxjs/blob/master/src/operators/";
-  private readonly baseSpecUrl = "http://reactivex.io/rxjs/test-file/spec-js/operators";
+export class OperatorComponent implements OnInit {
+  public operator: OperatorDoc;
+
+  private readonly baseSourceUrl = 'https://github.com/ReactiveX/rxjs/blob/master/src/operators/';
+  private readonly baseSpecUrl = 'http://reactivex.io/rxjs/test-file/spec-js/operators';
+
+  constructor(
+    private _activatedRoute: ActivatedRoute,
+    @Inject(OPERATOR_TOKEN) public operators: OperatorDoc[]
+  ) {}
+
+  ngOnInit() {
+    this._activatedRoute.params.pluck('operator').subscribe((name: string) => {
+      this.operator = this.operators.filter(
+        (operator: OperatorDoc) => operator.name === name
+      )[0];
+    });
+  }
 
   get operatorName() {
     return this.operator.name;
   }
 
   get signature() {
-    return this.operator.signature || "Signature Placeholder";
+    return this.operator.signature || 'Signature Placeholder';
   }
 
   get marbleUrl() {

src/app/operators/operators-routing.module.ts

@@ -2,8 +2,15 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
 import { OperatorsComponent } from './operators.component';
+import { OperatorComponent } from './components/operator/operator.component';
 
-const routes: Routes = [{ path: '', component: OperatorsComponent }];
+const routes: Routes = [
+  {
+    path: '',
+    component: OperatorsComponent,
+    children: [{ path: ':operator', component: OperatorComponent }]
+  }
+];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],

src/app/operators/operators.component.html

@@ -11,15 +11,12 @@
       <h3 mat-subheader class="category-subheader">{{ category }}</h3>
       <a mat-list-item
         *ngFor="let operator of groupedOperators[category]"
-        [href]="'/operators#' + operator.name">
+        [routerLink]="['/operators', operator.name]">
         {{ operator.name }}
       </a>
     </mat-nav-list>
   </mat-sidenav>
-  <app-operator
-    *ngFor="let operator of operators"
-    [operator]="operator">
-  </app-operator>
+  <router-outlet></router-outlet>
 </mat-sidenav-container>
 <button
   *ngIf="smallScreen"

src/app/operators/operators.component.ts

@@ -1,5 +1,18 @@
-import { Component, Inject, InjectionToken, OnInit, AfterViewInit, ChangeDetectionStrategy } from '@angular/core';
-import { trigger, state, style, animate, transition } from '@angular/animations';
+import {
+  Component,
+  Inject,
+  InjectionToken,
+  OnInit,
+  AfterViewInit,
+  ChangeDetectionStrategy
+} from '@angular/core';
+import {
+  trigger,
+  state,
+  style,
+  animate,
+  transition
+} from '@angular/animations';
 import { Router, ActivatedRoute } from '@angular/router';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { Subscription } from 'rxjs/Subscription';
@@ -21,7 +34,7 @@ interface OperatorDocMap {
   styleUrls: ['./operators.component.scss'],
   animations: [
     trigger('growInOut', [
-      state('in', style({opacity: 1})),
+      state('in', style({ opacity: 1 })),
       transition('void => *', [
         style({
           opacity: 0,
@@ -30,10 +43,13 @@ interface OperatorDocMap {
         animate(`150ms ease-in`)
       ]),
       transition('* => void', [
-        animate(`150ms ease-out`, style({
-          opacity: 0,
-          transform: 'scale3d(.3, .3, .3)'
-        }))
+        animate(
+          `150ms ease-out`,
+          style({
+            opacity: 0,
+            transform: 'scale3d(.3, .3, .3)'
+          })
+        )
       ])
     ])
   ]
@@ -49,14 +65,14 @@ export class OperatorsComponent implements OnInit, AfterViewInit {
     private _router: Router,
     private _activatedRoute: ActivatedRoute,
     @Inject(OPERATORS_TOKEN) public operators: OperatorDoc[]
-  ) { }
+  ) {}
 
   ngOnInit() {
     this.groupedOperators = groupOperatorsByType(this.operators);
     this.categories = Object.keys(this.groupedOperators);
-    this._subscription = this._activatedRoute
-      .fragment
-      .subscribe(name => this.scrollToOperator(name));
+    this._subscription = this._activatedRoute.fragment.subscribe(name =>
+      this.scrollToOperator(name)
+    );
   }
 
   ngAfterViewInit() {
@@ -69,10 +85,6 @@ export class OperatorsComponent implements OnInit, AfterViewInit {
     }
   }
 
-  updateUrl(name: string) {
-    this._router.navigate([ '/operators' ], { fragment: name });
-  }
-
   scrollToOperator(name: string) {
     const element = document.getElementById(name);
 
@@ -90,20 +102,21 @@ export class OperatorsComponent implements OnInit, AfterViewInit {
   }
 
   get operatorMenuGap() {
-    return this.extraSmallScreen ? OPERATOR_MENU_GAP_SMALL : OPERATOR_MENU_GAP_LARGE;
+    return this.extraSmallScreen
+      ? OPERATOR_MENU_GAP_SMALL
+      : OPERATOR_MENU_GAP_LARGE;
   }
 
   get sidenavMode() {
     return this.smallScreen ? 'over' : 'side';
   }
-
 }
 
 export function groupOperatorsByType(operators: OperatorDoc[]): OperatorDocMap {
   return operators.reduce((acc: OperatorDocMap, curr: OperatorDoc) => {
     if (acc[curr.operatorType]) {
-      return { ...acc, [ curr.operatorType ] : [ ...acc[ curr.operatorType ], curr ] };
+      return { ...acc, [curr.operatorType]: [...acc[curr.operatorType], curr] };
     }
-    return { ...acc, [ curr.operatorType ]: [ curr ] };
+    return { ...acc, [curr.operatorType]: [curr] };
   }, {});
 }

src/app/operators/operators.module.ts

@@ -9,7 +9,10 @@ import { ClipboardModule } from 'ngx-clipboard';
 import { ALL_OPERATORS, OperatorDoc } from '../../operator-docs';
 import { OperatorsRoutingModule } from './operators-routing.module';
 import { OperatorsComponent, OPERATORS_TOKEN } from './operators.component';
-import { OperatorComponent } from './components/operator/operator.component';
+import {
+  OperatorComponent,
+  OPERATOR_TOKEN
+} from './components/operator/operator.component';
 import { OperatorHeaderComponent } from './components/operator-header/operator-header.component';
 import { OperatorParametersComponent } from './components/operator-parameters/operator-parameters.component';
 import { OperatorExamplesComponent } from './components/operator-examples/operator-examples.component';
@@ -43,7 +46,10 @@ import { SharedModule } from '../shared.module';
     ClipboardModule,
     LayoutModule
   ],
-  providers: [{ provide: OPERATORS_TOKEN, useValue: ALL_OPERATORS }],
+  providers: [
+    { provide: OPERATORS_TOKEN, useValue: ALL_OPERATORS },
+    { provide: OPERATOR_TOKEN, useValue: ALL_OPERATORS }
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class OperatorsModule {}