refactor: #61 url params unifying

src/app/game/components/data-menu/data-menu.component.ts

@@ -4,6 +4,7 @@ import { KeyValuePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 import { DataSelectCheckboxComponent } from './components/data-select-checkbox/data-select-checkbox.component';
 import { DataDownloadComponent } from './components/data-download/data-download.component';
+import { UrlParamService } from 'app/shared/services/url-param.service';
 
 @Component({
   selector: 'app-data-menu',
@@ -75,18 +76,15 @@ export class DataMenuComponent implements OnInit {
   public isDataMenuVisible = false;
   public dataSavingIntervalLimit = 100;
 
-  public constructor(
-    private _route$: ActivatedRoute,
-    private _router: Router
-  ) {}
+  public constructor(private _urlParamService: UrlParamService) {}
 
   public ngOnInit(): void {
     setTimeout(() => {
       this.dataToPersist = JSON.parse(
         JSON.stringify(this.dataPossibleToPersist)
       );
       this.updateDataToPersistFromURL();
-      this.updateURLByDataToPersist('outputSpec', false);
+      this._urlParamService.setQueryParam('outputSpec', 'false');
     }, 50);
   }
 
@@ -105,21 +103,19 @@ export class DataMenuComponent implements OnInit {
       delete this.dataToPersist[key];
     }
 
-    this.updateURLByDataToPersist(key, isPresent);
+    this._urlParamService.setQueryParam(key, isPresent ? 'true' : 'false');
   };
 
   //
 
   private updateDataToPersistFromURL(): void {
-    this._route$.queryParams.subscribe(params => {
-      for (const key in this.dataPossibleToPersist) {
-        this.updateDataToPersist(
-          key,
-          this.dataPossibleToPersist[key],
-          params[key] !== 'false'
-        );
-      }
-    });
+    for (const key in this.dataPossibleToPersist) {
+      this.updateDataToPersist(
+        key,
+        this.dataPossibleToPersist[key],
+        this._urlParamService.getQueryParam(key) !== 'false'
+      );
+    }
   }
 
   private updateCollectedData(): void {
@@ -137,11 +133,4 @@ export class DataMenuComponent implements OnInit {
       this._lastSavedTime = Date.now();
     }
   }
-
-  private updateURLByDataToPersist(key: string, isPresent: boolean): void {
-    this._dataToPersistQueryParams[key] = isPresent;
-    this._router.navigate([], {
-      queryParams: this._dataToPersistQueryParams,
-    });
-  }
 }

src/app/game/game.page.component.ts

@@ -49,7 +49,6 @@ import { GameMenuComponent } from './components/game-menu/game-menu.component';
               (pauseEmitter)="gamePauseSubject.next($event)"
               (restartEmitter)="gameRestartSubject.next()" />
             <app-data-menu
-              *appAuthRequired
               [gameName]="game.name"
               [setDataPossibleToPersist]="gameStateData" />
           </div>

src/app/home/models/author.ts

@@ -12,7 +12,7 @@ export const authorsData: IAuthor[] = [
     name: 'Marcin Bator',
     githubName: 'marcinbator',
     linkedinName: 'marcin-bator-ofc',
-    role: 'Backend Developer',
+    role: 'Fullstack engineer',
     techStack: [
       'Java/Spring Boot',
       'C#/.NET',
@@ -21,8 +21,7 @@ export const authorsData: IAuthor[] = [
       'Angular',
       'SQL/PostgreSQL',
     ],
-    hobbies:
-      'developing backend systems, learning new technologies, riding a bike',
+    hobbies: 'mountains, bike, skiing, programming',
   },
   {
     name: 'Paweł Buczek',

src/app/shared/services/url-param.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class UrlParamService {
+  private _queryParams: URLSearchParams;
+
+  public constructor() {
+    this._queryParams = new URLSearchParams(window.location.search);
+  }
+
+  public getQueryParam(key: string): string | null {
+    return this._queryParams.get(key);
+  }
+
+  public setQueryParam(key: string, value: string): void {
+    this._queryParams.set(key, value);
+    window.history.replaceState(
+      {},
+      '',
+      `${window.location.pathname}?${this._queryParams}`
+    );
+  }
+}