handle transition when the url changes but the page is the same

webapp/pages/commentpage.jsx

@@ -25,14 +25,11 @@ module.exports = function(boardsAPI){
       })
     },
     componentWillReceiveProps: function(nextProps) {
-      if(nextProps.params.commenthash !== this.props.params.commenthash){
-        location.reload() // cheap hack, should swap with something more efficient
-      }
+      boardsAPI.use(boards => this.downloadComment(boards,nextProps))
     },
-    init: function(boards){
-      if(this.state.init) return
-      this.setState({ api: true, boards: boards })
-      boards.downloadComment(this.props.params.commenthash,this.props.params.userid,this.props.params.boardname,(err,comment) => {
+    downloadComment: function(boards,props){
+      this.setState({ comment: false })
+      boards.downloadComment(props.params.commenthash,props.params.userid,props.params.boardname,(err,comment) => {
         if(err){
           this.setState({ comment: { title: 'Error', text: err.Message || err.Error }})
         } else {
@@ -40,6 +37,11 @@ module.exports = function(boardsAPI){
         }
       })
     },
+    init: function(boards){
+      if(this.state.init) return
+      this.setState({ api: true, boards: boards })
+      this.downloadComment(boards,this.props)
+    },
     getContext: function(){
       if(this.props.params.userid){
         if(this.props.params.boardname)

webapp/pages/postpage.jsx

@@ -23,10 +23,11 @@ module.exports = function(boardsAPI){
         }
       })
     },
-    init: function(boards){
-      if(this.state.init) return
-      this.setState({ api: true, boards: boards })
-      boards.downloadPost(this.props.params.posthash,this.props.params.userid,this.props.params.boardname,this.props.params.userid,(err,post) => {
+    componentWillReceiveProps: function(nextProps) {
+      boardsAPI.use(boards => this.downloadPost(boards,nextProps))
+    },
+    downloadPost: function(boards,props){
+      boards.downloadPost(props.params.posthash,props.params.userid,props.params.boardname,props.params.userid,(err,post) => {
         if(err){
           this.setState({ post: { title: 'Error', text: err.Message || err.Error }})
         } else {
@@ -34,6 +35,11 @@ module.exports = function(boardsAPI){
         }
       })
     },
+    init: function(boards){
+      if(this.state.init) return
+      this.setState({ api: true, boards: boards })
+      this.downloadPost(boards,this.props)
+    },
     getContext: function(){
       if(this.props.params.userid){
         if(this.props.params.boardname)

webapp/pages/profile.jsx

@@ -13,44 +13,50 @@ module.exports = function(boardsAPI){
       boardsAPI.use(boards => {
         if(boards.isInit){
           this.setState({ api: boards, id: boards.id })
-          this.init()
+          this.init(boards)
         }
         var ee = boards.getEventEmitter()
         ee.on('init',err => {
           if(!err && this.isMounted()){
             this.setState({ api: boards, id: boards.id })
-            this.init()
+            this.init(boards)
           }
         })
       })
     },
-    init: function(){
-      if(this.state.init) return
-      boardsAPI.use(boards => {
-        var ee = boards.getEventEmitter()
-        if(boards.isInit || this.state.api){
-          var uid = this.props.params.userid
-          if(uid === 'me') uid = boards.id
-          console.log('About to ask for profile for',uid)
-          ee.on('boards for '+uid,l => {
-            if(!this.isMounted()) return true
-            this.setState({ boards: l })
+    componentWillReceiveProps: function(nextProps) {
+      boardsAPI.use(boards => this.downloadProfile(boards,nextProps))
+    },
+    downloadProfile: function(boards,props){
+      var ee = boards.getEventEmitter()
+      var uid = props.params.userid
+      if(uid === 'me') uid = boards.id
+      ee.on('boards for '+uid,l => {
+        if(!this.isMounted() || props.params.userid !== uid) return true
+        this.setState({ boards: l })
+      })
+      boards.getProfile(uid,(err,res) => {
+        if(!this.isMounted()) return true
+        if(err){
+          this.setState({
+            name: <Icon name="ban" />,
+            description: err
           })
-          boards.getProfile(uid,(err,res) => {
-            if(!this.isMounted()) return true
-            if(err){
-              this.setState({
-                name: <Icon name="ban" />,
-                description: err
-              })
-            } else {
-              this.setState({ name: res.name, description: res.description })
-            }
-          })
-          this.setState({ init: true })
+        } else {
+          this.setState({ name: res.name, description: res.description })
         }
       })
     },
+    init: function(boards){
+      if(this.state.init) return
+      var ee = boards.getEventEmitter()
+      if(boards.isInit || this.state.api){
+        var uid = this.props.params.userid
+        if(uid === 'me') uid = boards.id
+        this.downloadProfile(boards,this.props)
+        this.setState({ init: true })
+      }
+    },
     linkToEditor: function(){
       var uid = this.props.params.userid
       if(uid === 'me' && this.state.id) uid = this.state.id