Cleaning up

.nowignore

@@ -0,0 +1,2 @@
+README.md
+yarn.lock

src/app/modules/contact/components/contact/contact.component.html

@@ -1,5 +1,5 @@
 <mat-grid-list cols="1" rowHeight="2:1">
-  <form [formGroup]="contactForm" (ngSubmit)="onSubmitContactForm();">
+  <form [formGroup]="contactForm">
     <mat-form-field>
       <input matInput formControlName="name" placeholder="Enter your first name..." />
     </mat-form-field>
@@ -15,6 +15,6 @@
     <mat-form-field>
       <textarea matInput formControlName="body" placeholder="Message body..."></textarea>
     </mat-form-field>
-    <button mat-raised-button color="primary" type="submit">Submit</button>
+    <button mat-raised-button color="primary" type="button" (click)="onSubmitContactForm();">Submit</button>
   </form>
 </mat-grid-list>

src/app/modules/contact/components/contact/contact.component.ts

@@ -35,7 +35,7 @@ export class ContactComponent implements OnInit {
       panelClass: ['success']
     };
 
-    this.snackBar.open('You have successfully contacted VideoGamer.', '', options);
+    this.snackBar.open('You have successfully contacted VideoGamer.', null, options);
   }
 
   public openErrorSnackBar(): void {

src/app/modules/gaming/components/game-list/game-list.component.ts

@@ -1,15 +1,46 @@
-import { Component, OnInit } from '@angular/core';
-
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Router, ActivatedRoute, Params, ParamMap } from '@angular/router';
+import { Subscription, Observable } from 'rxjs';
+import { GamesService } from '@service/games/games.service.ts';
+import { switchMap } from 'rxjs/operators';
 @Component({
   selector: 'app-game-list',
   templateUrl: './game-list.component.html',
   styleUrls: ['./game-list.component.css']
 })
-export class GameListComponent implements OnInit {
+export class GameListComponent implements OnInit, OnDestroy {
+  private subscriptions: Array<Subscription> = new Array<Subscription>();
+
+  constructor(
+    private readonly router: Router,
+    private readonly route: ActivatedRoute,
+    private readonly gamingService: GamesService
+  ) {}
 
-  constructor() { }
+  public ngOnInit() {
+    this.handleUrl();
+  }
 
-  ngOnInit() {
+  private handleUrl(): void {
+    this.subscriptions.push(
+      this.route.paramMap
+        .pipe(
+          switchMap((params: ParamMap) => {
+            if (this.router.url.startsWith('/gaming/genres/')) {
+              return this.gamingService.getGamesByGenre(params.get('genre'));
+            } else if (this.router.url.startsWith('/gaming/platform/')) {
+              return this.gamingService.getGamesByPlatform(params.get('platform'));
+            }
+          })
+        )
+        .subscribe(data => console.log(data))
+    );
   }
 
+  public ngOnDestroy(): void {
+    // Performance reason
+    for (let i = 0; i < this.subscriptions.length; i++) {
+      this.subscriptions[i].unsubscribe();
+    }
+  }
 }

src/app/modules/gaming/components/game/game.component.ts

@@ -6,10 +6,6 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./game.component.css']
 })
 export class GameComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
+  constructor() {}
+  ngOnInit(): void {}
 }

src/app/modules/gaming/gaming.module.ts

@@ -6,8 +6,11 @@ import { GameListComponent } from './components/game-list/game-list.component';
 
 const routes: Routes = [
   {
-    path: '',
-    pathMatch: 'full',
+    path: 'platform/:platform',
+    component: GameListComponent
+  },
+  {
+    path: 'genres/:genre',
     component: GameListComponent
   }
 ];

src/app/modules/shared-components/components/bug-report-dialog/bug-report-dialog.component.html

@@ -1,17 +1,21 @@
 <h1 mat-dialog-title class="text-center">Bug Report</h1>
 <div mat-dialog-content class="text-center">
-  <form class="example-form">
+  <form class="example-form" [formGroup]="bugReportForm">
     <mat-form-field class="example-full-width">
-      <input matInput placeholder="Favorite food" [(ngModel)]="data.fullName">
+      <input matInput placeholder="Enter your full name..." formControlName="fullName" />
+      <span *ngIf="!bugReportForm.get('fullName').valid && bugReportForm.get('fullName').touched">Full name is
+        required.</span>
     </mat-form-field>
 
     <mat-form-field class="example-full-width">
-      <textarea matInput placeholder="Report a bug..." [(ngModel)]="data.bug"></textarea>
+      <textarea matInput placeholder="Report a bug..." formControlName="bug"></textarea>
+      <span *ngIf="!bugReportForm.get('bug').valid && bugReportForm.get('bug').touched">Bug field is required.</span>
     </mat-form-field>
   </form>
 
 </div>
 <div mat-dialog-actions>
-  <button mat-raised-button color="primary" [mat-dialog-close]="data.fullName" cdkFocusInitial>Submit bug</button>
+  <button mat-raised-button color="primary" (click)="submitReport();" cdkFocusInitial>Submit bug</button>
+  <!-- [mat-dialog-close]="data.fullName" -->
   <button mat-raised-button color="warn" (click)="onNoClick()">Cancel</button>
 </div>

src/app/modules/shared-components/components/bug-report-dialog/bug-report-dialog.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, Inject } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { HeaderComponent } from '..';
 import { FormGroup, Validators, FormControl } from '@angular/forms';
+import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
 
 export interface BugReport {
   fullName: string;
@@ -20,13 +21,56 @@ export class BugReportDialogComponent implements OnInit {
   });
 
   constructor(
-    public readonly dialogRef: MatDialogRef<HeaderComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: BugReport
+    private readonly dialogRef: MatDialogRef<HeaderComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: BugReport,
+    private readonly snackBar: MatSnackBar
   ) {}
 
-  ngOnInit() {}
+  public ngOnInit() {}
 
-  onNoClick(): void {
+  public onNoClick(): void {
     this.dialogRef.close();
   }
+
+  private openSuccessSnackBar(): void {
+    const options: MatSnackBarConfig = {
+      direction: 'ltr',
+      duration: 4000,
+      horizontalPosition: 'end',
+      panelClass: ['success']
+    };
+
+    this.snackBar.open('You have successfully contacted VideoGamer.', null, options);
+  }
+
+  private openErrorSnackBar(): void {
+    const options: MatSnackBarConfig = {
+      direction: 'ltr',
+      duration: 4000,
+      horizontalPosition: 'end',
+      panelClass: ['danger']
+    };
+
+    this.snackBar.open('Fill the form properly.', null, options);
+  }
+
+  public submitReport(): void {
+    if (this.bugReportForm.invalid) {
+      console.log(this.bugReportForm.errors);
+      // Show snack bar error
+      this.openErrorSnackBar();
+    } else {
+      const data: any = this.bugReportForm.getRawValue();
+
+      this.dialogRef.close();
+
+      // // Clear contact form
+      this.bugReportForm.reset();
+      this.bugReportForm.markAsPristine();
+      this.bugReportForm.markAsUntouched();
+
+      // Show success snack bar
+      this.openSuccessSnackBar();
+    }
+  }
 }

src/app/modules/shared-components/components/header/header.component.html

@@ -9,7 +9,7 @@
     <nav mat-tab-nav-bar>
       <ng-container *ngFor="let link of links">
         <button mat-button [routerLink]="link.path" routerLinkActive #rla="routerLinkActive" class="nav-link
-          light-text" *ngIf="link.name != 'Gaming'; else gamingMenu">
+            light-text" *ngIf="link.name != 'Gaming'; else gamingMenu">
           <mat-icon>{{ link.icon }}</mat-icon>
           <span class="spacy">{{ link.name }}</span>
         </button>
@@ -62,10 +62,10 @@
 
       <!-- TODO: Toggle dark mode -->
       <!-- <div>
-        <mat-slide-toggle color="warn"></mat-slide-toggle>
-      </div>
+          <mat-slide-toggle color="warn"></mat-slide-toggle>
+        </div>
 
-      <small class="light-text spacy">Dark Theme</small> -->
+        <small class="light-text spacy">Dark Theme</small> -->
     </nav>
   </span>
 </mat-toolbar>

src/app/modules/shared-components/components/header/header.component.ts

@@ -1,7 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { CustomIconService } from '@service/icons/custom-icons.service';
 import { MatDialog } from '@angular/material/dialog';
 import { BugReportDialogComponent, BugReport } from '../bug-report-dialog/bug-report-dialog.component';
+import { GenreService } from '@service/genres/genres.service';
+import { Subscription } from 'rxjs';
+import { PlatformsService } from '@service/platforms/platforms.service';
 export interface Link {
   name: string;
   path: string;
@@ -25,7 +28,7 @@ export interface Platform {
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.css']
 })
-export class HeaderComponent implements OnInit {
+export class HeaderComponent implements OnInit, OnDestroy {
   public bugReport: BugReport;
 
   public readonly links: Link[] = [
@@ -34,30 +37,30 @@ export class HeaderComponent implements OnInit {
     { name: 'Contact', path: 'contact', icon: 'mail' }
   ];
 
-  public readonly genres: Genre[] = [
-    { name: 'Action', icon: '../../../../../assets/images/genres/action.png', slug: 'action' },
-    { name: 'Strategy', icon: '', slug: 'strategy' },
-    { name: 'RPG', icon: '', slug: 'role-playing-games-rpg' },
-    { name: 'Shooter', icon: '', slug: 'shooter' },
-    { name: 'Adventure', icon: '', slug: 'adventure' },
-    { name: 'Puzzle', icon: '', slug: 'puzzle' },
-    { name: 'Racing', icon: '', slug: 'racing' },
-    { name: 'Sports', icon: '', slug: 'sports' }
-  ];
+  private subscriptions: Subscription[] = [];
 
-  public readonly platforms: Platform[] = [
-    { name: 'PC', icon: 'windows', slug: 'pc' },
-    { name: 'PlayStation 4', icon: 'ps4', slug: 'playstation4' },
-    { name: 'Xbox One', icon: 'xbox', slug: 'xbox-one' },
-    { name: 'Nintendo Switch', icon: 'nintendo', slug: 'nintendo-switch' },
-    { name: 'iOS', icon: 'ios', slug: 'ios' },
-    { name: 'Android', icon: 'android', slug: 'android' }
-  ];
+  public genresMap: Map<string, { id: number; slug: string }>;
+  public genres: Array<any> = [];
+
+  public platforms: Platform[];
 
-  constructor(private readonly customIconsService: CustomIconService, private readonly dialogService: MatDialog) {}
+  constructor(
+    private readonly customIconsService: CustomIconService,
+    private readonly dialogService: MatDialog,
+    private readonly genreService: GenreService,
+    private readonly platformService: PlatformsService
+  ) {}
 
   ngOnInit(): void {
     this.customIconsService.registerPlatformIcons();
+    this.subscriptions.push(
+      this.genreService.getGenres().subscribe(([genreMap, genreArray]) => {
+        this.genresMap = genreMap as Map<string, { id: number; slug: string }>;
+        this.genres = genreArray as Array<any>;
+      })
+    );
+
+    this.platforms = this.platformService.getPlatforms();
     // this.dialogService.open();
   }
 
@@ -73,7 +76,13 @@ export class HeaderComponent implements OnInit {
     });
   }
 
-  trackByFunc(index: number, item: Link): string {
+  public trackByFunc(index: number, item: Link): string {
     return item.path;
   }
+
+  public ngOnDestroy(): void {
+    for (let sub of this.subscriptions) {
+      sub.unsubscribe();
+    }
+  }
 }

src/app/modules/shared-components/shared-components.module.ts

@@ -10,8 +10,10 @@ import { NotificationComponent } from './components/notification/notification.co
 import { CustomIconService } from '@serviceicons/custom-icons.service';
 import { HeroComponent } from './components/hero/hero.component';
 import { BugReportDialogComponent } from './components/bug-report-dialog/bug-report-dialog.component';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
 import { MatInputModule } from '@angular/material/input';
+import { MatSnackBar, MatSnackBarContainer, SimpleSnackBar } from '@angular/material/snack-bar';
 @NgModule({
   declarations: [
     HeaderComponent,
@@ -21,9 +23,17 @@ import { MatInputModule } from '@angular/material/input';
     HeroComponent,
     BugReportDialogComponent
   ],
-  imports: [CommonModule, FingerprintSpinnerModule, RouterModule, MaterialModule, FormsModule, MatInputModule],
-  exports: [HeaderComponent, FooterComponent, LoadingSpinnerComponent],
-  providers: [CustomIconService],
-  entryComponents: [BugReportDialogComponent]
+  imports: [
+    CommonModule,
+    FingerprintSpinnerModule,
+    RouterModule,
+    MaterialModule,
+    FormsModule,
+    MatInputModule,
+    ReactiveFormsModule
+  ],
+  exports: [HeaderComponent, FooterComponent, LoadingSpinnerComponent, FormsModule, ReactiveFormsModule],
+  providers: [CustomIconService, MatSnackBar],
+  entryComponents: [BugReportDialogComponent, MatSnackBarContainer, SimpleSnackBar]
 })
 export class SharedComponentsModule {}

src/app/modules/shared/services/games/games.service.ts

@@ -9,7 +9,18 @@ import { map } from 'rxjs/operators';
   providedIn: 'root'
 })
 export class GamesService {
-  private readonly resourcePath: string = `${environment.apiUrl}/games`;
+  private resourcePath: string = `${environment.apiUrl}/games`;
+
+  private readonly genreMappings = new Map<string, number>([
+    ['action', 4],
+    ['strategy', 10],
+    ['role-playing-games-rpg', 5],
+    ['shooter', 2],
+    ['adventure', 3],
+    ['puzzle', 7],
+    ['racing', 1],
+    ['sports', 15]
+  ]);
 
   constructor(private readonly http: HttpClient) {}
 
@@ -25,7 +36,16 @@ export class GamesService {
     return this.http.get<Game>(`${this.resourcePath}/${gameSlug}`);
   }
 
-  public getGamesByPlatform(platform: string) {}
+  public getGamesByPlatform(platform: string) {
+    this.resourcePath += '?';
+    return this.http.get<{ results: Game[] }>(this.resourcePath).pipe(map(response => response.results));
+  }
 
-  public getGamesByGenre(genre: string) {}
+  public getGamesByGenre(genre: string) {
+    const genreId: number = this.genreMappings.get(genre);
+
+    return this.http
+      .get<{ results: Game[] }>(`${this.resourcePath}?genres=${genreId}`)
+      .pipe(map(response => response.results));
+  }
 }