feat(lolapi): advanced retries

src/client/base.css

@@ -180,6 +180,7 @@ help .content {
 
 .icon-load {
   animation: spin .8s linear infinite;
+  display: flex;
   fill: #aaa;
   margin: 0 auto;
   padding: 10px;
@@ -310,6 +311,8 @@ button:disabled {
   display: flex;
   font-size: 1.3em;
   justify-content: space-between;
+  margin: 0 auto;
+  max-width: 500px;
   padding: 10px;
 }
 

src/client/build/build.component.ts

@@ -10,40 +10,29 @@ import {ShopComponent} from './shop/shop.component';
   template: `
     <div class="title">
       <img *ngIf="champion"
-           [attr.alt]="champion?.name"
-           [attr.src]="'champion/' + champion?.image?.full | lbDDragon">
+          [attr.alt]="champion?.name"
+          [attr.src]="'champion/' + champion?.image?.full | lbDDragon">
       <h2>{{ champion?.name }}</h2>
     </div>
-    <lb-graph></lb-graph>
-    <!--<lb-abilities></lb-abilities>
-    <lb-masteries></lb-masteries>-->
-    <lb-items (itemSelected)="shop.selectItem($event)" #items></lb-items>
-    <lb-shop #shop></lb-shop>
-    <lb-loading [loading]="loading"></lb-loading>
-    <lb-retry [error]="error" (retry)="ngOnInit()"></lb-retry>`
+    <lb-loading [observable]="lolApi.getCurrentChampion()">
+      <lb-graph></lb-graph>
+      <!--<lb-abilities></lb-abilities>
+      <lb-masteries></lb-masteries>-->
+      <lb-items (itemSelected)="shop.selectItem($event)" #items></lb-items>
+      <lb-shop #shop></lb-shop>
+    </lb-loading>`
 })
 
 export class BuildComponent implements OnInit {
   items: ItemsComponent;
   shop: ShopComponent;
   champion: any;
-  loading: boolean = true;
-  error: boolean = false;
 
-  constructor(private lolApi: LolApiService) {}
+  constructor(public lolApi: LolApiService) {}
 
   ngOnInit() {
-    this.loading = true;
-    this.error = false;
-
-    this.lolApi.getCurrentChampion().subscribe(
-        (champion) => {
-          this.champion = champion;
-          this.loading = false;
-        },
-        () => {
-          this.error = true;
-          this.loading = false;
-        });
+    this.lolApi.getCurrentChampion().subscribe((champion) => {
+      this.champion = champion;
+    });
   }
 }

src/client/build/graph/graph.component.ts

@@ -21,14 +21,16 @@ export interface Line {
 @Component({
   selector: 'lb-graph',
   template: `
-    <lb-legend [lines]="lines"></lb-legend>
+    <lb-loading [observable]="lolApi.getCurrentMatchData()">
+      <lb-legend [lines]="lines"></lb-legend>
+    </lb-loading>
     <svg xmlns="http://www.w3.org/2000/svg"
-         width="100%"
-         height="100%"
-         viewBox="0 0 1500 400"
-         (mousemove)="mousemove($event)"
-         (mouseover)="mouseover()"
-         (mouseout)="mouseout()">
+        width="100%"
+        height="100%"
+        viewBox="0 0 1500 400"
+        (mousemove)="mousemove($event)"
+        (mouseover)="mouseover()"
+        (mouseout)="mouseout()">
       <g transform="translate(60,20)">
         <g class="lines">
           <g lb-line [line]="line" *ngFor="let line of lines"></g>
@@ -55,23 +57,21 @@ export class GraphComponent implements OnInit {
   private mouseOffsetX: number;
 
   constructor(
-      @Inject(ElementRef) private elementRef: ElementRef, private lolApi: LolApiService,
-      private statsService: StatsService) {}
+      @Inject(ElementRef) private elementRef: ElementRef, public lolApi: LolApiService,
+      private stats: StatsService) {}
 
   ngOnInit() {
     this.svg = select(this.elementRef.nativeElement).select('svg');
     this.focus = this.svg.select('.focus');
     this.overlay = this.svg.select('.overlay');
     this.svg.select('.x.axis.time').call(this.xAxisTime.get());
 
-    this.statsService.stats.subscribe((stats) => {
+    this.stats.stats.subscribe((stats) => {
       this.updateLines(stats, curveStepAfter);
     });
 
     this.lolApi.getCurrentMatchData().subscribe((samples: Samples) => {
-      if (this.svg) {
-        this.updateSamples(samples);
-      }
+      this.updateSamples(samples);
     });
   }
 

src/client/build/graph/graph.module.ts

@@ -1,13 +1,15 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 
+import {SharedModule} from '../../shared/shared.module';
+
 import {GraphComponent} from './graph.component';
 import {LegendModule} from './legend/legend.module';
 import {LineComponent} from './line.component';
 
 @NgModule({
   declarations: [GraphComponent, LineComponent],
-  imports: [CommonModule, LegendModule],
+  imports: [CommonModule, SharedModule, LegendModule],
   exports: [GraphComponent]
 })
 export class GraphModule {

src/client/build/masteries/masteries.component.spec.ts

@@ -6,9 +6,7 @@ import {IconLoadComponent} from '../../assets/icon-load.component';
 import {IconRefreshComponent} from '../../assets/icon-refresh.component';
 import {LolApiService} from '../../services';
 import {DDragonPipe} from '../../shared/ddragon.pipe';
-import {ErrorComponent} from '../../shared/error.component';
 import {LoadingComponent} from '../../shared/loading.component';
-import {RetryComponent} from '../../shared/retry.component';
 import {TestModule} from '../../testing';
 
 import {MasteriesComponent} from './masteries.component';
@@ -69,8 +67,8 @@ let providers = () => {
       providers: [MasteriesComponent, LolApiService],
       declarations: [
         MasteriesComponent, MasteryCategoryComponent, MasteryTierComponent, MasteryComponent,
-        LoadingComponent, RetryComponent, ErrorComponent, RankComponent, IconLoadComponent,
-        IconRefreshComponent, IconErrorComponent, DDragonPipe
+        LoadingComponent, RankComponent, IconLoadComponent, IconRefreshComponent,
+        IconErrorComponent, DDragonPipe
       ],
       imports: [TestModule]
     });

src/client/build/masteries/masteries.component.ts

@@ -9,39 +9,27 @@ import {MasteryComponent} from './mastery.component';
 @Component({
   selector: 'lb-masteries',
   template: `
-    <lb-mastery-category [class]="category.name + ' noselect'"
-                      [data]="category"
-                      *ngFor="let category of data"
-                      (rankAdded)="rankAdd($event)"
-                      (rankRemoved)="rankRemove()">
-    </lb-mastery-category>
-    <lb-loading [loading]="loading"></lb-loading>
-    <lb-retry [error]="error" (retry)="ngOnInit()"></lb-retry>`
+    <lb-loading [observable]="lolApi.getMasteries()">
+      <lb-mastery-category [class]="category.name + ' noselect'"
+                        [data]="category"
+                        *ngFor="let category of data"
+                        (rankAdded)="rankAdd($event)"
+                        (rankRemoved)="rankRemove()">
+      </lb-mastery-category>
+    </lb-loading>`
 })
 
 export class MasteriesComponent implements OnInit {
   @ViewChildren(MasteryCategoryComponent)
   children: QueryList<MasteryCategoryComponent>;
   data: Object;
 
-  loading: boolean = true;
-  error: boolean = false;
-
-  constructor(private lolApi: LolApiService) {}
+  constructor(public lolApi: LolApiService) {}
 
   public ngOnInit() {
-    this.loading = true;
-    this.error = false;
-
-    this.lolApi.getMasteries().subscribe(
-        res => {
-          this.data = this.transformData(res);
-          this.loading = false;
-        },
-        () => {
-          this.error = true;
-          this.loading = false;
-        });
+    this.lolApi.getMasteries().subscribe(res => {
+      this.data = this.transformData(res);
+    });
   }
 
   public enable() {

src/client/build/shop/shop.component.ts

@@ -15,8 +15,8 @@ import {PreviewComponent} from './preview/preview.component';
         <hr>
         <label *ngFor="let tag of category.tags">
           <input *ngIf="tag != '_SORTINDEX'"
-                 type="checkbox" value="{{tag}}"
-                 (change)="tagChanged($event)">
+                type="checkbox" value="{{tag}}"
+                (change)="tagChanged($event)">
           <span *ngIf="tag != '_SORTINDEX'">{{ tag | lbTranslate | lbCapitalize }}</span>
         </label>
       </div>
@@ -34,13 +34,13 @@ import {PreviewComponent} from './preview/preview.component';
         </div>
         <div class="items">
           <ng-template ngFor let-item [ngForOf]="items
-                                               | toArray
-                                               | lbMap:11
-                                               | lbChampion:123
-                                               | lbHide
-                                               | lbTags:tags
-                                               | lbName:name
-                                               | lbSort">
+                                              | toArray
+                                              | lbMap:11
+                                              | lbChampion:123
+                                              | lbHide
+                                              | lbTags:tags
+                                              | lbName:name
+                                              | lbSort">
             <lb-item [item]="item"
                   [ngClass]="{disabled: item.disabled}"
                   [attr.title]="item.description"
@@ -49,8 +49,7 @@ import {PreviewComponent} from './preview/preview.component';
                   (dblclick)="pickItem(item);preview.selectItem(item)">
             </lb-item>
           </ng-template>
-          <lb-loading [loading]="loading"></lb-loading>
-          <lb-retry [error]="error" (retry)="ngOnInit()"></lb-retry>
+          <lb-loading [observable]="lolApi.getItems()"></lb-loading>
         </div>
       </div>
       <div class="right">
@@ -65,33 +64,21 @@ import {PreviewComponent} from './preview/preview.component';
 export class ShopComponent implements OnInit {
   @ViewChild(PreviewComponent) preview: PreviewComponent;
 
-  loading: boolean = true;
-  error: boolean = false;
-
   tags: Array<string> = [];
   name: string;
 
   items: Array<Item> = [];
   tree: Array<Item> = [];
   private originalItems: Array<Item> = [];
 
-  constructor(private lolApi: LolApiService, private pickedItems: PickedItemsService) {}
+  constructor(public lolApi: LolApiService, private pickedItems: PickedItemsService) {}
 
   ngOnInit() {
-    this.loading = true;
-    this.error = false;
-
-    this.lolApi.getItems().subscribe(
-        res => {
-          this.items = res.data;
-          this.tree = res.tree;
-          this.originalItems = this.items;
-          this.loading = false;
-        },
-        () => {
-          this.error = true;
-          this.loading = false;
-        });
+    this.lolApi.getItems().subscribe(res => {
+      this.items = res.data;
+      this.tree = res.tree;
+      this.originalItems = this.items;
+    });
   }
 
   tagChanged(event: Event) {

src/client/champion/champions.component.ts

@@ -10,54 +10,40 @@ import {ChampionComponent} from './champion.component';
   encapsulation: ViewEncapsulation.None,
   styles: [require('./champion.css').toString()],
   template: `
-    <lb-filters [(tags)]="tags" [(name)]="name" [(sort)]="sort" (enterHit)="enterHit()">
-    </lb-filters>
-    <lb-champion *ngFor="let champion of champions
-                        | toArray
-                        | fuzzyBy:'name':name
-                        | lbSort:sort
-                        | lbTags:tags"
-                 [champion]="champion">
-    </lb-champion>
-    <lb-loading [loading]="loading"></lb-loading>
-    <lb-retry [error]="error" (retry)="ngOnInit()"></lb-retry>`
+    <lb-loading [observable]="lolApi.getChampions()">
+      <lb-filters [(tags)]="tags" [(name)]="name" [(sort)]="sort" (enterHit)="enterHit()">
+      </lb-filters>
+      <lb-champion *ngFor="let champion of champions
+                          | toArray
+                          | fuzzyBy:'name':name
+                          | lbSort:sort
+                          | lbTags:tags"
+                  [champion]="champion">
+      </lb-champion>
+    </lb-loading>`
 })
 
 export class ChampionsComponent implements OnInit {
   champions: Object = {};
-  loading: boolean = true;
-  error: boolean = false;
 
   tags: Array<string> = [];
   name: string;
   sort: string = '';
 
   @ViewChildren(ChampionComponent) activeChampions: QueryList<ChampionComponent>;
 
-  constructor(
-      private route: ActivatedRoute, private router: Router, private lolApi: LolApiService) {}
+  constructor(private route: ActivatedRoute, private router: Router, public lolApi: LolApiService) {
+  }
 
   ngOnInit() {
-    this.loading = true;
-    this.error = false;
-
-    this.lolApi.getChampions().subscribe(
-        res => {
-          this.champions = res.data;
-          this.loading = false;
-        },
-        () => {
-          this.error = true;
-          this.loading = false;
-        });
+    this.lolApi.getChampions().subscribe(res => {
+      this.champions = res.data;
+    });
   }
 
   enterHit() {
     if (this.activeChampions && this.activeChampions.length === 1) {
-      this.router.navigate([this.activeChampions.first.champion.key], {relativeTo: this.route})
-          .catch(() => {
-            this.error = true;
-          });
+      this.router.navigate([this.activeChampions.first.champion.key], {relativeTo: this.route});
     }
   }
 }

src/client/services/lolapi.service.ts

@@ -93,7 +93,10 @@ export class LolApiService {
   private cache(url: string): Observable<any> {
     if (!this.cachedObservables[url]) {
       this.cachedObservables[url] =
-          Observable.defer(() => this.http.get(url)).publishReplay().refCount();
+          Observable.defer(() => this.http.get(url).retryWhen(errors => errors.delay(1000)))
+              .publishReplay()
+              .refCount()
+              .catch((error) => Observable.throw(error.message ? error.message : error.toString()));
     }
     return this.cachedObservables[url].take(1).map(res => res.json());
   }