Merge pull request #5 from CerealKiller97/dev

Working on services

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

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Title } from '@angular/platform-browser';
-import { LoadingService } from 'src/app/modules/shared/loading.service';
-import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
+import { LoadingService } from '../../../shared/services/loading/loading.service';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-contact',

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

@@ -1,6 +1,19 @@
-<mat-grid-list cols="2" rowHeight="2:1">
+<mat-grid-list cols="1" rowHeight="2:1">
   <mat-grid-tile>
     <h1 class="light-text">Welcome to VideoGamer</h1>
+    <h5>Explore gaming world.</h5>
+    <mat-form-field>
+      <input matInput placeholder="label" value="value">
+    </mat-form-field>
+    <mat-form-field>
+      <mat-label>Cars</mat-label>
+      <select matNativeControl required>
+        <option value="volvo">Volvo</option>
+        <option value="saab">Saab</option>
+        <option value="mercedes">Mercedes</option>
+        <option value="audi">Audi</option>
+      </select>
+    </mat-form-field>
+    <button mat-raised-button color="primary" (click)="onClick();">Explore</button>
   </mat-grid-tile>
-  <mat-grid-tile>2</mat-grid-tile>
 </mat-grid-list>

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

@@ -1,16 +1,46 @@
 import { Component, OnInit } from '@angular/core';
 import { Title } from '@angular/platform-browser';
-import { LoadingService } from 'src/app/modules/shared/loading.service';
+import { LoadingService } from '@service/loading/loading.service';
+import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
+import { TeamsService } from '@serviceteams/teams.service';
+import { Subscription } from 'rxjs';
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.css']
 })
 export class HomeComponent implements OnInit {
-  constructor(private readonly titleService: Title, private readonly loadingService: LoadingService) {}
+  private subscription: Subscription;
 
-  ngOnInit() {
+  constructor(
+    private readonly titleService: Title,
+    private readonly loadingService: LoadingService,
+    private readonly snackBar: MatSnackBar,
+    private readonly teamsService: TeamsService
+  ) {}
+
+  ngOnInit(): void {
     this.loadingService.setLoading(true);
     this.titleService.setTitle('VideoGamer | Home');
+    this.openSnackBar();
+    this.subscription = this.teamsService.find(5).subscribe(data => {
+      console.log(data);
+    });
+  }
+
+  openSnackBar(): void {
+    const options: MatSnackBarConfig = {
+      direction: 'ltr',
+      duration: 4000,
+      horizontalPosition: 'end',
+      panelClass: ['example-pizza-party']
+    };
+
+    this.snackBar.open('Welcome to the best NBA analytics app. 👋', 'Dismiss', options);
+    // this.snackBar.openFromComponent(NotificationComponent, options);
+  }
+
+  onClick(): void {
+    this.openSnackBar();
   }
 }

src/app/modules/home/home.module.ts

@@ -3,6 +3,12 @@ import { CommonModule } from '@angular/common';
 import { HomeComponent } from './components/home/home.component';
 import { RouterModule, Routes } from '@angular/router';
 import { MatGridListModule } from '@angular/material/grid-list';
+import { MatButtonModule } from '@angular/material/button';
+import { MatInputModule } from '@angular/material/input';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { NotificationComponent } from '../shared-components/components/notification/notification.component';
+import { SharedModule } from '../shared/shared.module';
+import { TeamsService } from '@serviceteams/teams.service';
 
 const routes: Routes = [
   {
@@ -14,7 +20,25 @@ const routes: Routes = [
 
 @NgModule({
   declarations: [HomeComponent],
-  imports: [CommonModule, RouterModule.forChild(routes), MatGridListModule],
-  exports: [HomeComponent, RouterModule, MatGridListModule]
+  imports: [
+    CommonModule,
+    RouterModule.forChild(routes),
+    MatGridListModule,
+    MatButtonModule,
+    MatInputModule,
+    MatSnackBarModule,
+    SharedModule
+  ],
+  exports: [
+    HomeComponent,
+    RouterModule,
+    MatGridListModule,
+    MatButtonModule,
+    MatInputModule,
+    MatSnackBarModule,
+    SharedModule
+  ],
+  entryComponents: [NotificationComponent],
+  providers: [TeamsService]
 })
 export class HomeModule {}

src/app/modules/index.ts

@@ -1,3 +1,8 @@
 import { VideoGamerLayoutModule } from './layouts/video-gamer-layout/video-gamer-layout.module';
+import { HomeModule } from './home/home.module';
+import { ContactModule } from './contact/contact.module';
+import { SharedModule } from './shared/shared.module';
+import { SharedComponentsModule } from './shared-components/shared-components.module';
+import { MaterialModule } from './shared-components/material/material.module';
 
-export { VideoGamerLayoutModule };
+export { VideoGamerLayoutModule, HomeModule, ContactModule, SharedModule, SharedComponentsModule, MaterialModule };

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

@@ -0,0 +1,3 @@
+<span class="example-pizza-party">
+  {{ message }}
+</span>

src/app/modules/shared-components/components/notification/notification.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotificationComponent } from './notification.component';
+
+describe('NotificationComponent', () => {
+  let component: NotificationComponent;
+  let fixture: ComponentFixture<NotificationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NotificationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NotificationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,24 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+export enum Color {
+  SUCCESS = '#00ff00',
+  ERROR = 'red',
+  WARNING = 'yellow',
+  INFO = 'cyan'
+}
+
+@Component({
+  selector: 'app-notification',
+  templateUrl: './notification.component.html',
+  styleUrls: ['./notification.component.css']
+})
+export class NotificationComponent implements OnInit {
+  @Input()
+  message: string;
+  @Input()
+  color: string;
+
+  constructor() {}
+
+  ngOnInit() {}
+}

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

@@ -6,9 +6,10 @@ import { LoadingSpinnerComponent } from './components/loading-spinner/loading-sp
 import { FingerprintSpinnerModule } from 'angular-epic-spinners';
 import { RouterModule } from '@angular/router';
 import { MaterialModule } from './material/material.module';
+import { NotificationComponent } from './components/notification/notification.component';
 
 @NgModule({
-  declarations: [HeaderComponent, FooterComponent, LoadingSpinnerComponent],
+  declarations: [HeaderComponent, FooterComponent, LoadingSpinnerComponent, NotificationComponent],
   imports: [CommonModule, FingerprintSpinnerModule, RouterModule, MaterialModule],
   exports: [HeaderComponent, FooterComponent, LoadingSpinnerComponent]
 })

src/app/modules/shared/models/Game.ts

@@ -0,0 +1,3 @@
+export interface Game {
+
+}

src/app/modules/shared/models/Player.ts

@@ -0,0 +1,7 @@
+export interface Player {
+  id: number;
+  position: string;
+  height: string;
+  weight: string;
+  club: string;
+}

src/app/modules/shared/models/Team.ts

@@ -0,0 +1,9 @@
+export interface Team {
+  id: number;
+  abbreviation: string;
+  city: string;
+  conference: string;
+  division: string;
+  fullName: string;
+  name: string;
+}

src/app/modules/shared/services/ApiHttpHeaders.ts

@@ -0,0 +1,11 @@
+import { HttpHeaders } from '@angular/common/http';
+import { environment } from '../../../../environments/environment';
+
+export const apiHttpHeaders = {
+  headers: new HttpHeaders({
+    Accept: 'application/json',
+    'Content-Type': 'application/json',
+    'x-rapidapi-host': `${environment.xRapidApiHost}`,
+    'x-rapidapi-key': `${environment.xRapidApiKey}`
+  })
+};

src/app/modules/shared/services/IApiResource.ts

@@ -0,0 +1,7 @@
+import { Observable } from 'rxjs';
+
+export interface IApiResource<T = any> {
+  readonly resourcePath: string;
+  all(): Observable<T[]>;
+  find(id: number): Observable<T>;
+}

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

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { GamesService } from './games.service';
+
+describe('GamesService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: GamesService = TestBed.get(GamesService);
+    expect(service).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { IApiResource } from '@service/IApiResource';
+import { Game } from '@model/Game';
+import { Observable } from 'rxjs';
+import { environment } from '../../../../../environments/environment';
+import { apiHttpHeaders } from '@serviceApiHttpHeaders';
+import { map } from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class GamesService implements IApiResource<Game> {
+  public readonly resourcePath: string = `${environment.apiUrl}/games`;
+
+  constructor(private readonly http: HttpClient) {}
+
+  public all(): Observable<Game[]> {
+    return this.http.get<{ data: Game[] }>(this.resourcePath, apiHttpHeaders).pipe(
+      map(response => {
+        return response.data;
+      })
+    );
+  }
+
+  public find(id: number): Observable<Game> {
+    return this.http.get<Game>(`${this.resourcePath}/${id}`, apiHttpHeaders);
+  }
+}

src/app/modules/shared/services/index.ts

@@ -0,0 +1,5 @@
+import { GamesService } from '@service/games/games.service';
+import { LoadingService } from '@service/loading/loading.service';
+import { TeamsService } from '@service/teams/teams.service';
+
+export { GamesService, LoadingService, TeamsService };

src/app/modules/shared/services/teams/teams.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { TeamsService } from './teams.service';
+
+describe('TeamsService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: TeamsService = TestBed.get(TeamsService);
+    expect(service).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+import { environment } from 'environments/environment';
+import { Team } from '@model/Team';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { IApiResource } from '@serviceIApiResource';
+import { HttpClient } from '@angular/common/http';
+import { apiHttpHeaders } from '@service/ApiHttpHeaders';
+@Injectable({
+  providedIn: 'root'
+})
+export class TeamsService implements  IApiResource<Team> {
+  public readonly resourcePath: string = `${environment.apiUrl}/teams`;
+
+  constructor(private readonly http: HttpClient) {}
+
+  public all(): Observable<Team[]> {
+    return this.http.get<{ data: Team[] }>(this.resourcePath, apiHttpHeaders).pipe(
+        map(response => {
+          return response.data;
+        })
+      );
+    }
+
+    public find(id: number): Observable<Team> {
+      return this.http.get<Team>(`${this.resourcePath}/${id}`, apiHttpHeaders);
+    }
+}

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

@@ -1,8 +1,8 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-
+import { HttpClientModule } from '@angular/common/http';
 @NgModule({
   declarations: [],
-  imports: [CommonModule]
+  imports: [CommonModule, HttpClientModule]
 })
 export class SharedModule {}

src/environments/environment.interface.ts

@@ -1,4 +1,6 @@
 export interface IEnvironment {
   production: boolean;
-  apiKey: string;
+  xRapidApiHost: string;
+  xRapidApiKey: string;
+  apiUrl: string;
 }

src/environments/environment.prod.ts

@@ -2,5 +2,7 @@ import { IEnvironment } from './environment.interface';
 
 export const environment: IEnvironment = {
   production: true,
-  apiKey: ''
+  apiUrl: 'https://free-nba.p.rapidapi.com',
+  xRapidApiKey: 'aolN7ZvMgZmsh4QEr4r3ghUrDjIyp12Y5zejsnbDZaxGht72JT',
+  xRapidApiHost: 'free-nba.p.rapidapi.com'
 };

src/environments/environment.ts

@@ -6,7 +6,9 @@ import { IEnvironment } from './environment.interface';
 
 export const environment: IEnvironment = {
   production: false,
-  apiKey: ''
+  apiUrl: 'https://free-nba.p.rapidapi.com',
+  xRapidApiKey: 'aolN7ZvMgZmsh4QEr4r3ghUrDjIyp12Y5zejsnbDZaxGht72JT',
+  xRapidApiHost: 'free-nba.p.rapidapi.com'
 };
 
 /*