no profile image

server/db.json

@@ -29852,6 +29852,18 @@
         "md": "https://cdn.jsdelivr.net/gh/akabab/[email protected]/api/images/md/731-zoom.jpg",
         "lg": "https://cdn.jsdelivr.net/gh/akabab/[email protected]/api/images/lg/731-zoom.jpg"
       }
+    },
+    {
+      "id": "4b1d",
+      "name": "james",
+      "powerstats": {
+        "intelligence": 77,
+        "strength": 77,
+        "speed": 77,
+        "durability": 77,
+        "power": 77,
+        "combat": 77
+      }
     }
   ]
 }

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, computed, inject, signal } from '@angular/core';
+import { Component, OnDestroy, computed, inject, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterOutlet } from '@angular/router';
 import { SidebarComponent } from './components/sidebar/sidebar.component';
@@ -11,6 +11,8 @@ import { Store, select } from '@ngrx/store';
 import * as HeroesActions from './store/actions'
 import { AppStateInterface } from './models/appState';
 import { menuHiddenSelector } from './store/selectors';
+import { Subject } from 'rxjs/internal/Subject';
+import { takeUntil } from 'rxjs/internal/operators/takeUntil';
 
 
 @Component({
@@ -21,27 +23,37 @@ import { menuHiddenSelector } from './store/selectors';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnDestroy {
+
+  private destroy$ = new Subject<void>();
 
   menuHidden = false;
   sidenavWidth = '0px';
 
   constructor(private store: Store<AppStateInterface>){ }
 
-  ngOnInit(){
+  ngOnInit(): void {
 
     this.store.dispatch(HeroesActions.getHeroes());
 
-    this.store.pipe( select(menuHiddenSelector) ).subscribe(value =>{
-      this.menuHidden = value;
-      this.sidenavWidth =  this.menuHidden ? '0px' : '650px';
-    })
+    this.store.pipe( 
+                    select(menuHiddenSelector),
+                    takeUntil(this.destroy$) )
+      .subscribe(value =>{
+        this.menuHidden = value;
+        this.sidenavWidth =  this.menuHidden ? '0px' : '650px';
+      })
 
   }
 
-  toggleMenu(){
+  toggleMenu(): void {
     this.store.dispatch(HeroesActions.changeMenuToggle());
   }
 
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
 
 }

src/app/components/hero-edit/hero-edit.component.html

@@ -3,7 +3,12 @@ <h1>EDICIÓN DE SUPERHÉROE</h1>
   <div class="edit-container">
 
     <div>
-      <img mat-card-image [src]="data.images.lg" height="100%" alt="Imágen">
+      @if(data.images && data.images.lg){
+        <img mat-card-image [src]="data.images.lg" alt="Imágen">
+      }@else{
+        <div><img mat-card-image src="../../../assets/img/avatar-lg.png" alt="Sin imágen"></div>
+      }
+
     </div>
 
     <div class="card-container">
@@ -68,7 +73,7 @@ <h1>EDICIÓN DE SUPERHÉROE</h1>
 
             <div class="buttons-container">
               <button mat-raised-button type="submit" [disabled]="!heroForm.valid">Enviar</button>
-              <button mat-raised-button (click)="close()">Cerrar</button>
+              <button mat-raised-button type="button" (click)="close()">Cerrar</button>
             </div>
           </form>
         </mat-card-content>

src/app/components/hero-list/hero-list.component.html

@@ -15,7 +15,7 @@
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Nombre </th>
         <td mat-cell *matCellDef="let element"> 
           <div class="first-col">
-            @if(element.images.xs){
+            @if(element.images && element.images.xs){
               <div><img [src]="element.images.xs" alt="Avatar"></div>
             }@else{
               <div><img src="../../../assets/img/avatar-xs.png" alt="Avatar"></div>

src/app/components/hero-list/hero-list.component.ts

@@ -14,6 +14,8 @@ import * as HeroesActions from '../../store/actions';
 import { HeroEditComponent } from '../hero-edit/hero-edit.component';
 import { TitleCasePipe } from '@angular/common';
 import { getSpanishPaginatorIntl } from './spanish-paginator.intl';
+import { Subject } from 'rxjs/internal/Subject';
+import { takeUntil } from 'rxjs/internal/operators/takeUntil';
 
 /**
  * @title Table with pagination
@@ -37,9 +39,14 @@ export class HeroListComponent {
 
   constructor(private store: Store<AppStateInterface>, private dialog: MatDialog) { }
 
+  private destroy$ = new Subject<void>();
+
   ngOnInit() {
 
-    this.store.pipe(select(heroesSelector)).subscribe(heroes => {
+    this.store.pipe(
+      select(heroesSelector),
+      takeUntil(this.destroy$)
+      ).subscribe(heroes => {
 
       if (this.paginator && this.sort) {
 
@@ -92,13 +99,10 @@ export class HeroListComponent {
   }
 
 
-  // tableRefresh(updatedHeroes:Hero[]){
-
-  //   this.dataSource = new MatTableDataSource<Hero>(updatedHeroes);
-  //   if(this.paginator) {
-  //     this.dataSource.paginator = this.paginator;
-  //   }
-  // }
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
 
 
 }

src/app/components/sidebar/sidebar.component.ts

@@ -10,6 +10,8 @@ import { Store, select } from '@ngrx/store';
 import * as HeroesActions from '../../store/actions';
 import { menuHiddenSelector } from '../../store/selectors';
 import { AppStateInterface } from '../../models/appState';
+import { Subject } from 'rxjs/internal/Subject';
+import { takeUntil } from 'rxjs/internal/operators/takeUntil';
 
 
 @Component({
@@ -22,6 +24,8 @@ import { AppStateInterface } from '../../models/appState';
 })
 export class SidebarComponent {
 
+  private destroy$ = new Subject<void>();
+
   hidden = true;
   formFieldWidth = "1%";
   fontSize = "0rem";
@@ -40,12 +44,14 @@ export class SidebarComponent {
 
    ngOnInit():void {
 
-    this.store.pipe( select(menuHiddenSelector) ).subscribe(value =>{
-      this.hidden = value;
-      this.formFieldWidth = this.hidden ? "1%" : "48%";
-      this.fontSize = this.hidden ? "0rem" : "1.5rem";
-
-    })
+    this.store.pipe( 
+                    select(menuHiddenSelector),
+                    takeUntil(this.destroy$) )
+        .subscribe(value =>{
+        this.hidden = value;
+        this.formFieldWidth = this.hidden ? "1%" : "48%";
+        this.fontSize = this.hidden ? "0rem" : "1.5rem";
+        })
 
    }
 
@@ -80,4 +86,9 @@ export class SidebarComponent {
     }
   }
 
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
 }