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> </a>
@if ((isLoading$ | async) === true) { @if (isLoading()) {
<h2 i18n>Publication loading...</h2> <h2 i18n>Publication loading...</h2>
<mat-spinner></mat-spinner> <mat-spinner></mat-spinner>
} @else { } @else {
@if ((isLoaded$ | async) === true) { @if (isLoaded()) {
<app-publication-list [publications$]="publications$"></app-publication-list> <app-publication-list [publications$]="publications$"></app-publication-list>
} @else { } @else {
<h2 i18n>There is no any publication...</h2> <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 { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
import { MyPublicationsService } from "./my-publications.service"; 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 { PublicationListComponent } from "../../components/publication-list/publication-list.component";
import { Publication } from "../../core/rest-services/publications/model/publication"; import { Publication } from "../../core/rest-services/publications/model/publication";
import { CommonModule } from "@angular/common"; import { CommonModule } from "@angular/common";
import { RouterModule } from "@angular/router"; import { RouterModule } from "@angular/router";
import { MatTooltipModule } from "@angular/material/tooltip"; import { MatTooltipModule } from "@angular/material/tooltip";
@Component({ @Component({
selector: 'app-my-component', selector: 'app-my-component',
standalone: true, standalone: true,
@@ -23,22 +22,28 @@ import { MatTooltipModule } from "@angular/material/tooltip";
], ],
providers: [MyPublicationsService] providers: [MyPublicationsService]
}) })
export class MyPublicationsComponent implements OnInit { export class MyPublicationsComponent implements OnInit, OnDestroy {
private readonly myPublicationsService = inject(MyPublicationsService); private readonly myPublicationsService = inject(MyPublicationsService);
private isLoadingSubscription?: Subscription;
private isLoadedSubscription?: Subscription;
isLoading = signal(false);
isLoaded = signal(false);
get publications$(): Observable<Publication[]> { get publications$(): Observable<Publication[]> {
return this.myPublicationsService.publications$; return this.myPublicationsService.publications$;
} }
get isLoading$(): Observable<boolean> {
return this.myPublicationsService.isLoading$;
}
get isLoaded$(): Observable<boolean> {
return this.myPublicationsService.isLoaded$;
}
ngOnInit(): void { 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(); this.myPublicationsService.loadAuthenticatedUserPublications();
} }
ngOnDestroy(): void {
this.isLoadingSubscription?.unsubscribe();
this.isLoadedSubscription?.unsubscribe();
}
} }