fix(resources): angular firestore collection() returns cached values

this is a warkaround for angular/angularfire#2012

Author: emanuel-virca

src/app/web-portal/resources/actions/resources.actions.ts

@@ -1,11 +1,16 @@
-import { createAction, union } from '@ngrx/store';
+import { createAction, union, props } from '@ngrx/store';
 
-export const loadResources = createAction('[Resources] Load Resources');
+export const loadResources = createAction(
+  '[Resources] Load Resources',
+  props<{ pageSize: number; orderByDirection: firebase.firestore.OrderByDirection }>()
+);
+export const loadNextResources = createAction('[Resources] Load Next Resources');
+export const clearResources = createAction('[Resources] Clear Resources');
 
 /**
  * Export a type alias of all actions in this action group
  * so that reducers can easily compose action types
  */
-const all = union({ loadResources });
+const all = union({ loadResources, loadNextResources, clearResources });
 
 export type ResourcesActionsUnion = typeof all;

src/app/web-portal/resources/components/resources-masonry/resources-masonry.component.html

@@ -3,12 +3,7 @@
     <div class="masonry-column-width" #masonryItemSizer></div>
   </div>
   <div>
-    <ngx-masonry
-      [options]="masonryOptions"
-      [updateLayout]="updateMasonryLayout"
-      [useImagesLoaded]="false"
-      *ngIf="viewInitalized"
-    >
+    <ngx-masonry [options]="masonryOptions" [updateLayout]="updateMasonryLayout" [useImagesLoaded]="false" *ngIf="viewInitalized">
       <div class="masonry-item-sizer"></div>
       <div class="gutter-sizer"></div>
       <div ngxMasonryItem class="masonry-item" *ngFor="let resource of resources">

src/app/web-portal/resources/containers/resource-details-shell/resource-details-shell.component.ts

@@ -7,8 +7,8 @@ import { map } from 'rxjs/operators';
 import { Resource } from '@shared/models/resource.model';
 
 // NgRx
-import * as fromResources from '../../reducers';
-import { ResourceActions } from '../../actions';
+import * as fromResources from '@web-portal/resources/reducers';
+import { ResourceActions } from '@web-portal/resources/actions';
 
 @Component({
   selector: 'app-resource-details-shell',
@@ -19,14 +19,15 @@ export class ResourceDetailsShellComponent implements OnDestroy {
   resource$: Observable<Resource>;
   actionsSubscription: Subscription;
 
-  constructor(route: ActivatedRoute, store: Store<fromResources.State>) {
+  constructor(route: ActivatedRoute, private store: Store<fromResources.State>) {
     this.actionsSubscription = route.params
       .pipe(map(params => ResourceActions.selectResource({ id: params.id })))
       .subscribe(store);
     this.resource$ = store.pipe(select(fromResources.getCurrentResource));
   }
 
   ngOnDestroy(): void {
+    this.store.dispatch(ResourceActions.clearSelectedResource());
     this.actionsSubscription.unsubscribe();
   }
 }

src/app/web-portal/resources/containers/resources-list/resources-list.component.ts

@@ -26,26 +26,26 @@ export class ResourcesListComponent implements OnInit, OnDestroy {
   constructor(private loaderService: LoaderService, private store: Store<fromResources.State>) {
     this.resources$ = this.store.select(fromResources.getResources);
     this.store.select(fromResources.getResourcesNextPage).subscribe(x => (this.thereIsMore = x !== null));
-
     this.loaderSubscription = this.store.select(fromResources.getResourcesIsFetching).subscribe(isFetching => {
       isFetching ? this.loaderService.show() : this.loaderService.hide();
       this.loading = isFetching;
     });
   }
 
   ngOnInit() {
-    this.store.dispatch(ResourcesActions.loadResources());
+    this.store.dispatch(ResourcesActions.loadResources({ orderByDirection: 'desc', pageSize: 20 }));
   }
 
   getNextResources() {
     if (this.loading || !this.thereIsMore) {
       return;
     }
 
-    this.store.dispatch(ResourcesActions.loadResources());
+    this.store.dispatch(ResourcesActions.loadNextResources());
   }
 
   ngOnDestroy() {
+    this.store.dispatch(ResourcesActions.clearResources());
     this.loaderSubscription.unsubscribe();
   }
 }

src/app/web-portal/resources/effects/resources.effects.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
-import { Observable, of } from 'rxjs';
-import { mergeMap, catchError, map, withLatestFrom, take } from 'rxjs/operators';
+import { Observable } from 'rxjs';
+import { mergeMap, withLatestFrom } from 'rxjs/operators';
 import { Action, Store } from '@ngrx/store';
 import { Actions, Effect, ofType } from '@ngrx/effects';
 
@@ -21,17 +21,31 @@ export class ResourcesEffects {
   @Effect()
   loadResources$: Observable<Action> = this.actions$.pipe(
     ofType(ResourcesActions.loadResources.type),
+    mergeMap(async action => {
+      try {
+        const resources = await this.resourceService.query(action.pageSize, null, action.orderByDirection);
+        return ResourcesApiActions.loadResourcesSuccess({ resources });
+      } catch (err) {
+        return ResourcesApiActions.loadResourcesFailure(err);
+      }
+    })
+  );
+
+  @Effect()
+  loadNextResources$: Observable<Action> = this.actions$.pipe(
+    ofType(ResourcesActions.loadNextResources.type),
     withLatestFrom(this.store.select(fromResources.getResourcesState)),
-    mergeMap(([, state]) => {
+    mergeMap(async ([, state]) => {
       if (state.currentPage > 0 && !state.startAfter) {
         return null;
       }
 
-      return this.resourceService.query(state.pageSize, state.startAfter, state.orderByDirection).pipe(
-        take(1),
-        map(resources => ResourcesApiActions.loadResourcesSuccess({ resources })),
-        catchError(err => of(ResourcesApiActions.loadResourcesFailure(err)))
-      );
+      try {
+        const resources = await this.resourceService.query(state.pageSize, state.startAfter, state.orderByDirection);
+        return ResourcesApiActions.loadResourcesSuccess({ resources });
+      } catch (err) {
+        return ResourcesApiActions.loadResourcesFailure(err);
+      }
     })
   );
 }

src/app/web-portal/resources/reducers/resources.reducer.ts

@@ -1,5 +1,5 @@
 import { Resource } from '@shared/models/resource.model';
-import { ResourcesApiActions } from '../actions';
+import { ResourcesApiActions, ResourcesActions } from '../actions';
 
 export interface State {
   entities: Resource[];
@@ -21,8 +21,30 @@ export const initialState: State = {
   pageSize: 5,
 };
 
-export function reducer(state = initialState, action: ResourcesApiActions.ResourcesApiActionsUnion): State {
+export function reducer(
+  state = initialState,
+  action: ResourcesApiActions.ResourcesApiActionsUnion | ResourcesActions.ResourcesActionsUnion
+): State {
   switch (action.type) {
+    case ResourcesActions.loadResources.type: {
+      return {
+        ...state,
+        isFetching: true,
+        entities: [],
+        startAfter: null,
+        errorMessage: '',
+        currentPage: 0,
+        pageSize: action.pageSize,
+        orderByDirection: action.orderByDirection,
+      };
+    }
+    case ResourcesActions.loadNextResources.type: {
+      return {
+        ...state,
+        isFetching: true,
+        errorMessage: '',
+      };
+    }
     case ResourcesApiActions.loadResourcesSuccess.type: {
       const startAfter =
         (action.resources || []).length === state.pageSize ? action.resources[state.pageSize - 1].dateTime : null;
@@ -41,6 +63,10 @@ export function reducer(state = initialState, action: ResourcesApiActions.Resour
       return { ...state, isFetching: false, errorMessage: action.errorMsg };
     }
 
+    case ResourcesActions.clearResources.type: {
+      return { ...state, entities: [], currentPage: 0, pageSize: 0, startAfter: 0 };
+    }
+
     default:
       return state;
   }

src/app/web-portal/resources/services/resource/resource.service.ts

@@ -1,58 +1,46 @@
 import { Injectable } from '@angular/core';
-import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
+import { AngularFirestore } from '@angular/fire/firestore';
 import { Observable } from 'rxjs';
-import { mapItemWithId, mapArrayWithId } from '@core/rxjs/pipes';
+import { mapItemWithId } from '@core/rxjs/pipes';
 
 import { Resource } from '@shared/models/resource.model';
 
 @Injectable()
 export class ResourceService {
-  itemsCollection: AngularFirestoreCollection<any>;
+  constructor(private db: AngularFirestore) {}
 
-  constructor(private db: AngularFirestore) {
-    this.itemsCollection = this.db.collection<any>('resources');
-  }
-
-  public query(
+  public async query(
     pageSize: number,
     startAfter?: any,
     orderByDirection?: firebase.firestore.OrderByDirection
-  ): Observable<Resource[]> {
-    // TODO reduce complexity
-    return this.db
+  ): Promise<Resource[]> {
+    const snapshotChanges = await this.db
       .collection<Resource>('resources', ref => {
+        let query: firebase.firestore.CollectionReference | firebase.firestore.Query = ref;
+        query = query.where('published', '==', true);
+        query = query.limit(pageSize);
+        if (orderByDirection) {
+          query = query.orderBy('dateTime', orderByDirection);
+        }
         if (startAfter) {
-          if (orderByDirection) {
-            return ref
-              .where('published', '==', true)
-              .orderBy('dateTime', orderByDirection)
-              .startAfter(startAfter)
-              .limit(pageSize);
-          } else {
-            return ref
-              .where('published', '==', true)
-              .startAfter(startAfter)
-              .limit(pageSize);
-          }
-        } else {
-          if (orderByDirection) {
-            return ref
-              .where('published', '==', true)
-              .orderBy('dateTime', orderByDirection)
-              .limit(pageSize);
-          } else {
-            return ref.where('published', '==', true).limit(pageSize);
-          }
+          query = query.startAfter(startAfter);
         }
+        return query;
       })
-      .snapshotChanges()
-      .pipe(mapArrayWithId);
+      .ref.get();
+
+    return this.mapQuerySnapshotToResource(snapshotChanges);
   }
 
   public get(resourceId: string): Observable<Resource> {
-    return this.itemsCollection
+    return this.db
+      .collection<Resource>('resources')
       .doc<Resource>(resourceId)
       .snapshotChanges()
       .pipe(mapItemWithId);
   }
+
+  public mapQuerySnapshotToResource(snapshotChanges: firebase.firestore.QuerySnapshot): Resource[] {
+    return snapshotChanges.docs.map<Resource>(x => ({ id: x.id, ...(x.data() as Resource) }));
+  }
 }