florian/codiki-hexagonal
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Use signals on home page.

Browse Source
This commit is contained in:
Florian THIERRY
2024-09-25 08:59:32 +02:00
parent 778a92fd5e
commit cfa3015a7b
2 changed files with 18 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/pages/home/home.component.html
View File

@@ -1,5 +1,5 @@
<h1 i18n>Last publications</h1> <h1 i18n>Last publications</h1>
@if ((isLoading$ | async) === true) { @if (isLoading()) {
<h2 i18n>Publications loading...</h2> <h2 i18n>Publications loading...</h2>
<mat-spinner></mat-spinner> <mat-spinner></mat-spinner>
} @else { } @else {

25
frontend/src/app/pages/home/home.component.ts
View File

@@ -1,6 +1,6 @@
import { Component, OnInit, inject } from '@angular/core'; import { Component, OnDestroy, OnInit, inject, signal } from '@angular/core';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
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 { HomeService } from './home.service'; import { HomeService } from './home.service';
@@ -18,18 +18,27 @@ import { CommonModule } from '@angular/common';
styleUrl: './home.component.scss', styleUrl: './home.component.scss',
providers: [HomeService] providers: [HomeService]
}) })
export class HomeComponent implements OnInit { export class HomeComponent implements OnInit, OnDestroy {
private homeService = inject(HomeService); private homeService = inject(HomeService);
private isLoadingSubscription?: Subscription;
get isLoading$(): Observable<boolean> { private publicationsSubscription?: Subscription;
return this.homeService.isLoading$; isLoading = signal(false);
} publicationsIsEmpty = signal(true);
get publications$(): Observable<Publication[]> { get publications$(): Observable<Publication[]> {
return this.homeService.publications$; return this.homeService.publications$;
} }
ngOnInit(): void { ngOnInit(): void {
this.isLoadingSubscription = this.homeService.isLoading$
.subscribe(isLoading => this.isLoading.set(isLoading));
this.publicationsSubscription = this.homeService.publications$
.subscribe(publications => this.publicationsIsEmpty.set(publications.length > 0));
this.homeService.startLatestPublicationsRetrieving(); this.homeService.startLatestPublicationsRetrieving();
} }
ngOnDestroy(): void {
this.isLoadingSubscription?.unsubscribe();
this.publicationsSubscription?.unsubscribe();
}
} }