videogames recommendations working

Author: JhostinD

frontend/src/app/app.module.ts

@@ -21,12 +21,13 @@ import { VideogameCatalogComponent } from './components/videogame/videogame-cata
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { CarouselComponent } from './components/carousel/carousel.component';
 import { AboutComponent } from './components/about/about.component';
+import { VideogameRecommendedComponent } from './components/videogame-recommended/videogame-recommended.component';
 
 
 
 
 @NgModule({
-  declarations: [UserProfile,AppComponent, LoginComponent, HeadComponent, NewsComponent, NavBarComponent, FooterComponent, NewsTemplateComponent,VideogameCatalogComponent, ShowNewsComponent, HomeComponent, UserProfile,VideogameCardComponent, CarouselComponent, AboutComponent],
+  declarations: [UserProfile,AppComponent, LoginComponent, HeadComponent, NewsComponent, NavBarComponent, FooterComponent, NewsTemplateComponent,VideogameCatalogComponent, ShowNewsComponent, HomeComponent, UserProfile,VideogameCardComponent, CarouselComponent, AboutComponent, VideogameRecommendedComponent],
   imports: [BrowserModule, FormsModule, HttpClientModule, routing, FormsModule,RouterModule, NgbModule],
   bootstrap: [AppComponent]
 })

frontend/src/app/app.routing.ts

@@ -9,6 +9,7 @@ import { UserProfile } from './components/user/userProfile.component';
 import { AboutComponent } from './components/about/about.component';
 import { LoginComponent } from './components/login/login.component';
 import { SignUpComponent } from './components/login/signUp.component';
+import { VideogameRecommendedComponent } from './components/videogame-recommended/videogame-recommended.component';
 
 //aquí tenemos que completar todo lo que queremos que se vaya cargando en el router-outlet
 //ojo, el template no debe llamar al servicio, hay que hacerlo a través del componente
@@ -23,6 +24,7 @@ const appRoutes = [
     { path: 'about', component: AboutComponent },
     { path: 'login', component: LoginComponent },
     { path: 'signUp', component: SignUpComponent },
+    { path: 'videogameRecommended', component: VideogameRecommendedComponent },
     { path: '', redirectTo: 'home', pathMatch: 'full' },
     { path: '**', redirectTo: 'home' }
 

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

@@ -6,7 +6,7 @@
             <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                 <li class="nav-item"><a class="nav-link" href="/">Inicio</a></li>
                 <li class="nav-item"><a class="nav-link" [routerLink]="['/videogamecatalog']">Descubrir Juegos</a></li>
-                <li class="nav-item"><a class="nav-link" [routerLink]="['/videogameStatistics/0']">Top Juegos</a></li>
+                <li class="nav-item"><a class="nav-link" [routerLink]="['/videogameRecommended']">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>

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

@@ -49,17 +49,17 @@ export class UserProfile {
   }
 
   uploadImage(user: Usero): void {
-    // const image = this.file.nativeElement.files[0];
-    // if (image) {
-    //   let formData = new FormData();
-    //   formData.append("imageFile", image);
-    //   this.useroService.setUserImage(user, formData).subscribe(
-    //     (_: any) => this.afterUploadImage(),
-    //     (error: string) => alert('Error al actualizar o subir la imagen: ' + error)
-    //   );
-    // } else {
-    //   this.afterUploadImage();
-    // }
+    const image = this.file.nativeElement.files[0];
+    if (image) {
+      let formData = new FormData();
+      formData.append("imageFile", image);
+      this.useroService.setUserImage(user, formData).subscribe(
+        (_: any) => this.afterUploadImage(),
+        (error: string) => alert('Error al actualizar o subir la imagen: ' + error)
+      );
+    } else {
+      this.afterUploadImage();
+    }
   }
 
   private afterUploadImage() {

frontend/src/app/components/videogame-recommended/videogame-recommended.component.css

@@ -0,0 +1,9 @@
+
+<section class="py-5">
+    <div class="container px-5">
+        <h2 class="fw-bolder fs-5 mb-4">Videojuegos</h2>
+        <div id="moreImages" class="row gx-5">    
+            <videogame-card class="col-lg-4 mb-5" *ngFor="let videogame of videogames;let i = index" [videogame]="videogame"></videogame-card>
+        </div>        
+    </div>
+</section>

frontend/src/app/components/videogame-recommended/videogame-recommended.component.html

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Usero } from 'src/app/models/usero.model';
+import { Videogame } from 'src/app/models/videogame.model';
+import { LoginService } from 'src/app/services/login.service';
+import { UseroService } from 'src/app/services/usero.service';
+
+@Component({
+  selector: 'app-videogame-recommended',
+  templateUrl: './videogame-recommended.component.html',
+  styleUrls: ['./videogame-recommended.component.css']
+})
+export class VideogameRecommendedComponent implements OnInit {
+
+  videogames!:Videogame[];
+
+  constructor(private router: Router, public useroService: UseroService, public loginService: LoginService){
+    const id = loginService.currentUser()?.id;
+    useroService.getRecommended(id as number).subscribe(      
+      videogame => this.videogames= videogame as Videogame[] ,
+      error => console.error(error)
+    )
+  }
+
+  ngOnInit(){ }
+
+}