old-spike/client/dashboard/routes.js

import House from './house/house.component'
import Power from './power/power.component';
import PowerGraph from './power/graph/graph.component';
import PowerTable from './power/table/table.component';
import Energy from './energy/energy.component';
import EnergyGraph from './energy/graph/graph.component';
import EnergyTable from './energy/table/table.component';
import About from './about/about.component';
import Layout from './layout/layout.component';
import ArrayUtil from './../../shared/utils/array';

const POWER_ROUTES = {
  path: 'power',
  component: Power,
  childRoutes: [
    {path: ':month/:year', component: PowerGraph},
    {path: ':month/:year/graph', component: PowerGraph},
    {path: ':month/:year/table', component: PowerTable}
  ]
};

const ENERGY_ROUTES = {
  path: 'energy',
  component: Energy,
  childRoutes: [
    {path: ':year/:graph_attr', component: EnergyGraph},
    {path: ':year/:graph_attr/graph', component: EnergyGraph},
    {path: ':year/:graph_attr/table', component: EnergyTable}
  ]
};

export const ROUTES = [{
  path: '/',
  component: Layout,
  indexRoute: { component: About },
  childRoutes: [{
      path: 'houses/:house_id',
      component: House,
      childRoutes: [ENERGY_ROUTES, POWER_ROUTES]
  }]
}];

export class RouteHelper {

  constructor(router, props, update){
    update = update || {};
    var route_helper = this;
    route_helper.props = props;
    route_helper.router = router;
    route_helper.update = update || {};
  }

  get house(){
    var route_helper = this;
    return route_helper.update.house || route_helper.props.location.state && route_helper.props.location.state.house;
  }

  get view(){
    var route_helper = this;
    return route_helper.update.view || (route_helper.tableSelected() ? 'table' : 'graph');
  }

  get graph_attr(){
    var route_helper = this;
    return route_helper.update.graph_attr || route_helper.props.params.graph_attr || 'consumption';
  }

  get dataset(){
    var route_helper = this;
    return route_helper.update.dataset || (route_helper.energySelected() ? 'energy' : 'power');
  }

  get power_range(){
    var route_helper = this,
    range = route_helper.update.power_range || route_helper.props.location.query.dates;
    if (range) {
      range[0] = +range[0];
      range[1] = +range[1];
    }
    return range;
  }

  get date_params(){
    var route_helper = this;
    return {
      month: route_helper.update.month || route_helper.house.month,
      year: route_helper.update.year || route_helper.house.year };
  }

  get new_state(){
    var route_helper = this;
    return Object.keys(route_helper.update).reduce((state, key)=>{
      if (['house'].indexOf(key) >= 0) state[key] = route_helper.update[key];
      return state;
    }, {});
  }


  // compare house state to updates or params.
  routeUpdated(){
    var route_helper = this,
      house = route_helper.house;
    return (route_helper.energySelected() && !house.matchesYearState(route_helper.date_params)) ||
            (route_helper.powerSelected() && !house.matchesMonthState(route_helper.date_params) || !house.matchesPowerRange(route_helper.power_range)) &&
            (!route_helper.update.view || route_helper.update.view !== route_helper.view);
  }

  // This will update the house state acccording to passed update parameters.
  updateHouseState(){
    var route_helper = this,
      house = route_helper.house;
    house.setMonthState(route_helper.date_params, route_helper.update.power_range);
    if (route_helper.energySelected()){
      route_helper.router.push({state: {loading_energy_data: true}})
      return house.setEnergyData().then(()=>{ return {loading_energy_data: false} });
    } else if (route_helper.powerSelected()) {
      route_helper.router.push({state: {loading_power_data: true}})
      return house.setPowerData().then(()=>{ return {loading_power_data: false} });
    } else return Promise.resolve({});
  }

  updateRoute(){
    var route_helper = this;
    return route_helper.updateHouseState()
      .then((data_state)=>{
        route_helper.router.push({
          pathname: route_helper.newRoute(),
          query: route_helper.newQuery(),
          state: Object.assign(data_state, route_helper.new_state)
        });
      });
  }

  // should be run AFTER updateHouseState is called.
  newRoute(){
    var route_helper = this,
      house = route_helper.house;
    if (route_helper.dataset === 'energy'){
      return `/houses/${house.data.id}/energy/${house.state.year}/${route_helper.graph_attr}/${route_helper.view}`;
    } else {
      return `/houses/${house.data.id}/power/${house.state.month}/${house.state.year}/${route_helper.view}`;
    }
  }

  newQuery(){
    var route_helper = this;
    if (route_helper.dataset === 'power') return {dates: route_helper.house.state.power_range};
    else return {};
  }

  graphSelected(){
    return RouteHelper.graphSelected(this.props.routes);
  }

  static graphSelected(routes){
    if (RouteHelper.energySelected(routes)){
      return ArrayUtil.any(routes, (route)=>{ return route.component === EnergyGraph; });
    } else if (RouteHelper.powerSelected(routes)){
      return ArrayUtil.any(routes, (route)=>{ return route.component === PowerGraph; });
    }
    return false;
  }

  tableSelected(){
    return RouteHelper.tableSelected(this.props.routes);
  }

  static tableSelected(routes){
    if (RouteHelper.energySelected(routes)){
      return ArrayUtil.any(routes, (route)=>{ return route.component === EnergyTable; });
    } else if (RouteHelper.powerSelected(routes)){
      return ArrayUtil.any(routes, (route)=>{ return route.component === PowerTable; });
    }
    return false;
  }

  energySelected(){
    return RouteHelper.energySelected(this.props.routes);
  }

  static energySelected(routes){
    return ArrayUtil.any(routes, (route)=>{ return route.component === Energy; });
  }

  powerSelected(){
    return RouteHelper.powerSelected(this.props.routes);
  }

  static powerSelected(routes){
    return ArrayUtil.any(routes, (route)=>{ return route.component === Power; });
  }


}