Add select and lazyload game

- move notfound to components 
- update specs

src/app/app.module.ts

@@ -9,7 +9,6 @@ import { StoreModule } from '@ngrx/store'
 import { StoreRouterConnectingModule, RouterStateSerializer } from '@ngrx/router-store'
 
 import { CoreModule } from './core/core.module'
-import { FridayModule } from './friday/friday.module'
 
 import { AppComponent } from './core/containers'
 
@@ -22,10 +21,12 @@ import { environment } from '../environments/environment'
 @NgModule({
   bootstrap: [ AppComponent ],
   imports: [
+    // Angular
     BrowserModule,
     HttpClientModule,
     RouterModule.forRoot(routes),
 
+    // Ngrx
     EffectsModule.forRoot(fromStore.coreEffects),
     StoreModule.forRoot(fromStore.reducers, { metaReducers: fromStore.metaReducers }),
     // DevTools Instrumentation must be imported after importing StoreModule
@@ -35,8 +36,8 @@ import { environment } from '../environments/environment'
     }),
     StoreRouterConnectingModule.forRoot({ stateKey: 'router' }),
 
+    // h82
     CoreModule.forRoot(),
-    FridayModule,
   ],
   providers: [
     {

src/app/app.routes.ts

@@ -2,7 +2,8 @@
 
 import { Routes } from '@angular/router'
 
-import * as containers from './core/containers'
+import * as fromContainers from './core/containers'
+import * as fromComponents from './core/components'
 
 
 export const routes: Routes = [
@@ -13,14 +14,18 @@ export const routes: Routes = [
   },
   {
     path: 'login',
-    component: containers.LoginComponent,
+    component: fromContainers.LoginComponent,
   },
   {
     path: 'games',
-    component: containers.GamesComponent,
+    component: fromContainers.GamesComponent,
+  },
+  {
+    path: 'friday',
+    loadChildren: './friday/friday.module#FridayModule',
   },
   {
     path: '**',
-    component: containers.NotFoundComponent,
+    component: fromComponents.NotFoundComponent,
   },
 ]

src/app/core/components/index.ts

@@ -1,7 +1,10 @@
 import { LayoutComponent } from './layout/layout.component'
+import { NotFoundComponent } from './not-found/not-found.component'
 
 export const components: any[] = [
   LayoutComponent,
+  NotFoundComponent,
 ]
 
 export * from './layout/layout.component'
+export * from './not-found/not-found.component'

src/app/core/components/layout/__snapshots__/layout.component.spec.ts.snap

@@ -1,12 +1,57 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`LayoutComponent should match snapshot 1`] = `
-<app-layout>
-  <header /><main>
-     --/ router-outlet -- 
+<app-layout
+  store={[Function Store]}
+  user$={[Function Store]}
+>
+  <header
+    class="header"
+  >
+    <div
+      class="left"
+    >
+      <h1
+        class="title"
+      >
+        
+      </h1>
+      <p>
+        
+      </p>
+    </div>
+    <div
+      class="center"
+    >
+      <a
+        href="/games"
+        ng-reflect-router-link="/games"
+        ng-reflect-router-link-active="active"
+        routerlink="/games"
+        routerlinkactive="active"
+      >
+        Games
+      </a>
+    </div>
+    <div
+      class="right"
+    >
+      
+      <a
+        href="/login"
+        ng-reflect-router-link="/login"
+        ng-reflect-router-link-active="active"
+        routerlink="/login"
+        routerlinkactive="active"
+      >
+        Login
+      </a>
+      
+    </div>
+  </header><main
+    class="main"
+  >
     <router-outlet />
-     -- router-outlet /--
-  
   </main>
 </app-layout>
 `;

src/app/core/components/layout/layout.component.html

@@ -5,12 +5,12 @@ <h1 class="title">{{ title }}</h1>
   </div>
 
   <div class="center">
-    <a routerLink="/" routerLinkActive="active">Home</a>
+    <!-- <a routerLink="/" routerLinkActive="active">Home</a> -->
     <a routerLink="/games" routerLinkActive="active">Games</a>
   </div>
 
   <div class="right">
-    <ng-container *ngIf="user$ | async as user; else login">
+    <ng-container *ngIf="(user$ | async) as user; else login">
       {{ user.name }}
       <button (click)="logout()" class="button -warning">Logout</button>
     </ng-container>

src/app/core/components/layout/layout.component.spec.ts

@@ -1,9 +1,12 @@
 import { NO_ERRORS_SCHEMA } from '@angular/core'
 import { TestBed, async, ComponentFixture } from '@angular/core/testing'
 import { RouterTestingModule } from '@angular/router/testing'
+import { StoreModule } from '@ngrx/store'
 
 import { LayoutComponent } from './layout.component'
 
+import * as fromRoot from '../../../store'
+
 
 describe('LayoutComponent', () => {
   let component: LayoutComponent
@@ -12,7 +15,10 @@ describe('LayoutComponent', () => {
   beforeEach(async(() => {
     TestBed.configureCompiler({ preserveWhitespaces: false } as any).configureTestingModule({
       declarations: [ LayoutComponent ],
-      imports: [ RouterTestingModule ],
+      imports: [
+        RouterTestingModule,
+        StoreModule.forRoot(fromRoot.reducers)
+      ],
       schemas: [ NO_ERRORS_SCHEMA ],
     })
     .compileComponents()

src/app/core/containers/games/__snapshots__/games.component.spec.ts.snap

@@ -2,13 +2,29 @@
 
 exports[`GamesComponent should match snapshot 1`] = `
 <app-games
-  games$="undefined"
-  gamesService={[Function Object]}
+  games$={[Function Store]}
+  store={[Function Store]}
+  user$={[Function Store]}
 >
-  <h2>
-    Game list
-  </h2><ul>
-    
-  </ul>
+  <section
+    class="container"
+  >
+    <h1
+      class="page-title"
+    >
+      Choose game:
+    </h1>
+    <ul
+      class="list"
+    >
+      
+      <li
+        class="item"
+      >
+         Please login if you want to play a game. 
+      </li>
+      
+    </ul>
+  </section>
 </app-games>
 `;

src/app/core/containers/games/games.component.html

@@ -1,9 +1,14 @@
 <section class="container">
-  <h1 class="page-title">Game list</h1>
+  <h1 class="page-title">Choose game:</h1>
 
   <ul class="list">
-    <li *ngFor="let game of (games$ | async)"(click)="selectGame(game.id)" class="item">
-      {{ game.name }}
+    <li *ngIf="!(user$ | async)" class="item">
+      Please login if you want to play a game.
+    </li>
+
+    <li *ngFor="let game of (games$ | async)" class="item">
+      <button (click)="selectGame(game.name)" class="button" [disabled]="!game.accessible || !(user$ | async)">{{ game.name }}</button>
+      <span *ngIf="(user$ | async) && !game.accessible">(coming soon)</span>
     </li>
   </ul>
 </section>

src/app/core/containers/games/games.component.spec.ts

@@ -1,9 +1,12 @@
 import { NO_ERRORS_SCHEMA } from '@angular/core'
 import { async, ComponentFixture, TestBed } from '@angular/core/testing'
+import { StoreModule } from '@ngrx/store'
 
 import { GamesComponent } from './games.component'
 import { GamesService } from '../../services'
 
+import * as fromRoot from '../../../store'
+
 
 describe('GamesComponent', () => {
   let component: GamesComponent
@@ -12,14 +15,7 @@ describe('GamesComponent', () => {
   beforeEach(async(() => {
     TestBed.configureCompiler({ preserveWhitespaces: false } as any).configureTestingModule({
       declarations: [ GamesComponent ],
-      providers: [
-        {
-          provide: GamesService,
-          useValue: {
-            getGames: jest.fn()
-          }
-        }
-      ],
+      imports: [ StoreModule.forRoot(fromRoot.reducers) ],
       schemas: [ NO_ERRORS_SCHEMA ],
     })
     .compileComponents()

src/app/core/containers/games/games.component.ts

@@ -15,6 +15,7 @@ import * as fromRoot from '../../../store'
 })
 export class GamesComponent implements OnInit {
   games$ = this.store.pipe(select(fromRoot.getGames))
+  user$ = this.store.pipe(select(fromRoot.getCurrentUser))
 
   constructor(private store: Store<fromRoot.State>) {
     this.store.pipe(
@@ -27,4 +28,8 @@ export class GamesComponent implements OnInit {
 
   ngOnInit() {
   }
+
+  selectGame(name: string) {
+    this.store.dispatch(new fromRoot.SelectGame(name))
+  }
 }

src/app/core/containers/header/__snapshots__/header.component.spec.ts.snap

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`HeaderComponent should match snapshot 1`] = `
+<app-header>
+  <p>
+     header works!
+  
+  </p>
+</app-header>
+`;

src/app/core/containers/header/header.component.html

@@ -0,0 +1,3 @@
+<p>
+  header works!
+</p>

src/app/core/containers/header/header.component.spec.ts

@@ -0,0 +1,32 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core'
+import { async, ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { HeaderComponent } from './header.component'
+
+
+describe('HeaderComponent', () => {
+  let component: HeaderComponent
+  let fixture: ComponentFixture<HeaderComponent>
+
+  beforeEach(async(() => {
+    TestBed.configureCompiler({ preserveWhitespaces: false } as any).configureTestingModule({
+      declarations: [ HeaderComponent ],
+      schemas: [ NO_ERRORS_SCHEMA ],
+    })
+    .compileComponents()
+  }))
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeaderComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create component', () => {
+    expect(component).toBeTruthy()
+  })
+
+  it('should match snapshot', () => {
+    expect(fixture).toMatchSnapshot()
+  })
+})

src/app/core/containers/header/header.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core'
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.sass']
+})
+export class HeaderComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/core/containers/index.ts

@@ -1,16 +1,16 @@
 import { AppComponent } from './app/app.component'
 import { GamesComponent } from './games/games.component'
+import { HeaderComponent } from './header/header.component'
 import { LoginComponent } from './login/login.component'
-import { NotFoundComponent } from './not-found/not-found.component'
 
 export const containers: any[] = [
   AppComponent,
   GamesComponent,
+  HeaderComponent,
   LoginComponent,
-  NotFoundComponent,
 ]
 
 export * from './app/app.component'
 export * from './games/games.component'
+export * from './header/header.component'
 export * from './login/login.component'
-export * from './not-found/not-found.component'

src/app/core/containers/login/__snapshots__/login.component.spec.ts.snap

@@ -2,13 +2,22 @@
 
 exports[`LoginComponent should match snapshot 1`] = `
 <app-login
-  userService={[Function Object]}
-  users$="undefined"
+  store={[Function Store]}
+  users$={[Function Store]}
 >
-  <h2>
-    User list
-  </h2><ul>
-    
-  </ul>
+  <section
+    class="container"
+  >
+    <h1
+      class="page-title"
+    >
+      Choose player:
+    </h1>
+    <ul
+      class="list"
+    >
+      
+    </ul>
+  </section>
 </app-login>
 `;