From 665ef65ec0d3c2812949dbf6f1dc26594ec51fcd Mon Sep 17 00:00:00 2001 From: Natalia Gawron Date: Mon, 28 Dec 2020 17:03:53 +0100 Subject: [PATCH] conneted with backend - get user characters list --- .../ClientApp/src/app/app.module.ts | 4 +- .../select-character.component.html | 2 +- .../select-character.component.ts | 88 ++++++------------- .../components/sign-in/sign-in.component.ts | 5 +- .../src/app/store/actions/app.actions.ts | 13 ++- .../src/app/store/reducers/app.reducer.ts | 2 + .../src/services/character.service.ts | 30 +++++++ .../CharacterForLoginViewModel.ts | 7 ++ 8 files changed, 83 insertions(+), 68 deletions(-) create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/services/character.service.ts create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/character-viewmodels/CharacterForLoginViewModel.ts diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts index a61df94..9a1d8a8 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts @@ -26,6 +26,7 @@ import { StoreDevtoolsModule } from '@ngrx/store-devtools'; import {environment} from '../environments/environment'; import {SessionCompanionIconsModule} from './shared/sc-icons/session-companion-icons.module'; import {reducers} from './store/models/app-state.model'; +import {CharacterService} from "../services/character.service"; @NgModule({ declarations: [ @@ -61,7 +62,8 @@ BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }), }) ], providers: [ - UserService + UserService, + CharacterService ], bootstrap: [AppComponent] }) diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.html index fb89f12..69f592c 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.html +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.html @@ -3,7 +3,7 @@
Select character
- + account_circle
{{character.name}}
arrow_forward diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.ts index 6360982..0581f28 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.ts +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.ts @@ -1,83 +1,47 @@ -import { Component } from '@angular/core'; +import {Component, OnInit} from '@angular/core'; import { Router } from '@angular/router'; - -export interface Section { - name: string; - className: string; - level: number; -} +import {first} from "rxjs/operators"; +import {ClearUserId} from "../../store/actions/app.actions"; +import {ErrorResponse} from "../../../types/ErrorResponse"; +import {HttpErrorResponse} from "@angular/common/http"; +import {Store} from "@ngrx/store"; +import {AppState} from "../../store/models/app-state.model"; +import {CharacterService} from "../../../services/character.service"; +import {CharacterForLoginViewModel} from "../../../types/viewmodels/character-viewmodels/CharacterForLoginViewModel"; @Component({ selector: 'app-select-character', templateUrl: './select-character.component.html', styleUrls: ['./select-character.component.css'] }) -export class SelectCharacterComponent { - characters: Section[] = [ - { - name: 'Oweja', - className: 'warrior', - level: 1, - }, - { - name: 'James', - className: 'warrior', - level: 2, - }, - { - name: 'Legolas', - className: 'warrior', - level: 3, - }, - { - name: 'Oweja', - className: 'warrior', - level: 1, - }, - { - name: 'James', - className: 'warrior', - level: 2, - }, - { - name: 'Legolas', - className: 'warrior', - level: 3, - }, - { - name: 'Oweja', - className: 'warrior', - level: 1, - }, - { - name: 'James', - className: 'warrior', - level: 2, - }, - { - name: 'Legolas', - className: 'warrior', - level: 3, - } - ]; +export class SelectCharacterComponent implements OnInit { + charactersList: CharacterForLoginViewModel[]; - isExpanded = false; + constructor(private router: Router, private store: Store, private characterService: CharacterService) {} - collapse() { - this.isExpanded = false; + ngOnInit() { + this.getUserCharactersList(); } - toggle() { - this.isExpanded = !this.isExpanded; + getUserCharactersList() { + this.store.select(s => s.appStore.userId).pipe(first()).subscribe((userId) => { + this.characterService.getUserCharactersList(userId).pipe(first()).subscribe((charactersList) => { + this.charactersList = charactersList; + }, (error: ErrorResponse | HttpErrorResponse) => { + if(error instanceof HttpErrorResponse){ + error = error.error as ErrorResponse + } + console.error(error.message) + } ) + }); } - constructor(private router: Router) {} - onCharacterClick(){ this.router.navigate(['player']) } onArrowBackClick(){ + this.store.dispatch(new ClearUserId()) this.router.navigate(['login']) } } diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.ts index 9f2734b..1bf5263 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.ts +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.ts @@ -9,6 +9,7 @@ import {AppStoreModel} from '../../store/models/app-store.model'; import {select, Store} from '@ngrx/store'; import {AddUserId} from '../../store/actions/app.actions'; import {AppState} from 'src/app/store/models/app-state.model'; +import {first} from "rxjs/operators"; @Component({ selector: 'app-sign-in', @@ -43,9 +44,9 @@ export class SignInComponent implements OnDestroy, OnInit { onLoginButtonClick() { let role = ''; - this.store.select(s => s.appStore.role).subscribe((v) => { + this.store.select(s => s.appStore.role).pipe(first()).subscribe((v) => { role = v; - }).unsubscribe(); + }); this.allSubscriptions.add( this.userService.tryLogin( this.signInFormGroup.get('signIn').value['username'], diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/store/actions/app.actions.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/store/actions/app.actions.ts index 4b2b34b..73a3584 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/store/actions/app.actions.ts +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/store/actions/app.actions.ts @@ -3,7 +3,8 @@ import { Action } from '@ngrx/store'; export enum AppActionTypes { ADD_USER_ID = '[APP] Add user id', - ADD_ROLE = '[APP] Add role' + ADD_ROLE = '[APP] Add role', + CLEAR_USER_ID = '[APP] Clear user id' } export class AddUserId implements Action { @@ -20,4 +21,12 @@ export class AddRole implements Action { } } -export type AppAction = AddUserId | AddRole; +export class ClearUserId implements Action { + readonly type = AppActionTypes.CLEAR_USER_ID; + + constructor() { + } + +} + +export type AppAction = AddUserId | AddRole | ClearUserId; diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/store/reducers/app.reducer.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/store/reducers/app.reducer.ts index 777c63a..d86c636 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/store/reducers/app.reducer.ts +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/store/reducers/app.reducer.ts @@ -12,6 +12,8 @@ export function AppReducer(state: AppStoreModel = initialState, action: AppActio return {...state, userId: action.payload.userId}; case AppActionTypes.ADD_ROLE: return {...state, role: action.payload.role}; + case AppActionTypes.CLEAR_USER_ID: + return {...state, userId: null}; default: return state; } diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/services/character.service.ts b/SessionCompanion/SessionCompanion/ClientApp/src/services/character.service.ts new file mode 100644 index 0000000..01180af --- /dev/null +++ b/SessionCompanion/SessionCompanion/ClientApp/src/services/character.service.ts @@ -0,0 +1,30 @@ +import {Inject, Injectable} from '@angular/core'; +import {HttpClient, HttpParams} from '@angular/common/http'; +import {Observable, of, throwError} from 'rxjs'; +import {ErrorResponse} from '../types/ErrorResponse'; +import {Either} from '../types/Either'; +import {switchMap} from 'rxjs/operators'; +import {CharacterForLoginViewModel} from "../types/viewmodels/character-viewmodels/CharacterForLoginViewModel"; + +Injectable({ + providedIn: 'root' +}) +export class CharacterService { + private baseUrl = 'api/character/'; + constructor(private http: HttpClient, @Inject('BASE_URL') baseUrl: string) { + this.baseUrl = baseUrl + this.baseUrl; + } + + getUserCharactersList(userId: number): Observable { + const params = new HttpParams().set('userId', userId.toString()) + return this.http.get>(this.baseUrl + 'userCharactersList', {params}).pipe( + switchMap(response => { + if (response.isLeft) { + return of(response.left); + } else { + return throwError(response.right); + } + }) + ); + } +} diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/character-viewmodels/CharacterForLoginViewModel.ts b/SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/character-viewmodels/CharacterForLoginViewModel.ts new file mode 100644 index 0000000..fa9c0d8 --- /dev/null +++ b/SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/character-viewmodels/CharacterForLoginViewModel.ts @@ -0,0 +1,7 @@ +export interface CharacterForLoginViewModel { + id: number; + userId: number; + name: string; + className: string; + level: number; +}