#3 Error handling

src/api/ormconfig.json

@@ -1,6 +1,6 @@
 {
   "type": "mysql",
-  "host": "localhost",
+  "host": "mysql",
   "port": 3306,
   "username": "root",
   "password": "test",

src/api/src/teams/teams.service.ts

@@ -1,4 +1,4 @@
-import { Injectable, Inject } from '@nestjs/common';
+import { Injectable, Inject, BadRequestException } from '@nestjs/common';
 import { InjectRepository } from '@nestjs/typeorm';
 import { Repository } from 'typeorm';
 import { Team } from './team.entity';
@@ -52,8 +52,13 @@ export class TeamsService {
       where: [{ email: email }],
     });
 
-    userToAdd.team = actionUser.team;
-
-    return this.usersRepository.save(userToAdd);
+    if (!!userToAdd && !userToAdd.team) {
+      userToAdd.team = actionUser.team;
+      return this.usersRepository.save(userToAdd);
+    } else {
+      throw new BadRequestException(
+        "user isn't registered or already member of a team",
+      );
+    }
   }
 }

src/frontend/src/app/me/effects/me.effects.ts

@@ -99,7 +99,7 @@ export class MeEffects {
         map(result => {
           return new AddEmailToTeamSucceededAction(result);
         }),
-        catchError(err => of(new AddEmailToTeamFailedAction(err.message)))
+        catchError(err => of(new AddEmailToTeamFailedAction(err.error)))
       )
     )
   );

src/frontend/src/app/me/overview/overview.component.html

@@ -11,7 +11,13 @@ <h3>Teammitglied hinzufügen</h3>
       <label for="addEmail">E-Mail</label>
       <input id="addEmail" type="email" formControlName="email" required />
     </fieldset>
-    <input type="submit" class="btn" [disabled]="!addMemberForm.valid" value="Hinzufügen" />
+    <input type="submit" class="btn" [disabled]="!addMemberForm.valid || (addEmailToTeamInProgress$ | async)"
+      value="Hinzufügen" />
+    <p *ngIf="(addEmailToTeamError$ | async)?.statusCode === 400" class="error">Das Mitglied ist nicht registriert oder
+      spielt bereits in einem Team.</p>
+    <p *ngIf="(addEmailToTeamError$ | async) && (addEmailToTeamError$ | async).statusCode !== 400" class="error">Ein
+      unbekannter Fehler ist aufgetreten:
+      {{ (addEmailToTeamError$ | async).message }}</p>
   </form>
   <hr />
   <h3>Du hast gespielt?</h3>

src/frontend/src/app/me/overview/overview.component.scss

@@ -0,0 +1,5 @@
+@import '../../../scss/settings';
+
+p.error {
+  color: $cl-error;
+}

src/frontend/src/app/me/overview/overview.component.ts

@@ -1,6 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { State, selectAuthUser, selectMeTeams } from 'src/app/reducers';
+import {
+  State,
+  selectAuthUser,
+  selectMeTeams,
+  selectAddByEmailToTeamInProgress,
+  selectAddByEmailToTeamError,
+} from 'src/app/reducers';
 import { LoadTeamsAction, AddEmailToTeamAction } from '../actions/team.actions';
 import { FormGroup, FormControl, Validators } from '@angular/forms';
 
@@ -12,6 +18,8 @@ import { FormGroup, FormControl, Validators } from '@angular/forms';
 export class OverviewComponent implements OnInit {
   user$;
   teams$;
+  addEmailToTeamInProgress$;
+  addEmailToTeamError$;
 
   addMemberForm = new FormGroup({
     email: new FormControl('', [Validators.email]),
@@ -22,6 +30,10 @@ export class OverviewComponent implements OnInit {
   ngOnInit() {
     this.user$ = this._store.select(selectAuthUser);
     this.teams$ = this._store.select(selectMeTeams);
+    this.addEmailToTeamInProgress$ = this._store.select(
+      selectAddByEmailToTeamInProgress
+    );
+    this.addEmailToTeamError$ = this._store.select(selectAddByEmailToTeamError);
 
     this._store.dispatch(new LoadTeamsAction());
   }

src/frontend/src/app/reducers/index.ts

@@ -117,3 +117,13 @@ export const selectSaveResultsError = createSelector(
   selectResults,
   (state: ResultsState) => state.saveResultsError
 );
+
+export const selectAddByEmailToTeamInProgress = createSelector(
+  selectMe,
+  (state: MeState) => state.addByEmailToTeamInProgress
+);
+
+export const selectAddByEmailToTeamError = createSelector(
+  selectMe,
+  (state: MeState) => state.addByEmailToTeamError
+);