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

Author: ushahidlee

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 {

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<any>;
   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) {

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;
 

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,13 +693,17 @@ 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();
     }
   }
 
   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;