refactor(db): use action model

Author: davideast

src/database/interfaces.ts

@@ -39,11 +39,18 @@ export type SnapshotChange = {
   prevKey: string | undefined;
 }
 
+export type Action<T> = {
+  type: string;
+  payload: T;
+};
+
 export interface SnapshotPrevKey {
   snapshot: DatabaseSnapshot | null;
   prevKey: string | undefined;
 }
 
+export type SnapshotAction = Action<SnapshotPrevKey>;
+
 export type Primitive = number | string | boolean;
 
 export type DatabaseSnapshot = firebase.database.DataSnapshot;

src/database/list/changes.spec.ts

@@ -48,7 +48,7 @@ describe('listChanges', () => {
       someRef.set(batch);
       const obs = listChanges(someRef, ['child_added']);
       const sub = obs.skip(2).subscribe(changes => {
-        const data = changes.map(change => change.snapshot!.val());
+        const data = changes.map(change => change.payload.snapshot!.val());
         expect(data).toEqual(items);
         done();
       });
@@ -59,7 +59,7 @@ describe('listChanges', () => {
       aref.set(batch);
       const obs = listChanges(aref, ['child_added']);
       const sub = obs.skip(3).subscribe(changes => {
-        const data = changes.map(change => change.snapshot!.val());
+        const data = changes.map(change => change.payload.snapshot!.val());
         expect(data[3]).toEqual({ name: 'anotha one' });
         done();
       });
@@ -72,7 +72,7 @@ describe('listChanges', () => {
       const obs = listChanges(aref, ['child_added','child_removed'])
 
       const sub = obs.skip(3).subscribe(changes => {
-        const data = changes.map(change => change.snapshot!.val());
+        const data = changes.map(change => change.payload.snapshot!.val());
         expect(data.length).toEqual(items.length - 1);
         done();
       });
@@ -84,9 +84,9 @@ describe('listChanges', () => {
       const aref = ref(rando());
       aref.set(batch);
       const obs = listChanges(aref, ['child_added','child_changed'])
-
+      debugger;
       const sub = obs.skip(3).subscribe(changes => {
-        const data = changes.map(change => change.snapshot!.val());
+        const data = changes.map(change => change.payload.snapshot!.val());
         expect(data[0].name).toEqual('lol');
         done();
       });
@@ -99,7 +99,7 @@ describe('listChanges', () => {
       aref.set(batch);
       const obs = listChanges(aref, ['child_added','child_moved'])
       const sub = obs.skip(3).subscribe(changes => {
-        const data = changes.map(change => change.snapshot!.val());
+        const data = changes.map(change => change.payload.snapshot!.val());
         // We moved the first item to the last item, so we check that
         // the new result is now the last result
         expect(data[data.length - 1]).toEqual(items[0]);

src/database/list/changes.ts

@@ -1,30 +1,30 @@
 import { fromRef } from '../observable/fromRef';
 import { Observable } from 'rxjs/Observable';
-import { DatabaseQuery, ChildEvent, SnapshotChange} from '../interfaces';
+import { DatabaseQuery, ChildEvent, SnapshotChange, Action} from '../interfaces';
 import { positionFor, positionAfter } from './utils';
 import 'rxjs/add/operator/scan';
 import 'rxjs/add/observable/merge';
 
 // TODO(davideast): check safety of ! operator in scan
-export function listChanges<T>(ref: DatabaseQuery, events: ChildEvent[]): Observable<SnapshotChange[]> {
+export function listChanges<T>(ref: DatabaseQuery, events: ChildEvent[]): Observable<Action<any>[]> {
   const childEvent$ = events.map(event => fromRef(ref, event));
   return Observable.merge(...childEvent$)
-  .scan((current, change) => {
-    const { snapshot, event } = change; 
-    switch (change.event) {
+  .scan((current, action) => {
+    const { payload, type } = action; 
+    switch (action.type) {
       case 'child_added':
-        return [...current, change];
+        return [...current, action];
       case 'child_removed':
         // ! is okay here because only value events produce null results
-        return current.filter(x => x.snapshot!.key !== snapshot!.key);
+        return current.filter(x => x.payload.snapshot!.key !== payload.snapshot!.key);
       case 'child_changed':
-        return current.map(x => x.snapshot!.key === change.snapshot!.key ? change : x);
+        return current.map(x => x.payload.snapshot!.key === payload.snapshot!.key ? action : x);
       // default will also remove null results
       case 'child_moved':
-        const curPos = positionFor(current, change.snapshot!.key)
+        const curPos = positionFor(current, payload.snapshot!.key)
         if(curPos > -1) {
           const data = current.splice(curPos, 1)[0];
-          const newPost = positionAfter(current, change.prevKey!);
+          const newPost = positionAfter(current, payload.prevKey!);
           current.splice(newPost, 0, data);
           return current;
         }

src/database/list/create-reference.ts

@@ -1,17 +1,19 @@
-import { DatabaseQuery, ListReference } from '../interfaces';
-import { createListValueChanges } from './value-changes';
-import { createLoadedChanges } from './loaded';
+import { DatabaseQuery, ListReference, ChildEvent } from '../interfaces';
+import { createLoadedChanges, loadedSnapshotChanges } from './loaded';
 import { createDataOperationMethod } from './data-operation';
 import { createRemoveMethod } from './remove';
 
 export function createListReference<T>(query: DatabaseQuery): ListReference<T> {
   return {
     query,
-    snapshotChanges: createLoadedChanges(query),
-    valueChanges<T>() { return createLoadedChanges(query)().map(snaps => snaps.map(snap => snap!.val())); },
     update: createDataOperationMethod<T>(query.ref, 'update'),
     set: createDataOperationMethod<T>(query.ref, 'set'),
     push: (data: T) => query.ref.push(data),
-    remove: createRemoveMethod(query.ref)
+    remove: createRemoveMethod(query.ref),
+    snapshotChanges: createLoadedChanges(query),
+    valueChanges<T>(events?: ChildEvent[]) { 
+      return loadedSnapshotChanges(query, events)
+        .map(snaps => snaps.map(snap => snap!.val())); 
+    }
   }
 }

src/database/list/loaded.ts

@@ -1,10 +1,9 @@
-import { DatabaseQuery, ChildEvent, DatabaseSnapshot } from '../interfaces';
+import { DatabaseQuery, ChildEvent, DatabaseSnapshot, SnapshotPrevKey } from '../interfaces';
 import { fromRef } from '../observable/fromRef';
-import { createListSnapshotChanges } from './snapshot-changes';
+import { snapshotChanges } from './snapshot-changes';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/skipWhile';
 import 'rxjs/add/operator/withLatestFrom';
-import 'rxjs/add/operator/filter';
 import { database } from 'firebase/app';
 
 /**
@@ -17,39 +16,45 @@ import { database } from 'firebase/app';
  * @param query 
  */
 export function createLoadedChanges(query: DatabaseQuery) {
+  return (events?: ChildEvent[]) => loadedSnapshotChanges(query, events);
+}
+
+export function createLoadedList(query: DatabaseQuery) {
   // Create an observable of loaded values to retrieve the
   // known dataset. This will allow us to know what key to
   // emit the "whole" array at when listening for child events.
-  const loaded$ = fromRef(query, 'value')
-    .map(data => {
-      // Store the last key in the data set
-      let lastKeyToLoad;
-      // Loop through loaded dataset to find the last key
-      data.snapshot!.forEach(child => {
-        lastKeyToLoad = child.key; return false;
-      });
-      // return data set 
-      return { data, lastKeyToLoad };
+  return fromRef(query, 'value')
+  .map(data => {
+    // Store the last key in the data set
+    let lastKeyToLoad;
+    // Loop through loaded dataset to find the last key
+    data.payload.snapshot!.forEach(child => {
+      lastKeyToLoad = child.key; return false;
     });
-  return function snapshotChanges(events?: ChildEvent[]) {
-    const snapChanges$ = createListSnapshotChanges(query)(events);
-    return loaded$
-      .withLatestFrom(snapChanges$)
-      // Get the latest values from the "loaded" and "child" datasets
-      // This way 
-      .map(([loaded, snaps]) => {
-        // Store the last key in the data set
-        let lastKeyToLoad = loaded.lastKeyToLoad;
-        // Store all child keys loaded at this point
-        const loadedKeys = snaps.map(snap => snap.key);
-        return { snaps, lastKeyToLoad, loadedKeys }
-      })
-      // This is the magical part, only emit when the last load key
-      // in the dataset has been loaded by a child event. At this point
-      // we can assume the dataset is "whole".
-      .skipWhile(meta => meta.loadedKeys.indexOf(meta.lastKeyToLoad) === -1)
-      // Pluck off the meta data because the user only cares
-      // to iterate through the snapshots
-      .map(meta => meta.snaps);
-  }
+    // return data set and the current last key loaded
+    return { data, lastKeyToLoad };
+  });
+}
+
+export function loadedSnapshotChanges(query: DatabaseQuery, events?: ChildEvent[]) {
+  const snapChanges$ = snapshotChanges(query, events);
+  const loaded$ = createLoadedList(query);
+  return loaded$
+    .withLatestFrom(snapChanges$)
+    // Get the latest values from the "loaded" and "child" datasets
+    // We can use both datasets to form an array of the latest values.
+    .map(([loaded, snaps]) => {
+      // Store the last key in the data set
+      let lastKeyToLoad = loaded.lastKeyToLoad;
+      // Store all child keys loaded at this point
+      const loadedKeys = snaps.map(snap => snap.key);
+      return { snaps, lastKeyToLoad, loadedKeys }
+    })
+    // This is the magical part, only emit when the last load key
+    // in the dataset has been loaded by a child event. At this point
+    // we can assume the dataset is "whole".
+    .skipWhile(meta => meta.loadedKeys.indexOf(meta.lastKeyToLoad) === -1)
+    // Pluck off the meta data because the user only cares
+    // to iterate through the snapshots
+    .map(meta => meta.snaps);
 }

src/database/list/snapshot-changes.spec.ts

@@ -1,6 +1,6 @@
 import * as firebase from 'firebase/app';
 import { FirebaseApp, FirebaseAppConfig, AngularFireModule } from 'angularfire2';
-import { AngularFireDatabase, AngularFireDatabaseModule, createListSnapshotChanges, ChildEvent } from 'angularfire2/database';
+import { AngularFireDatabase, AngularFireDatabaseModule, snapshotChanges, ChildEvent } from 'angularfire2/database';
 import { TestBed, inject } from '@angular/core/testing';
 import { COMMON_CONFIG } from '../test-config';
 import 'rxjs/add/operator/skip';
@@ -45,16 +45,16 @@ describe('snapshotChanges', () => {
     const { events, skip } = opts;
     const aref = createRef(rando());
     aref.set(batch);
-    const snapshotChanges = createListSnapshotChanges(aref);
+    const snapChanges = snapshotChanges(aref, events);
     return {
-      snapshotChanges: snapshotChanges(events).skip(skip),
+      snapChanges: snapChanges.skip(skip),
       ref: aref 
     };
   }
 
   it('should listen to all events by default', (done) => {
-    const { snapshotChanges } = prepareSnapshotChanges({ skip: 2 });
-    const sub = snapshotChanges.subscribe(snaps => {
+    const { snapChanges } = prepareSnapshotChanges({ skip: 2 });
+    const sub = snapChanges.subscribe(snaps => {
       const data = snaps.map(snap => snap.val())
       expect(data).toEqual(items);
       done();
@@ -63,8 +63,8 @@ describe('snapshotChanges', () => {
   });
 
   it('should listen to only child_added events', (done) => {
-    const { snapshotChanges } = prepareSnapshotChanges({ events: ['child_added'], skip: 2 });
-    const sub = snapshotChanges.subscribe(snaps => {
+    const { snapChanges } = prepareSnapshotChanges({ events: ['child_added'], skip: 2 });
+    const sub = snapChanges.subscribe(snaps => {
       const data = snaps.map(snap => snap.val())
       expect(data).toEqual(items);
       done();
@@ -73,12 +73,12 @@ describe('snapshotChanges', () => {
   });
 
   it('should listen to only child_added, child_changed events', (done) => {
-    const {snapshotChanges, ref } = prepareSnapshotChanges({ 
+    const { snapChanges, ref } = prepareSnapshotChanges({ 
       events: ['child_added', 'child_changed'], 
       skip: 3 
     });
     const name = 'ligatures';
-    const sub = snapshotChanges.subscribe(snaps => {
+    const sub = snapChanges.subscribe(snaps => {
       const data = snaps.map(snap => snap.val());
       const copy = [...items];
       copy[0].name = name;

src/database/list/snapshot-changes.ts

@@ -6,10 +6,8 @@ import { validateEventsArray } from './utils';
 import 'rxjs/add/operator/map';
 
 // TODO(davideast): Test safety of ! unwrap
-export function createListSnapshotChanges(query: DatabaseQuery) {
-  return function snapshotChanges(events?: ChildEvent[]): Observable<DatabaseSnapshot[]> {
-    events = validateEventsArray(events);
-    return listChanges(query, events!)
-      .map(changes => changes.map(change => change.snapshot!));
-  }
+export function snapshotChanges(query: DatabaseQuery, events?: ChildEvent[]): Observable<DatabaseSnapshot[]> {
+  events = validateEventsArray(events);
+  return listChanges(query, events!)
+    .map(changes => changes.map(change => change.payload.snapshot!));
 }

src/database/list/state-changes.ts

@@ -0,0 +1,18 @@
+import { DatabaseQuery, ChildEvent, SnapshotChange, SnapshotPrevKey } from '../interfaces';
+import { fromRef } from '../observable/fromRef';
+import { validateEventsArray } from './utils';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/merge';
+import 'rxjs/add/operator/scan';
+
+export function createStateChanges(query: DatabaseQuery) {
+  return (events?: ChildEvent[]) => stateChanges(query, events);
+}
+
+export function stateChanges(query: DatabaseQuery, events?: ChildEvent[]) {
+  events = validateEventsArray(events)!;
+  const childEvent$ = events.map(event => fromRef(query, event));
+  return Observable
+    .merge(...childEvent$)
+    .scan((current, change) => [...current, change], []);
+}

src/database/list/utils.ts

@@ -1,4 +1,5 @@
 import { isNil } from '../utils';
+import { SnapshotAction } from '../interfaces';
 
 export function validateEventsArray(events?: any[]) {
   if(isNil(events) || events!.length === 0) {
@@ -7,17 +8,17 @@ export function validateEventsArray(events?: any[]) {
   return events;
 }
 
-export function positionFor(changes, key) {
+export function positionFor(changes: SnapshotAction[], key) {
   const len = changes.length;
   for(let i=0; i<len; i++) {
-    if(changes[i].snapshot.key === key) {
+    if(changes[i].payload.snapshot!.key === key) {
       return i;
     }
   }
   return -1;
 }
 
-export function positionAfter(changes, prevKey: string) {
+export function positionAfter(changes: SnapshotAction[], prevKey: string) {
   if(prevKey === null) { 
     return 0; 
   } else {

src/database/list/value-changes.ts

@@ -8,6 +8,6 @@ export function createListValueChanges<T>(query: DatabaseQuery) {
   return function valueChanges<T>(events?: ChildEvent[]): Observable<T[]> {
     events = validateEventsArray(events);
     return listChanges<T>(query, events!)
-      .map(changes => changes.map(change => change.snapshot!.val()))
+      .map(changes => changes.map(change => change.payload.snapshot!.val()))
   }
 }