Correctly order subscription values if orderByChild was passed to query (#34)

Author: simenbrekken

src/connect.js

@@ -2,7 +2,7 @@ import { Component, PropTypes, createElement } from 'react'
 import invariant from 'invariant'
 import firebase from 'firebase/app'
 import 'firebase/database'
-import { createQueryRef, getDisplayName, mapValues, pickBy } from './utils'
+import { createQueryRef, getDisplayName, mapValues, mapSnapshotToValue, pickBy } from './utils'
 
 const defaultMergeProps = (ownProps, firebaseProps) => ({
   ...ownProps,
@@ -80,13 +80,16 @@ export default (mapFirebaseToProps = defaultMapFirebaseToProps, mergeProps = def
 
         const queries = mapSubscriptionsToQueries(subscriptions)
         const nextListeners = mapValues(queries, ({ path, ...query }, key) => {
+          const containsOrderBy = Object.keys(query).some(queryKey => queryKey.startsWith('orderBy'))
           const subscriptionRef = createQueryRef(this.ref(path), query)
           const update = snapshot => {
             if (this.mounted) {
+              const value = containsOrderBy ? mapSnapshotToValue(snapshot) : snapshot.val()
+
               this.setState(prevState => ({
                 subscriptionsState: {
                   ...prevState.subscriptionsState,
-                  [key]: snapshot.val(),
+                  [key]: value,
                 },
               }))
             }

src/utils.js

@@ -34,3 +34,13 @@ export const createQueryRef = (ref, query) => (
 export const getDisplayName = Component => (
   Component.displayName || Component.name || 'Component'
 )
+
+export const mapSnapshotToValue = snapshot => {
+  const result = {}
+
+  snapshot.forEach(child => {
+    result[child.key] = child.val()
+  })
+
+  return result
+}

tests/connect-test.js

@@ -182,6 +182,54 @@ test('Should subscribe to a query', assert => {
   assert.end()
 })
 
+test('Should correctly order subscription values if orderByChild was passed to query', assert => {
+  const mockDatabase = {
+    ref: path => {
+      assert.equal(path, 'bar')
+
+      return mockDatabase
+    },
+    orderByChild: value => {
+      assert.equal(value, 'order')
+
+      return mockDatabase
+    },
+    on: (event, callback) => {
+      assert.equal(event, 'value')
+
+      const snapshot = {
+        val: () => ({
+          alpha: { order: 3 },
+          beta: { order: 2 },
+          gamma: { order: 1 },
+        }),
+
+        forEach: iterator => {
+          iterator({ key: 'gamma', val: () => ({ order: 1 }) })
+          iterator({ key: 'beta', val: () => ({ order: 2 }) })
+          iterator({ key: 'alpha', val: () => ({ order: 3 }) })
+        },
+      }
+
+      callback(snapshot)
+    },
+  }
+
+  const mapFirebaseToProps = () => ({
+    bar: {
+      path: 'bar',
+      orderByChild: 'order',
+    },
+  })
+
+  const firebaseApp = createMockApp(mockDatabase)
+  const stub = renderStub({ mapFirebaseToProps, firebaseApp })
+
+  assert.deepEqual(Object.keys(stub.getSubscriptionState().bar), ['gamma', 'beta', 'alpha'])
+  assert.deepEqual(Object.keys(stub.getProps().bar), ['gamma', 'beta', 'alpha'])
+  assert.end()
+})
+
 test('Should not subscribe to functions', assert => {
   const mapFirebaseToProps = (props, ref) => ({
     foo: 'foo',