Bug 1078718 - Force standalone app reload on hashchange event. r=Standard8

browser/components/loop/content/shared/js/mixins.js

@@ -26,6 +26,37 @@ loop.shared.mixins = (function() {
     rootObject = obj;
   }
 
+  /**
+   * window.location mixin. Handles changes in the call url.
+   * Forces a reload of the page to ensure proper state of the webapp
+   *
+   * @type {Object}
+   */
+  var UrlHashChangeMixin = {
+    propTypes: {
+      onUrlHashChange: React.PropTypes.func.isRequired
+    },
+
+    componentDidMount: function() {
+      rootObject.addEventListener("hashchange", this.onUrlHashChange, false);
+    },
+
+    componentWillUnmount: function() {
+      rootObject.removeEventListener("hashchange", this.onUrlHashChange, false);
+    }
+  };
+
+  /**
+   * Document location mixin.
+   *
+   * @type {Object}
+   */
+  var DocumentLocationMixin = {
+    locationReload: function() {
+      rootObject.location.reload();
+    }
+  };
+
   /**
    * Dropdown menu mixin.
    * @type {Object}
@@ -151,6 +182,8 @@ loop.shared.mixins = (function() {
     AudioMixin: AudioMixin,
     setRootObject: setRootObject,
     DropdownMenuMixin: DropdownMenuMixin,
-    DocumentVisibilityMixin: DocumentVisibilityMixin
+    DocumentVisibilityMixin: DocumentVisibilityMixin,
+    DocumentLocationMixin: DocumentLocationMixin,
+    UrlHashChangeMixin: UrlHashChangeMixin
   };
 })();

browser/components/loop/standalone/content/js/webapp.js

@@ -859,6 +859,10 @@ loop.webapp = (function($, _, OT, mozL10n) {
    * of the webapp page.
    */
   var WebappRootView = React.createClass({displayName: 'WebappRootView',
+
+    mixins: [sharedMixins.UrlHashChangeMixin,
+             sharedMixins.DocumentLocationMixin],
+
     propTypes: {
       client: React.PropTypes.instanceOf(loop.StandaloneClient).isRequired,
       conversation: React.PropTypes.oneOfType([
@@ -879,6 +883,10 @@ loop.webapp = (function($, _, OT, mozL10n) {
       };
     },
 
+    onUrlHashChange: function() {
+      this.locationReload();
+    },
+
     render: function() {
       if (this.state.unsupportedDevice) {
         return UnsupportedDeviceView(null);

browser/components/loop/standalone/content/js/webapp.jsx

@@ -859,6 +859,10 @@ loop.webapp = (function($, _, OT, mozL10n) {
    * of the webapp page.
    */
   var WebappRootView = React.createClass({
+
+    mixins: [sharedMixins.UrlHashChangeMixin,
+             sharedMixins.DocumentLocationMixin],
+
     propTypes: {
       client: React.PropTypes.instanceOf(loop.StandaloneClient).isRequired,
       conversation: React.PropTypes.oneOfType([
@@ -879,6 +883,10 @@ loop.webapp = (function($, _, OT, mozL10n) {
       };
     },
 
+    onUrlHashChange: function() {
+      this.locationReload();
+    },
+
     render: function() {
       if (this.state.unsupportedDevice) {
         return <UnsupportedDeviceView />;

browser/components/loop/test/shared/mixins_test.js

@@ -21,6 +21,75 @@ describe("loop.shared.mixins", function() {
     sandbox.restore();
   });
 
+  describe("loop.webapp.UrlHashChangeMixin", function() {
+    function createTestComponent(onUrlHashChange) {
+      var TestComp = React.createClass({
+        mixins: [loop.shared.mixins.UrlHashChangeMixin],
+        onUrlHashChange: onUrlHashChange || function(){},
+        render: function() {
+          return React.DOM.div();
+        }
+      });
+      return new TestComp();
+    }
+
+    it("should watch for hashchange event", function() {
+      var addEventListener = sandbox.spy();
+      sharedMixins.setRootObject({
+        addEventListener: addEventListener
+      });
+
+      TestUtils.renderIntoDocument(createTestComponent());
+
+      sinon.assert.calledOnce(addEventListener);
+      sinon.assert.calledWith(addEventListener, "hashchange");
+    });
+
+    it("should call onUrlHashChange when the url is updated", function() {
+      sharedMixins.setRootObject({
+        addEventListener: function(name, cb) {
+          if (name === "hashchange") {
+            cb();
+          }
+        }
+      });
+      var onUrlHashChange = sandbox.stub();
+
+      TestUtils.renderIntoDocument(createTestComponent(onUrlHashChange));
+
+      sinon.assert.calledOnce(onUrlHashChange);
+    });
+  });
+
+  describe("loop.webapp.DocumentLocationMixin", function() {
+    var reloadStub, TestComp;
+
+    beforeEach(function() {
+      reloadStub = sandbox.stub();
+
+      sharedMixins.setRootObject({
+        location: {
+          reload: reloadStub
+        }
+      });
+
+      TestComp = React.createClass({
+        mixins: [loop.shared.mixins.DocumentLocationMixin],
+        render: function() {
+          return React.DOM.div();
+        }
+      });
+    });
+
+    it("should call window.location.reload", function() {
+      var comp = TestUtils.renderIntoDocument(TestComp());
+
+      comp.locationReload();
+
+      sinon.assert.calledOnce(reloadStub);
+    });
+  });
+
   describe("loop.panel.DocumentVisibilityMixin", function() {
     var comp, TestComp, onDocumentVisibleStub, onDocumentHiddenStub;
 

browser/components/loop/test/standalone/webapp_test.js

@@ -514,7 +514,8 @@ describe("loop.webapp", function() {
         notifications: notifications,
         sdk: sdk,
         conversation: conversationModel,
-        feedbackApiClient: feedbackApiClient
+        feedbackApiClient: feedbackApiClient,
+        onUrlHashChange: sandbox.stub()
       }));
     }