Implement resolvers for member lists

Client/src/app/app.module.ts

@@ -12,7 +12,7 @@ import { HomeComponent } from './components/home/home.component';
 import { RegisterComponent } from './components/register/register.component';
 import { ErrorInterceptorProvider } from './services/error.interceptor';
 import { AlertifyService } from './services/alertify.service';
-import { BsDropdownModule } from 'ngx-bootstrap';
+import { BsDropdownModule, TabsModule } from 'ngx-bootstrap';
 import { MemberListComponent } from './components/members/member-list/member-list.component';
 import { ListsComponent } from './components/lists/lists.component';
 import { MessagesComponent } from './components/messages/messages.component';
@@ -21,6 +21,8 @@ import { AuthGuard } from './guards/auth.guard';
 import { UserService } from './services/user.service';
 import { MemberCardComponent } from './components/members/member-card/member-card.component';
 import { MemberDetailComponent } from './components/members/member-detail/member-detail.component';
+import { MemberDetailResolver } from './resolvers/member-detail.resolver';
+import { MemberListResolver } from './resolvers/member-list.resolver';
 
 export function tokenGetter() {
   return localStorage.getItem("token");
@@ -49,6 +51,7 @@ export function tokenGetter() {
         blacklistedRoutes: ['localhost:54314/api/auth']
       }
     }),
+    TabsModule.forRoot(),
     BsDropdownModule.forRoot(),
     RouterModule.forRoot(appRoutes)
   ],
@@ -57,7 +60,9 @@ export function tokenGetter() {
     ErrorInterceptorProvider,
     AlertifyService,
     AuthGuard,
-    UserService
+    UserService,
+    MemberDetailResolver,
+    MemberListResolver
   ],
   bootstrap: [AppComponent]
 })

Client/src/app/components/members/member-detail/member-detail.component.html

@@ -2,23 +2,23 @@
   <div class="row">
     <div class="col-sm-4">
       <div class="card">
-        <img class="card-img-top img-thumbnail" src="{{user?.photoUrl}}" alt="{{user?.knownAs}}" />
+        <img class="card-img-top img-thumbnail" src="{{user.photoUrl}}" alt="{{user.knownAs}}" />
         <div class="card-body">
           <div>
             <strong>Location:</strong>
-            <p>{{user?.city}}, {{user?.country}}</p>
+            <p>{{user.city}}, {{user.country}}</p>
           </div>
           <div>
             <strong>Age:</strong>
-            <p>{{user?.age}}</p>
+            <p>{{user.age}}</p>
           </div>
           <div>
             <strong>Last Active:</strong>
-            <p>{{user?.lastActive}}</p>
+            <p>{{user.lastActive}}</p>
           </div>
           <div>
             <strong>Member Since:</strong>
-            <p>{{user?.dateCreated}}</p>
+            <p>{{user.dateCreated}}</p>
           </div>
         </div>
         <div class="card-footer">
@@ -30,7 +30,26 @@
       </div>
     </div>
     <div class="col-sm-8">
+      <div class="tab-panel">
+        <tabset class="member-tabset">
+          <tab heading="About {{user.knownAs}}">
+            <h4>Description</h4>
+            <p>{{user.introduction}}</p>
+            <h4>Interested In</h4>
+            <p>{{user.lookingFor}}</p>
+          </tab>
+          <tab heading="Interests">
+            <h4>Interests</h4>
+            <p>{{user.interests}}</p>
+          </tab>
+          <tab heading="Photos">
+            <p>Photos here</p>
+          </tab>
+          <tab heading="Messages">
 
+          </tab>
+        </tabset>
+      </div>
     </div>
   </div>
 </div>

Client/src/app/components/members/member-detail/member-detail.component.ts

@@ -18,15 +18,8 @@ export class MemberDetailComponent implements OnInit {
     private route: ActivatedRoute) { }
 
   ngOnInit() {
-    this.loadUser();
-  }
-
-  loadUser() {
-    this.userService.getUser(+this.route.snapshot.params['id'])
-      .subscribe((user: User) => {
-        this.user = user;
-      }, error => {
-        this.alertify.error(error);
-      });
+    this.route.data.subscribe(data => {
+      this.user = data['user'];
+    });
   }
 }

Client/src/app/components/members/member-list/member-list.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { UserService } from 'src/app/services/user.service';
 import { AlertifyService } from 'src/app/services/alertify.service';
 import { User } from 'src/app/models/user';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-member-list',
@@ -11,18 +12,14 @@ import { User } from 'src/app/models/user';
 export class MemberListComponent implements OnInit {
   users: User[];
 
-  constructor(private userService: UserService, private alertify: AlertifyService) { }
+  constructor(
+    private userService: UserService,
+    private alertify: AlertifyService,
+    private route: ActivatedRoute) { }
 
   ngOnInit() {
-    this.loadUsers();
+    this.route.data.subscribe(data => {
+      this.users = data['users'];
+    });
   }
-
-  loadUsers() {
-    this.userService.getUsers().subscribe((users: User[]) => {
-      this.users = users;
-    }, error => {
-      this.alertify.error(error);
-    })
-  }
-
 }

Client/src/app/resolvers/member-detail.resolver.ts

@@ -0,0 +1,25 @@
+import { Injectable } from "@angular/core";
+import { User } from "../models/user";
+import { UserService } from "../services/user.service";
+import { Resolve, Router, ActivatedRouteSnapshot } from "@angular/router";
+import { AlertifyService } from "../services/alertify.service";
+import { Observable, of } from "rxjs";
+import { catchError } from "rxjs/operators";
+
+@Injectable()
+export class MemberDetailResolver implements Resolve<User> {
+
+  constructor(
+    private userService: UserService,
+    private router: Router,
+    private alertify: AlertifyService) { }
+
+  resolve(route: ActivatedRouteSnapshot): Observable<User> {
+    return this.userService.getUser(route.params['id'])
+      .pipe(catchError(error => {
+        this.alertify.error('Problem retrieving data');
+        this.router.navigate(['/members']);
+        return of(null);
+      }));
+  }
+}

Client/src/app/resolvers/member-list.resolver.ts

@@ -0,0 +1,25 @@
+import { Injectable } from "@angular/core";
+import { User } from "../models/user";
+import { UserService } from "../services/user.service";
+import { Resolve, Router, ActivatedRouteSnapshot } from "@angular/router";
+import { AlertifyService } from "../services/alertify.service";
+import { Observable, of } from "rxjs";
+import { catchError } from "rxjs/operators";
+
+@Injectable()
+export class MemberListResolver implements Resolve<User[]> {
+
+  constructor(
+    private userService: UserService,
+    private router: Router,
+    private alertify: AlertifyService) { }
+
+  resolve(route: ActivatedRouteSnapshot): Observable<User[]> {
+    return this.userService.getUsers()
+      .pipe(catchError(error => {
+        this.alertify.error('Problem retrieving data');
+        this.router.navigate(['/home']);
+        return of(null);
+      }));
+  }
+}

Client/src/app/routes.ts

@@ -5,6 +5,8 @@ import { MessagesComponent } from './components/messages/messages.component';
 import { ListsComponent } from './components/lists/lists.component';
 import { AuthGuard } from './guards/auth.guard';
 import { MemberDetailComponent } from './components/members/member-detail/member-detail.component';
+import { MemberDetailResolver } from './resolvers/member-detail.resolver';
+import { MemberListResolver } from './resolvers/member-list.resolver';
 
 export const appRoutes: Routes = [
   { path: '', component: HomeComponent },
@@ -13,8 +15,8 @@ export const appRoutes: Routes = [
     runGuardsAndResolvers: 'always',
     canActivate: [AuthGuard],
     children: [
-      { path: 'members', component: MemberListComponent },
-      { path: 'members/:id', component: MemberDetailComponent },
+      { path: 'members', component: MemberListComponent, resolve: { users: MemberListResolver } },
+      { path: 'members/:id', component: MemberDetailComponent, resolve: { user: MemberDetailResolver } },
       { path: 'messages', component: MessagesComponent },
       { path: 'lists', component: ListsComponent }
     ]

Client/src/styles.css

@@ -5,3 +5,17 @@
 @import '../node_modules/alertifyjs/build/css/alertify.min.css';
 @import '../node_modules/alertifyjs/build/css/themes/bootstrap.min.css';
 
+
+.tab-panel {
+  border: 1px solid #ddd;
+  padding: 10px;
+  border-radius: 4px;
+}
+
+.member-tabset > .tab-content {
+  margin-top: -3px;
+  background-color: #fff;
+  border: 0;
+  border-top: 1px solid #eee;
+  padding: 15px 0;
+}