quitting react router

client/dashboard/energy/energy.component.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import Templates from 'config/templates';
-import House from './../../models/house';
 import {RouteHelper} from './../routes';
 
 class EnergyComponent extends React.Component {
@@ -8,34 +7,14 @@ class EnergyComponent extends React.Component {
   constructor(props){
     super(props);
     var energy = this;
-    energy.state = {
-      loading_energy_data: true
-    };
   }
 
   componentDidMount(){
-    var energy = this,
-      house = energy.context.house;
-    if (!house || energy.context.loading_energy_data) return false;
-    house.setEnergyData()
-      .then(()=>{
-        energy.setState({loading_energy_data: false});
-      });
+    var energy = this;
   }
 
   componentDidUpdate(prev_props, prev_state, prev_context){
-    var energy = this,
-      house = energy.context.house;
-    if (!house) return false;
-    if (!prev_context.house ||
-        prev_context.house.data.id != energy.context.house.data.id ||
-        !house.matchesYearState(prev_props.params)) {
-      energy.setState({loading_energy_data: true});
-      house.setEnergyData()
-        .then(()=>{
-          energy.setState({loading_energy_data: false}); // will update graph or table.
-        });
-    }
+    var energy = this;
   }
 
   setParam(event){
@@ -43,19 +22,9 @@ class EnergyComponent extends React.Component {
       param = event.target.dataset.param,
       value = event.target.dataset.value,
       update = {}, route_helper;
-    override[param] = value;
-    route_helper = new RouteHelper(energy.context.house, energy.props);
-    if (route_helper.routeUpdated()){
-      route_helper.updateHouseState();
-      energy.context.router.push(makeRoute(house, energy.props, override));
-    }
-  }
-
-  getChildContext(){
-    var layout = this;
-    return {
-      loading_energy_data: layout.state.loading_energy_data
-    };
+    update[param] = value;
+    route_helper = new RouteHelper(energy.props, update);
+    if (route_helper.routeUpdated()) route_helper.updateRoute();
   }
 
   render() {
@@ -64,13 +33,7 @@ class EnergyComponent extends React.Component {
   }
 }
 
-
-EnergyComponent.childContextTypes = {
-  loading_energy_data: React.PropTypes.bool.isRequired
-};
-
 EnergyComponent.contextTypes = {
-  house: React.PropTypes.instanceOf(House),
   router: React.PropTypes.object.isRequired
 };
 

client/dashboard/energy/energy.rt

@@ -1,5 +1,5 @@
 <div id="energy_view">
-  <div class="alert alert-warning" rt-if="this.state.loading_energy_data">
+  <div class="alert alert-warning" rt-if="this.props.location.state.loading_energy_data">
     Retrieving energy data...
   </div>
   <div rt-if="this.props.view === 'graph'">
@@ -8,13 +8,13 @@
       <button
         data-param="graph_attr"
         data-value="consumption"
-        rt-class="{active: this.state.graph_attr === 'consumption'}"
+        rt-class="{active: this.props.params.graph_attr === 'consumption'}"
         onClick="{this.setAttr}"
         type="button" class="btn btn-primary">Consumption</button>
       <button
         data-param="graph_attr"
         data-value="production"
-        rt-class="{active: this.state.graph_attr === 'production'}"
+        rt-class="{active: this.props.params.graph_attr === 'production'}"
         onClick="{this.setGraphAttr}"
         type="button" class="btn btn-primary">Production</button>
     </div>

client/dashboard/energy/graph/graph.component.js

@@ -7,26 +7,27 @@ import House from './../../../models/house';
 class GraphComponent extends React.Component {
 
   componentDidMount(){
-    var energy_graph = this,
-      house = energy_graph.context.house;
-    if (!energy_graph.context.loading_energy_data) energy_graph.updateGraph();
+    var energy_graph = this;
+    if (energy_graph.house) energy_graph.updateGraph();
+  }
+
+  get house(){
+    return this.props.location.state && this.props.location.state.house;
   }
 
   componentDidUpdate(prev_props, prev_state, prev_context){
-    var energy_graph = this,
-      house = energy_graph.context.house;
-    if (energy_graph.context.loading_energy_data) {return false;}
-    if (!prev_context.house ||
-        prev_context.loading_energy_data ||
-        prev_context.house.id != energy_graph.context.house.id) {
-      energy_graph.updateGraph();
-    }
+    var energy_graph = this;
+    if (energy_graph.shouldUpdateGraph(prev_props)) { energy_graph.updateGraph(); }
   }
 
+  shouldUpdateGraph(prev_props){
+    var energy_graph = this;
+    return energy_graph.house && !prev_props.location.state.house ||
+        prev_props.location.state.house.id != energy_graph.house.id;
+  }
 
   updateGraph(){
     var energy_graph = this,
-      house = energy_graph.context.house,
       graph_attr = energy_graph.props.params.graph_attr;
 
     if (energy_graph.graph === undefined){
@@ -56,7 +57,7 @@ class GraphComponent extends React.Component {
       css_class: '',
       min_range: 0,
       max_range: 150,
-      values: house.energy_data
+      values: energy_graph.house.energy_data
     });
   }
 
@@ -68,8 +69,6 @@ class GraphComponent extends React.Component {
 }
 
 GraphComponent.contextTypes = {
-  house: React.PropTypes.instanceOf(House),
-  loading_energy_data: React.PropTypes.bool.isRequired,
   router: React.PropTypes.object.isRequired
 };
 

client/dashboard/energy/table/table.component.js

@@ -13,7 +13,6 @@ class TableComponent extends React.Component {
 }
 
 TableComponent.contextTypes = {
-  house: React.PropTypes.instanceOf(House),
   router: React.PropTypes.object.isRequired
 };
 

client/dashboard/energy/table/table.rt

@@ -1,4 +1,4 @@
-<table id="energy_table" rt-if="this.context.house" class="table">
+<table id="energy_table" rt-if="this.house" class="table">
   <thead>
     <tr>
       <th></th>
@@ -8,7 +8,7 @@
     </tr>
   </thead>
   <tbody>
-    <tr rt-repeat="energy_datum in this.context.house.energy_data" key="{energy_datum.scoped_id}">
+    <tr rt-repeat="energy_datum in this.house.energy_data" key="{energy_datum.scoped_id}">
       <td></td>
       <td>{energy_datum.day_to_s}</td>
       <td>{energy_datum.consumption_to_s}</td>