conneted with backend - get user characters list

This commit is contained in:
Natalia Gawron 2020-12-28 17:03:53 +01:00
parent d61c3f620f
commit 665ef65ec0
8 changed files with 83 additions and 68 deletions

View File

@ -26,6 +26,7 @@ import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import {environment} from '../environments/environment'; import {environment} from '../environments/environment';
import {SessionCompanionIconsModule} from './shared/sc-icons/session-companion-icons.module'; import {SessionCompanionIconsModule} from './shared/sc-icons/session-companion-icons.module';
import {reducers} from './store/models/app-state.model'; import {reducers} from './store/models/app-state.model';
import {CharacterService} from "../services/character.service";
@NgModule({ @NgModule({
declarations: [ declarations: [
@ -61,7 +62,8 @@ BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
}) })
], ],
providers: [ providers: [
UserService UserService,
CharacterService
], ],
bootstrap: [AppComponent] bootstrap: [AppComponent]
}) })

View File

@ -3,7 +3,7 @@
<div class="primary-text header">Select character</div> <div class="primary-text header">Select character</div>
<mat-list> <mat-list>
<mat-divider></mat-divider> <mat-divider></mat-divider>
<mat-list-item *ngFor="let character of characters"> <mat-list-item *ngFor="let character of charactersList">
<mat-icon mat-list-icon>account_circle</mat-icon> <mat-icon mat-list-icon>account_circle</mat-icon>
<div mat-line>{{character.name}}</div> <div mat-line>{{character.name}}</div>
<mat-icon matSuffix class="arrow-forward arrow-select" (click)="onCharacterClick()">arrow_forward</mat-icon> <mat-icon matSuffix class="arrow-forward arrow-select" (click)="onCharacterClick()">arrow_forward</mat-icon>

View File

@ -1,83 +1,47 @@
import { Component } from '@angular/core'; import {Component, OnInit} from '@angular/core';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import {first} from "rxjs/operators";
export interface Section { import {ClearUserId} from "../../store/actions/app.actions";
name: string; import {ErrorResponse} from "../../../types/ErrorResponse";
className: string; import {HttpErrorResponse} from "@angular/common/http";
level: number; 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({ @Component({
selector: 'app-select-character', selector: 'app-select-character',
templateUrl: './select-character.component.html', templateUrl: './select-character.component.html',
styleUrls: ['./select-character.component.css'] styleUrls: ['./select-character.component.css']
}) })
export class SelectCharacterComponent { export class SelectCharacterComponent implements OnInit {
characters: Section[] = [ charactersList: CharacterForLoginViewModel[];
{
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,
}
];
isExpanded = false; constructor(private router: Router, private store: Store<AppState>, private characterService: CharacterService) {}
collapse() { ngOnInit() {
this.isExpanded = false; this.getUserCharactersList();
} }
toggle() { getUserCharactersList() {
this.isExpanded = !this.isExpanded; 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(){ onCharacterClick(){
this.router.navigate(['player']) this.router.navigate(['player'])
} }
onArrowBackClick(){ onArrowBackClick(){
this.store.dispatch(new ClearUserId())
this.router.navigate(['login']) this.router.navigate(['login'])
} }
} }

View File

@ -9,6 +9,7 @@ import {AppStoreModel} from '../../store/models/app-store.model';
import {select, Store} from '@ngrx/store'; import {select, Store} from '@ngrx/store';
import {AddUserId} from '../../store/actions/app.actions'; import {AddUserId} from '../../store/actions/app.actions';
import {AppState} from 'src/app/store/models/app-state.model'; import {AppState} from 'src/app/store/models/app-state.model';
import {first} from "rxjs/operators";
@Component({ @Component({
selector: 'app-sign-in', selector: 'app-sign-in',
@ -43,9 +44,9 @@ export class SignInComponent implements OnDestroy, OnInit {
onLoginButtonClick() { onLoginButtonClick() {
let role = ''; let role = '';
this.store.select(s => s.appStore.role).subscribe((v) => { this.store.select(s => s.appStore.role).pipe(first()).subscribe((v) => {
role = v; role = v;
}).unsubscribe(); });
this.allSubscriptions.add( this.allSubscriptions.add(
this.userService.tryLogin( this.userService.tryLogin(
this.signInFormGroup.get('signIn').value['username'], this.signInFormGroup.get('signIn').value['username'],

View File

@ -3,7 +3,8 @@ import { Action } from '@ngrx/store';
export enum AppActionTypes { export enum AppActionTypes {
ADD_USER_ID = '[APP] Add user id', 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 { 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;

View File

@ -12,6 +12,8 @@ export function AppReducer(state: AppStoreModel = initialState, action: AppActio
return {...state, userId: action.payload.userId}; return {...state, userId: action.payload.userId};
case AppActionTypes.ADD_ROLE: case AppActionTypes.ADD_ROLE:
return {...state, role: action.payload.role}; return {...state, role: action.payload.role};
case AppActionTypes.CLEAR_USER_ID:
return {...state, userId: null};
default: default:
return state; return state;
} }

View File

@ -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<CharacterForLoginViewModel[]> {
const params = new HttpParams().set('userId', userId.toString())
return this.http.get<Either<CharacterForLoginViewModel[], ErrorResponse>>(this.baseUrl + 'userCharactersList', {params}).pipe(
switchMap(response => {
if (response.isLeft) {
return of(response.left);
} else {
return throwError(response.right);
}
})
);
}
}

View File

@ -0,0 +1,7 @@
export interface CharacterForLoginViewModel {
id: number;
userId: number;
name: string;
className: string;
level: number;
}