SES-103 WIP

SessionCompanion/SessionCompanion/ClientApp/package-lock.json

@@ -2610,6 +2610,36 @@
         }
       }
     },
+    "@ngrx/store": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/@ngrx/store/-/store-10.1.1.tgz",
+      "integrity": "sha512-JiSC1Y6yR2H5/FVgEDeQjXdzn20ru1Vw/4NnISHcwHT3tAn/cpT28cIh24r6HMCSqBwaqGLgCdpoi0TR2ZLkRQ==",
+      "requires": {
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
+          "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
+        }
+      }
+    },
+    "@ngrx/store-devtools": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/@ngrx/store-devtools/-/store-devtools-10.1.1.tgz",
+      "integrity": "sha512-w6hsuUqOndZHnRzFaONpzjgNKIPT8wCRejhru+ZyK/L/Q9zRSyBuKLhZLf/zhZXd0qx0vHjjxltDcKoEXNfviQ==",
+      "requires": {
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
+          "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
+        }
+      }
+    },
     "@ngtools/webpack": {
       "version": "8.3.26",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-8.3.26.tgz",

SessionCompanion/SessionCompanion/ClientApp/package.json

@@ -24,6 +24,8 @@
     "@angular/platform-server": "8.2.12",
     "@angular/router": "8.2.12",
     "@microsoft/signalr": "^5.0.0",
+    "@ngrx/store": "^10.1.1",
+    "@ngrx/store-devtools": "^10.1.1",
     "@nguniversal/module-map-ngfactory-loader": "8.1.1",
     "aspnet-prerendering": "^3.0.1",
     "bootstrap": "^4.3.1",

SessionCompanion/SessionCompanion/ClientApp/src/app.routing.ts

@@ -23,7 +23,7 @@ const routes: Routes = [
     pathMatch: 'full'
   },
   {
-    path: 'gamemaster',
+    path: 'game-master',
     component: GameMasterDashboardComponent,
     pathMatch: 'full'
   },

SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts

@@ -21,6 +21,11 @@ import {
   MatIconModule, MatSidenavModule, MatToolbarModule, MatListModule
 } from '@angular/material';
 import {UserService} from '../services/user.service';
+import { StoreModule } from '@ngrx/store';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+import { reducers} from './reducers';
+import {AppReducer} from './store/reducers/app.reducer';
+import {environment} from '../environments/environment';
 
 @NgModule({
   declarations: [
@@ -49,6 +54,10 @@ BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
     MatSidenavModule,
     MatToolbarModule,
     MatListModule,
+    StoreModule.forRoot({app: AppReducer}),
+    StoreDevtoolsModule.instrument({
+      logOnly: environment.production
+    })
   ],
   providers: [
     UserService

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

@@ -1,4 +1,4 @@
 <div class="container font">
-  <button (click)="SignInWithRole()" id="player-button" class="button font">Player</button>
+  <button (click)="SignInWithRole('player')" id="player-button" class="button font">Player</button>
-  <button (click)="SignInWithRole()" id="game-master-button" class="button font">Game Master</button>
+  <button (click)="SignInWithRole('game-master')" id="game-master-button" class="button font">Game Master</button>
 </div>

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

@@ -1,5 +1,8 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import {AddRole} from '../../store/actions/app.actions';
+
 
 @Component({
   selector: 'app-select-role',
@@ -9,14 +12,15 @@ import { Router } from '@angular/router';
 export class SelectRoleComponent {
   isExpanded = false;
 
-  constructor(private router: Router) {}
+  constructor(private router: Router, private store: Store<{ role: string }>) {}
 
   collapse() {
     this.isExpanded = false;
   }
 
-  SignInWithRole() {
+  SignInWithRole(role: string) {
-    this.router.navigate(['login'])
+    this.store.dispatch(new AddRole({role: role}));
+    this.router.navigate(['login']);
   }
 
   toggle() {

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

@@ -1,24 +1,31 @@
-import { Component, OnDestroy } from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
 import { FormGroup, Validators, FormBuilder } from '@angular/forms';
 import { Router } from '@angular/router';
 import {UserService} from '../../../services/user.service';
 import {ErrorResponse} from '../../../types/ErrorResponse';
-import {Subscription} from 'rxjs';
+import {Observable, Subscription} from 'rxjs';
 import {HttpErrorResponse} from '@angular/common/http';
+import {AppStoreModel} from '../../store/models/app-store.model';
+import { Store } from '@ngrx/store';
+import {AddUserId} from '../../store/actions/app.actions';
 
 @Component({
   selector: 'app-sign-in',
   templateUrl: './sign-in.component.html',
   styleUrls: ['./sign-in.component.css']
 })
-export class SignInComponent implements OnDestroy {
+export class SignInComponent implements OnDestroy, OnInit {
   allSubscriptions = new Subscription();
 
+  role$: Observable<string>;
+
   isExpanded = false;
   apiError = false;
   apiErrorMessage = '';
 
-  constructor(private router: Router, private formBuilder: FormBuilder, private userService: UserService) {}
+  constructor(private router: Router, private formBuilder: FormBuilder,
+              private userService: UserService, private store: Store<AppStoreModel>) {
+  }
 
   public signInFormGroup: FormGroup = this.formBuilder.group({
     signIn: this.formBuilder.group({
@@ -29,13 +36,19 @@ export class SignInComponent implements OnDestroy {
     })
   });
 
+  ngOnInit() {
+    this.role$ = this.store.select('role');
+  }
+
   onLoginButtonClick() {
+    console.log(this.role$);
     this.allSubscriptions.add(
       this.userService.tryLogin(
       this.signInFormGroup.get('signIn').value['username'],
       this.signInFormGroup.get('signIn').value['password']).subscribe(
       (success) => {
-        this.router.navigate(['player']);
+        this.store.dispatch(new AddUserId({userId: success}));
+        this.router.navigate([this.role$]);
       },
         (error: ErrorResponse | HttpErrorResponse) => {
           if (error instanceof HttpErrorResponse) {

SessionCompanion/SessionCompanion/ClientApp/src/app/reducers/index.ts

@@ -0,0 +1,19 @@
+import {
+  ActionReducer,
+  ActionReducerMap,
+  createFeatureSelector,
+  createSelector,
+  MetaReducer
+} from '@ngrx/store';
+import { environment } from '../../environments/environment';
+
+export interface State {
+
+}
+
+export const reducers: ActionReducerMap<State> = {
+
+};
+
+
+export const metaReducers: MetaReducer<State>[] = !environment.production ? [] : [];

SessionCompanion/SessionCompanion/ClientApp/src/app/store/actions/app.actions.ts

@@ -0,0 +1,23 @@
+import {AppStoreModel} from '../models/app-store.model';
+import { Action } from '@ngrx/store';
+
+export enum AppActionTypes {
+  ADD_USER_ID = '[APP] Add user id',
+  ADD_ROLE = '[APP] Add role'
+}
+
+export class AddUserId implements Action {
+  readonly type = AppActionTypes.ADD_USER_ID;
+
+  constructor(public payload: {userId: number}) {
+  }
+}
+
+export class AddRole implements Action {
+  readonly type = AppActionTypes.ADD_ROLE;
+
+  constructor(public payload: {role: string}) {
+  }
+}
+
+export type AppAction = AddUserId | AddRole;

SessionCompanion/SessionCompanion/ClientApp/src/app/store/models/app-state.model.ts

@@ -0,0 +1,5 @@
+import {AppStoreModel} from './app-store.model';
+
+export interface AppState {
+  readonly player: AppStoreModel;
+}

SessionCompanion/SessionCompanion/ClientApp/src/app/store/models/app-store.model.ts

@@ -0,0 +1,4 @@
+export interface AppStoreModel {
+  userId: number;
+  role: string;
+}

SessionCompanion/SessionCompanion/ClientApp/src/app/store/reducers/app.reducer.ts

@@ -0,0 +1,18 @@
+import {AppStoreModel} from '../models/app-store.model';
+import {AppAction, AppActionTypes} from '../actions/app.actions';
+
+const initialState: AppStoreModel = {
+  userId: null,
+  role: ''
+};
+
+export function AppReducer(state: AppStoreModel = initialState, action: AppAction) {
+  switch (action.type) {
+    case AppActionTypes.ADD_USER_ID:
+      return {...state, userId: action.payload.userId};
+    case AppActionTypes.ADD_ROLE:
+      return {...state, role: action.payload.role};
+    default:
+      return state;
+  }
+}