Misc Updates

* Add autoclean via subscription extension.
* Remove log line.
* Fix bugs with sermon admin page.
* Properly return a 404 the universal way.
* Update version to 1.3.9
* Remove unused factory method.

.vscode/launch.json

@@ -0,0 +1,14 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "attach",
+      "name": "Attach",
+      "port": 9229
+    }
+  ]
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bolingbrook-church",
-  "version": "1.3.8",
+  "version": "1.3.9",
   "license": "MIT",
   "angular-cli": {},
   "scripts": {
@@ -29,6 +29,7 @@
     "@angular/platform-browser-dynamic": "^5.0.5",
     "@angular/platform-server": "^5.0.5",
     "@angular/router": "^5.0.5",
+    "@nguniversal/express-engine": "^5.0.0-beta.5",
     "@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5",
     "@types/moment": "^2.13.0",
     "@types/moment-timezone": "^0.5.2",

server.ts

@@ -5,6 +5,7 @@ import 'reflect-metadata';
 import { renderModuleFactory }  from '@angular/platform-server';
 import { enableProdMode }       from '@angular/core';
 import * as express             from 'express';
+import { RESPONSE }             from '@nguniversal/express-engine/tokens'
 import { join }                 from 'path';
 import { readFileSync }         from 'fs';
 import { Sitemap }              from './server/sitemap';
@@ -35,7 +36,8 @@ app.engine('html', (_, options, callback) => {
     url: options.req.url,
     // DI so that we can get lazy-loading to work differently (since we need it to just instantly render it)
     extraProviders: [
-      provideModuleMap(LAZY_MODULE_MAP)
+      provideModuleMap(LAZY_MODULE_MAP),
+      { provide: RESPONSE, useFactory: () => options.res, deps: [] }
     ]
   }).then(html => {
     callback(null, html);
@@ -57,7 +59,7 @@ app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));
 
 // All regular routes use the Universal engine
 app.get('*', (req, res) => {
-  res.render(join(DIST_FOLDER, 'browser', 'index.html'), { req });
+  res.render(join(DIST_FOLDER, 'browser', 'index.html'), { req: req, res: res });
 });
 
 // Start up the Node server

src/app/app.module.ts

@@ -6,11 +6,17 @@ import { HttpModule }                         from '@angular/http';
 import { MATERIAL_MODULES }                   from './components/atoms/material';
 import { AppComponent }                       from './app.component';
 import * as Components                        from './components';
-import { SERVICES, GlobalErrorHandler }       from './services';
-import { Aperture }                           from './services/aperture';
 import { BrowserAperture }                    from './services/aperture.browser';
-import { FirebaseService }                    from './services/firebase.service';
 import { FirebaseBrowserService }             from './services/firebase.browser';
+import { BrowserResponseService }             from './services/response.browser';
+
+import {
+  SERVICES,
+  Aperture,
+  FirebaseService,
+  GlobalErrorHandler,
+  ResponseService
+} from './services';
 
 @NgModule({
   declarations: [
@@ -33,7 +39,8 @@ import { FirebaseBrowserService }             from './services/firebase.browser'
     ...SERVICES,
     { provide: Aperture,        useClass: BrowserAperture},
     { provide: FirebaseService, useClass: FirebaseBrowserService },
-    { provide: ErrorHandler,    useClass: GlobalErrorHandler }
+    { provide: ErrorHandler,    useClass: GlobalErrorHandler },
+    { provide: ResponseService, useClass: BrowserResponseService }
   ],
   bootstrap: [ AppComponent ]
 })

src/app/app.server.module.ts

@@ -1,12 +1,14 @@
-import { NgModule }               from '@angular/core';
-import { ServerModule }           from '@angular/platform-server';
-import { ModuleMapLoaderModule }  from '@nguniversal/module-map-ngfactory-loader';
-import { AppModule }              from './app.module';
-import { AppComponent }           from './app.component';
-import { Aperture }               from './services/aperture';
-import { ServerAperture }         from './services/aperture.server';
-import { FirebaseService }        from './services/firebase.service';
-import { FirebaseServerService }  from './services/firebase.server';
+import { NgModule }                                   from '@angular/core';
+import { ServerModule }                               from '@angular/platform-server';
+import { ModuleMapLoaderModule }                      from '@nguniversal/module-map-ngfactory-loader';
+import { RESPONSE }                                    from '@nguniversal/express-engine/tokens'
+import * as express                                   from 'express';
+import { AppModule }                                  from './app.module';
+import { AppComponent }                               from './app.component';
+import { Aperture, FirebaseService, ResponseService } from './services';
+import { ServerAperture }                             from './services/aperture.server';
+import { FirebaseServerService }                      from './services/firebase.server';
+import { ServerResponseService }                      from './services/response.server';
 
 @NgModule({
   imports: [
@@ -20,6 +22,7 @@ import { FirebaseServerService }  from './services/firebase.server';
   providers: [
     { provide: Aperture,        useClass: ServerAperture},
     { provide: FirebaseService, useClass: FirebaseServerService },
+    { provide: ResponseService, useClass: ServerResponseService }
   ]
 })
 export class AppServerModule { }

src/app/components/atoms/infinite-scroll.directive.ts

@@ -41,15 +41,14 @@ export class InfiniteScrollDirective extends Autoclean implements AfterViewInit
   }
 
   ngAfterViewInit() {
-    this.autoclean(
-      this.aperture
-        .observableWindowEvent('scroll')
-        .map((e: Event) => new Snapshot((e.target as any).scrollingElement as Element))
-        .pairwise()
-        .filter((pair: Snapshot[]) => pair[0].scrollTop < pair[1].scrollTop)
-        .map((pair: Snapshot[]) => pair[1])
-        .filter((s: Snapshot) => 100 * (s.scrollTop + s.clientHeight) / s.scrollHeight > this.scrollPercent)
-        .subscribe(e => { this.onScroll.emit(''); })
-      );
+    this.aperture
+      .observableWindowEvent('scroll')
+      .map((e: Event) => new Snapshot((e.target as any).scrollingElement as Element))
+      .pairwise()
+      .filter((pair: Snapshot[]) => pair[0].scrollTop < pair[1].scrollTop)
+      .map((pair: Snapshot[]) => pair[1])
+      .filter((s: Snapshot) => 100 * (s.scrollTop + s.clientHeight) / s.scrollHeight > this.scrollPercent)
+      .subscribe(e => { this.onScroll.emit(''); })
+      .autoclean(this);
   }
 }

src/app/components/organisms/sermon-list.ts

@@ -29,7 +29,6 @@ export class SermonListComponent implements OnInit {
   }
 
   addSermons(): void {
-    console.log('Add more sermons!');
     this.pager.next();
   }
 

src/app/components/pages/admin/secured.ts

@@ -2,13 +2,16 @@ import { OnInit }           from '@angular/core';
 import { Router }           from '@angular/router';
 import { FirebaseService }  from '../../../services/firebase.service';
 import { Observable }       from '../../../services/observable';
+import { Autoclean }        from '../../templates/autoclean';
 
-export abstract class Secured implements OnInit {
+export abstract class Secured extends Autoclean implements OnInit {
 
   constructor(
     protected router: Router,
     protected firebase: FirebaseService
-  ) {}
+  ) {
+    super();
+  }
 
   ngOnInit(): void {
     this.secure();

src/app/components/pages/admin/sermons.html

@@ -19,7 +19,7 @@ <h4>Add Another Sermon</h4>
         <mat-form-field>
             <input matInput #newSermonDate type="date" name="new_sermon_date" placeholder="Date of Service">
           </mat-form-field>
-        <button class="add" mat-mini-fab (click)="addSermon(newSermonDate.value)" [disabled]="!!newSermonDate">
+        <button class="add" mat-mini-fab (click)="addSermon(newSermonDate.value)" [disabled]="!newSermonDate.value">
           <mat-icon>add</mat-icon>
         </button>
       </div>

src/app/components/pages/admin/sermons.ts

@@ -21,6 +21,7 @@ export class SermonsComponent extends Secured implements OnInit {
   sermons: Sermon[];
   images: SeriesImageForm[];
   pager: PaginatedPager<Sermon>;
+  newSermonDate: string;
 
   constructor(
     router: Router,
@@ -37,16 +38,22 @@ export class SermonsComponent extends Secured implements OnInit {
         if (authd) {
           this.update();
         }
-      });
+      })
+      .autoclean(this);
   }
 
   update(): void {
+    if (this.pager) {
+      this.pager.close();
+    }
+
     this.pager = this.service.paginated();
     this.pager
       .observe()
       .subscribe(sermons => {
         this.sermons = sermons;
-      });
+      })
+      .autoclean(this);
 
     this.imageService.listSeries()
       .subscribe(images => {
@@ -74,7 +81,8 @@ export class SermonsComponent extends Secured implements OnInit {
 
   saveSermon(sermon: Sermon): void {
     this.service
-      .saveSermon(sermon);
+      .saveSermon(sermon)
+      .subscribe(() => this.update());
   }
 
 }

src/app/components/pages/not-found.ts

@@ -1,17 +1,14 @@
 import { Component, OnInit }  from '@angular/core';
-import { Meta }               from '@angular/platform-browser';
+import { ResponseService }    from '../../services';
 
 @Component({
   templateUrl: './not-found.html'
 })
 export class NotFoundComponent implements OnInit {
 
-  constructor(private meta: Meta) {}
+  constructor(private responseService: ResponseService) {}
 
   ngOnInit() {
-    this.meta.addTag({
-      name: 'prerender-status-code',
-      content: '404'
-    });
+    this.responseService.setStatus(404, 'Not Found');
   }
 }

src/app/components/pages/sermons/sermon.ts

@@ -52,28 +52,28 @@ export class SermonComponent extends Autoclean implements OnInit {
 
   ngOnInit() {
     /* Subscribe to Video State Change Events */
-    this.autoclean(
-      this.youtubeService
-        .videoState('sermonVideo')
-        .subscribe((state) => {
-          this.videoState = state;
-        }));
+    this.youtubeService
+      .videoState('sermonVideo')
+      .subscribe((state) => {
+        this.videoState = state;
+      })
+      .autoclean(this);
 
     /* Handle issues if youtube is having issues */
-    this.autoclean(
-      this.togglesService.getToggles()
-        .subscribe((toggles) => {
-          this.youtube_live_issues = !!toggles.youtube_live_issues;
-        }));
+    this.togglesService.getToggles()
+      .subscribe((toggles) => {
+        this.youtube_live_issues = !!toggles.youtube_live_issues;
+      })
+      .autoclean(this);
 
     /* Record Analytics when Playing */
-    this.autoclean(
-      this.interval()
-        .subscribe(() => {
-          if (this.videoState === VideoState.PLAYING) {
-            this.analytics.event(this.live ? 'Live Sermon' : 'Sermon', 'Playing', this.sermon.youtube);
-          }
-        }));
+    this.interval()
+      .subscribe(() => {
+        if (this.videoState === VideoState.PLAYING) {
+          this.analytics.event(this.live ? 'Live Sermon' : 'Sermon', 'Playing', this.sermon.youtube);
+        }
+      })
+      .autoclean(this);
 
     this.activatedRoute.params
       .flatMap((params) => {

src/app/components/templates/autoclean.ts

@@ -1,5 +1,5 @@
 import { OnDestroy }    from '@angular/core';
-import { Subscription } from 'app/services';
+import { Subscription } from 'rxjs/Subscription';
 
 export abstract class Autoclean implements OnDestroy {
 
@@ -13,3 +13,17 @@ export abstract class Autoclean implements OnDestroy {
     this.subscriptions.forEach(s => s.unsubscribe());
   }
 }
+
+function autoclean(this: Subscription, cleaner: Autoclean): Subscription {
+  cleaner.autoclean(this);
+  return this;
+}
+
+/* tslint:disable */
+declare module 'rxjs/Subscription' {
+  interface Subscription {
+    autoclean: typeof autoclean;
+  }
+}
+
+Subscription.prototype.autoclean = autoclean;

src/app/services/index.ts

@@ -7,6 +7,7 @@ import { GlobalErrorHandler }                                 from './error.hand
 import { FirebaseService, FirebaseStorage, FirebaseDatabase } from './firebase.service';
 import { Observable, Subscription }                           from './observable';
 import { Pager, PaginatedPager, LinearPager }                 from './pager';
+import { ResponseService }                                    from './response.service';
 import { SeriesImageForm, SeriesImageService }                from './series.service';
 import { SermonService, Sermon }                              from './sermon.service';
 import { FeatureToggles, TogglesService }                     from './toggles.service';
@@ -40,6 +41,7 @@ export {
   Observable,
   Pager,
   PaginatedPager,
+  ResponseService,
   SeriesImageForm,
   SeriesImageService,
   Sermon,

src/app/services/pager.ts

@@ -23,8 +23,13 @@ export abstract class Pager<T> {
     });
   }
 
+  close(): void {
+    this.observer.complete();
+    this.observer = undefined;
+  }
+
   get length(): number {
-    return this.items.length;
+    return this.items ? this.items.length : 0;
   }
 
   get pages(): number {

src/app/services/response.browser.ts

@@ -0,0 +1,11 @@
+import { Injectable }       from '@angular/core';
+import { ResponseService }  from './response.service';
+
+@Injectable()
+export class BrowserResponseService extends ResponseService {
+
+  setStatus(code: number, message?: string): void {
+    console.error(`Setting HTTP Response Code [${code}: ${message}] not supported on browser`);
+  }
+
+}

src/app/services/response.server.ts

@@ -0,0 +1,17 @@
+import { Injectable, Inject }   from '@angular/core';
+import { RESPONSE }             from '@nguniversal/express-engine/tokens'
+import * as express             from 'express';
+import { ResponseService }      from './response.service';
+
+@Injectable()
+export class ServerResponseService extends ResponseService {
+
+  constructor( @Inject(RESPONSE) private response: express.Response ) {
+    super();
+  }
+
+  setStatus(code: number, message?: string): void {
+    this.response.sendStatus(code, message);
+  }
+
+}