login asociado a user profile funciona

Author: andrecupa

frontend/src/app/app.routing.ts

@@ -17,7 +17,7 @@ const appRoutes = [
     { path: 'home', component: HomeComponent },
     { path: 'news', component: NewsComponent },
     { path: 'showNews/:id', component: ShowNewsComponent},
-    { path: 'userProfile/:id', component: UserProfile},
+    { path: 'userProfile', component: UserProfile},
     { path: 'videogamecatalog', component: VideogameCatalogComponent },
     { path: 'videogame/:id', component: VideogameDetailComponent },
     { path: 'about', component: AboutComponent },

frontend/src/app/components/navBar/navBar.component.html

@@ -9,9 +9,9 @@
                 <li class="nav-item"><a class="nav-link" [routerLink]="['/videogameStatistics/0']">Top Juegos</a></li>
                 <li class="nav-item"><a class="nav-link" [routerLink]="['/news']">Noticias</a></li>
                 <li class="nav-item"><a class="nav-link" [routerLink]="['/about']">About</a></li>
-                <li *ngIf="! loginService.isLogged()" class="nav-item"><a class="nav-link" [routerLink]="['/login']">Iniciar sesión</a></li>
-                <li *ngIf="! loginService.isLogged()" class="nav-item"><a class="nav-link" [routerLink]="['/signUp']">Registrarse</a></li>
-                <li *ngIf="loginService.isLogged()" class="nav-item"><a class="nav-link" [routerLink]="['/userProfile/{{loginService.currentUser().id}}']">Perfil</a></li>
+                <li *ngIf="!loginService.isLogged()" class="nav-item"><a class="nav-link" [routerLink]="['/login']">Iniciar sesión</a></li>
+                <li *ngIf="!loginService.isLogged()" class="nav-item"><a class="nav-link" [routerLink]="['/signUp']">Registrarse</a></li>
+                <li *ngIf="loginService.isLogged()" class="nav-item"><a class="nav-link" [routerLink]="['/userProfile']">Perfil</a></li>
                 <li *ngIf="loginService.isAdmin() && loginService.isLogged()" class="nav-item"><a class="nav-link" [routerLink]="['/admin']">Administrador</a></li>
             </ul>
         </div>

frontend/src/app/components/navBar/navBar.component.ts

@@ -1,5 +1,8 @@
 import { Component } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { Usero } from 'src/app/models/usero.model';
 import { LoginService } from 'src/app/services/login.service'
+import { UseroService } from 'src/app/services/usero.service';
 
 @Component({
   selector: 'navBar',
@@ -9,8 +12,20 @@ import { LoginService } from 'src/app/services/login.service'
 
 export class NavBarComponent{
 
-    constructor(public loginService: LoginService){
+    user?: Usero;
 
+    constructor(public loginService: LoginService, public userService: UseroService, activatedRoute: ActivatedRoute){
+      const id = activatedRoute.snapshot.params['id'];
+        this.userService.getUser(id).subscribe(
+            (user) => this.user =  user as Usero,
+            (error: any) => console.error(error)
+
+        );
     }
 
+    /*ngOnInit(){
+      this.user = this.loginService.currentUser();
+    }*/
+    
+    
 }

frontend/src/app/components/user/userProfile.component.html

@@ -57,7 +57,7 @@ <h3>"{{user.lastName}}"</h3>
   </div>
   <div class="col-md-4">
     <div class="p-3 py-5">
-      <h4 *ngIf="videogame" class="text-right">Mis compras:</h4>
+      <h4 class="text-right">Mis compras:</h4>
       <div *ngFor="let vg of videogame" class="d-flex justify-content-between align-items-center mb-3">
         <ul>
           <li>

frontend/src/app/components/user/userProfile.component.ts

@@ -14,43 +14,41 @@ import { Videogame } from '../../models/videogame.model';
 export class UserProfile {
 
   user!: Usero;
-  videogame! : Videogame[];
+  videogame!: Videogame[];
   @ViewChild("file")
   file: any;
-  removeImage? :boolean;
+  removeImage?: boolean;
 
-  constructor(private router: Router, activatedRoute: ActivatedRoute, public useroService: UseroService, public loginservice : LoginService) {
-    const id = activatedRoute.snapshot.params['id'];
+  constructor(private router: Router, activatedRoute: ActivatedRoute, public useroService: UseroService, public loginservice: LoginService) {
+    const id = loginservice.currentUser()?.id;
     if (id) {
       useroService.getUser(id).subscribe(
         (user) => this.user = user as Usero,
         (error: any) => console.error(error)
       );
+    }
   }
-  useroService.getVideogames(this.user).subscribe(
-    (videogame) => this.videogame = videogame as Videogame[],
-    (error: any) => console.error(error)
-  );
-}
 
-  ngOnInit(){
-    this.useroService.getVideogames(this.user).subscribe(
-      videogame => this.videogame = videogame as Videogame[],
-      error => console.error(error)
-    );
+  ngOnInit() {
+    if (this.loginservice.currentUser()) {
+      this.useroService.getVideogames(this.loginservice.currentUser() as Usero).subscribe(
+        videogame => this.videogame = videogame as Videogame[],
+        error => console.error(error)
+      );
+    }
   }
 
-  save(){
+  save() {
     this.useroService.updateUser(this.user).subscribe(
-      (user: any) => this.uploadImage(user),
+      (user: any) => this.uploadImage(user as Usero),
       (error: string) => alert('Error al guardar los datos: ' + error)
     );
     this.useroService.getVideogames(this.user).subscribe(
       videogame => this.videogame = videogame as Videogame[],
       error => console.error(error)
     );
   }
-  cancel(){
+  cancel() {
     window.history.back();
   }
 
@@ -61,26 +59,26 @@ export class UserProfile {
       formData.append("imageFile", image);
       this.useroService.setUserImage(user, formData).subscribe(
         (_: any) => this.afterUploadImage(),
-        ( error: string) => alert('Error al actualizar o subir la imagen: ' + error)
+        (error: string) => alert('Error al actualizar o subir la imagen: ' + error)
       );
     } else {
       this.afterUploadImage();
     }
   }
 
-  private afterUploadImage(){
+  private afterUploadImage() {
     this.router.navigate(['/userProfile/']);
   }
 
   userImage() {
-    return this.user.image? '/api/users/' + this.user.id + '/image' : '/assets/images/defaultProfilePhoto';
+    return this.user.image ? '/api/users/' + this.user.id + '/image' : '/assets/images/defaultProfilePhoto';
   }
 
   videogameImage(vg: Videogame) {
-    return vg.imageVg? '/api/videogames/' + vg.id + '/image' : '/assets/images/defaultProfilePhoto';
+    return vg.imageVg ? '/api/videogames/' + vg.id + '/image' : '/assets/images/defaultProfilePhoto';
   }
 
-  logOut(){
+  logOut() {
     this.loginservice.logOut();
   }
 }

frontend/src/app/services/usero.service.ts

@@ -68,10 +68,10 @@ export class UseroService {
 		}
 	}
 
-	updateUser(user: Usero) :  Observable<Usero>{
+	updateUser(user: Usero){
 		return this.http.put(BASE_URL + user.id, user).pipe(
-			//catchError((error: any) => this.handleError(error))
-		)as Observable<Usero>;
+			catchError((error: any) => this.handleError(error))
+		);
 	}
 
 	/*------------------IMAGE METHODS------------------*/