Rework search page to use signals.
This commit is contained in:
@@ -1,11 +1,12 @@
|
||||
import { CommonModule } from "@angular/common";
|
||||
import { Component, inject, OnDestroy, OnInit } from "@angular/core";
|
||||
import { MatProgressSpinner } from "@angular/material/progress-spinner";
|
||||
import { ActivatedRoute } from "@angular/router";
|
||||
import { Observable, Subscription } from "rxjs";
|
||||
import { PublicationListComponent } from "../../components/publication-list/publication-list.component";
|
||||
import { Publication } from "../../core/rest-services/publications/model/publication";
|
||||
import { SearchPublicationsService } from "./search-publications.service";
|
||||
import {CommonModule} from "@angular/common";
|
||||
import {Component, effect, inject} from "@angular/core";
|
||||
import {MatProgressSpinner} from "@angular/material/progress-spinner";
|
||||
import {ActivatedRoute} from "@angular/router";
|
||||
import {Observable} from "rxjs";
|
||||
import {PublicationListComponent} from "../../components/publication-list/publication-list.component";
|
||||
import {Publication} from "../../core/rest-services/publications/model/publication";
|
||||
import {SearchPublicationsService} from "./search-publications.service";
|
||||
import {toSignal} from "@angular/core/rxjs-interop";
|
||||
|
||||
@Component({
|
||||
selector: 'app-search-publications',
|
||||
@@ -14,27 +15,25 @@ import { SearchPublicationsService } from "./search-publications.service";
|
||||
imports: [CommonModule, MatProgressSpinner, PublicationListComponent],
|
||||
providers: [SearchPublicationsService]
|
||||
})
|
||||
export class SearchPublicationsComponent implements OnInit, OnDestroy {
|
||||
export class SearchPublicationsComponent {
|
||||
private searchPublicationsService = inject(SearchPublicationsService);
|
||||
private activatedRoute = inject(ActivatedRoute);
|
||||
private queryParamsSubscription?: Subscription;
|
||||
|
||||
ngOnInit(): void {
|
||||
this.queryParamsSubscription = this.activatedRoute.queryParamMap
|
||||
.subscribe(params => {
|
||||
const categoryId = params.get('category-id');
|
||||
if (categoryId) {
|
||||
this.searchPublicationsService.loadPublications(`category_id=${categoryId}`);
|
||||
}
|
||||
const query = params.get('query')
|
||||
if (query) {
|
||||
this.searchPublicationsService.loadPublications(query);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.queryParamsSubscription?.unsubscribe();
|
||||
constructor() {
|
||||
const queryParams = toSignal(this.activatedRoute.queryParamMap);
|
||||
effect(() => {
|
||||
let params = queryParams();
|
||||
if (params) {
|
||||
const categoryId = params.get('category-id');
|
||||
if (categoryId) {
|
||||
this.searchPublicationsService.loadPublications(`category_id=${categoryId}`);
|
||||
}
|
||||
const query = params.get('query')
|
||||
if (query) {
|
||||
this.searchPublicationsService.loadPublications(query);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
get publications$(): Observable<Publication[]> {
|
||||
|
||||
@@ -4,7 +4,6 @@ import { BehaviorSubject, Observable } from "rxjs";
|
||||
import { Publication } from "../../core/rest-services/publications/model/publication";
|
||||
import { MatSnackBar } from "@angular/material/snack-bar";
|
||||
|
||||
|
||||
@Injectable()
|
||||
export class SearchPublicationsService {
|
||||
private publicationRestService = inject(PublicationRestService);
|
||||
|
||||
Reference in New Issue
Block a user