implement reactjs history

client/dashboard/energy/energy.component.js

@@ -1,30 +1,33 @@
 import React from 'react';
 import Templates from 'config/templates';
-import {RouteHelper} from './../routes';
 
 class EnergyComponent extends React.Component {
 
   constructor(props){
     super(props);
-    var energy = this;
   }
 
-  componentDidMount(){
-    var energy = this;
+  get state_manager(){
+    return this.props.state_manager;
   }
 
-  componentDidUpdate(prev_props, prev_state, prev_context){
+  get loading_energy_data(){
+    return this.props.loading_energy_data;
+  }
+
+  syncFromStateManager(fnStateSet){
     var energy = this;
+    energy.setState(energy.state_manager.state, fnStateSet);
   }
 
   setParam(event){
     var energy = this,
       param = event.target.dataset.param,
       value = event.target.dataset.value,
-      update = {}, route_helper;
+      update = {};
     update[param] = value;
-    route_helper = new RouteHelper(energy.props, update);
-    if (route_helper.routeUpdated()) route_helper.updateRoute();
+    if (value == energy.state_manager.state[param]) return false;
+    energy.state_manager.setParams(update, energy);
   }
 
   render() {
@@ -32,9 +35,6 @@ class EnergyComponent extends React.Component {
     return energyRt.call(this);
   }
 }
+EnergyComponent.NAME = 'EnergyComponent'
 
-EnergyComponent.contextTypes = {
-  router: React.PropTypes.object.isRequired
-};
-
-export default EnergyComponent;
+module.exports = EnergyComponent;

client/dashboard/energy/energy.rt

@@ -1,5 +1,7 @@
+<rt-require dependency="./graph/graph.component" as="EnergyGraph"/>
+<rt-require dependency="./table/table.component" as="EnergyTable"/>
 <div id="energy_view">
-  <div class="alert alert-warning" rt-if="this.props.location.state.loading_energy_data">
+  <div class="alert alert-warning" rt-if="this.loading_energy_data">
     Retrieving energy data...
   </div>
   <div rt-if="this.props.view === 'graph'">
@@ -8,16 +10,28 @@
       <button
         data-param="graph_attr"
         data-value="consumption"
-        rt-class="{active: this.props.params.graph_attr === 'consumption'}"
-        onClick="{this.setAttr}"
+        rt-class="{active: this.props.graph_attr === 'consumption'}"
+        onClick="{this.setParam.bind(this)}"
         type="button" class="btn btn-primary">Consumption</button>
       <button
         data-param="graph_attr"
         data-value="production"
-        rt-class="{active: this.props.params.graph_attr === 'production'}"
-        onClick="{this.setGraphAttr}"
+        rt-class="{active: this.props.graph_attr === 'production'}"
+        onClick="{this.setParam.bind(this)}"
         type="button" class="btn btn-primary">Production</button>
     </div>
   </div>
-  {this.props.children}
+
+  <EnergyGraph
+    rt-if="this.props.view === 'graph'"
+    house="{this.props.house}"
+    state_manager="{this.props.state_manager}"
+    graph_attr="{this.props.graph_attr}"
+    year="{this.props.year}" ></EnergyGraph>
+  <EnergyTable
+    rt-if="this.props.view === 'table'"
+    state_manager="{this.props.state_manager}"
+    house="{this.props.house}"
+    graph_attr="{this.props.graph_attr}"
+    year="{this.props.year}" ></EnergyTable>
 </div>

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

@@ -8,27 +8,29 @@ class GraphComponent extends React.Component {
 
   componentDidMount(){
     var energy_graph = this;
-    if (energy_graph.house) energy_graph.updateGraph();
+    energy_graph.updateGraph();
   }
 
   get house(){
-    return this.props.location.state && this.props.location.state.house;
+    return this.props.house;
   }
 
-  componentDidUpdate(prev_props, prev_state, prev_context){
-    var energy_graph = this;
-    if (energy_graph.shouldUpdateGraph(prev_props)) { energy_graph.updateGraph(); }
+  get state_manager(){
+    return this.props.state_manager;
   }
 
-  shouldUpdateGraph(prev_props){
+  componentDidUpdate(prev_props, prev_state){
     var energy_graph = this;
-    return energy_graph.house && !prev_props.location.state.house ||
-        prev_props.location.state.house.id != energy_graph.house.id;
+    if (prev_props.house != energy_graph.props.house ||
+          prev_props.year != energy_graph.props.year ||
+          prev_props.graph_attr != energy_graph.props.graph_attr){
+      energy_graph.updateGraph();
+    }
   }
 
   updateGraph(){
     var energy_graph = this,
-      graph_attr = energy_graph.props.params.graph_attr;
+      graph_attr = energy_graph.props.graph_attr;
 
     if (energy_graph.graph === undefined){
       energy_graph.graph = new CalendarGridChart({
@@ -68,8 +70,4 @@ class GraphComponent extends React.Component {
 
 }
 
-GraphComponent.contextTypes = {
-  router: React.PropTypes.object.isRequired
-};
-
-export default GraphComponent;
+module.exports = GraphComponent;

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

@@ -5,6 +5,14 @@ import House from './../../../models/house';
 
 class TableComponent extends React.Component {
 
+  get state_manager(){
+    return this.props.state_manager;
+  }
+
+  get house(){
+    return this.state_manager.state.house;
+  }
+
   render() {
     var tableRt = Templates.forComponent('energy_table');
     return tableRt.call(this);
@@ -12,8 +20,4 @@ class TableComponent extends React.Component {
 
 }
 
-TableComponent.contextTypes = {
-  router: React.PropTypes.object.isRequired
-};
-
-export default TableComponent;
+module.exports = TableComponent;

client/dashboard/energy/table/table.rt

@@ -1,4 +1,4 @@
-<table id="energy_table" rt-if="this.house" class="table">
+<table id="energy_table" class="table">
   <thead>
     <tr>
       <th></th>