SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.html

@@ -1,6 +1,6 @@
   <div [formGroup]="signUpFormGroup" class="container">
     <div formGroupName="newAccount" class="container">
-      <mat-icon matSuffix class="arrow-back" (click)="GoToLoginPage()">arrow_back</mat-icon>
+      <mat-icon matSuffix class="arrow-back arrow-select" (click)="GoToLoginPage()">arrow_back</mat-icon>
       <div class="primary-text header">Create an Account</div>
 
       <mat-form-field class="form-container">

SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.css

@@ -47,10 +47,6 @@ input {
   font-size: 20px;
 }
 
-.align-to-right {
-  text-align: right;
-}
-
 @media (max-width: 400px) {
   .container {
     margin-left: 0%;

SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.html

@@ -1,21 +1,15 @@
 <div class="container">
-  <mat-icon matSuffix class="arrow-back" (click)="onArrowBackClick()">arrow_back</mat-icon>
+  <mat-icon matSuffix class="arrow-back arrow-select" (click)="onArrowBackClick()">arrow_back</mat-icon>
   <div class="primary-text header">Select character</div>
-    <mat-list >
+  <mat-list>
     <mat-divider></mat-divider>
-    <mat-list-item> Oweja 
+    <mat-list-item *ngFor="let character of charactersList">
-    <mat-icon matSuffix class="arrow-forward align-to-right" (click)="onCharacterClick()">arrow_forward</mat-icon>
+      <mat-icon mat-list-icon>account_circle</mat-icon>
+      <div mat-line>{{character.name}}</div>
+      <mat-icon matSuffix class="arrow-forward arrow-select" (click)="onCharacterClick(character.id)">arrow_forward</mat-icon>
+      <div mat-line> {{character.className}} level: {{character.level}}</div>
+      <mat-divider></mat-divider>
     </mat-list-item>
-    <mat-divider></mat-divider>
+  </mat-list>
-    <mat-list-item> James 
-      <mat-icon matSuffix class="arrow-forward align-to-right" (click)="onCharacterClick()">arrow_forward</mat-icon>
-    </mat-list-item>
-    <mat-divider></mat-divider>
-    <mat-list-item> Legolas 
-      <mat-icon matSuffix class="arrow-forward align-to-right" (click)="onCharacterClick()">arrow_forward</mat-icon>
-    </mat-list-item>
-    <mat-divider></mat-divider>
-   </mat-list>
-
 </div>
 

SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.ts

@@ -1,30 +1,49 @@
-import { Component } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import { Router } from '@angular/router';
+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';
+import {AddCharacterId} from '../../store/actions/player.action';
 
 @Component({
   selector: 'app-select-character',
   templateUrl: './select-character.component.html',
   styleUrls: ['./select-character.component.css']
 })
-export class SelectCharacterComponent {
+export class SelectCharacterComponent implements OnInit {
-  isExpanded = false;
+  charactersList: CharacterForLoginViewModel[];
 
-  collapse() {
+  constructor(private router: Router, private store: Store<AppState>, private characterService: CharacterService) {}
-    this.isExpanded = false;
+
+  ngOnInit() {
+    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(characterId: number) {
-
+    this.store.dispatch(new AddCharacterId({characterId}));
-  onCharacterClick(){
+    this.router.navigate(['player']);
-    this.router.navigate(['player'])
   }
 
-  onArrowBackClick(){
+  onArrowBackClick() {
-    this.router.navigate(['login'])
+    this.store.dispatch(new ClearUserId());
+    this.router.navigate(['login']);
   }
 }
-

SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.html

@@ -1,6 +1,6 @@
   <div [formGroup]="signInFormGroup" class="container">
     <div formGroupName="signIn" class="container">
-    <mat-icon matSuffix class="arrow-back" (click)="onArrowBackClick()">arrow_back</mat-icon>
+    <mat-icon matSuffix class="arrow-back arrow-select" (click)="onArrowBackClick()">arrow_back</mat-icon>
     <div id="SignInText" class="primary-text header">Sign In</div>
 
       <mat-form-field class="form-container">