Use signals on MyPublications page.

This commit is contained in:
Florian THIERRY
2024-09-25 09:11:22 +02:00
parent 7f2e762a44
commit 3ee41cf571
2 changed files with 19 additions and 14 deletions

View File

@@ -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>

View File

@@ -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();
}
}