wip refactor how API access is passed to components

webapp/components/comment.jsx

@@ -3,48 +3,79 @@ var Markdown = require('markdown.jsx')
 var Icon = require('icon.jsx')
 var Clock = require('clock.jsx')
 var Link = require('react-router').Link
+var UserID = require('userID.jsx')
 
-module.exports = function(boardsAPI){
+var Comment = React.createClass({
-  var UserID = require('userID.jsx')(boardsAPI)
+  getInitialState: function(){
-  return React.createClass({
+    return { moment: false }
-    getInitialState: function(){
+  },
-      return { moment: false }
+  componentDidMount: function(){
-    },
+    require.ensure(['moment'],_ => {
-    componentDidMount: function(){
+      if(this.isMounted()) this.setState({ moment: require('moment') })
-      require.ensure(['moment'],_ => {
+    })
-        if(this.isMounted()) this.setState({ moment: require('moment') })
+  },
-      })
+  getPermalink: function(){
-    },
+    if(this.props.adminID && this.props.board && this.props.post && this.props.comment.hash){
-    getPermalink: function(){
+      return <div className="inline not-first">
-      if(this.props.adminID && this.props.board && this.props.post && this.props.comment.hash){
+        <Icon name="code" /> <Link to={'/@'+this.props.adminID+'/'+this.props.board+'/'+this.props.post+'/'+this.props.comment.hash}>Permalink</Link>
-        return <div className="inline not-first">
+      </div>
-          <Icon name="code" /> <Link to={'/@'+this.props.adminID+'/'+this.props.board+'/'+this.props.post+'/'+this.props.comment.hash}>Permalink</Link>
-        </div>
-      }
-    },
-    getParentlink: function(){
-      if(this.props.showParent && this.props.comment.parent && this.props.comment.parent !== this.props.post){
-        return <div className="inline not-first">
-          <Icon name="level-up" /> <Link to={'/@'+this.props.adminID+'/'+this.props.board+'/'+this.props.post+'/'+this.props.comment.parent}>Parent</Link>
-        </div>
-      }
-    },
-    render: function(){
-      if(this.props.comment){
-        var Comments = this.props.comment.comments || require('comments.jsx')(boardsAPI)
-        return <div className="comment"><hr/>
-          <div className="icons">
-            <UserID id={this.props.comment.op} />
-            <Clock date={this.props.comment.date} />
-            {this.getPermalink()}
-            {this.getParentlink()}
-          </div>
-          <Markdown source={this.props.comment.text} />
-          <Comments className="shifted" parent={this.props.comment.hash} post={this.props.post} adminID={this.props.adminID} board={this.props.board}/>
-        <hr/></div>
-      } else {
-        return <div><hr/>Invalid Comment<hr/></div>
-      }
     }
-  })
+  },
-}
+  getParentlink: function(){
+    if(this.props.showParent && this.props.comment.parent && this.props.comment.parent !== this.props.post){
+      return <div className="inline not-first">
+        <Icon name="level-up" /> <Link to={'/@'+this.props.adminID+'/'+this.props.board+'/'+this.props.post+'/'+this.props.comment.parent}>Parent</Link>
+      </div>
+    }
+  },
+  getComments: function(){
+    return <Comments className="shifted" parent={this.props.comment.hash} post={this.props.post} adminID={this.props.adminID} board={this.props.board} api={this.props.api} />
+  },
+  render: function(){
+    if(this.props.comment){
+      return <div className="comment"><hr/>
+        <div className="icons">
+          <UserID id={this.props.comment.op} api={this.props.api} />
+          <Clock date={this.props.comment.date} />
+          {this.getPermalink()}
+          {this.getParentlink()}
+        </div>
+        <Markdown source={this.props.comment.text} />
+      <hr/></div>
+    } else {
+      return <div><hr/>Invalid Comment<hr/></div>
+    }
+  }
+})
+
+var Comments = React.createClass({
+  getInitialState: function(){
+    return { comments: [] }
+  },
+  componentDidMount: function(){
+    var boards = this.props.api
+    if(boards){
+      boards.getEventEmitter().on('comment for '+this.props.parent,cmnt => {
+        if(this.isMounted()) this.setState({ comments: this.state.comments.concat(cmnt) })
+      })
+      if(boards.isInit && this.isMounted()){
+        boards.getCommentsFor(this.props.parent,this.props.board,this.props.adminID)
+      }
+      boards.getEventEmitter().on('init', err => {
+        if(!err && this.isMounted())
+          boards.getCommentsFor(this.props.parent,this.props.board,this.props.adminID)
+      })
+    }
+  },
+  getComments: function(){
+    if(this.state.comments.length > 0){
+      return this.state.comments.map(cmnt => (<Comment key={cmnt.hash} comment={cmnt} post={this.props.post} adminID={this.props.adminID} board={this.props.board} api={this.props.api} />) )
+    }
+    else return <div></div>
+  },
+  render: function(){
+    return <div className={this.props.className+' comments'} >{this.getComments()}</div>
+  }
+})
+
+module.exports = { Comment, Comments }

webapp/components/comments.jsx

@@ -1,32 +0,0 @@
-var React = require('react')
-
-module.exports = function(boardsAPI){
-  var Comment = require('comment.jsx')(boardsAPI)
-  return React.createClass({
-    getInitialState: function(){
-      return { comments: [] }
-    },
-    componentDidMount: function(){
-      boardsAPI.use(boards => {
-        boards.getEventEmitter().on('comment for '+this.props.parent,cmnt => {
-          if(this.isMounted()) this.setState({ comments: this.state.comments.concat(cmnt) })
-        })
-        if(boards.isInit && this.isMounted()){
-          boards.getCommentsFor(this.props.parent,this.props.board,this.props.adminID)
-        }
-        boards.getEventEmitter().on('init', err => {
-          if(!err && this.isMounted())
-            boards.getCommentsFor(this.props.parent,this.props.board,this.props.adminID)
-        })
-      })
-    },
-    getComments: function(){
-      if(this.state.comments.length > 0)
-        return this.state.comments.map(cmnt => (<Comment key={cmnt.hash} comment={cmnt} post={this.props.post} comments={this} adminID={this.props.adminID} board={this.props.board}/>) )
-      else return <div></div>
-    },
-    render: function(){
-      return <div className={this.props.className+' comments'} >{this.getComments()}</div>
-    }
-  })
-}

webapp/components/post.jsx

@@ -4,8 +4,8 @@ var Icon = require('icon.jsx')
 var Link = require('react-router').Link
 var Clock = require('clock.jsx')
 
-module.exports = function(boardsAPI){
+module.exports = function(){
-  var UserID = require('userID.jsx')(boardsAPI)
+  var UserID = require('userID.jsx')()
   return React.createClass({
     getInitialState: function(){
       return { moment: false }
@@ -32,7 +32,7 @@ module.exports = function(boardsAPI){
           <h5>{this.props.post.title}</h5><hr/>
           <Markdown source={this.props.post.text} /><hr/>
           <div className="icons">
-            <UserID id={this.props.post.op}></UserID>
+            <UserID id={this.props.post.op} api={this.props.api} ></UserID>
             <Clock className="not-first" date={this.props.post.date} />
             <Icon name="comments" className="not-first" /> <Link className="nounderline" to={this.postLink()}>View</Link>
           </div>

webapp/components/postlist.jsx

@@ -2,8 +2,8 @@ var React = require('react')
 var sortedIndex = require('lodash.sortedindex')
 var Icon = require('icon.jsx')
 
-module.exports = function(boardsAPI){
+module.exports = function(){
-  var Post = require('post.jsx')(boardsAPI)
+  var Post = require('post.jsx')()
   return React.createClass({
     getInitialState: function(){
       return { posts: [], api: false }
@@ -30,17 +30,18 @@ module.exports = function(boardsAPI){
       })
     },
     componentDidMount: function(){
-      boardsAPI.use(boards => {
+      var boards = this.props.api
+      if(boards){
         if(boards.isInit) this.init(boards)
         else boards.getEventEmitter().on('init',err => {
           if(!err && this.isMounted()) this.init(boards)
         })
-      })
+      }
     },
     getPosts: function(){
       if(this.state.posts.length > 0 || this.state.api){
         return this.state.posts.map(post => {
-          return <Post key={post.hash} board={this.props.board} admin={this.props.admin} post={post} />
+          return <Post key={post.hash} board={this.props.board} admin={this.props.admin} post={post} api={this.props.api} />
         })
       } else return <div className="center-block text-center">
         <Icon name="refresh" className="fa-3x center-block light fa-spin" />

webapp/components/userID.jsx

@@ -2,21 +2,22 @@ var React = require('react')
 var Icon = require('icon.jsx')
 var Link = require('react-router').Link
 
-module.exports = function(boardsAPI){
+module.exports = function(){
   return React.createClass({
     getInitialState: function(){
       return { }
     },
     componentDidMount: function(){
-      boardsAPI.use(boards => {
+      var boards = this.props.api
+      if(boards){
         if(boards.isInit){
           this.getProfile(boards)
         }
         boards.getEventEmitter().on('init',err => {
-          if(!err) this.getProfile(boards)
+          if(!err && this.isMounted()) this.getProfile(boards)
           else console.log('ERR INIT',err)
         })
-      })
+      }
     },
     getProfile: function(boards){
       if(this.props.id === undefined) return

webapp/pages/board.jsx

@@ -4,9 +4,9 @@ var Link = require('react-router').Link
 var Icon = require('icon.jsx')
 
 module.exports = function(boardsAPI){
-  var UserID = require('userID.jsx')(boardsAPI)
+  var UserID = require('userID.jsx')()
-  var PostList = require('postlist.jsx')(boardsAPI)
+  var PostList = require('postlist.jsx')()
-  var GetIPFS = require('getipfs.jsx')(boardsAPI)
+  var GetIPFS = require('getipfs.jsx')()
   return React.createClass({
     getInitialState: function(){
       return { name: this.props.params.boardname, api: false }
@@ -24,7 +24,6 @@ module.exports = function(boardsAPI){
         var ee = boards.getEventEmitter()
         ee.on('init',err => {
           if(!err && this.isMounted()){
-            this.setState({ api: true })
             this.init(boards)
           }
         })
@@ -37,7 +36,6 @@ module.exports = function(boardsAPI){
           this.setState({ description: 'All the messages posted in __#'+this.props.params.boardname+'__' })
         }
         if(boards.isInit || this.state.api){
-          this.setState({api: true})
           this.init(boards)
         }
       })
@@ -46,7 +44,7 @@ module.exports = function(boardsAPI){
       if(!this.state.init){
         if(this.props.params.userid)
           boards.getBoardSettings(this.props.params.userid,this.props.params.boardname)
-        this.setState({ init: true })
+        this.setState({ init: true, api: true, boards: boards })
       }
     },
     render: function(){
@@ -54,11 +52,11 @@ module.exports = function(boardsAPI){
         return (<div className="board">
           <h2>{this.state.name}</h2>
           <Markdown source={this.state.description} skipHtml={true} />
-          {this.props.params.userid?<h5><UserID id={this.props.params.userid} /></h5>:<p></p>}
+          {this.props.params.userid?<h5><UserID id={this.props.params.userid} api={this.state.boards} /></h5>:<p></p>}
           <hr />
-          <PostList board={this.props.params.boardname} admin={this.props.params.userid}/>
+          <PostList board={this.props.params.boardname} admin={this.props.params.userid} api={this.state.boards} />
         </div>)
-      } else return <GetIPFS />
+      } else return <GetIPFS api={this.state.boards} />
     }
   })
 }

webapp/pages/commentpage.jsx

@@ -3,10 +3,10 @@ var Link = require('react-router').Link
 var Icon = require('icon.jsx')
 
 module.exports = function(boardsAPI){
-  var UserID = require('userID.jsx')(boardsAPI)
+  var UserID = require('userID.jsx')()
-  var GetIPFS = require('getipfs.jsx')(boardsAPI)
+  var GetIPFS = require('getipfs.jsx')()
-  var Post = require('post.jsx')(boardsAPI)
+  var Post = require('post.jsx')()
-  var Comment = require('comment.jsx')(boardsAPI)
+  var Comment = require('comment.jsx').Comment
 
   return React.createClass({
     getInitialState: function(){
@@ -27,7 +27,7 @@ module.exports = function(boardsAPI){
     },
     init: function(boards){
       if(this.state.init) return
-      this.setState({ api: true })
+      this.setState({ api: true, boards: boards })
       boards.downloadComment(this.props.params.commenthash,this.props.params.userid,this.props.params.boardname,(err,comment) => {
         if(err){
           this.setState({ comment: { title: 'Error', text: err.Message || err.Error }})
@@ -39,14 +39,14 @@ module.exports = function(boardsAPI){
     getContext: function(){
       if(this.props.params.userid){
         if(this.props.params.boardname)
-          return <div>Comment by <UserID id={this.props.params.userid} /> in <Link to={'@'+this.props.params.userid+'/'+this.props.params.boardname}>#{this.props.params.boardname}</Link> to <Link to={'/@'+this.props.params.userid+'/'+this.props.params.boardname+'/'+this.props.params.posthash }>{this.props.params.posthash}</Link></div>
+          return <div>Comment by <UserID id={this.props.params.userid} api={this.state.boards} /> in <Link to={'@'+this.props.params.userid+'/'+this.props.params.boardname}>#{this.props.params.boardname}</Link> to <Link to={'/@'+this.props.params.userid+'/'+this.props.params.boardname+'/'+this.props.params.posthash }>{this.props.params.posthash}</Link></div>
         else
-          return <div>Comment by <UserID id={this.props.params.userid} /></div>
+          return <div>Comment by <UserID id={this.props.params.userid} api={this.state.boards} /></div>
       } else return <div><h6 className="light">You are viewing a single comment</h6></div>
     },
     showComment: function(){
       if(this.state.comment){
-        return <Comment comment={this.state.comment} post={this.props.params.posthash} adminID={this.props.params.userid} board={this.props.params.boardname} showParent={true} />
+        return <Comment comment={this.state.comment} post={this.props.params.posthash} adminID={this.props.params.userid} board={this.props.params.boardname} showParent={true} api={this.state.boards} />
       } else {
         return <div className="center-block text-center">
           <Icon name="refresh" className="fa-3x center-block light fa-spin" />
@@ -62,7 +62,7 @@ module.exports = function(boardsAPI){
           </div>
           {this.showComment()}
         </div>
-      else return <GetIPFS />
+      else return <GetIPFS api={this.state.boards} />
     }
   })
 }

webapp/pages/getipfs.jsx

@@ -2,13 +2,14 @@ var React = require('react')
 var Link = require('react-router').Link
 var Icon = require('icon.jsx')
 
-module.exports = function(boardsAPI){
+module.exports = function(){
   return React.createClass({
     getInitialState: function(){
       return { connected: false, error: false, long: false }
     },
     componentDidMount: function(){
-      boardsAPI.use(boards => {
+      var boards = this.props.api
+      if(boards){
         if(!this.isMounted()) return
         if(boards.isInit){
           this.setState({ connected: true })
@@ -25,7 +26,7 @@ module.exports = function(boardsAPI){
             }
           })
         }
-      })
+      }
     },
     render: function(){
       var opt = require('options.jsx').get()

webapp/pages/postpage.jsx

@@ -2,10 +2,10 @@ var React = require('react')
 var Link = require('react-router').Link
 
 module.exports = function(boardsAPI){
-  var UserID = require('userID.jsx')(boardsAPI)
+  var UserID = require('userID.jsx')()
-  var GetIPFS = require('getipfs.jsx')(boardsAPI)
+  var GetIPFS = require('getipfs.jsx')()
-  var Post = require('post.jsx')(boardsAPI)
+  var Post = require('post.jsx')()
-  var Comments = require('comments.jsx')(boardsAPI)
+  var Comments = require('comment.jsx').Comments
 
   return React.createClass({
     getInitialState: function(){
@@ -26,7 +26,7 @@ module.exports = function(boardsAPI){
     },
     init: function(boards){
       if(this.state.init) return
-      this.setState({ api: true })
+      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) => {
         if(err){
           this.setState({ post: { title: 'Error', text: err.Message || err.Error }})
@@ -38,9 +38,9 @@ module.exports = function(boardsAPI){
     getContext: function(){
       if(this.props.params.userid){
         if(this.props.params.boardname)
-          return <div>Posted by <UserID id={this.props.params.userid} /> in <Link to={'@'+this.props.params.userid+'/'+this.props.params.boardname}>#{this.props.params.boardname}</Link></div>
+          return <div>Posted by <UserID id={this.props.params.userid} api={this.state.boards} /> in <Link to={'@'+this.props.params.userid+'/'+this.props.params.boardname}>#{this.props.params.boardname}</Link></div>
         else
-          return <div>Posted by <UserID id={this.props.params.userid} /></div>
+          return <div>Posted by <UserID id={this.props.params.userid} api={this.state.boards} /></div>
       } else return <div><h6 className="light">You are viewing a single post</h6></div>
     },
     render: function(){
@@ -49,10 +49,10 @@ module.exports = function(boardsAPI){
           <div className="text-center">
             {this.getContext()}
           </div>
-          <Post post={this.state.post} board={this.props.params.boardname} />
+          <Post post={this.state.post} board={this.props.params.boardname} api={this.state.boards} />
-          <Comments parent={this.props.params.posthash} board={this.props.params.boardname} adminID={this.props.params.userid} post={this.props.params.posthash} />
+          <Comments parent={this.props.params.posthash} board={this.props.params.boardname} adminID={this.props.params.userid} post={this.props.params.posthash} api={this.state.boards} />
         </div>
-      else return <GetIPFS />
+      else return <GetIPFS api={this.state.boards} />
     }
   })
 }

webapp/pages/profile.jsx

@@ -12,13 +12,13 @@ module.exports = function(boardsAPI){
     componentDidMount: function(){
       boardsAPI.use(boards => {
         if(boards.isInit){
-          this.setState({ api: true, id: boards.id })
+          this.setState({ api: boards, id: boards.id })
           this.init()
         }
         var ee = boards.getEventEmitter()
         ee.on('init',err => {
           if(!err && this.isMounted()){
-            this.setState({ api: true, id: boards.id })
+            this.setState({ api: boards, id: boards.id })
             this.init()
           }
         })
@@ -78,7 +78,7 @@ module.exports = function(boardsAPI){
             </h6>
           })}
         </div>)
-      } else return <GetIPFS />
+      } else return <GetIPFS api={this.state.api} />
     }
   })
 }

webapp/pages/users.jsx

@@ -2,8 +2,8 @@ var React = require('react')
 var Icon = require('icon.jsx')
 
 module.exports = function(boardsAPI){
-  var GetIPFS = require('getipfs.jsx')(boardsAPI)
+  var GetIPFS = require('getipfs.jsx')()
-  var UserID = require('userID.jsx')(boardsAPI)
+  var UserID = require('userID.jsx')()
   return React.createClass({
     getInitialState: function(){
       return { users: [], api: false }
@@ -13,7 +13,6 @@ module.exports = function(boardsAPI){
         boards.init()
         if(boards.isInit){
           if(this.isMounted()){
-            this.setState({ api: true })
             this.init(boards)
           }
         }
@@ -21,7 +20,6 @@ module.exports = function(boardsAPI){
         ee.on('init', e => {
           if(!e && this.isMounted()){
             this.init(boards)
-            this.setState({ api: true })
           }
         })
         ee.on('user',(id) => {
@@ -34,7 +32,7 @@ module.exports = function(boardsAPI){
     },
     init: function(boards){
       if(this.isMounted() && !this.state.init){
-        this.setState({ users: boards.getUsers(), init: true })
+        this.setState({ users: boards.getUsers(), api: true, init: true, boards: boards })
         boards.searchUsers()
       }
     },
@@ -45,11 +43,11 @@ module.exports = function(boardsAPI){
           <p>Found <b>{this.state.users.length}</b> users</p>
           <ul>
             {this.state.users.map(user => {
-              return <UserID key={user} id={user} />
+              return <UserID key={user} id={user} api={this.state.boards} />
             })}
           </ul>
         </div>
-      } else return <GetIPFS />
+      } else return <GetIPFS api={this.state.boards} />
     }
   })
 }