Fixing Angular 21 by migrating all values by signals. #11
@@ -1,13 +1,11 @@
|
|||||||
import {Component, inject, OnInit, Signal} from "@angular/core";
|
import {Component, inject, OnInit} 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 {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 {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";
|
||||||
import {MatRippleModule} from "@angular/material/core";
|
import {MatRippleModule} from "@angular/material/core";
|
||||||
import {toSignal} from "@angular/core/rxjs-interop";
|
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
@@ -27,17 +25,9 @@ import {toSignal} from "@angular/core/rxjs-interop";
|
|||||||
export class MyPublicationsComponent implements OnInit {
|
export class MyPublicationsComponent implements OnInit {
|
||||||
private readonly myPublicationsService = inject(MyPublicationsService);
|
private readonly myPublicationsService = inject(MyPublicationsService);
|
||||||
|
|
||||||
get publications(): Signal<Publication[]> {
|
publications = this.myPublicationsService.publications;
|
||||||
return toSignal(this.myPublicationsService.publications$, {initialValue: []});
|
isLoading = this.myPublicationsService.isLoading;
|
||||||
}
|
isLoaded = this.myPublicationsService.isLoaded;
|
||||||
|
|
||||||
get isLoading(): Signal<boolean> {
|
|
||||||
return toSignal(this.myPublicationsService.isLoading$, {initialValue: false});
|
|
||||||
}
|
|
||||||
|
|
||||||
get isLoaded(): Signal<boolean> {
|
|
||||||
return toSignal(this.myPublicationsService.isLoaded$, {initialValue: false});
|
|
||||||
}
|
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
this.myPublicationsService.loadAuthenticatedUserPublications();
|
this.myPublicationsService.loadAuthenticatedUserPublications();
|
||||||
|
|||||||
@@ -1,57 +1,56 @@
|
|||||||
import {inject, Injectable} from "@angular/core";
|
import {inject, Injectable, Signal, signal} from "@angular/core";
|
||||||
import {PublicationRestService} from "../../core/rest-services/publications/publication.rest-service";
|
import {PublicationRestService} from "../../core/rest-services/publications/publication.rest-service";
|
||||||
import {AuthenticationService} from "../../core/service/authentication.service";
|
import {AuthenticationService} from "../../core/service/authentication.service";
|
||||||
import {BehaviorSubject, Observable} from "rxjs";
|
|
||||||
import {Publication} from "../../core/rest-services/publications/model/publication";
|
import {Publication} from "../../core/rest-services/publications/model/publication";
|
||||||
import {Router} from "@angular/router";
|
import {Router} from "@angular/router";
|
||||||
import {MatSnackBar} from "@angular/material/snack-bar";
|
import {MatSnackBar} from "@angular/material/snack-bar";
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
export class MyPublicationsService {
|
export class MyPublicationsService {
|
||||||
private readonly authenticationService = inject(AuthenticationService);
|
readonly #authenticationService = inject(AuthenticationService);
|
||||||
private readonly publicationRestService = inject(PublicationRestService);
|
readonly #publicationRestService = inject(PublicationRestService);
|
||||||
private readonly snackBar = inject(MatSnackBar);
|
readonly #snackBar = inject(MatSnackBar);
|
||||||
private readonly router = inject(Router);
|
readonly #router = inject(Router);
|
||||||
private publicationsSubject = new BehaviorSubject<Publication[]>([]);
|
#publications = signal<Publication[]>([]);
|
||||||
private isLoadingSubject = new BehaviorSubject<boolean>(false);
|
#isLoading = signal(false);
|
||||||
private isLoadedSubject = new BehaviorSubject<boolean>(false);
|
#isLoaded = signal(false);
|
||||||
|
|
||||||
get publications$(): Observable<Publication[]> {
|
get publications(): Signal<Publication[]> {
|
||||||
return this.publicationsSubject.asObservable();
|
return this.#publications.asReadonly();
|
||||||
}
|
}
|
||||||
|
|
||||||
get isLoading$(): Observable<boolean> {
|
get isLoading(): Signal<boolean> {
|
||||||
return this.isLoadingSubject.asObservable();
|
return this.#isLoading.asReadonly();
|
||||||
}
|
}
|
||||||
|
|
||||||
get isLoaded$(): Observable<boolean> {
|
get isLoaded(): Signal<boolean> {
|
||||||
return this.isLoadedSubject.asObservable();
|
return this.#isLoaded.asReadonly();
|
||||||
}
|
}
|
||||||
|
|
||||||
loadAuthenticatedUserPublications(): void {
|
loadAuthenticatedUserPublications(): void {
|
||||||
const authenticatedUser = this.authenticationService.getAuthenticatedUser();
|
const authenticatedUser = this.#authenticationService.getAuthenticatedUser();
|
||||||
if (authenticatedUser) {
|
if (authenticatedUser) {
|
||||||
this.isLoadingSubject.next(true);
|
this.#isLoading.set(true);
|
||||||
this.isLoadedSubject.next(false);
|
this.#isLoaded.set(false);
|
||||||
|
|
||||||
const query = `author_id=${authenticatedUser.id}`;
|
const query = `author_id=${authenticatedUser.id}`;
|
||||||
this.publicationRestService.search(query)
|
this.#publicationRestService.search(query)
|
||||||
.then(publications => {
|
.then(publications => {
|
||||||
this.publicationsSubject.next(publications);
|
this.#publications.set(publications);
|
||||||
})
|
})
|
||||||
.catch(error => {
|
.catch(error => {
|
||||||
const errorMessage = $localize`An error occurred while retrieving your publications...`;
|
const errorMessage = $localize`An error occurred while retrieving your publications...`;
|
||||||
this.snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
|
this.#snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
|
||||||
console.error(errorMessage, error);
|
console.error(errorMessage, error);
|
||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
this.isLoadingSubject.next(false);
|
this.#isLoading.set(false);
|
||||||
this.isLoadedSubject.next(true);
|
this.#isLoaded.set(true);
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
this.authenticationService.unauthenticate();
|
this.#authenticationService.unauthenticate();
|
||||||
this.snackBar.open($localize`You are unauthenticated. Please, log-in first.`, $localize`Close`, {duration: 5000});
|
this.#snackBar.open($localize`You are unauthenticated. Please, log-in first.`, $localize`Close`, {duration: 5000});
|
||||||
this.router.navigate(['/login']);
|
this.#router.navigate(['/login']);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -43,7 +43,7 @@ export class PublicationUpdateComponent {
|
|||||||
|
|
||||||
#publicationId$ = this.#activatedRoute.params
|
#publicationId$ = this.#activatedRoute.params
|
||||||
.pipe(map(queryParams => queryParams['publicationId']));
|
.pipe(map(queryParams => queryParams['publicationId']));
|
||||||
#publicationId = toSignal(this.#publicationId$, { initialValue: undefined });
|
#publicationId = toSignal(this.#publicationId$, {initialValue: undefined});
|
||||||
|
|
||||||
get isLoading(): Signal<boolean> {
|
get isLoading(): Signal<boolean> {
|
||||||
return this.#isLoading.asReadonly();
|
return this.#isLoading.asReadonly();
|
||||||
|
|||||||
Reference in New Issue
Block a user