Flesh out the user page with info based on id

packages/bridge-server/src/users/users.controller.ts

@@ -10,7 +10,7 @@ export class UsersController {
 
     @Get(':id')
     findOne(@Param() params: any) {
-        //return this.seasonsService.findOne(params.id);
+        return this.usersService.findOne(params.id);
     }
 
     @UseGuards(JwtAuthGuard)
@@ -18,6 +18,4 @@ export class UsersController {
     updateLastLogin(@Body() body: any) {
         return this.usersService.updateLastLogin(body.id, body.nickname, body.picture, body.time);
     }
-
-    
 }

packages/bridge-server/src/users/users.service.ts

@@ -10,10 +10,6 @@ import { Racer } from 'src/racers/racer.model';
 @Injectable()
 export class UsersService {
 
-  async findOne(username: string): Promise<User | undefined> {
-    return undefined;
-  }
-
   constructor(
     @InjectModel(User) private userModel: typeof User,
     @InjectModel(Racer) private racersModel: typeof Racer,
@@ -21,6 +17,13 @@ export class UsersService {
   )
   {}
 
+  async findOne(id: string) {
+    return this.userModel.findOne({
+        where: {auth0id: id},
+        include:[Racer]
+     });
+  }
+
   updateLastLogin(id, nickname, picture, time) {
     this.userModel.upsert({auth0id: id, nickname: nickname, picture: picture, lastLogin: time});
   }

packages/bridge-ui/src/app/pages/user/user.component.html

@@ -2,14 +2,14 @@
     <div class="column side">
         <mat-card>
             <mat-card-header>
-              <mat-card-title>{{usersService.getUserName()}}</mat-card-title>
+              <mat-card-title>{{getUserName()}}</mat-card-title>
             </mat-card-header>
-            <img mat-card-image src={{usersService.getUserPicture()}}>
+            <img mat-card-image src={{getUserPicture()}}>
             <mat-card-content>
-              <p>Real Name:</p><p>{{usersService.getUserRealName()}}</p>
+              <p>Real Name:</p><p>{{getUserRealName()}}</p>
-              <p>Email:</p><p>{{usersService.getUserEmail()}}</p>
+              <p>Email:</p><p>{{getUserEmail()}}</p>
             </mat-card-content>
-            @if(this.userId == usersService.getUserId()) {
+            @if(this.userId == getUserId()) {
                 <mat-card-actions>
                     <button mat-button>Edit</button>
                 </mat-card-actions>
@@ -18,14 +18,21 @@
 
         <mat-card>
             <mat-card-header>
-                <mat-card-title>Racer Stats</mat-card-title>
+                @if(!user.racer) {
+                    <mat-card-title>Claim your racer</mat-card-title>
+                }
+                @else {
+                    <mat-card-title>Racer Stats</mat-card-title>
+                }
             </mat-card-header>
             <mat-card-content>
 
             </mat-card-content>
-            <mat-card-actions>
+            @if(!user.racer) {
-              <button mat-button color="accent" (click)="openClaimRacerDialog()">Claim</button>
+                <mat-card-actions>
-            </mat-card-actions>
+                    <button mat-button color="accent" (click)="openClaimRacerDialog()">Claim</button>
+                  </mat-card-actions>
+            }
         </mat-card>
     </div>
 

packages/bridge-ui/src/app/pages/user/user.component.ts

@@ -26,6 +26,7 @@ import { ActivatedRoute } from '@angular/router';
 export class UserComponent {
 
   public userId: string = "";
+  public user: any = null;
 
   constructor(
     public usersService: UsersService,
@@ -33,6 +34,9 @@ export class UserComponent {
     private route: ActivatedRoute,
     ) {
       this.userId = String(this.route.snapshot.paramMap.get('id'));
+      this.usersService.getUserdetails(this.userId).subscribe(data => {
+        this.user = data;
+      });
     }
 
   openClaimRacerDialog()
@@ -40,5 +44,34 @@ export class UserComponent {
     this.dialog.open(ClaimRacerDialogComponent);
   }
 
+  getUserName() : string {
+    if(!this.user) {return ""}
+
+    return this.user.nickname || "";
+  }
+
+  getUserId() : string {
+    if(!this.user) {return ""}
+
+    return this.user.auth0id?.replace("auth0|", "") || "";
+  }
+
+  getUserPicture() : string {
+    if(!this.user) {return ""}
+
+    return this.user.picture || "";
+  }
+
+  getUserEmail() : string {
+    if(!this.user) {return ""}
+
+    return this.user.email || "";
+  }
+
+  getUserRealName() : string {
+    if(!this.user) {return "??? ???"}
+
+    return "??? ???";
+  }
 
 }

packages/bridge-ui/src/app/services/users.service.ts

@@ -1,6 +1,7 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { AuthService, User } from '@auth0/auth0-angular';
+import { Observable, from } from "rxjs";
 
 import * as jwt_decode from 'jwt-decode';
 import { ServerEndpointService } from './server-endpoint.service';
@@ -50,6 +51,19 @@ export class UsersService {
     })
   }
 
+  getUserdetails(id: string) {
+    let promise = new Promise<any|undefined>((resolve, reject) => {
+
+      this.httpClient.get<Array<any>>(this.serverEndpointService.getCurrentEndpoint()+"users/"+"auth0|"+id).subscribe(data => {
+        let _season = data; //this.convertToClientSeason(data);
+        console.log(data);
+        console.log(_season);
+        resolve(_season);
+      });
+    });
+    return from(promise);
+  }
+
   reportLogin() {
     if(!this.localUser) { return }
     let id = this.localUser.sub;