refactor interface

Author: maxime-urbanski

src/app/components/common/form/form.component.ts

@@ -3,10 +3,9 @@ import {
   EventEmitter,
   Input,
   Output, SimpleChange,
-  WritableSignal
 } from '@angular/core';
 import {FormControl, FormGroup, ReactiveFormsModule} from "@angular/forms";
-import {ApiShow, ApiUpdate} from "@interface/api";
+import {ApiItem} from "@interface/api";
 import {AsyncPipe, NgIf} from "@angular/common";
 import {DeleteComponent} from "@components/common/delete/delete.component";
 
@@ -23,22 +22,21 @@ import {DeleteComponent} from "@components/common/delete/delete.component";
 })
 export class FormComponent {
   @Input() fields: Array<{ name: string; type: string }> = [];
-  @Input() itemToUpdate!: ApiUpdate|ApiShow|undefined;
+  @Input() itemToUpdate!: ApiItem;
   @Output() submit = new EventEmitter
   @Output() delete = new EventEmitter
   public formGroup: FormGroup = new FormGroup<any>({})
 
   ngOnChanges(changes: SimpleChange) {
     this.formGroup = this.createFormGroup()
-    console.log('ngOnChanges', this.itemToUpdate)
   }
 
   createFormGroup() {
     const group: { [key: string]: FormControl<string | null | undefined> } = {}
-    this.fields.forEach(field   => {
+    this.fields.forEach(field => {
       let value;
       if (this.itemToUpdate) {
-        value = this.itemToUpdate[field?.name as keyof ApiShow]
+        value = this.itemToUpdate[field?.name as keyof ApiItem]
       }
       group[field.name] = new FormControl(value)
     })

src/app/components/common/table/table.component.ts

@@ -4,7 +4,7 @@ import {FormsModule} from "@angular/forms";
 import {RouterLink} from "@angular/router";
 import {ShowSvgComponent} from "@components/svg/show-svg/show-svg.component";
 import {EditSvgComponent} from "@components/svg/edit-svg/edit-svg.component";
-import {Hero} from "@interface/hero.model";
+import {Api, ApiItem} from "@interface/api";
 
 @Component({
   selector: 'app-table',
@@ -19,7 +19,7 @@ import {Hero} from "@interface/hero.model";
   templateUrl: './table.component.html',
 })
 export class TableComponent {
-  @Input() items!: WritableSignal<Hero[]| undefined>;
+  @Input() items!: WritableSignal<ApiItem[]>;
   @Input() bulk!: Array<string>;
   @Output() addToBulkList = new EventEmitter<string>()
   @Output() selectedAll = new EventEmitter<Function>()

src/app/components/foo/create/create.component.ts

@@ -22,6 +22,7 @@ export class CreateComponent {
   private apiService: ApiService = inject(ApiService)
   private location: Location = inject(Location)
   public isLoading: WritableSignal<boolean> = signal(false)
+
   public formType: Array<{ name: string; type: string }> = [
     {
       name: 'name',

src/app/components/foo/edit/edit.component.html

@@ -12,7 +12,7 @@
   } @else {
 
 
-    <h1 class="text-3xl my-4">Edit {{ item()?.['name'] }} <span class="text-xl">{{ item()?.["@id"] }} </span></h1>
+    <h1 class="text-3xl my-4">Edit {{ item()['name'] }} <span class="text-xl">{{ item()["@id"] }} </span></h1>
     <app-form [fields]="formType"
               [itemToUpdate]="item()"
               (submit)="onSubmit($event)"

src/app/components/foo/edit/edit.component.ts

@@ -4,7 +4,7 @@ import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 import {Router, RouterLink} from "@angular/router";
 import {DeleteComponent} from "@components/common/delete/delete.component";
 import {FormComponent} from "@components/common/form/form.component";
-import {ApiShow, ApiUpdate} from "@interface/api";
+import {ApiItem} from "@interface/api";
 import {ApiService} from "@service/api.service";
 
 
@@ -22,7 +22,7 @@ import {ApiService} from "@service/api.service";
   templateUrl: './edit.component.html',
 })
 export class EditComponent implements OnInit {
-  public item: WritableSignal<ApiShow | ApiUpdate | undefined> = signal({} as ApiShow | ApiUpdate | undefined);
+  public item: WritableSignal<ApiItem> = signal({} as ApiItem);
   public isLoading: WritableSignal<Boolean> = signal(false)
   public error: WritableSignal<string> = signal('')
   public formType: Array<{ name: string; type: string }> = [
@@ -40,35 +40,33 @@ export class EditComponent implements OnInit {
   }
 
   ngOnInit() {
-    const splitUrl = this.router.url.split('/edit')[0]
+    const uri = this.router.url.split('/edit')[0]
     this.isLoading.set(true)
-    this.apiService.getHero(splitUrl)
+    this.apiService.fetchData(uri)
       .subscribe(value => {
         this.item.set(value)
         this.isLoading.set(false)
       })
   }
 
-  // Interception of changes
-  ngOnChanges(changes: SimpleChange) {
-  }
-
-  get itemId() {
-    return computed(() => this.item()?.["@id"])
-  }
-
   onSubmit(data: any) {
-    return this.apiService.putHero(this.itemId(), {
-      ...this.item,
-      ...data
-    }).subscribe(
-      () => this.location.back()
-    )
+    return this.apiService
+      .putHero(
+        this.item()['@id']!,
+        {
+          ...this.item,
+          ...data
+        })
+      .subscribe(
+        () => this.location.back()
+      )
   }
 
   delete() {
-    return this.apiService.delete(this.itemId()).subscribe(
-      () => this.location.back()
-    )
+    return this.apiService
+      .delete(this.item()['@id']!)
+      .subscribe(
+        () => this.location.back()
+      )
   }
 }

src/app/components/foo/list/list.component.ts

@@ -1,9 +1,10 @@
-import {Component, inject, OnInit, signal, WritableSignal} from '@angular/core';
-import {RouterLink} from "@angular/router";
 import {AsyncPipe, Location, NgFor, NgIf} from "@angular/common";
+import {Component, DestroyRef, inject, OnInit, signal, WritableSignal} from '@angular/core';
+import {RouterLink} from "@angular/router";
+import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
 import {DeleteComponent} from "@components/common/delete/delete.component";
 import {TableComponent} from "@components/common/table/table.component";
-import {Hero} from "@interface/hero.model";
+import {ApiItem} from "@interface/api";
 import {ApiService} from "@service/api.service";
 
 @Component({
@@ -21,18 +22,19 @@ import {ApiService} from "@service/api.service";
 })
 export class ListComponent implements OnInit {
   public isLoading: WritableSignal<Boolean> = signal(false)
-  public items: WritableSignal<Hero[]> = signal([])
+  public items: WritableSignal<ApiItem[]> = signal([])
   public error: WritableSignal<String> = signal('')
   public bulk: WritableSignal<Array<string>> = signal([])
 
   private apiService: ApiService = inject(ApiService)
   private location: Location = inject(Location)
-
+  private destroy: DestroyRef = inject(DestroyRef)
 
   ngOnInit() {
     this.toggleIsLoading()
     this.apiService
-      .getHeroes('/heroes')
+      .fetchDataList('/heroes')
+      .pipe(takeUntilDestroyed(this.destroy))
       .subscribe(
         (items) => {
           this.items.set(items['hydra:member'])
@@ -41,7 +43,7 @@ export class ListComponent implements OnInit {
     this.toggleIsLoading()
   }
 
-  addToBulk(id: string) {
+  public addToBulk(id: string) {
     if (this.isInBulkList(id)) {
       const bulkFilter =
         this.bulk()
@@ -52,7 +54,7 @@ export class ListComponent implements OnInit {
     this.bulk.update(uri => [...uri, id])
   }
 
-  selectedAll() {
+  public selectedAll() {
     if (!this.bulk().length) {
       this.items().forEach(item => {
         this.bulk().push(<string>item["@id"])
@@ -62,7 +64,7 @@ export class ListComponent implements OnInit {
     }
   }
 
-  delete() {
+  public delete() {
     Promise.all(this.bulk())
       .then(
         items =>

src/app/components/foo/show/show.component.html

@@ -8,15 +8,15 @@
         Back to list
       </a>
       <div class="flex">
-        <a [routerLink]="[item()?.['@id'], 'edit']"
+        <a [routerLink]="[item()['@id'], 'edit']"
            class="px-6 py-2 mr-2 bg-green-600 text-white text-xs rounded shadow-md hover:bg-green-700">
           Edit
         </a>
-        <app-delete (delete)="delete(item()?.['@id'])"></app-delete>
+        <app-delete (delete)="delete(item()['@id'])"></app-delete>
       </div>
     </div>
 
-    <h1 class="text-3xl my-4">Edit {{ item()?.['name'] }} <span class="text-xl">{{ item()?.["@id"] }} </span></h1>
+    <h1 class="text-3xl my-4">Edit {{ item()['name'] }} <span class="text-xl">{{ item()["@id"] }} </span></h1>
 
     <div class="bg-white overflow-x-auto">
       <table class="min-w-full">
@@ -40,7 +40,7 @@ <h1 class="text-3xl my-4">Edit {{ item()?.['name'] }} <span class="text-xl">{{ i
               name
             </th>
             <td class="px-6 py-4 whitespace-nowrap text-sm">
-              {{ item()?.name }}
+              {{ item()['name'] }}
             </td>
           } @else {
             <td>Rien</td>

src/app/components/foo/show/show.component.ts

@@ -3,7 +3,7 @@ import {Component, inject, OnInit, signal, WritableSignal} from '@angular/core';
 import {Router, RouterLink} from "@angular/router";
 import {DeleteComponent} from "@components/common/delete/delete.component";
 import {ApiService} from "@service/api.service";
-import {ApiShow, ApiUpdate} from "@interface/api";
+import {ApiItem} from "@interface/api";
 
 @Component({
   selector: 'app-show',
@@ -20,15 +20,15 @@ export class ShowComponent implements OnInit {
   private router: Router = inject(Router)
   private location: Location = inject(Location)
 
-  public item: WritableSignal<ApiShow| ApiUpdate | undefined> = signal({} as ApiShow )
+  public item: WritableSignal<ApiItem> = signal({} as ApiItem)
   public isLoading: WritableSignal<boolean> = signal(false)
   public error: WritableSignal<string> = signal('')
 
   ngOnInit() {
     this.toggleIsLoading()
     const id = this.router.url
     this.apiService
-      .getHero(id)
+      .fetchData(id)
       .subscribe(item => this.item.set(item))
     this.toggleIsLoading()
   }

src/app/interface/api.ts

@@ -1,14 +1,15 @@
-import {Hero} from "./hero.model";
 
 export interface Api {
   "@context"?: string,
   "@id"?: string,
   "@type"?: string,
 }
 
-export interface ApiList extends Api {
+export interface ApiList {
   "hydra:totalItems": Number,
-  "hydra:member": Hero[]
+  "hydra:member": [],
+  "hydra:view": object,
+  "hydra:search": object
 }
 
 export interface ApiShow extends Api {
@@ -21,6 +22,6 @@ export interface ApiUpdate extends ApiShow {
 }
 
 
-export interface ApiCreate {
+export interface ApiItem extends Api {
   [key: string] : string | null | undefined
 }

src/app/interface/hero.model.ts

@@ -1,7 +1,7 @@
 import {HttpClient, HttpErrorResponse, HttpHeaders} from "@angular/common/http";
 import {catchError, Observable, throwError} from "rxjs";
 import {inject, Injectable, Signal} from "@angular/core";
-import {ApiList, ApiShow, ApiUpdate} from "@interface/api";
+import {ApiItem, ApiList, ApiShow, ApiUpdate} from "@interface/api";
 
 @Injectable({providedIn: 'root'})
 export class ApiService {
@@ -13,9 +13,9 @@ export class ApiService {
   }
   public http: HttpClient = inject(HttpClient)
 
-  add(id: string, data: { name: string | null }) {
+  public add(id: string, data: ApiItem) {
     return this.http
-      .post<Foo>(
+      .post<ApiItem>(
         this.baseUrl + id,
         data,
         this.httpOptions
@@ -25,25 +25,25 @@ export class ApiService {
       )
   }
 
-  getHeroes(id: string): Observable<ApiList> {
+  public fetchDataList(id: string): Observable<ApiList> {
+    const url = this.baseUrl + id
     return this.http
-      .get<ApiList>(this.baseUrl + id)
+      .get<ApiList>(url)
       .pipe(
-        catchError(
-          this.handleError
-        )
+        catchError(this.handleError)
       )
   }
 
-  getHero(id: string | Observable<string | undefined>): Observable<ApiShow | ApiUpdate | undefined> {
+  public fetchData(id: string): Observable<ApiItem> {
+    const url = this.baseUrl + id
     return this.http
-      .get<ApiShow | ApiUpdate | undefined>(this.baseUrl + id)
+      .get<ApiItem>(url)
       .pipe(
         catchError(this.handleError)
       )
   }
 
-  putHero(id: Signal<string | undefined> | string | undefined, data: ApiShow | null) { 
+  public putHero(id: string, data: ApiItem) {
     return this.http
       .put<ApiShow>(
         this.baseUrl + id,
@@ -56,7 +56,7 @@ export class ApiService {
   }
 
 
-  delete(id: string | undefined | null) {
+  public delete(id: string | undefined | null) {
     return this.http
       .delete(this.baseUrl + id)
       .pipe(