diff --git a/common/components/bonfires/Bonfires.jsx b/common/components/bonfires/Bonfires.jsx index 37b21cce488750..5b872dcc8aa3eb 100644 --- a/common/components/bonfires/Bonfires.jsx +++ b/common/components/bonfires/Bonfires.jsx @@ -1,22 +1,46 @@ var React = require('react'), + + // ## mixins + { ObservableStateMixin } = require('thundercats'), + + // ## components SidePanel = require('./SidePanel.jsx'), Editor = require('../editor'), - BonfireStore = require('./Store'), - { ObservableStateMixin } = require('thundercats'), - { - Grid, - Row, - Col, - } = require('react-bootstrap'); + { Grid, Row, Col } = require('react-bootstrap'), + + // ## flux + BonfireStore = require('./Store'); var Bonfire = React.createClass({ mixins: [ObservableStateMixin], + contextTypes: { + makePath: React.PropTypes.func.isRequired, + replaceWith: React.PropTypes.func.isRequired + }, + getObservable: function() { return BonfireStore; }, + componentDidMount: function() { + // get history object + var his = typeof window !== 'undefined' ? window.history : null; + // spinal-case bonfireName + var bonfireName = this.state.name.toLowerCase().replace(/\s/g, '-'); + // create proper URI from react-router + var path = this.context.makePath('bonfires', { bonfireName: bonfireName }); + + // is html5 push state exists, update URI + // else we are using hash location and should just cause a re render + if (his) { + his.replaceState({ path: path }, '', path); + } else { + this.context.replaceWith('bonfires', { bonfireName: bonfireName}); + } + }, + render: function() { var { name, @@ -27,7 +51,7 @@ var Bonfire = React.createClass({ // convert bonfire difficulty from floating point string // to integer. - difficulty = Math.floor(+difficulty); + var difficultyInt = Math.floor(+difficulty); return ( @@ -35,7 +59,7 @@ var Bonfire = React.createClass({ 1 ? description : [] }/>