From fc7bb20591513a1310954091518ea26558650b1c Mon Sep 17 00:00:00 2001 From: Frank van Puffelen Date: Sun, 26 Apr 2015 15:39:23 -0700 Subject: [PATCH 1/5] Add `key` to the items in the array (as `$id`) This way the key can be used to identify the items in the React output and tie updates back to the correct `child()` --- src/reactfire.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/reactfire.js b/src/reactfire.js index 9bb1b9c..90d9f3c 100644 --- a/src/reactfire.js +++ b/src/reactfire.js @@ -125,7 +125,9 @@ var ReactFireMixin = { else if (typeof(obj) === "object") { for (var key in obj) { if (obj.hasOwnProperty(key)) { - out.push(obj[key]); + var item = obj[key]; + item['$id'] = key; + out.push(item); } } } From 4fef3451de9686f2f3921e7541637a48e0e181d3 Mon Sep 17 00:00:00 2001 From: Frank van Puffelen Date: Sun, 26 Apr 2015 16:31:31 -0700 Subject: [PATCH 2/5] Use double quotes, according to the build server's wishes --- src/reactfire.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/reactfire.js b/src/reactfire.js index 90d9f3c..d1d2264 100644 --- a/src/reactfire.js +++ b/src/reactfire.js @@ -126,7 +126,7 @@ var ReactFireMixin = { for (var key in obj) { if (obj.hasOwnProperty(key)) { var item = obj[key]; - item['$id'] = key; + item["$id"] = key; out.push(item); } } From f098f7c133555fef60ec2dd01a17cdbae68c9d29 Mon Sep 17 00:00:00 2001 From: Frank van Puffelen Date: Sun, 26 Apr 2015 16:35:55 -0700 Subject: [PATCH 3/5] dot notation --- src/reactfire.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/reactfire.js b/src/reactfire.js index d1d2264..3dc322e 100644 --- a/src/reactfire.js +++ b/src/reactfire.js @@ -126,7 +126,7 @@ var ReactFireMixin = { for (var key in obj) { if (obj.hasOwnProperty(key)) { var item = obj[key]; - item["$id"] = key; + item.$id = key; out.push(item); } } From 4ef38406e6b90b7965f632dd8f1d5c5bfb67c4be Mon Sep 17 00:00:00 2001 From: puf Date: Tue, 2 Jun 2015 11:24:32 -0700 Subject: [PATCH 4/5] Made existing test cases work, made arrays work --- src/reactfire.js | 7 +++++- tests/specs/reactfire.spec.js | 46 +++++++++++++++++++++++++++++++++-- 2 files changed, 50 insertions(+), 3 deletions(-) diff --git a/src/reactfire.js b/src/reactfire.js index 3dc322e..53d30d9 100644 --- a/src/reactfire.js +++ b/src/reactfire.js @@ -120,12 +120,17 @@ var ReactFireMixin = { var out = []; if (obj) { if (this._isArray(obj)) { - out = obj; + for (var i=0; i < obj.length; i++) { + out.push({ $id: i, $value: obj[i] }); + } } else if (typeof(obj) === "object") { for (var key in obj) { if (obj.hasOwnProperty(key)) { var item = obj[key]; + if (typeof(item) !== 'object') { + item = { $value: item }; + } item.$id = key; out.push(item); } diff --git a/tests/specs/reactfire.spec.js b/tests/specs/reactfire.spec.js index 0066f02..8d6de05 100644 --- a/tests/specs/reactfire.spec.js +++ b/tests/specs/reactfire.spec.js @@ -109,7 +109,7 @@ describe("ReactFireMixin Tests:", function() { }, componentDidUpdate: function(prevProps, prevState) { - expect(this.state).toEqual({ items: [1, 2, 3] }); + expect(this.state).toEqual({ items: [{ $id: 'a', $value: 1 }, { $id: 'b', $value: 2 }, { $id:'c', $value: 3 }] }); done(); }, @@ -134,7 +134,7 @@ describe("ReactFireMixin Tests:", function() { }, componentDidUpdate: function(prevProps, prevState) { - expect(this.state).toEqual({ items: [2, 3] }); + expect(this.state).toEqual({ items: [{ $id: 'b', $value: 2 }, { $id:'c', $value: 3 }] }); done(); }, @@ -145,6 +145,48 @@ describe("ReactFireMixin Tests:", function() { React.render(new TestComponent(), document.body); }); + + it("bindAsArray() makes $id available on array items when they are objects", function(done) { + var TestComponent = React.createClass({ + mixins: [ReactFireMixin], + componentWillMount: function() { + this.bindAsArray(firebaseRef, "items"); + }, + componentDidMount: function() { + firebaseRef.set({ first: { index: 1 }, second: { index: 2 }, third: { index: 3 } }); + }, + componentDidUpdate: function(prevProps, prevState) { + expect(this.state.items.map(function(item) { return item.$id; })).toEqual(['first', 'second', 'third']); + done(); + }, + render: function() { + return React.DOM.div(null, "Testing"); + } + }); + React.render(new TestComponent(), document.body); + }) + + it("bindAsArray() makes $id available on array items when they are primitives", function(done) { + var TestComponent = React.createClass({ + mixins: [ReactFireMixin], + componentWillMount: function() { + this.bindAsArray(firebaseRef, "items"); + }, + componentDidMount: function() { + firebaseRef.set(["first", "second", "third"]); + }, + componentDidUpdate: function(prevProps, prevState) { + console.log(JSON.stringify(this.state)); + expect(this.state.items.map(function(item) { return item.$id; })).toEqual([0, 1, 2]); + expect(this.state.items.map(function(item) { return item.$value; })).toEqual(['first', 'second', 'third']); + done(); + }, + render: function() { + return React.DOM.div(null, "Testing"); + } + }); + React.render(new TestComponent(), document.body); + }) }); describe("bindAsObject():", function() { From 2c014929e44d8426f6349832d5c90a4c4d431c22 Mon Sep 17 00:00:00 2001 From: puf Date: Tue, 2 Jun 2015 11:42:10 -0700 Subject: [PATCH 5/5] Fixed single quotes that travis dislikes --- src/reactfire.js | 2 +- tests/specs/reactfire.spec.js | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/reactfire.js b/src/reactfire.js index 53d30d9..cc9314e 100644 --- a/src/reactfire.js +++ b/src/reactfire.js @@ -128,7 +128,7 @@ var ReactFireMixin = { for (var key in obj) { if (obj.hasOwnProperty(key)) { var item = obj[key]; - if (typeof(item) !== 'object') { + if (typeof(item) !== "object") { item = { $value: item }; } item.$id = key; diff --git a/tests/specs/reactfire.spec.js b/tests/specs/reactfire.spec.js index 8d6de05..ebc85e7 100644 --- a/tests/specs/reactfire.spec.js +++ b/tests/specs/reactfire.spec.js @@ -109,7 +109,7 @@ describe("ReactFireMixin Tests:", function() { }, componentDidUpdate: function(prevProps, prevState) { - expect(this.state).toEqual({ items: [{ $id: 'a', $value: 1 }, { $id: 'b', $value: 2 }, { $id:'c', $value: 3 }] }); + expect(this.state).toEqual({ items: [{ $id: "a", $value: 1 }, { $id: "b", $value: 2 }, { $id: "c", $value: 3 }] }); done(); }, @@ -134,7 +134,7 @@ describe("ReactFireMixin Tests:", function() { }, componentDidUpdate: function(prevProps, prevState) { - expect(this.state).toEqual({ items: [{ $id: 'b', $value: 2 }, { $id:'c', $value: 3 }] }); + expect(this.state).toEqual({ items: [{ $id: "b", $value: 2 }, { $id: "c", $value: 3 }] }); done(); }, @@ -156,7 +156,7 @@ describe("ReactFireMixin Tests:", function() { firebaseRef.set({ first: { index: 1 }, second: { index: 2 }, third: { index: 3 } }); }, componentDidUpdate: function(prevProps, prevState) { - expect(this.state.items.map(function(item) { return item.$id; })).toEqual(['first', 'second', 'third']); + expect(this.state.items.map(function(item) { return item.$id; })).toEqual(["first", "second", "third"]); done(); }, render: function() { @@ -178,7 +178,7 @@ describe("ReactFireMixin Tests:", function() { componentDidUpdate: function(prevProps, prevState) { console.log(JSON.stringify(this.state)); expect(this.state.items.map(function(item) { return item.$id; })).toEqual([0, 1, 2]); - expect(this.state.items.map(function(item) { return item.$value; })).toEqual(['first', 'second', 'third']); + expect(this.state.items.map(function(item) { return item.$value; })).toEqual(["first", "second", "third"]); done(); }, render: function() {