Use signals on MyPublications page.
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user