upgrade to react-router 2.0 yay

build/app-bundle.js

@@ -103,7 +103,9 @@ App = React.createClass({displayName: "App",
       Twister.getAccount(acc.name).verifyKey(function(key){
         thisComponent.setState(function(oldstate,props){
           
-          oldstate.accounts[acc.name].status = key.getStatus();
+          oldstate.accounts.find(function(a){
+            return a.name==acc.name;
+          }).status = key.getStatus();
           
           return oldstate;
           
@@ -152,9 +154,13 @@ App = React.createClass({displayName: "App",
   
   render: function() {
     
-    //var firstroute = this.context.router.getCurrentRoutes()[1].name;
+    var route = this.props.location.pathname.split("/").filter(function(s){
+      return s!="";
+    });
+        
+    var isOnHome = (route.length==0);
     
-    //console.log(firstroute);
+    var isOnOwnProfile = ( route[0]="profile" && route[1]==this.state.activeAccount );
     
     var guestMode = true;
     
@@ -199,13 +205,13 @@ App = React.createClass({displayName: "App",
           React.createElement(Col, {xs: 12, sm: 10, smOffset: 1, md: 8, mdOffset: 2, lg: 6, lgOffset: 3}, 
             React.createElement(ButtonGroup, {justified: true}, 
               React.createElement(Button, {
-                href: "#", 
+                href: "#/", 
-                //bsStyle={firstroute=="home" ? 'primary' : 'default'}
+                bsStyle: isOnHome ? 'primary' : 'default', 
                 disabled: guestMode
               }, React.createElement(Glyphicon, {glyph: "home"})), 
               React.createElement(Button, {
-                href: "#/profile", 
+                href: '#/profile/'+this.state.activeAccount, 
-                //bsStyle={firstroute=="profile-active" ? 'primary' : 'default'}
+                bsStyle: isOnOwnProfile ? 'primary' : 'default', 
                 disabled: guestMode
               }, React.createElement(Glyphicon, {glyph: "user"})), 
               React.createElement(Button, {href: "#/directmessages", disabled: true}, React.createElement(Glyphicon, {glyph: "transfer"})), 
@@ -242,12 +248,6 @@ initializeApp = function () {
       React.createElement(Router, {history: hashHistory}, 
         React.createElement(Route, {component: App, path: "/"}, 
           React.createElement(IndexRoute, {component: Home}), 
-          React.createElement(Route, {path: "/profile", component: Profile}, 
-            React.createElement(IndexRoute, {component: Timeline}), 
-            React.createElement(Route, {path: "timeline", component: Timeline}), 
-            React.createElement(Route, {path: "followings", component: Followings}), 
-            React.createElement(Route, {path: "mentions", component: Mentions})
-          ), 
           React.createElement(Route, {path: "/profile/:username", component: Profile}, 
             React.createElement(IndexRoute, {component: Timeline}), 
             React.createElement(Route, {path: "timeline", component: Timeline}), 
@@ -1462,12 +1462,12 @@ module.exports = ProfileMixin = {
     }
   },
   getInitialState: function() {
-    
+        
     var username = this.props.username;
     
     if (!username) {
     
-      username = (this.context.router.getCurrentParams().username ? this.context.router.getCurrentParams().username : this.props.activeAccount);
+      username = (this.props.params.username ? this.props.params.username : this.props.activeAccount);
       
     }
     
@@ -2534,9 +2534,6 @@ module.exports = Settings = React.createClass({displayName: "Settings",
     SafeStateChangeMixin,
     AppSettingsMixin
   ],
-  contextTypes: {
-    router: React.PropTypes.func
-  },
   handeSettingsUpdate: function (e) {
     e.preventDefault();
     
@@ -2880,12 +2877,9 @@ var ReactBootstrap = require('react-bootstrap')
 module.exports = Followings = React.createClass({displayName: "Followings",
     
   mixins: [AppSettingsMixin,SetIntervalMixin,SafeStateChangeMixin],
-  contextTypes: {
-    router: React.PropTypes.func
-  },
   getInitialState: function() {
     return {
-      username: (this.context.router.getCurrentParams().username ? this.context.router.getCurrentParams().username : this.props.activeAccount),
+      username: (this.props.params.username ? this.props.params.username : this.props.activeAccount),
       followings: [],
       loading: true
     };
@@ -2952,12 +2946,9 @@ var AppSettingsMixin = require('../common/AppSettingsMixin.js');
 module.exports = Mentions = React.createClass({displayName: "Mentions",
     
   mixins: [StreamMixin,AppSettingsMixin,SetIntervalMixin,SafeStateChangeMixin],
-  contextTypes: {
-    router: React.PropTypes.func
-  },
   getInitialState: function() {
     return {
-      username: (this.context.router.getCurrentParams().username ? this.context.router.getCurrentParams().username : this.props.activeAccount),
+      username: (this.props.params.username ? this.props.params.username : this.props.activeAccount),
       data: [],
       postIdentifiers: {},
       loading: true
@@ -3020,7 +3011,7 @@ var FollowButton = require('../common/FollowButton.js');
 var EditProfileModalButton = require('../profile/EditProfileModalButton.js');
 var EditAvatarModalButton = require('../profile/EditAvatarModalButton.js');
 
-module.exports = Post = React.createClass({displayName: "Post",
+module.exports = Profile = React.createClass({displayName: "Profile",
   mixins: [
     SetIntervalMixin,
     SafeStateChangeMixin,
@@ -3028,11 +3019,15 @@ module.exports = Post = React.createClass({displayName: "Post",
   ],
   render: function() {
     
-    var routeprefix = "#/profile/"+(this.context.router.getCurrentParams().username ? this.context.router.getCurrentParams().username+"/" : "")
+    var routeprefix = "#/profile/"+(this.props.params.username ? this.props.params.username+"/" : "")
     
-    var subroute = this.context.router.getCurrentRoutes()[2].name
+    var route = this.props.location.pathname.split("/").filter(function(s){
-    
+      return s!="";
-    //console.log(this.context.router.getCurrentRoutes());
+    });
+        
+    var isOnTimeline = !route[2] || route[2]=="timeline";
+    var isOnMentions = route[2]=="mentions";
+    var isOnFollowings = route[2]=="followings";
         
     return (
       React.createElement(ListGroup, {fill: true}, 
@@ -3067,13 +3062,13 @@ module.exports = Post = React.createClass({displayName: "Post",
         ), 
         React.createElement(ListGroupItem, {className: "fullytight_all"}, 
           React.createElement(ButtonGroup, {justified: true}, 
-            React.createElement(Button, {href: routeprefix+"timeline", bsStyle: subroute.indexOf("timeline")>-1 ? "primary" : "default"}, React.createElement(Glyphicon, {glyph: "list"})), 
+            React.createElement(Button, {href: routeprefix+"timeline", bsStyle: isOnTimeline ? 'primary' : 'default'}, React.createElement(Glyphicon, {glyph: "list"})), 
-            React.createElement(Button, {href: routeprefix+"followings", bsStyle: subroute.indexOf("followings")>-1 ? "primary" : "default"}, React.createElement(Glyphicon, {glyph: "eye-open"})), 
+            React.createElement(Button, {href: routeprefix+"followings", bsStyle: isOnFollowings ? 'primary' : 'default'}, React.createElement(Glyphicon, {glyph: "eye-open"})), 
-            React.createElement(Button, {href: routeprefix+"mentions", bsStyle: subroute.indexOf("mentions")>-1 ? "primary" : "default"}, React.createElement(Glyphicon, {glyph: "comment"}))
+            React.createElement(Button, {href: routeprefix+"mentions", bsStyle: isOnMentions ? 'primary' : 'default'}, React.createElement(Glyphicon, {glyph: "comment"}))
           )
         ), 
           this.props.children && React.cloneElement(this.props.children, {
-            activeAccount:this.state.activeAccount
+            activeAccount:this.props.activeAccount
           })
       )
     );
@@ -3108,12 +3103,9 @@ module.exports = Timeline = React.createClass({displayName: "Timeline",
     EventListenerMixin('scrolledtobottom'),
     EventListenerMixin('newpostbyuser')
   ],
-  contextTypes: {
-    router: React.PropTypes.func
-  },
   getInitialState: function() {
     return {
-      username: (this.context.router.getCurrentParams().username ? this.context.router.getCurrentParams().username : this.props.activeAccount),
+      username: (this.props.params.username ? this.props.params.username : this.props.activeAccount),
       data: [], 
       postIdentifiers: {},
       postCount: 30,

jsx/App.js

@@ -102,7 +102,9 @@ App = React.createClass({
       Twister.getAccount(acc.name).verifyKey(function(key){
         thisComponent.setState(function(oldstate,props){
           
-          oldstate.accounts[acc.name].status = key.getStatus();
+          oldstate.accounts.find(function(a){
+            return a.name==acc.name;
+          }).status = key.getStatus();
           
           return oldstate;
           
@@ -151,9 +153,13 @@ App = React.createClass({
   
   render: function() {
     
-    //var firstroute = this.context.router.getCurrentRoutes()[1].name;
+    var route = this.props.location.pathname.split("/").filter(function(s){
+      return s!="";
+    });
+        
+    var isOnHome = (route.length==0);
     
-    //console.log(firstroute);
+    var isOnOwnProfile = ( route[0]="profile" && route[1]==this.state.activeAccount );
     
     var guestMode = true;
     
@@ -198,13 +204,13 @@ App = React.createClass({
           <Col xs={12} sm={10} smOffset={1} md={8} mdOffset={2} lg={6} lgOffset={3}>
             <ButtonGroup justified>  
               <Button 
-                href='#' 
+                href='#/' 
-                //bsStyle={firstroute=="home" ? 'primary' : 'default'}
+                bsStyle={isOnHome ? 'primary' : 'default'}
                 disabled = {guestMode}
               ><Glyphicon glyph="home"/></Button>
               <Button 
-                href='#/profile'
+                href={'#/profile/'+this.state.activeAccount}
-                //bsStyle={firstroute=="profile-active" ? 'primary' : 'default'}
+                bsStyle={isOnOwnProfile ? 'primary' : 'default'}
                 disabled = {guestMode}
               ><Glyphicon glyph="user"/></Button>
               <Button href='#/directmessages' disabled><Glyphicon glyph="transfer"/></Button>
@@ -241,12 +247,6 @@ initializeApp = function () {
       <Router history={hashHistory}>
         <Route component={App} path="/">
           <IndexRoute component={Home} />
-          <Route path="/profile" component={Profile}>
-            <IndexRoute component={Timeline} />
-            <Route path="timeline" component={Timeline} />
-            <Route path="followings" component={Followings} />
-            <Route path="mentions" component={Mentions} />
-          </Route>
           <Route path="/profile/:username" component={Profile}>
             <IndexRoute component={Timeline} />
             <Route path="timeline" component={Timeline} />

jsx/common/ProfileMixin.js

@@ -32,12 +32,12 @@ module.exports = ProfileMixin = {
     }
   },
   getInitialState: function() {
-    
+        
     var username = this.props.username;
     
     if (!username) {
     
-      username = (this.context.router.getCurrentParams().username ? this.context.router.getCurrentParams().username : this.props.activeAccount);
+      username = (this.props.params.username ? this.props.params.username : this.props.activeAccount);
       
     }
     

jsx/other/Settings.js

@@ -23,9 +23,6 @@ module.exports = Settings = React.createClass({
     SafeStateChangeMixin,
     AppSettingsMixin
   ],
-  contextTypes: {
-    router: React.PropTypes.func
-  },
   handeSettingsUpdate: function (e) {
     e.preventDefault();
     

jsx/profile/Followings.js

@@ -24,12 +24,9 @@ var ReactBootstrap = require('react-bootstrap')
 module.exports = Followings = React.createClass({
     
   mixins: [AppSettingsMixin,SetIntervalMixin,SafeStateChangeMixin],
-  contextTypes: {
-    router: React.PropTypes.func
-  },
   getInitialState: function() {
     return {
-      username: (this.context.router.getCurrentParams().username ? this.context.router.getCurrentParams().username : this.props.activeAccount),
+      username: (this.props.params.username ? this.props.params.username : this.props.activeAccount),
       followings: [],
       loading: true
     };

jsx/profile/Mentions.js

@@ -11,12 +11,9 @@ var AppSettingsMixin = require('../common/AppSettingsMixin.js');
 module.exports = Mentions = React.createClass({
     
   mixins: [StreamMixin,AppSettingsMixin,SetIntervalMixin,SafeStateChangeMixin],
-  contextTypes: {
-    router: React.PropTypes.func
-  },
   getInitialState: function() {
     return {
-      username: (this.context.router.getCurrentParams().username ? this.context.router.getCurrentParams().username : this.props.activeAccount),
+      username: (this.props.params.username ? this.props.params.username : this.props.activeAccount),
       data: [],
       postIdentifiers: {},
       loading: true

jsx/profile/Profile.js

@@ -23,7 +23,7 @@ var FollowButton = require('../common/FollowButton.js');
 var EditProfileModalButton = require('../profile/EditProfileModalButton.js');
 var EditAvatarModalButton = require('../profile/EditAvatarModalButton.js');
 
-module.exports = Post = React.createClass({
+module.exports = Profile = React.createClass({
   mixins: [
     SetIntervalMixin,
     SafeStateChangeMixin,
@@ -33,9 +33,13 @@ module.exports = Post = React.createClass({
     
     var routeprefix = "#/profile/"+(this.props.params.username ? this.props.params.username+"/" : "")
     
-    //var subroute = this.context.router.getCurrentRoutes()[2].name
+    var route = this.props.location.pathname.split("/").filter(function(s){
-    
+      return s!="";
-    //console.log(this.context.router.getCurrentRoutes());
+    });
+        
+    var isOnTimeline = !route[2] || route[2]=="timeline";
+    var isOnMentions = route[2]=="mentions";
+    var isOnFollowings = route[2]=="followings";
         
     return (
       <ListGroup fill>
@@ -70,13 +74,13 @@ module.exports = Post = React.createClass({
         </ListGroupItem>
         <ListGroupItem className="fullytight_all">
           <ButtonGroup justified>
-            <Button href={routeprefix+"timeline"} ><Glyphicon glyph="list"/></Button>
+            <Button href={routeprefix+"timeline"} bsStyle={isOnTimeline ? 'primary' : 'default'}><Glyphicon glyph="list"/></Button>
-            <Button href={routeprefix+"followings"} ><Glyphicon glyph="eye-open"/></Button>
+            <Button href={routeprefix+"followings"} bsStyle={isOnFollowings ? 'primary' : 'default'}><Glyphicon glyph="eye-open"/></Button>
-            <Button href={routeprefix+"mentions"} ><Glyphicon glyph="comment"/></Button>
+            <Button href={routeprefix+"mentions"} bsStyle={isOnMentions ? 'primary' : 'default'}><Glyphicon glyph="comment"/></Button>
           </ButtonGroup>
         </ListGroupItem>
           {this.props.children && React.cloneElement(this.props.children, {
-            activeAccount:this.state.activeAccount
+            activeAccount:this.props.activeAccount
           })}
       </ListGroup>
     );

jsx/profile/Timeline.js

@@ -26,12 +26,9 @@ module.exports = Timeline = React.createClass({
     EventListenerMixin('scrolledtobottom'),
     EventListenerMixin('newpostbyuser')
   ],
-  contextTypes: {
-    router: React.PropTypes.func
-  },
   getInitialState: function() {
     return {
-      username: (this.context.router.getCurrentParams().username ? this.context.router.getCurrentParams().username : this.props.activeAccount),
+      username: (this.props.params.username ? this.props.params.username : this.props.activeAccount),
       data: [], 
       postIdentifiers: {},
       postCount: 30,