Estructuración y creación de interfaces

src/app/components/table-genders/table-genders.component.ts

@@ -4,7 +4,7 @@ import { ApiService } from '../../services/api.service';
 import { Gender } from '../../interfaces/gender';
 import { provideIcons, NgIcon } from '@ng-icons/core';
 import { bootstrapArrowRepeat, bootstrapFileEarmarkPlus, bootstrapArrowDown, bootstrapArrowUp, bootstrapCaretLeftFill, bootstrapCaretRightFill } from '@ng-icons/bootstrap-icons';
-import { Page } from '../../interfaces/page';
+import { ResponseGenders } from '../../interfaces/responseGenders';
 import { FormsModule } from '@angular/forms';
 
 @Component({
@@ -17,7 +17,7 @@ import { FormsModule } from '@angular/forms';
 export class TableGendersComponent {
 
   genders: Gender[] = [];
-  consultaActual: Page = {} as Page;
+  consultaActual: ResponseGenders = {} as ResponseGenders;
   paginaActual: number = 1;
   paginas: number[] = [];
   generoEditando: Gender = {} as Gender;

src/app/interfaces/book.ts

@@ -0,0 +1,12 @@
+import { Gender } from "./gender";
+
+export interface Book {
+    id: number;
+    titulo: string;
+    autor: string;
+    genero: Gender;
+}
+
+export class Book {
+    constructor(public id: number, public titulo: string, public autor: string, public genero: Gender) {}
+}

src/app/interfaces/responseBooks.ts

@@ -0,0 +1,30 @@
+import { Book } from "./book";
+
+export interface ResponseBooks {
+    content: Book[];
+    pageable: {
+        sort: {
+          empty: boolean;
+          sorted: boolean;
+          unsorted: boolean;
+        },
+        offset: number,
+        pageNumber: number,
+        pageSize: number,
+        paged: boolean,
+        unpaged: boolean
+      },
+      totalPages: number,
+      totalElements: number,
+      last: boolean,
+      size: number,
+      number: number,
+      sort: {
+        empty: boolean;
+        sorted: boolean;
+        unsorted: boolean;
+      },
+      numberOfElements: number,
+      first: boolean,
+      empty: boolean
+}

src/app/interfaces/responseGenders.ts

@@ -1,6 +1,6 @@
 import { Gender } from "./gender";
 
-export interface Page {
+export interface ResponseGenders {
     content: Gender[];
     pageable: {
         sort: {

src/app/services/api.service.ts

@@ -1,6 +1,8 @@
 import { Injectable } from '@angular/core';
 import { Gender } from '../interfaces/gender';
-import { Page } from '../interfaces/page';
+import { ResponseGenders } from '../interfaces/responseGenders';
+import { ResponseBooks } from '../interfaces/responseBooks';
+import { Book } from '../interfaces/book';
 
 @Injectable({
   providedIn: 'root'
@@ -10,7 +12,7 @@ export class ApiService {
 
   async getGenders(page: number = 0, size: number = 10, fieldOrder: 'id' | 'nombre' | null = null, orderType: 'asc' | 'desc' = 'asc', textoFiltro: string = '') {
     const listaGeneros: Gender[] = [];
-    let respuesta: Page = {} as Page;
+    let respuesta: ResponseGenders = {} as ResponseGenders;
 
     await fetch(`${this.apiUrl}/genders?page=${page}&size=${size}${fieldOrder ? '&fieldOrder=' + fieldOrder : ''}&orderType=${orderType}&nombre=${textoFiltro}`)
         .then(response => response.json())