From 3ee41cf57189d6607ffcdcdbe410e4b8e181a286 Mon Sep 17 00:00:00 2001
From: Florian THIERRY <florian.thierry@protonmail.com>
Date: Wed, 25 Sep 2024 09:11:22 +0200
Subject: [PATCH] Use signals on MyPublications page.

---
 .../my-publications.component.html            |  4 +--
 .../my-publications.component.ts              | 29 +++++++++++--------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/frontend/src/app/pages/my-publications/my-publications.component.html b/frontend/src/app/pages/my-publications/my-publications.component.html
index 23a2b62..878b93a 100644
--- a/frontend/src/app/pages/my-publications/my-publications.component.html
+++ b/frontend/src/app/pages/my-publications/my-publications.component.html
@@ -8,11 +8,11 @@
     +
 </a>
 
-@if ((isLoading$ | async) === true) {
+@if (isLoading()) {
     <h2 i18n>Publication loading...</h2>
     <mat-spinner></mat-spinner>
 } @else {
-    @if ((isLoaded$ | async) === true) {
+    @if (isLoaded()) {
         <app-publication-list [publications$]="publications$"></app-publication-list>
     } @else {
         <h2 i18n>There is no any publication...</h2>
diff --git a/frontend/src/app/pages/my-publications/my-publications.component.ts b/frontend/src/app/pages/my-publications/my-publications.component.ts
index 72416e1..ffea336 100644
--- a/frontend/src/app/pages/my-publications/my-publications.component.ts
+++ b/frontend/src/app/pages/my-publications/my-publications.component.ts
@@ -1,14 +1,13 @@
-import { Component, inject, OnInit } from "@angular/core";
+import { Component, inject, OnDestroy, OnInit, signal } from "@angular/core";
 import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
 import { MyPublicationsService } from "./my-publications.service";
-import { Observable } from "rxjs";
+import { Observable, Subscription } from "rxjs";
 import { PublicationListComponent } from "../../components/publication-list/publication-list.component";
 import { Publication } from "../../core/rest-services/publications/model/publication";
 import { CommonModule } from "@angular/common";
 import { RouterModule } from "@angular/router";
 import { MatTooltipModule } from "@angular/material/tooltip";
 
-
 @Component({
     selector: 'app-my-component',
     standalone: true,
@@ -23,22 +22,28 @@ import { MatTooltipModule } from "@angular/material/tooltip";
     ],
     providers: [MyPublicationsService]
 })
-export class MyPublicationsComponent implements OnInit {
+export class MyPublicationsComponent implements OnInit, OnDestroy {
     private readonly myPublicationsService = inject(MyPublicationsService);
+    private isLoadingSubscription?: Subscription;
+    private isLoadedSubscription?: Subscription;
+
+    isLoading = signal(false);
+    isLoaded = signal(false);
 
     get publications$(): Observable<Publication[]> {
         return this.myPublicationsService.publications$;
     }
 
-    get isLoading$(): Observable<boolean> {
-        return this.myPublicationsService.isLoading$;
-    }
-
-    get isLoaded$(): Observable<boolean> {
-        return this.myPublicationsService.isLoaded$;
-    }
-
     ngOnInit(): void {
+        this.isLoadingSubscription = this.myPublicationsService.isLoading$
+            .subscribe(isLoading => this.isLoading.set(isLoading));
+        this.isLoadedSubscription = this.myPublicationsService.isLoaded$
+            .subscribe(isLoaded => this.isLoaded.set(isLoaded));
         this.myPublicationsService.loadAuthenticatedUserPublications();    
     }
+
+    ngOnDestroy(): void {
+        this.isLoadingSubscription?.unsubscribe();
+        this.isLoadedSubscription?.unsubscribe();
+    }
 }
\ No newline at end of file