Fix categories loading in side menu component.

This commit is contained in:
Florian THIERRY
2024-08-29 11:09:39 +02:00
parent 5e4068b141
commit d9b856bd43
6 changed files with 75 additions and 37 deletions

View File

@@ -2,6 +2,8 @@ import { Injectable, OnDestroy, inject } from '@angular/core';
import { CategoryService } from '../../core/service/category.service';
import { BehaviorSubject, Observable, Subscription, map } from 'rxjs';
import { Category } from '../../core/rest-services/category/model/category';
import { CategoryRestService } from '../../core/rest-services/category/category.rest-service';
import { MatSnackBar } from '@angular/material/snack-bar';
export interface DisplayableCategory {
id: string;
@@ -19,26 +21,28 @@ export interface DisplayableSubCategory {
providedIn: 'root'
})
export class SideMenuService implements OnDestroy {
private categoryService = inject(CategoryService);
private categoryRestService = inject(CategoryRestService);
private snackBar = inject(MatSnackBar);
private categoriesSubject = new BehaviorSubject<DisplayableCategory[]>([]);
private categoriesSubscription: Subscription | undefined;
private isLoadingSubject = new BehaviorSubject<boolean>(false);
private isLoadedSubject = new BehaviorSubject<boolean>(false);
constructor() {
this.categoriesSubscription = this.categoryService.categories$
.pipe(
map(categories =>
categories
.filter(category => category.subCategories?.length)
.map(category =>
this.mapToDisplayableCategory(category)
)
)
)
.subscribe(categories => this.categoriesSubject.next(categories));
// this.categoriesSubscription = this.categoryService.categories$
// .pipe(
// map(categories =>
// categories
// .filter(category => category.subCategories?.length)
// .map(category =>
// this.mapToDisplayableCategory(category)
// )
// )
// )
// .subscribe(categories => this.categoriesSubject.next(categories));
}
ngOnDestroy(): void {
this.categoriesSubscription?.unsubscribe();
// this.categoriesSubscription?.unsubscribe();
}
private mapToDisplayableCategory(category: Category): DisplayableCategory {
@@ -57,10 +61,6 @@ export class SideMenuService implements OnDestroy {
}
}
get categories$(): Observable<DisplayableCategory[]> {
return this.categoriesSubject.asObservable();
}
private get categories(): DisplayableCategory[] {
return this.categoriesSubject.value;
}
@@ -69,6 +69,36 @@ export class SideMenuService implements OnDestroy {
this.categoriesSubject.next(categories);
}
get categories$(): Observable<DisplayableCategory[]> {
return this.categoriesSubject.asObservable();
}
get isLoading$(): Observable<boolean> {
return this.isLoadingSubject.asObservable();
}
loadCategories(): void {
this.isLoadingSubject.next(true);
this.isLoadedSubject.next(false);
this.categoryRestService.getCategories()
.then(categories => {
const displayableCategories = categories
.filter(category => category.subCategories?.length)
.map(category => this.mapToDisplayableCategory(category));
this.categoriesSubject.next(displayableCategories);
})
.catch(error => {
const errorMessage = "An error occured while loading categories.";
console.error(errorMessage, error);
this.snackBar.open(errorMessage, 'Close', { duration: 5000 });
})
.finally(() => {
this.isLoadingSubject.next(false);
this.isLoadedSubject.next(true);
});
}
setOpenned(category: DisplayableCategory): void {
const categories = this.categories;
const matchingCategory = categories.find(categoryTemp => categoryTemp.id === category.id);