Add delete game

src/app/core/containers/login/login.component.sass

@@ -1,4 +1 @@
 @import '~styles/variables'
-
-.item
-  margin-bottom: $spacing-sm

src/app/core/store/effects/games.effects.ts

@@ -25,9 +25,9 @@ export class GamesEffects {
         .getGames()
         .pipe(
           map(games => new gamesActions.LoadGamesSuccess(games)),
-          catchError(error => of(new gamesActions.LoadGamesFail(error)))
+          catchError(error => of(new gamesActions.LoadGamesFail(error))),
         )
-    })
+    }),
   )
 
   @Effect({ dispatch: false })
@@ -37,6 +37,6 @@ export class GamesEffects {
     tap(gameName => {
       const url = '/' + gameName.toLocaleLowerCase()
       this.router.navigate([ url ])
-    })
+    }),
   )
 }

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

@@ -5,12 +5,23 @@ <h1>Welcome to Friday, the game!</h1>
     <p>[ current user state ]</p>
     <pre class="code">{{ user | json }}</pre>
 
-    <p>Choose your game from the list or start a new one:</p>
+    <header>
+      <p>Choose your game from the list or start a new one:</p>
+      <button class="button -warning" (click)="createGame(user.id)">Create a new game</button>
+    </header>
 
-    <p>[ games state ]</p>
-    <pre class="code">{{ gamesState$ | async | json }}</pre>
+    <ul class="list">
+      <li *ngFor="let game of (games$ | async)" class="item">
+        <button (click)="selectGame(game.id)" class="button">Play this game: #{{ game.id }}</button>
+
+        started: {{ game.startDate | date:'medium' }}
+
+        <button class="button -danger" (click)="deleteGame(game.id)">
+          <app-icon name="trash"></app-icon>
+        </button>
+      </li>
+    </ul>
 
-    <button class="button" (click)="createGame(user.id)">Create a new game</button>
   </ng-container>
 
   <ng-template #login>

src/app/friday/containers/games/games.component.sass

@@ -0,0 +1,4 @@
+@import '~styles/variables'
+
+header
+  margin-bottom: $spacing-sm

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

@@ -4,23 +4,24 @@ import { select, Store } from '@ngrx/store'
 import { take, filter, withLatestFrom } from 'rxjs/operators'
 
 import * as fromStore from '../../store'
+
 import { FridayGame } from '../../models/friday-game.model'
 import { User } from '../../../core/models/user.interface'
 
 
 @Component({
   selector: 'app-fr-games',
   templateUrl: './games.component.html',
-  styleUrls: ['./games.component.sass']
+  styleUrls: ['./games.component.sass'],
 })
 export class GamesComponent implements OnInit {
-  gamesState$ = this.store.pipe(select(fromStore.getGamesState))
+  games$ = this.store.pipe(select(fromStore.getGames))
   user: User
 
   constructor(private store: Store<fromStore.State>) {
     this.store.pipe(select(fromStore.getCurrentUser),
       take(1),
-      withLatestFrom(this.store.pipe(select(fromStore.getGamesLoaded)))
+      withLatestFrom(this.store.pipe(select(fromStore.getGamesLoaded))),
     ).subscribe(([user, loaded]) => {
       this.user = user
       if (user && !loaded) this.store.dispatch(new fromStore.LoadGames(this.user.id))
@@ -34,6 +35,10 @@ export class GamesComponent implements OnInit {
     this.store.dispatch(new fromStore.CreateGame(new FridayGame(userId)))
   }
 
+  deleteGame(gameId) {
+    this.store.dispatch(new fromStore.DeleteGame(gameId))
+  }
+
   selectGame(event) {
     console.log('let\'s select a game')
   }

src/app/friday/services/games.service.ts

@@ -12,7 +12,7 @@ import { FridayGame } from '../models/friday-game.model'
 @Injectable()
 export class GamesService {
   constructor(
-    private http: HttpClient
+    private http: HttpClient,
   ) { }
 
   getGamesByUser(userId: number) {
@@ -25,6 +25,11 @@ export class GamesService {
     return this.http.post(url, game) as Observable<FridayGame>
   }
 
+  deleteGame(gameId: number) {
+    const url = environment.api.friday.games + '/' + gameId
+    return this.http.delete(url) as Observable<number>
+  }
+
   getGameDetails() {
   }
 }

src/app/friday/store/actions/games.actions.ts

@@ -1,4 +1,4 @@
-import { HttpErrorResponse } from '@angular/common/http';
+import { HttpErrorResponse } from '@angular/common/http'
 import { Action } from '@ngrx/store'
 
 import { FridayGame } from '../../models/friday-game.model'
@@ -10,8 +10,12 @@ export type UserId = number
 
 // Create game
 export const CREATE_GAME = '[Friday - Games] Create Game'
-export const CREATE_GAME_FAIL = '[Friday - Games] Create Games Fail'
-export const CREATE_GAME_SUCCESS = '[Friday - Games] Create Games Success'
+export const CREATE_GAME_FAIL = '[Friday - Games] Create Game Fail'
+export const CREATE_GAME_SUCCESS = '[Friday - Games] Create Game Success'
+// Delete game
+export const DELETE_GAME = '[Friday - Games] Delete Game'
+export const DELETE_GAME_FAIL = '[Friday - Games] Delete Game Fail'
+export const DELETE_GAME_SUCCESS = '[Friday - Games] Delete Game Success'
 // Load games
 export const LOAD_GAMES = '[Friday - Games] Load Games'
 export const LOAD_GAMES_FAIL = '[Friday - Games] Load Games Fail'
@@ -34,6 +38,19 @@ export class CreateGameSuccess implements Action {
   constructor(public payload: FridayGame) {}
 }
 
+export class DeleteGame implements Action {
+  readonly type = DELETE_GAME
+  constructor(public payload: GameId) {}
+}
+export class DeleteGameFail implements Action {
+  readonly type = DELETE_GAME_FAIL
+  constructor(public payload: GameError) {}
+}
+export class DeleteGameSuccess implements Action {
+  readonly type = DELETE_GAME_SUCCESS
+  constructor(public payload: GameId) {}
+}
+
 export class LoadGames implements Action {
   readonly type = LOAD_GAMES
   constructor(public payload: UserId) {}
@@ -58,6 +75,9 @@ export type GamesAction =
   | CreateGame
   | CreateGameFail
   | CreateGameSuccess
+  | DeleteGame
+  | DeleteGameFail
+  | DeleteGameSuccess
   | LoadGames
   | LoadGamesFail
   | LoadGamesSuccess

src/app/friday/store/effects/games.effects.ts

@@ -28,7 +28,21 @@ export class GamesEffects {
           map(createdGame => new gamesActions.CreateGameSuccess(createdGame)),
           catchError(error => of(new gamesActions.CreateGameFail(error))),
         )
-    })
+    }),
+  )
+
+  @Effect()
+  deleteGame$ = this.actions$.pipe(
+    ofType(gamesActions.DELETE_GAME),
+    map((action: gamesActions.DeleteGame) => action.payload),
+    mergeMap((gameId) => {
+      return this.gamesService
+        .deleteGame(gameId)
+        .pipe(
+          map(createdGame => new gamesActions.DeleteGameSuccess(gameId)),
+          catchError(error => of(new gamesActions.DeleteGameFail(error))),
+        )
+    }),
   )
 
   @Effect()
@@ -42,7 +56,7 @@ export class GamesEffects {
           map(games => new gamesActions.LoadGamesSuccess(games)),
           catchError(error => of(new gamesActions.LoadGamesFail(error))),
         )
-    })
+    }),
   )
 
   @Effect({ dispatch: false })
@@ -52,6 +66,6 @@ export class GamesEffects {
     tap(gameId => {
       const url = '/friday/' + gameId
       this.router.navigate([ url ])
-    })
+    }),
   )
 }

src/app/friday/store/reducers/games.reducer.ts

@@ -23,82 +23,115 @@ const initialState: State = {
   loading: false,
 }
 
-// export function reducer(state: State = initialState, action: fromGames.GamesAction): State {
-export function reducer(state: State = initialState, action: any): State {
+export function reducer(state: State = initialState, action: fromGames.GamesAction): State {
   switch (action.type) {
-    case fromGames.LOAD_GAMES: {
+    case fromGames.CREATE_GAME: {
       return {
         ...state,
         loading: true,
       }
     }
 
-    case fromGames.LOAD_GAMES_FAIL: {
+    case fromGames.CREATE_GAME_FAIL: {
       return {
         ...state,
         error: action.payload,
         loading: false,
-        loaded: false,
       }
     }
 
-    case fromGames.LOAD_GAMES_SUCCESS: {
-      const games = action.payload
+    case fromGames.CREATE_GAME_SUCCESS: {
+      const game = action.payload
 
-      const entities = games.reduce((newEntities: GameEntities, game: FridayGame) => {
-          return {
-            ...newEntities,
-            [game.id]: game,
-          }
-        }, { ...state.entities }
-      )
+      const entities = {
+        ...state.entities,
+        [game.id]: game,
+      }
 
-      const ids = games.map(game => game.id)
+      const ids = [
+        ...state.ids,
+        game.id,
+      ]
 
       return {
         ...state,
         entities,
         error: null,
         ids,
         loading: false,
-        loaded: true,
       }
     }
 
-    case fromGames.CREATE_GAME: {
+    case fromGames.DELETE_GAME: {
       return {
         ...state,
         loading: true,
       }
     }
 
-    case fromGames.CREATE_GAME_FAIL: {
+    case fromGames.DELETE_GAME_FAIL: {
       return {
         ...state,
         error: action.payload,
         loading: false,
       }
     }
 
-    case fromGames.CREATE_GAME_SUCCESS: {
-      const game = action.payload
+    case fromGames.DELETE_GAME_SUCCESS: {
+      const gameId = action.payload
 
-      const entities = {
-        ...state.entities,
-        [game.id]: game,
-      }
+      const {
+        [gameId]: deleted,
+        ...entities,
+      } = state.entities
 
-      const ids = [
-        ...state.ids,
-        game.id,
-      ]
+      const ids = state.ids.filter(id => id !== gameId)
 
       return {
         ...state,
+        entities,
         error: null,
+        ids,
+        loading: false,
+      }
+    }
+
+    case fromGames.LOAD_GAMES: {
+      return {
+        ...state,
+        loading: true,
+      }
+    }
+
+    case fromGames.LOAD_GAMES_FAIL: {
+      return {
+        ...state,
+        error: action.payload,
+        loading: false,
+        loaded: false,
+      }
+    }
+
+    case fromGames.LOAD_GAMES_SUCCESS: {
+      const games = action.payload
+
+      const entities = games.reduce((newEntities: GameEntities, game: FridayGame) => {
+          return {
+            ...newEntities,
+            [game.id]: game,
+          }
+        }, { ...state.entities },
+      )
+
+      const ids = games.map(game => game.id)
+
+      return {
+        ...state,
         entities,
+        error: null,
         ids,
         loading: false,
+        loaded: true,
       }
     }
 

src/styles/_buttons.sass

@@ -3,18 +3,22 @@
   color: $white
   background: $blue
 
-  &:enabled
-    &:hover,
-    &:focus
-      background: darken($blue, 8%)
+  =color($color, $darken-percentage)
+    background: $color
+
+    &:enabled:hover,
+    &:enabled:focus
+      background: darken($color, $darken-percentage)
+
+  &:enabled:hover,
+  &:enabled:focus
+    background: darken($blue, 8%)
 
   &.-warning
-    background: $yellow
+    +color($yellow, 12%)
 
-    &:enabled
-      &:hover,
-      &:focus
-        background: darken($yellow, 12%)
+  &.-danger
+    +color($orange, 20%)
 
   &:disabled
     background: $bg-disabled

src/styles/_variables.sass

@@ -16,6 +16,7 @@ $font-size-xs: 1.5em
 $blue: #00bfff
 $darkblue: #373496
 $yellow: #ffdb99
+$orange: #ff6347
 $white: #ffffff
 
 $gray-darker-1: #333333