feat: consume user info

Author: Angeluz-07

debug.log

@@ -0,0 +1,8 @@
+[1207/120956.471:ERROR:directory_reader_win.cc(43)] FindFirstFile: El sistema no puede encontrar la ruta especificada. (0x3)
+[1209/102017.100:ERROR:directory_reader_win.cc(43)] FindFirstFile: El sistema no puede encontrar la ruta especificada. (0x3)
+[1209/114251.202:ERROR:directory_reader_win.cc(43)] FindFirstFile: El sistema no puede encontrar la ruta especificada. (0x3)
+[1211/010054.703:ERROR:directory_reader_win.cc(43)] FindFirstFile: El sistema no puede encontrar la ruta especificada. (0x3)
+[1211/165324.600:ERROR:directory_reader_win.cc(43)] FindFirstFile: El sistema no puede encontrar la ruta especificada. (0x3)
+[1214/163635.420:ERROR:directory_reader_win.cc(43)] FindFirstFile: El sistema no puede encontrar la ruta especificada. (0x3)
+[1218/134332.967:ERROR:directory_reader_win.cc(43)] FindFirstFile: El sistema no puede encontrar la ruta especificada. (0x3)
+[1218/155414.096:ERROR:directory_reader_win.cc(43)] FindFirstFile: El sistema no puede encontrar la ruta especificada. (0x3)

src/app/modules/login/services/azure.ad.b2c.service.ts

@@ -83,4 +83,8 @@ export class AzureAdB2CService {
   getUserGroup(): string {
     return this.msal.getAccount().idToken?.extension_role;
   }
+
+  getUserId(): string{
+    return this.msal.getAccount().accountIdentifier;
+  }
 }

src/app/modules/shared/components/user/store/user.actions.ts

@@ -0,0 +1,33 @@
+import { Action } from '@ngrx/store';
+
+export enum UserActionTypes {
+  LOAD_USER = '[User] LOAD_USER',
+  LOAD_USER_SUCCESS = '[User] LOAD_USER_SUCCESS',
+  LOAD_USER_FAIL = '[User] LOAD_USER_FAIL',
+}
+
+export class LoadUser implements Action {
+  public readonly type = UserActionTypes.LOAD_USER;
+  constructor(readonly userId) {
+  }
+}
+
+export class LoadUserSuccess implements Action {
+  readonly type = UserActionTypes.LOAD_USER_SUCCESS;
+
+  constructor(readonly payload) {
+  }
+}
+
+export class LoadUserFail implements Action {
+  public readonly type = UserActionTypes.LOAD_USER_FAIL;
+
+  constructor(public error: string) {
+  }
+}
+
+
+export type UserActions =
+  | LoadUser
+  | LoadUserSuccess
+  | LoadUserFail

src/app/modules/shared/components/user/store/user.effects.ts

@@ -0,0 +1,30 @@
+import { Injectable } from '@angular/core';
+import { Actions, Effect, ofType } from '@ngrx/effects';
+import { Action } from '@ngrx/store';
+import { Observable, of } from 'rxjs';
+import { catchError, map, mergeMap, switchMap } from 'rxjs/operators';
+import { UserService } from './user.service';
+import * as actions from './user.actions';
+
+@Injectable()
+export class UserEffects {
+  constructor(private actions$: Actions, private userService: UserService) {
+  }
+
+  @Effect()
+  loadUser$: Observable<Action> = this.actions$.pipe(
+    ofType(actions.UserActionTypes.LOAD_USER),
+    map((action: actions.LoadUser) => action.userId),
+    mergeMap((userId) =>
+      this.userService.loadUser(userId).pipe(
+        map((response) => {
+          return new actions.LoadUserSuccess(response);
+        }),
+        catchError((error) => {
+          return of(new actions.LoadUserFail(error));
+        })
+      )
+    )
+  );
+
+}

src/app/modules/shared/components/user/store/user.reducer.ts

@@ -0,0 +1,24 @@
+import { UserActions, UserActionTypes } from './user.actions';
+
+export const initialState = {
+  name:'',
+  groups:[]
+};
+
+export const userReducer = (state: any = initialState, action: UserActions): any => {
+  switch (action.type) {
+    case UserActionTypes.LOAD_USER:
+      return state;
+    case UserActionTypes.LOAD_USER_SUCCESS:
+      return {
+        ...state,
+        name: action.payload.name,
+        groups: action.payload.groups
+      };
+    case UserActionTypes.LOAD_USER_FAIL:
+      return state;
+    default: {
+      return state;
+    }
+  }
+};

src/app/modules/shared/components/user/store/user.selectors.ts

@@ -0,0 +1,6 @@
+import { createFeatureSelector, createSelector } from '@ngrx/store';
+
+const getUserState = createFeatureSelector('user');
+
+export const getUserInfo = createSelector(getUserState, (state: any) => state);
+

src/app/modules/shared/components/user/store/user.service.ts

@@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { Observable } from 'rxjs';
+import { environment } from 'src/environments/environment';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class UserService {
+
+  constructor(private http: HttpClient) {
+  }
+
+  baseUrl = `${environment.timeTrackerApiUrl}/users`;
+
+  loadUser(userId): Observable<any> {
+    return this.http.get(`${this.baseUrl}/${userId}`);
+  }
+
+}

src/app/modules/shared/components/user/user.component.ts

@@ -1,19 +1,35 @@
 import { Component, OnInit } from '@angular/core';
 import { AzureAdB2CService } from '../../../login/services/azure.ad.b2c.service';
 
+import { select, Store } from '@ngrx/store';
+import { getUserInfo } from './store/user.selectors';
+import { Subscription } from 'rxjs';
+import { LoadUser } from './store/user.actions';
+
 @Component({
   selector: 'app-user',
   templateUrl: './user.component.html',
   styleUrls: ['./user.component.scss'],
 })
 export class UserComponent implements OnInit {
   name: string;
+  userSubscription: Subscription;
 
-  constructor(private azureAdB2CService: AzureAdB2CService) {}
+  constructor(
+    private azureAdB2CService: AzureAdB2CService, 
+    private store: Store) {}
 
   ngOnInit(): void {
     if (this.azureAdB2CService.isLogin()) {
       this.name = this.azureAdB2CService.getName();
+      let userId = this.azureAdB2CService.getUserId();
+          
+      this.store.dispatch(new LoadUser(userId));
+      this.userSubscription = this.store
+      .pipe(select(getUserInfo))
+      .subscribe((response) => {
+        console.log(response)
+      })
       this.azureAdB2CService.setTenantId();
     }
   }

src/app/reducers/index.ts

@@ -6,7 +6,8 @@ import { customerManagementReducer } from '../modules/customer-management/store/
 import { projectTypeReducer } from '../modules/customer-management/components/projects-type/store/project-type.reducers';
 import { entryReducer } from '../modules/time-clock/store/entry.reducer';
 import { environment } from '../../environments/environment';
-import { userReducer } from '../modules/users/store/user.reducers';
+import { userReducer } from '../modules/shared/components/user/store/user.reducer';
+import { userReducer as usersReducer } from '../modules/users/store/user.reducers';
 export interface State {
   projects;
   activities;
@@ -15,6 +16,7 @@ export interface State {
   projectType;
   entries;
   users;
+  user
 }
 
 export const reducers: ActionReducerMap<State> = {
@@ -24,7 +26,8 @@ export const reducers: ActionReducerMap<State> = {
   technologies: technologyReducer,
   projectType: projectTypeReducer,
   entries: entryReducer,
-  users: userReducer,
+  users: usersReducer,
+  user: userReducer,
 };
 
 export const metaReducers: MetaReducer<State>[] = !environment.production ? [] : [];