fix(firebase): rtdb improvements

Author: patrickmichalina

package-lock.json

@@ -72,6 +72,7 @@
     "@types/express": "^4.16.0",
     "@types/jest": "^23.1.5",
     "@types/node": "^10.5.2",
+    "@types/object-hash": "^1.2.0",
     "ajv": "^6.5.2",
     "angularfire2": "^5.0.0-rc.11",
     "chalk": "^2.4.1",
@@ -92,6 +93,7 @@
     "ng2-fused": "^0.5.1",
     "node-sass": "^4.9.2",
     "npm": "^6.1.0",
+    "object-hash": "^1.3.0",
     "pug": "^2.0.3",
     "reload": "^2.3.0",
     "rxjs": "^6.2.1",

package.json

@@ -1,15 +1,18 @@
-import { catchError, filter, map, startWith, take } from 'rxjs/operators'
+import {
+  catchError,
+  filter,
+  map,
+  startWith,
+  take,
+  distinctUntilChanged
+} from 'rxjs/operators'
 import { ApplicationRef, Injectable, Inject } from '@angular/core'
-import { AngularFireDatabase } from 'angularfire2/database'
+import { AngularFireDatabase, QueryFn } from 'angularfire2/database'
 import { makeStateKey, TransferState } from '@angular/platform-browser'
 import { Observable, of } from 'rxjs'
-import { FIREBASE_DATABASE_URL } from './server.firebase.module'
 import { IUniversalRtdbService } from './rtdb.interface'
-// import { sha1 } from 'object-hash'
-
-interface CachedHttp<T> {
-  readonly body: T
-}
+import { FIREBASE_DATABASE_URL } from './tokens'
+import { sha1 } from 'object-hash'
 
 // tslint:disable:no-this
 // tslint:disable-next-line:no-class
@@ -38,10 +41,7 @@ export class UniversalRtDbService implements IUniversalRtdbService {
   }
 
   universalObject<T>(path: string): Observable<T | undefined> {
-    const cached = this.ts.get<CachedHttp<T> | undefined>(
-      this.cacheKey(path),
-      undefined
-    )
+    const cached = this.ts.get<T | undefined>(this.cacheKey(path), undefined)
     const base = this.angularFireDatabase
       .object<T>(path)
       .valueChanges()
@@ -53,12 +53,26 @@ export class UniversalRtDbService implements IUniversalRtdbService {
     return !this.readFromCache
       ? base
       : base.pipe(
-          startWith(cached && cached.body)
-          // distinctUntilChanged((x, y) => (x && sha1(x)) === (y && sha1(y)))
+          startWith(cached),
+          distinctUntilChanged((x, y) => (x && sha1(x)) === (y && sha1(y)))
+        )
+  }
+
+  universalList<T>(
+    path: string,
+    queryFn?: QueryFn
+  ): Observable<ReadonlyArray<T>> {
+    const cached = this.ts.get<ReadonlyArray<T>>(this.cacheKey(path), [])
+    const base = this.angularFireDatabase.list<T>(path, queryFn).valueChanges()
+    return this.readFromCache
+      ? base.pipe(
+          startWith(cached),
+          distinctUntilChanged((x, y) => (x && sha1(x)) === (y && sha1(y)))
         )
+      : base
   }
 
   private cacheKey(path: string) {
-    return makeStateKey<string>(`G.${this.firebaseDatabaseUrl}/${path}.json`)
+    return makeStateKey<string>(`RTDB.${this.firebaseDatabaseUrl}/${path}.json`)
   }
 }

src/modules/firebase/browser.firebase.rtdb.service.ts

@@ -1,5 +1,5 @@
 import { makeStateKey } from '@angular/platform-browser'
 
 export function makeRtDbStateTransferKey(fullUrl: string) {
-  return makeStateKey<string>(`G.${fullUrl}`)
+  return makeStateKey<string>(`RTDB.${fullUrl}`)
 }

src/modules/firebase/common.ts

@@ -1,5 +1,10 @@
 import { Observable } from 'rxjs'
+import { QueryFn } from 'angularfire2/database'
 
 export interface IUniversalRtdbService {
   readonly universalObject: <T>(path: string) => Observable<T | undefined>
+  readonly universalList: <T>(
+    path: string,
+    queryFn?: QueryFn
+  ) => Observable<ReadonlyArray<T>>
 }

src/modules/firebase/rtdb.interface.ts

@@ -13,11 +13,6 @@ export interface LruCache {
   readonly set: <T>(key: string, value: T) => T
 }
 
-export const FIREBASE_USER_AUTH_TOKEN = new InjectionToken<string>(
-  'fng.fb.svr.usr.auth'
-)
-
-export const FIREBASE_DATABASE_URL = new InjectionToken<string>('fng.fb.db.url')
 export const LRU_CACHE = new InjectionToken<LruCache>('fng.lru')
 
 // tslint:disable-next-line:no-class

src/modules/firebase/server.firebase.module.ts

@@ -1,17 +1,22 @@
 import { catchError, take, tap, map } from 'rxjs/operators'
-import { AngularFireDatabase } from 'angularfire2/database'
-import { Inject, Injectable, Optional } from '@angular/core'
-import { HttpClient, HttpParams, HttpResponse } from '@angular/common/http'
 import {
-  FIREBASE_USER_AUTH_TOKEN,
-  LRU_CACHE,
-  LruCache
-} from './server.firebase.module'
+  AngularFireDatabase,
+  QueryFn,
+  PathReference
+} from 'angularfire2/database'
+import { Inject, Injectable, InjectionToken, Optional } from '@angular/core'
+import { HttpClient, HttpParams, HttpResponse } from '@angular/common/http'
+import { LRU_CACHE, LruCache } from './server.firebase.module'
 import { Observable, of } from 'rxjs'
 import { IUniversalRtdbService } from './rtdb.interface'
 import { createHash } from 'crypto'
 import { TransferState, StateKey } from '@angular/platform-browser'
 import { makeRtDbStateTransferKey } from './common'
+import { makeStateKey } from '@angular/platform-browser'
+
+export const FIREBASE_USER_AUTH_TOKEN = new InjectionToken<string>(
+  'fng.fb.svr.usr.auth'
+)
 
 function sha256(data: string) {
   return createHash('sha256')
@@ -29,39 +34,49 @@ function getFullUrl(base: string, params: HttpParams) {
   return stringifiedParams ? `${base}?${params.toString()}` : base
 }
 
-function getParams(fromObject = {}) {
+function getParams(fromObject = {} as any) {
   return new HttpParams({
-    fromObject
+    fromObject: Object.keys(fromObject).reduce((acc, curr) => {
+      return fromObject[curr]
+        ? {
+            ...acc,
+            [curr]: fromObject[curr]
+          }
+        : { ...acc }
+    }, {})
   })
 }
 
 function mapUndefined(err: any) {
   return of(undefined)
 }
 
+function mapEmptyList<T>(err: any) {
+  return of([] as ReadonlyArray<T>)
+}
+
 function attemptToCacheInLru(key: string, lru?: LruCache) {
   return function(response?: any) {
     lru && response && lru.set(sha256(key), response)
   }
 }
 
-function httpResponseToValue<T>(value: HttpResponse<T>): T | undefined {
-  return (value && value.body) || undefined
-}
-
 function attemptToGetCachedValue<T>(key: string, lru?: LruCache) {
   return lru && lru.get<T>(sha256(key))
 }
 
-function writeLruCacheToTransferState<T>(
-  ts: TransferState,
-  key: StateKey<string>
-) {
+function cacheInStateTransfer<T>(ts: TransferState, key: StateKey<string>) {
   return function(val: T) {
     ts.set(key, val)
   }
 }
 
+function removeHttpInterceptorCache<T>(ts: TransferState, key: string) {
+  return function(val: T) {
+    ts.remove(makeStateKey<string>(`G.${key}`))
+  }
+}
+
 // tslint:disable:no-this
 // tslint:disable-next-line:no-class
 @Injectable()
@@ -84,18 +99,52 @@ export class ServerUniversalRtDbService implements IUniversalRtdbService {
     const cacheKey = getFullUrl(url, params)
     const cachedValue = attemptToGetCachedValue<T>(cacheKey, this.lru)
     const tsKey = makeRtDbStateTransferKey(url)
-
-    const baseObs = this.authToken
-      ? this.http.get<HttpResponse<T>>(url, { params })
-      : this.http.get<HttpResponse<T>>(url)
+    const baseObs = this.http.get<HttpResponse<T>>(url, { params })
 
     return cachedValue
-      ? of(cachedValue).pipe(tap(writeLruCacheToTransferState(this.ts, tsKey)))
+      ? of(cachedValue).pipe(tap(cacheInStateTransfer(this.ts, tsKey)))
       : baseObs.pipe(
           take(1),
-          map(httpResponseToValue),
+          tap(removeHttpInterceptorCache(this.ts, cacheKey)),
+          tap(cacheInStateTransfer(this.ts, tsKey)),
           tap(attemptToCacheInLru(cacheKey, this.lru)),
           catchError(mapUndefined)
         )
   }
+
+  universalList<T>(
+    path: PathReference,
+    queryFn?: QueryFn
+  ): Observable<ReadonlyArray<T>> {
+    const query =
+      (queryFn && queryFn(this.afdb.database.ref(path.toString()))) ||
+      this.afdb.database.ref(path.toString())
+    const internalQueryParams = (query as any).queryParams_
+    const paramsFromString = internalQueryParams.toRestQueryStringParameters()
+    const url = `${query.toString()}.json`
+    const params = getParams({ ...paramsFromString, auth: this.authToken })
+    const cacheKey = getFullUrl(url, params)
+    const tsKey = makeRtDbStateTransferKey(url)
+    const baseObs = this.http.get<ReadonlyArray<T>>(url, { params })
+    const cachedValue = attemptToGetCachedValue<ReadonlyArray<T>>(
+      cacheKey,
+      this.lru
+    )
+
+    return cachedValue
+      ? of(cachedValue).pipe(tap(cacheInStateTransfer(this.ts, tsKey)))
+      : baseObs.pipe(
+          take(1),
+          tap(removeHttpInterceptorCache(this.ts, url)),
+          map((val: any) => {
+            return Array.isArray(val)
+              ? val.filter(Boolean)
+              : Object.keys(val).map(key => val[key])
+          }),
+          tap(cacheInStateTransfer(this.ts, tsKey)),
+          tap(attemptToCacheInLru(cacheKey, this.lru)),
+
+          catchError(mapEmptyList)
+        )
+  }
 }

src/modules/firebase/server.firebase.rtdb.service.ts

@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core'
+
+export const FIREBASE_DATABASE_URL = new InjectionToken<string>('fng.fb.db.url')