numbered headlines and router reuse strategy

Author: clouless

src/app/app.component.html

@@ -1,6 +1,6 @@
 <div class="container">
-  <div class="logo">
+  <a class="logo" routerLink="/">
     <img [src]="logoSrc" class="logo-img" />
-  </div>
+  </a>
   <router-outlet></router-outlet>
 </div>

src/app/app.module.ts

@@ -5,10 +5,12 @@ import { HttpClientModule } from '@angular/common/http';
 
 import { AppComponent } from './app.component';
 import { UploadPageComponent } from './upload-page/upload-page.component';
-import { RouterModule, Routes } from '@angular/router';
-import { BackendService } from './backend.service';
+import { RouterModule, Routes, RouteReuseStrategy } from '@angular/router';
+import { BackendService } from './services/backend.service';
 import { TerminalOutputComponent } from './terminal-output/terminal-output.component';
 import { SpinnerComponent } from './stateless/spinner.component';
+import { NumberedHeadlineComponent } from './stateless/numbered-headline.component';
+import { ForceRouteReuseStrategy } from './stateless/force-route-reuse-strategy';
 
 const appRoutes: Routes = [
   { path: 'upload', component: UploadPageComponent },
@@ -25,15 +27,22 @@ const appRoutes: Routes = [
     AppComponent,
     UploadPageComponent,
     TerminalOutputComponent,
-    SpinnerComponent
+    SpinnerComponent,
+    NumberedHeadlineComponent,
   ],
   imports: [
     RouterModule.forRoot(appRoutes, { useHash: true }),
     BrowserModule,
     FormsModule,
     HttpClientModule
   ],
-  providers: [BackendService],
+  providers: [
+    BackendService,
+    {
+      provide: RouteReuseStrategy,
+      useClass: ForceRouteReuseStrategy
+    },
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/backend.service.spec.ts renamed to src/app/services/backend.service.spec.ts

@@ -4,7 +4,7 @@ import {
   KartoffelstampfImageUploadResponse,
   KartoffelstampfImageUploadRequest,
   KartoffelstampfCompressInstruction,
- } from './types/kartoffelstampf-server';
+ } from '../types/kartoffelstampf-server';
 import { Observable, Subject, throwError } from 'rxjs';
 import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
 import { catchError } from 'rxjs/operators';

src/app/backend.service.ts renamed to src/app/services/backend.service.ts

@@ -0,0 +1,12 @@
+import { RouteReuseStrategy, ActivatedRouteSnapshot, DetachedRouteHandle } from '@angular/router';
+
+export class ForceRouteReuseStrategy implements RouteReuseStrategy {
+  shouldDetach(route: ActivatedRouteSnapshot): boolean { return false; }
+  store(route: ActivatedRouteSnapshot, detachedTree: DetachedRouteHandle): void {}
+  shouldAttach(route: ActivatedRouteSnapshot): boolean { return false; }
+  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle|null { return null; }
+  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
+    // Always re-render route!
+    return false;
+  }
+}

src/app/stateless/force-route-reuse-strategy.ts

@@ -0,0 +1,63 @@
+import { Component } from '@angular/core';
+import { Input } from '@angular/core';
+
+@Component({
+  selector: 'app-numbered-headline',
+  template: `
+  <div class="numbered-headline">
+    <div
+      class="numbered-headline-number"
+      [class.numbered-headline-number---is-active]="isActive"
+    ><span>{{ number }}</span></div>
+    <div
+      class="numbered-headline-text"
+      [class.numbered-headline-text---is-active]="isActive"
+    ><span>{{ headline }}</span></div>
+  </div>`,
+  styles: [
+    `.numbered-headline {
+      display:flex;
+      flex-direction: row;
+      justify-content: left;
+      align-items: center;
+      margin-bottom: 15px;
+      margin-top: 15px;
+    }`,
+    `.numbered-headline-number {
+      width: 25px;
+      height: 25px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #777;
+      color:#fff;
+      border-radius: 100%;
+      font-size:20px;
+    }`,
+    `.numbered-headline-number---is-active {
+      background-color: #00A200;
+    }`,
+    `.numbered-headline-text {
+      color: #ccc;
+      margin-left:10px;
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+      flex-direction: column;
+    }`,
+    `.numbered-headline-text---is-active {
+      color: #777;
+    }`,
+  ]
+})
+export class NumberedHeadlineComponent {
+
+  @Input()
+  isActive: boolean;
+
+  @Input()
+  number: number;
+
+  @Input()
+  headline: string;
+}

src/app/stateless/numbered-headline.component.ts

@@ -1,5 +1,3 @@
-
-
 import { Component } from '@angular/core';
 
 @Component({

src/app/stateless/spinner.component.ts

@@ -1,5 +1,11 @@
 <div class="container">
+  <app-numbered-headline
+    number="1"
+    headline="Drop Images and Upload"
+    [isActive]="activeStep == 1"
+  ></app-numbered-headline>
   <div
+    *ngIf="activeStep == 1"
     class="drop-container"
     [class.drop-container---drag-over]="uiStateDragOver"
     [class.drop-container---drag-leave]="uiStateDragLeave"
@@ -8,13 +14,18 @@
     (dragover)="handleDragOver($event)"
     (dragleave)="handleDragLeave($event)"
   >
-
     <input
       type="file"
       multiple="multiple"
       (change)="handleFileChange($event)"
     >
   </div>
+  <!-- ========== -->
+  <app-numbered-headline
+    number="2"
+    headline="Compress and Download"
+    [isActive]="activeStep == 2"
+  ></app-numbered-headline>
   <app-spinner *ngIf="originalFileName && !compressDone!"></app-spinner>
   <div *ngIf="originalFileName">
     <h3>{{originalFileName}}</h3>

src/app/upload-page/upload-page.component.html

@@ -1,8 +1,9 @@
-import { Component, OnInit } from '@angular/core';
-import { BackendService } from '../backend.service';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { BackendService } from '../services/backend.service';
 import { KartoffelstampfTerminalOutputEntry, KartoffelstampfCompressInstruction } from '../types/kartoffelstampf-server';
 import { TerminalLine } from '../types/kartoffelstampf-client';
-import { finalize } from 'rxjs/operators';
+import { finalize, takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
 
 @Component({
   selector: 'app-upload-page',
@@ -22,8 +23,9 @@ import { finalize } from 'rxjs/operators';
    ],
   providers: [BackendService]
 })
-export class UploadPageComponent implements OnInit {
+export class UploadPageComponent implements OnInit, OnDestroy {
 
+  preDestroy = new Subject<boolean>();
   terminalLines: TerminalLine[] = [];
   uploadedFileBase64URI: string;
   originalFileName: string;
@@ -34,9 +36,19 @@ export class UploadPageComponent implements OnInit {
   uiStateDragOver = false;
   uiStateDragLeave = true;
 
+  activeStep = 1;
+
   constructor(private backendService: BackendService) { }
 
-  ngOnInit() { }
+  ngOnInit() {
+    // since router strategy is to forcefully NOT reuse page components.
+    // The Component is reiniated automatically on browse to /upload
+  }
+
+  ngOnDestroy() {
+    this.preDestroy.next(true);
+    this.preDestroy.complete();
+  }
 
   handleDrop(event: any) {
     this.uiStateDragOver = false;
@@ -77,14 +89,19 @@ export class UploadPageComponent implements OnInit {
       fileReader.addEventListener('load', function(loadedEvent: any) {
         self.uploadedFileBase64URI = loadedEvent.target.result;
         // Upload via backend
-        self.backendService.uploadImage(self.uploadedFileBase64URI, 'PNG')
+        self.backendService
+        .uploadImage(self.uploadedFileBase64URI, 'PNG')
+        .pipe(
+          takeUntil(self.preDestroy)
+        )
         .subscribe(uploadResponse => {
           console.log(uploadResponse.fileName);
           self.temporaryFileName = uploadResponse.fileName;
           self.runCompressCommand();
         });
       });
       fileReader.readAsDataURL(files[0]);
+      self.activeStep = 2;
     }
   }
 
@@ -102,7 +119,8 @@ export class UploadPageComponent implements OnInit {
       finalize(() => {
         console.log('compress-done!');
         self.compressDone = true;
-      })
+      }),
+      takeUntil(self.preDestroy)
     )
     .subscribe(data => {
       const terminalLine = new TerminalLine(data);