Application states should be loaded as high up as possible

public/js/UnleashApp.jsx

@@ -3,6 +3,9 @@ var Router                  = require('react-router');
 var Menu                    = require('./components/Menu');
 var ErrorMessages           = require('./components/ErrorMessages');
 var initalizer              = require('./stores/initalizer');
+var FeatureToggleStore      = require('./stores/FeatureToggleStore');
+var StrategyStore           = require('./stores/StrategyStore');
+var ArchiveStore            = require('./stores/ArchivedToggleStore');
 var Link = Router.Link;
 var RouteHandler = Router.RouteHandler;
 
@@ -11,6 +14,43 @@ var UnleashApp = React.createClass({
         router: React.PropTypes.func
     },
 
+    getInitialState: function() {
+        return {
+            features:           FeatureToggleStore.getFeatureToggles(),
+            strategies:         StrategyStore.getStrategies(),
+            archivedFeatures:   ArchiveStore.getArchivedToggles()
+        };
+    },
+
+    onFeatureToggleChange: function() {
+        this.setState({
+            features: FeatureToggleStore.getFeatureToggles()
+        });
+    },
+
+    onStrategiesChange: function() {
+        this.setState({
+            strategies: StrategyStore.getStrategies()
+        });
+    },
+
+    onArchiveChange: function() {
+        this.setState({
+            archivedFeatures: ArchiveStore.getArchivedToggles()
+        });
+    },
+
+    componentDidMount: function() {
+        this.unsubscribeFS = FeatureToggleStore.listen(this.onFeatureToggleChange);
+        this.unsubscribeSS = StrategyStore.listen(this.onStrategiesChange);
+        this.unsubscribeAS = ArchiveStore.listen(this.onArchiveChange);
+    },
+    componentWillUnmount: function() {
+        this.unsubscribeFS();
+        this.unsubscribeSS();
+        this.unsubscribeAS();
+    },
+
     componentWillMount: function() {
         initalizer(30);
     },
@@ -38,7 +78,11 @@ var UnleashApp = React.createClass({
                         <div className="mod shadow mrn pan">
                             <div className="inner pan">
                                 <div className="bd">
-                                    <RouteHandler/>
+                                    <RouteHandler
+                                            features={this.state.features}
+                                            strategies={this.state.strategies}
+                                            archivedFeatures={this.state.archivedFeatures}
+                                    />
                                 </div>
                             </div>
                         </div>

public/js/__tests__/components/feature/ArchiveFeatureComponent-test.js

@@ -16,13 +16,8 @@ describe("FeatureForm", function () {
             { name: "featureY" }
         ];
 
-        Server.getArchivedFeatures.mockImplementation(function(cb) {
+        Component = TestUtils.renderIntoDocument(
-          cb(null, archivedToggles);
+            <FeatureArchive archivedFeatures={archivedToggles} />);
-        });
-
-        FeatureToggleStore.initStore(archivedToggles);
-
-        Component = TestUtils.renderIntoDocument(<FeatureArchive />);
     });
 
     afterEach(function() {

public/js/components/feature/ArchiveFeatureComponent.jsx

@@ -1,27 +1,7 @@
 var React               = require("react");
 var FeatureActions      = require('../../stores/FeatureToggleActions');
-var FeatureToggleStore  = require('../../stores/ArchivedToggleStore');
 
 var ArchiveFeatureComponent = React.createClass({
-    getInitialState: function() {
-        return {
-            archivedFeatures: FeatureToggleStore.getArchivedToggles()
-        };
-    },
-
-    onStoreChange: function() {
-        this.setState({
-            archivedFeatures: FeatureToggleStore.getArchivedToggles()
-        });
-    },
-
-    componentDidMount: function() {
-        this.unsubscribe = FeatureToggleStore.listen(this.onStoreChange);
-    },
-
-    componentWillUnmount: function() {
-        this.unsubscribe();
-    },
 
     onRevive: function(item) {
         FeatureActions.revive.triggerPromise(item);
@@ -39,7 +19,7 @@ var ArchiveFeatureComponent = React.createClass({
                         </tr>
                     </thead>
                     <tbody>
-                        {this.state.archivedFeatures.map(this.renderArchivedItem)}
+                        {this.props.archivedFeatures.map(this.renderArchivedItem)}
                     </tbody>
                 </table>
             </div>

public/js/components/feature/FeatureTogglesComponent.jsx

@@ -3,29 +3,14 @@ var FeatureList         = require('./FeatureList');
 var FeatureForm         = require('./FeatureForm');
 var FeatureActions      = require('../../stores/FeatureToggleActions');
 var ErrorActions        = require('../../stores/ErrorActions');
-var FeatureToggleStore  = require('../../stores/FeatureToggleStore');
-var StrategyStore       = require('../../stores/StrategyStore');
 
 var FeatureTogglesComponent = React.createClass({
     getInitialState: function() {
         return {
-            features: FeatureToggleStore.getFeatureToggles(),
             createView: false
         };
     },
 
-    onFeatureToggleChange: function() {
-        this.setState({
-            features: FeatureToggleStore.getFeatureToggles()
-        });
-    },
-    componentDidMount: function() {
-        this.unsubscribe = FeatureToggleStore.listen(this.onFeatureToggleChange);
-    },
-    componentWillUnmount: function() {
-        this.unsubscribe();
-    },
-
     updateFeature: function (feature) {
       FeatureActions.update.triggerPromise(feature);
     },
@@ -55,13 +40,13 @@ var FeatureTogglesComponent = React.createClass({
                 {this.state.createView ? this.renderCreateView() : this.renderCreateButton()}
 
                 <FeatureList
-                  features={this.state.features}
+                  features={this.props.features}
                   onFeatureChanged={this.updateFeature}
                   onFeatureArchive={this.archiveFeature}
                   onFeatureSubmit={this.createFeature}
                   onFeatureCancel={this.cancelNewFeature}
                   onNewFeature={this.newFeature}
-                  strategies={StrategyStore.getStrategies()} />
+                  strategies={this.props.strategies} />
             </div>
         );
     },
@@ -70,7 +55,7 @@ var FeatureTogglesComponent = React.createClass({
         return <FeatureForm
             onCancel={this.cancelNewFeature}
             onSubmit={this.createFeature}
-            strategies={StrategyStore.getStrategies()} />;
+            strategies={this.props.strategies} />;
     },
 
     renderCreateButton: function() {

public/js/components/strategy/StrategiesComponent.jsx

@@ -1,29 +1,15 @@
 var React             = require('react');
 var StrategyList      = require('./StrategyList');
 var StrategyForm      = require('./StrategyForm');
-var StrategyStore     = require('../../stores/StrategyStore');
 var StrategyActions   = require('../../stores/StrategyActions');
 
 var StrategiesComponent = React.createClass({
     getInitialState: function() {
         return {
-            createView: false,
+            createView: false
-            strategies: StrategyStore.getStrategies()
         };
     },
 
-    onStoreChange: function() {
-        this.setState({
-            strategies: StrategyStore.getStrategies()
-        });
-    },
-    componentDidMount: function() {
-        this.unsubscribe = StrategyStore.listen(this.onStoreChange);
-    },
-    componentWillUnmount: function() {
-        this.unsubscribe();
-    },
-
     onNewStrategy: function() {
         this.setState({createView: true});
     },
@@ -48,7 +34,7 @@ var StrategiesComponent = React.createClass({
                     this.renderCreateView() : this.renderCreateButton()}
                 <hr />
                 <StrategyList
-                    strategies={this.state.strategies}
+                    strategies={this.props.strategies}
                     onRemove={this.onRemove} />
             </div>
         );