31.10. User Resolver - get user by id (#31)

support-portal-frontend/src/app/app-routing.module.ts

@@ -10,6 +10,7 @@ import {SettingsComponent} from "./component/management/settings/settings.compon
 import {ProfileComponent} from "./component/management/profile/profile.component";
 import {UserEditComponent} from "./component/management/users/user-edit/user-edit.component";
 import {UserViewComponent} from "./component/management/users/user-view/user-view.component";
+import {UserResolver} from "./component/management/users/user-resolver.service";
 
 export const routes: Routes = [
   {path: 'login', component: LoginComponent},
@@ -23,7 +24,7 @@ export const routes: Routes = [
       {
         path: 'users', component: UsersComponent,
         children: [
-          {path: ':id/view', component: UserViewComponent},
+          {path: ':id/view', component: UserViewComponent, resolve: {user: UserResolver}},
           {path: ':id/edit', component: UserEditComponent}
         ]
       }

support-portal-frontend/src/app/component/management/users/user-resolver.service.ts

@@ -0,0 +1,19 @@
+import {Injectable} from '@angular/core';
+import {ActivatedRouteSnapshot, Resolve, RouterStateSnapshot} from "@angular/router";
+import {User} from "../../../model/user";
+import {Observable} from "rxjs";
+import {UserService} from "../../../service/user.service";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UserResolver implements Resolve<User> {
+
+  constructor(private userService: UserService) {
+  }
+
+  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<User> | Promise<User> | User {
+    const id = route.params['id'];
+    return this.userService.findUserById(id);
+  }
+}

support-portal-frontend/src/app/component/management/users/user-view/user-view.component.ts

@@ -18,7 +18,7 @@ export class UserViewComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.user = this.userService.getSelectedUser();
+    this.route.data.subscribe((data) => this.user = data['user']);
     setTimeout(() => this.clickButton('openUserInfo'), 100);
   }
 

support-portal-frontend/src/app/service/user.service.ts

@@ -4,6 +4,7 @@ import {HttpClient, HttpEvent} from "@angular/common/http";
 import {Observable} from "rxjs";
 import {User} from "../model/user";
 import {CustomHttpResponse} from "../dto/custom-http-response";
+import {map} from "rxjs/operators";
 
 @Injectable({
   providedIn: 'root'
@@ -89,6 +90,17 @@ export class UserService {
     return this.selectedUser;
   }
 
+  public findUserById(id: string): User | Observable<User> {
+    let cachedUsers = this.getUsersFromLocalStorage();
+    const foundUser = cachedUsers.find((u) => u.userId === id);
+
+    if (foundUser) return foundUser;
+
+    return this.getAllUsers()
+      .pipe(map((page: UserPage, idx: number) => page.content))
+      .pipe(map(users => users.find(u => u.userId === id)!));
+  }
+
 }
 
 export interface UserPage {