Improved Updater process (#7)

Moved updater to angular app, integrating it better

client/package.json

@@ -12,7 +12,7 @@
   },
   "private": true,
   "dependencies": {
-    "@angular-mdl/core": "^4.0.3",
+    "@angular-mdl/core": "^4.0.5",
     "@angular/animations": "^4.1.3",
     "@angular/common": "^4.1.3",
     "@angular/compiler": "^4.1.3",
@@ -22,21 +22,22 @@
     "@angular/platform-browser": "^4.1.3",
     "@angular/platform-browser-dynamic": "^4.1.3",
     "@angular/router": "^4.1.3",
-    "@swimlane/ngx-datatable": "^9.1.0",
+    "@swimlane/ngx-datatable": "^9.2.0",
     "core-js": "^2.4.1",
     "nedb": "^1.8.0",
+    "ngx-electron": "0.0.11",
     "rxjs": "^5.4.0",
-    "typescript": "^2.3.2",
-    "zone.js": "^0.8.10"
+    "typescript": "^2.3.3",
+    "zone.js": "^0.8.11"
   },
   "devDependencies": {
-    "@angular/cli": "^1.0.3",
+    "@angular/cli": "^1.0.6",
     "@angular/compiler-cli": "^4.1.3",
     "@types/nedb": "^1.8.3",
-    "@types/node": "~7.0.18",
+    "@types/node": "~7.0.22",
     "codelyzer": "~3.0.1",
     "concurrently": "^3.4.0",
     "ts-node": "~3.0.4",
-    "tslint": "~5.2.0"
+    "tslint": "~5.3.2"
   }
 }

client/src/app/app.component.ts

@@ -1,10 +1,10 @@
 import { Component } from '@angular/core';
-
+import { UpdaterService } from './updater.service';
 @Component({
   selector: 'pokemon-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-
+  constructor(private updaterService: UpdaterService) { }
 }

client/src/app/app.module.ts

@@ -13,26 +13,38 @@ import { CardService } from './card.service';
 import { CollectionService } from './collection.service';
 import { MenuItemComponent } from './menu-item/menu-item.component';
 
+import { UpdaterService } from './updater.service';
+
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 
+import { NgxElectronModule } from 'ngx-electron';
+
+import { UpdateAvailableDialogComponent } from './dialog/update-available-dialog.component';
+
 @NgModule({
   declarations: [
     AppComponent,
     HomeComponent,
-    MenuItemComponent
+    MenuItemComponent,
+    UpdateAvailableDialogComponent
   ],
   imports: [
+    NgxElectronModule,
     BrowserModule,
     HttpModule,
     BrowserAnimationsModule,
     MdlModule,
     NgxDatatableModule
   ],
   providers: [
+    UpdaterService,
     SetService,
     CardService,
     CollectionService
   ],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
+  entryComponents: [
+    UpdateAvailableDialogComponent
+  ]
 })
 export class AppModule { }

client/src/app/card.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Http } from '@angular/http';
 
-import { Observable } from 'rxjs';
+import { Observable } from 'rxjs/observable';
 
 import * as Datastore from 'nedb';
 import { Card } from './models/card.interface';
@@ -11,14 +11,14 @@ import { CardStore } from './database/card.store';
 
 @Injectable()
 export class CardService {
-	private cardStore: CardStore;
+  private cardStore: CardStore;
 
   constructor(private http: Http) {
-    let db = new Datastore({ filename: 'cards.db', autoload: true });
+    const db: Datastore = new Datastore({ filename: 'cards.db', autoload: true });
     this.cardStore = new CardStore(db, http);
   }
 
   public get(set: Set): Observable<Card[]> {
     return this.cardStore.getCards(set);
   }
-}
+}

client/src/app/collection.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 
-import { Observable } from 'rxjs';
+import { Observable } from 'rxjs/observable';
 
 import * as Datastore from 'nedb';
 import { Collection } from './models/collection.interface';
@@ -13,7 +13,7 @@ export class CollectionService {
   private collectionStore: CollectionStore;
 
   constructor() {
-    let db = new Datastore({ filename: 'collection.db', autoload: true });
+    const db: Datastore = new Datastore({ filename: 'collection.db', autoload: true });
     this.collectionStore = new CollectionStore(db);
   }
 
@@ -28,4 +28,4 @@ export class CollectionService {
   public countCollected(setCode: string): Observable<number> {
     return this.collectionStore.countCollectedSet(setCode);
   }
-}
+}

client/src/app/database/card.store.ts

@@ -2,9 +2,11 @@ import { Card } from '../models/card.interface';
 import { Set } from '../models/set.interface';
 
 import { Http, Response, URLSearchParams } from '@angular/http';
-import { Observable, Subject } from 'rxjs';
+import { Observable } from 'rxjs/Observable';
+import { Subject } from 'rxjs/Subject';
 
 import * as Datastore from 'nedb';
+
 /**
  * Performs CRUD on the NEDB data store that is passed to it in the constructor.
  */
@@ -20,8 +22,8 @@ export class CardStore {
    */
   public getCards(set: Set): Observable<Card[]> {
     this.db.find({ setCode: set.code }).exec((err, dbcards) => {
-      if (dbcards.length === 0 || dbcards.length != set.totalCards) {
-        let params = new URLSearchParams();
+      if (dbcards.length === 0 || dbcards.length !== set.totalCards) {
+        const params: URLSearchParams = new URLSearchParams();
         params.append('setCode', set.code);
         params.append('pageSize', String(set.totalCards));
         this.http.get('https://api.pokemontcg.io/v1/cards', { search: params })
@@ -34,7 +36,7 @@ export class CardStore {
         this.cardListSubject.next(dbcards);
       }
     });
-    
+
     return this.cardListSubject;
   }
-}
+}

client/src/app/database/collection.store.ts

@@ -1,16 +1,16 @@
-import { Observable } from 'rxjs';
-
 import { Collection } from '../models/collection.interface';
 
-import { Subject, BehaviorSubject } from 'rxjs';
+import { Observable } from 'rxjs/Observable';
+import { Subject } from 'rxjs/Subject';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 import * as Datastore from 'nedb';
 
 /**
  * Performs CRUD on the NEDB data store that is passed to it in the constructor.
  */
 export class CollectionStore {
-  private countCollectedSubject: codeToObservable = {};
+  private countCollectedSubject: CodeToObservable = {};
 
   constructor(
     private db: Datastore) { }
@@ -24,7 +24,7 @@ export class CollectionStore {
   }
 
   public getCollection(setCode): Observable<Collection[]> {
-    let collectionSubject = new Subject();
+    const collectionSubject: Subject<Collection[]> = new Subject();
 
     this.db.find<Collection>({ setCode: setCode }).exec((err, collection) => {
       collectionSubject.next(collection);
@@ -34,9 +34,10 @@ export class CollectionStore {
   }
 
   public collectCard(card): Observable<Collection> {
-    let cardCollectedSubject = new Subject();
+    const cardCollectedSubject: Subject<Collection> = new Subject();
+
     this.db.insert(new Collection(card.id, card.setCode), (err, collection) => {
-      cardCollectedSubject.next(Collection);
+      cardCollectedSubject.next(collection);
 
       this.countSetCollection(card.setCode);
     });
@@ -51,6 +52,6 @@ export class CollectionStore {
   }
 }
 
-interface codeToObservable {
+interface CodeToObservable {
   [setCode: string]: BehaviorSubject<number>;
-}
+}

client/src/app/database/set.store.ts

@@ -1,7 +1,8 @@
 import { Set } from '../models/set.interface';
 
 import { Http, Response } from '@angular/http';
-import { Observable, Subject } from 'rxjs';
+import { Observable } from 'rxjs/Observable';
+import { Subject } from 'rxjs/Subject';
 
 import * as Datastore from 'nedb';
 /**
@@ -30,7 +31,7 @@ export class SetStore {
         this.setListSubject.next(dbsets);
       }
     });
-    
+
     return this.setListSubject;
   }
-}
+}

client/src/app/dialog/update-available-dialog.component.css

@@ -0,0 +1,3 @@
+h4 {
+  margin-top: 0;
+}

client/src/app/dialog/update-available-dialog.component.html

@@ -0,0 +1,12 @@
+<div>
+  <h3 class='mdl-dialog__title'>Version {{ updateInfo.version }} is now available</h3>
+  <div class='mdl-dialog__content'>
+    <h4>Release notes:</h4>
+    <p [innerHTML]='updateInfo.releaseNotes'></p>
+  </div>
+  <div class='mdl-dialog__actions'>
+    <button mdl-button (click)='doUpdate()' mdl-button-type='raised' mdl-colored='primary' mdl-ripple>Update</button>
+    <mdl-layout-spacer></mdl-layout-spacer>
+    <button mdl-button (click)='dismissUpdate()' mdl-button-type='raised' mdl-ripple>Not now</button>
+  </div>
+</div>

client/src/app/dialog/update-available-dialog.component.ts

@@ -0,0 +1,28 @@
+import { Component, Inject } from '@angular/core';
+import { MdlDialogReference } from '@angular-mdl/core';
+
+import { UpdateInfo } from '../models/update-info.interface';
+import { UPDATE_INFO } from '../models/update-info.token';
+
+@Component({
+  selector: 'pokemon-update-available-dialog-component',
+  templateUrl: './update-available-dialog.component.html',
+  styleUrls: ['./update-available-dialog.component.css']
+})
+export class UpdateAvailableDialogComponent {
+  public updateInfo: UpdateInfo;
+
+  constructor(
+    @Inject(UPDATE_INFO) updateInfo: UpdateInfo,
+    private dialog: MdlDialogReference) {
+    this.updateInfo = updateInfo;
+  }
+
+  public dismissUpdate(): void {
+    this.dialog.hide(false);
+  }
+
+  public doUpdate(): void {
+    this.dialog.hide(true);
+  }
+}

client/src/app/home/home.component.html

@@ -8,30 +8,30 @@
   </mdl-layout-header>
   <mdl-layout-drawer>
     <mdl-layout-title>Sets</mdl-layout-title>
-   	<mdl-list class="set-list">
-		<pokemon-menu-item *ngFor="let set of (sets | async)"
-      [set]="set"
-      (selectSet)="selectSet($event)"
-      [selectedSet]="selectedSet"
+     <mdl-list class='set-list'>
+    <pokemon-menu-item *ngFor='let set of (sets | async)'
+      [set]='set'
+      (selectSet)='selectSet($event)'
+      [selectedSet]='selectedSet'
       ></pokemon-menu-item>
     </mdl-list>
   </mdl-layout-drawer>
   <mdl-layout-content>
     <ngx-datatable
-      class="material"
-      [columnMode]="'force'"
-      [rowHeight]="'auto'"
-      [rows]="cards"
-      [columns]="columns"
-      [rowClass]="getRowClass"
-      [messages]="{ emptyMessage: 'No set selected' }">
+      class='material'
+      [columnMode]='"force"'
+      [rowHeight]='"auto"'
+      [rows]='cards'
+      [columns]='columns'
+      [rowClass]='getRowClass'
+      [messages]='{ emptyMessage: "No set selected" }'>
     </ngx-datatable>
   </mdl-layout-content>
 <mdl-layout>
 
-<ng-template #collectionTmpl let-row="row" let-value="value">
-  <button *ngIf="!value" mdl-button mdl-button-type="mini-fab" (click)="collectCard(row)">
+<ng-template #collectionTmpl let-row='row' let-value='value'>
+  <button *ngIf='!value' mdl-button mdl-button-type='mini-fab' (click)='collectCard(row)'>
     <mdl-icon>library_add</mdl-icon>
   </button>
-  <div *ngIf="value">{{ value | date : 'mediumDate' }} </div>
+  <div *ngIf='value'>{{ value | date : 'mediumDate' }}</div>
 </ng-template>

client/src/app/home/home.component.ts

@@ -6,7 +6,9 @@ import { SetService } from '../set.service';
 import { CardService } from '../card.service';
 import { CollectionService } from '../collection.service';
 
-import { Observable } from 'rxjs';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/observable/zip';
 import { Set } from '../models/set.interface';
 import { Card } from '../models/card.interface';
 import { Collection } from '../models/collection.interface';
@@ -51,17 +53,17 @@ export class HomeComponent implements OnInit {
   }
 
   dateComparator(dateA: Date, dateB: Date) {
-    if (dateB < dateA) return 1;
-    else if (dateB > dateA) return -1;
+    if (dateB < dateA) { return 1; }
+    if (dateB > dateA) { return -1; }
     return 0;
   }
 
   getSets() {
     this.sets = this.setService.getSetList()
       .map((sets: Set[]) => {
         return sets.sort((a: Set, b: Set) => {
-          if (new Date(b.releaseDate) < new Date(a.releaseDate)) return 1;
-          else if (new Date(b.releaseDate) > new Date(a.releaseDate)) return -1;
+          if (new Date(b.releaseDate) < new Date(a.releaseDate)) { return 1; }
+          if (new Date(b.releaseDate) > new Date(a.releaseDate)) { return -1; }
           return 0;
         });
       });
@@ -96,12 +98,12 @@ export class HomeComponent implements OnInit {
       .subscribe(([cards, collection]) => {
         this.cards = cards;
         collection.forEach(collectedEntry => {
-          var foundCard = cards.find(function (card) {
-            return card.id == collectedEntry.card;
+          const foundCard: Card = cards.find(function (card) {
+            return card.id === collectedEntry.card;
           });
 
           foundCard.collected = collectedEntry.collected;
         });
       });
   }
-}
+}