From 893e2630b593785edd0b0a6987ed5b8006f355b0 Mon Sep 17 00:00:00 2001 From: ushahidlee <152860706+ushahidlee@users.noreply.github.com> Date: Fri, 4 Oct 2024 16:47:54 +0200 Subject: [PATCH] Ush 1559 - Saved Filters (#1370) * Fix for cached filter persisting.... * Fixed a few filter storage issues and killed old requests * changed the reset order slightly --- .../src/app/feed/feed.component.ts | 41 +++++++++++-------- .../src/app/map/map.component.ts | 11 ++++- .../shared/components/main-view.component.ts | 1 + .../search-form/search-form.component.ts | 8 ++++ 4 files changed, 43 insertions(+), 18 deletions(-) diff --git a/apps/web-mzima-client/src/app/feed/feed.component.ts b/apps/web-mzima-client/src/app/feed/feed.component.ts index c3fc252652..3e11c1f3df 100644 --- a/apps/web-mzima-client/src/app/feed/feed.component.ts +++ b/apps/web-mzima-client/src/app/feed/feed.component.ts @@ -9,7 +9,7 @@ import { searchFormHelper } from '@helpers'; import { TranslateService } from '@ngx-translate/core'; import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'; import { NgxMasonryComponent, NgxMasonryOptions } from 'ngx-masonry'; -import { filter, forkJoin, Subject, Subscription } from 'rxjs'; +import { filter, forkJoin, Subscription } from 'rxjs'; import { PostDetailsModalComponent } from '../map'; import { MainViewComponent } from '@shared'; import { SessionService, BreakpointService, EventBusService, EventType } from '@services'; @@ -18,7 +18,6 @@ import { LanguageService } from '../core/services/language.service'; import { SavedsearchesService, PostsService, - GeoJsonFilter, PostResult, PostStatus, postHelpers, @@ -43,10 +42,10 @@ export class FeedComponent extends MainViewComponent implements OnInit, OnDestro private _routerEvent = Subscription.EMPTY; @ViewChild('feed') public feed: ElementRef; @ViewChild('masonry') public masonry: NgxMasonryComponent; - private readonly getPostsSubject = new Subject<{ - params: GeoJsonFilter; - add?: boolean; - }>(); + // private readonly getPostsSubject = new Subject<{ + // params: GeoJsonFilter; + // add?: boolean; + // }>(); public pagination = { page: 0, limit: 20, @@ -104,6 +103,7 @@ export class FeedComponent extends MainViewComponent implements OnInit, OnDestro public initialLoad = true; public urlFromRouteTrigger: string; public urlAfterInteractionWithFilters: string; + private postRequests: Subscription[] = []; constructor( protected override router: Router, @@ -428,17 +428,26 @@ export class FeedComponent extends MainViewComponent implements OnInit, OnDestro loadData(): void {} private getPosts({ params, loadMore }: { params: any; loadMore?: boolean }): void { - /* -------------------------------------------- - Work with Posts Service to get posts from API - ----------------------------------------------*/ - this.postsService.getPosts('', { ...params, ...this.activeSorting }).subscribe({ - next: (data) => { - this.posts = loadMore ? [...this.posts, ...data.results] : data.results; - }, - // complete: () => { - // // console.log('complete?'); - // }, + // Call the posts service, keeping the subscription for later + const postRequestSubscription = this.postsService + .getPosts('', { ...params, ...this.activeSorting }) + .subscribe({ + next: (data) => { + this.posts = loadMore ? [...this.posts, ...data.results] : data.results; + }, + }); + + // Unsubscribe and destroy existing subscriptions.... + this.postRequests.forEach((subscription) => { + subscription.unsubscribe(); }); + + // Reset everything so the user sees some loading indicators + this.posts = []; + this.isLoading = true; + + // Keep the subscription so we can end it later if its replaced with a new api call + this.postRequests.push(postRequestSubscription); } public updateMasonry(): void { diff --git a/apps/web-mzima-client/src/app/map/map.component.ts b/apps/web-mzima-client/src/app/map/map.component.ts index 216657b999..d800d6e1a3 100644 --- a/apps/web-mzima-client/src/app/map/map.component.ts +++ b/apps/web-mzima-client/src/app/map/map.component.ts @@ -48,7 +48,7 @@ export class MapComponent extends MainViewComponent implements OnInit { fitBoundsOptions: FitBoundsOptions = { animate: true, }; - cachedFilter: string; + // cachedFilter: string; filtersSubscription$: Observable; public leafletOptions: MapOptions; public progress = 0; @@ -310,6 +310,12 @@ export class MapComponent extends MainViewComponent implements OnInit { const isThisInProgress = pageNumber > 1 && posts.meta.total !== this.mapLayers[0].getLayers().length; + const doMarkersAndResultsMismatch = + this.mapLayers.length === 0 || + posts.meta.total !== this.mapLayers[0].getLayers().length; + + const isFirstAndOnlyPage = pageNumber === 1 && pageNumber === posts.meta.last_page; + // Has the filter changed from when we last saw it? let hasTheFilterChanged = false; if (filter !== undefined) { @@ -325,7 +331,8 @@ export class MapComponent extends MainViewComponent implements OnInit { if ( isFirstLayerEmpty || hasTheFilterChanged || - isThisInProgress // || + isThisInProgress || + (isFirstAndOnlyPage && doMarkersAndResultsMismatch) // isLayerCountMismatch ) { if (!isFirstLayerEmpty && !isThisInProgress) { diff --git a/apps/web-mzima-client/src/app/shared/components/main-view.component.ts b/apps/web-mzima-client/src/app/shared/components/main-view.component.ts index 7dfdd283da..6dd2c5f626 100644 --- a/apps/web-mzima-client/src/app/shared/components/main-view.component.ts +++ b/apps/web-mzima-client/src/app/shared/components/main-view.component.ts @@ -21,6 +21,7 @@ export abstract class MainViewComponent { limit: 500, offset: 0, }; + cachedFilter: string; public user: UserInterface; public isDesktop: boolean = false; diff --git a/apps/web-mzima-client/src/app/shared/components/search-form/search-form.component.ts b/apps/web-mzima-client/src/app/shared/components/search-form/search-form.component.ts index 7140337dcf..9ea087f39c 100644 --- a/apps/web-mzima-client/src/app/shared/components/search-form/search-form.component.ts +++ b/apps/web-mzima-client/src/app/shared/components/search-form/search-form.component.ts @@ -632,6 +632,10 @@ export class SearchFormComponent extends BaseComponent implements OnInit { this.activeSavedSearch = activeSavedSearch.result; this.checkSavedSearchNotifications(); } + localStorage.setItem( + this.session.getLocalStorageNameMapper('filters'), + JSON.stringify(this.activeSavedSearch!.filter), + ); } async applySavedFilter(value: number | null) { @@ -689,6 +693,8 @@ export class SearchFormComponent extends BaseComponent implements OnInit { this.activeSavedSearch.filter.source = [this.activeSavedSearch.filter.source]; } + this.activeSavedSearch.filter.currentView = this.activeSavedSearch.view; + this.resetForm(this.activeSavedSearch.filter); } else { this.resetForm(); @@ -696,6 +702,8 @@ export class SearchFormComponent extends BaseComponent implements OnInit { } public resetSavedFilter(): void { + localStorage.removeItem(this.session.getLocalStorageNameMapper('filters')); + localStorage.removeItem(this.session.getLocalStorageNameMapper('activeSavedSearch')); this.clearSavedFilter(); this.resetForm(); this.defaultFormValue = this.formBuilder.group(searchFormHelper.DEFAULT_FILTERS).value;