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