refactoring code for quality

webapp/components/comment.jsx

@@ -6,32 +6,32 @@ var Link = require('react-router').Link
 var UserID = require('userID.jsx')
 
 var Comment = React.createClass({
-  getInitialState: function () {
+  getInitialState () {
     return { moment: false }
   },
-  componentDidMount: function () {
+  componentDidMount () {
     require.ensure(['moment'], _ => {
       if (this.isMounted()) this.setState({ moment: require('moment') })
     })
   },
-  getPermalink: function () {
+  getPermalink () {
     if (this.props.adminID && this.props.board && this.props.post && this.props.comment.hash) {
       return <div className="inline not-first">
         <Icon name="code" /> <Link to={'/@' + this.props.adminID + '/' + this.props.board + '/' + this.props.post + '/' + this.props.comment.hash}>Permalink</Link>
       </div>
     }
   },
-  getParentlink: function () {
+  getParentlink () {
     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 () {
+  getComments () {
     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 () {
+  render () {
     if (this.props.comment) {
       return <div className="comment"><hr/>
         <div className="icons">
@@ -49,10 +49,10 @@ var Comment = React.createClass({
 })
 
 var Comments = React.createClass({
-  getInitialState: function () {
+  getInitialState () {
     return { comments: [] }
   },
-  componentDidMount: function () {
+  componentDidMount () {
     var boards = this.props.api
     if (boards) {
       boards.getEventEmitter().on('comment for ' + this.props.parent, cmnt => {
@@ -68,13 +68,13 @@ var Comments = React.createClass({
       })
     }
   },
-  getComments: function () {
+  getComments () {
     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 () {
+  render () {
     return <div className={this.props.className + ' comments'} >{this.getComments()}</div>
   }
 })

webapp/components/post.jsx

@@ -4,14 +4,19 @@ var Icon = require('icon.jsx')
 var Link = require('react-router').Link
 var Clock = require('clock.jsx')
 var UserID = require('userID.jsx')
-var { Error, Loading } = require('status-components.jsx')
+var { Error } = require('status-components.jsx')
 
 module.exports = React.createClass({
   getInitialState () {
     return { loading: true }
   },
   componentDidMount () {
-    this.init(this.props)
+    if (this.props.api) {
+      this.props.api.getEventEmitter().on('init', err => {
+        if (!err) this.init(this.props)
+      })
+      if (this.props.api.isInit) this.init(this.props)
+    }
   },
   componentWillReceiveProps (props) {
     this.init(props)
@@ -52,7 +57,12 @@ module.exports = React.createClass({
     if (this.state.error) {
       return <Error className="content" error={this.state.error} />
     } else if (this.state.loading) {
-      return <Loading className="content" title="Downloading post"/>
+      return <div className="text-center">
+        <div className="center-block" style={{marginTop: '1em'}}>
+          <Icon className="center-block fa-spin fa-2x light" name="refresh" />
+        </div>
+        <h5>Downloading Post</h5>
+      </div>
     } else {
       return <div className="content">
         { this.state.post.title

webapp/components/postlist.jsx

@@ -4,14 +4,20 @@ var Icon = require('icon.jsx')
 var Post = require('post.jsx')
 
 module.exports = React.createClass({
-  getInitialState: function () {
+  getInitialState () {
     return { posts: [], api: false }
   },
-  sortFn: function (a, b) {
+  sortFn (a, b) {
     return (b.date || 0) - (a.date || 0)
   },
-  init: function (boards) {
+  componentWillReceiveProps (props) {
+    if (props.api) {
+      this.init(props.api, props)
+    }
+  },
+  init (boards, props) {
     if (this.state.init) return
+    props = props || this.props
     this.setState({ api: true })
     var onPost = (hash, date, post) => {
       if (!this.isMounted()) return true
@@ -27,11 +33,11 @@ module.exports = React.createClass({
       }*/
       this.setState({ posts })
     }
-    boards.getEventEmitter().on('post in ' + this.props.board + (this.props.admin ? '@' + this.props.admin : ''), onPost)
+    boards.getEventEmitter().on('post in ' + props.board + (props.admin ? '@' + props.admin : ''), onPost)
-    boards.getPostsInBoard(this.props.admin, this.props.board)
+    boards.getPostsInBoard(props.admin, props.board)
     this.setState({ init: true })
   },
-  componentDidMount: function () {
+  componentDidMount () {
     var boards = this.props.api
     if (boards) {
       if (boards.isInit) {
@@ -43,7 +49,7 @@ module.exports = React.createClass({
       }
     }
   },
-  getPosts: function () {
+  getPosts () {
     if (this.state.posts.length > 0 || this.state.api) {
       return this.state.posts.map(hash => {
         return <Post key={hash} board={this.props.board} admin={this.props.admin} hash={hash} api={this.props.api} />
@@ -54,7 +60,7 @@ module.exports = React.createClass({
       </div>
     }
   },
-  render: function () {
+  render () {
     return (
       <div className="postList">
         {this.getPosts()}

webapp/components/status-components.jsx

@@ -16,24 +16,13 @@ var Error = React.createClass({
 
 var Loading = React.createClass({
   render () {
-    // TODO: merge these (duplicated code) and use css to get desired style
+    return <div className="loading" >
-    if (this.props.small) {
+      <div className="text-center">
-      return <div>
+        <Icon className="center-block fa-spin fa-3x light" name="refresh" />
-        <div className="text-center">
+        <h4 className="top-half-em">{this.props.title}</h4>
-          <Icon className="center-block fa-spin fa-2x light" name="refresh" />
+        { this.props.children }
-          <h5 className="top-half-em">{this.props.title}</h5>
-          { this.props.children }
-        </div>
       </div>
-    } else {
+    </div>
-      return <div>
-        <div className="text-center">
-          <Icon className="center-block fa-spin fa-3x light" name="refresh" />
-          <h4 className="top-half-em">{this.props.title}</h4>
-          { this.props.children }
-        </div>
-      </div>
-    }
   }
 })
 

webapp/components/userID.jsx

@@ -3,22 +3,28 @@ var Icon = require('icon.jsx')
 var Link = require('react-router').Link
 
 module.exports = React.createClass({
-  getInitialState: function () {
+  getInitialState () {
     return { }
   },
-  componentDidMount: function () {
+  componentWillReceiveProps (props) {
-    var boards = this.props.api
+    this.init(props)
+  },
+  componentDidMount () {
+    this.init()
+  },
+  init (props) {
+    props = props || this.props
+    var boards = props.api
     if (boards) {
+      boards.getEventEmitter().on('init', err => {
+        if (!err && this.isMounted()) this.getProfile(boards)
+      })
       if (boards.isInit) {
         this.getProfile(boards)
       }
-      boards.getEventEmitter().on('init', err => {
-        if (!err && this.isMounted()) this.getProfile(boards)
-        else console.log('ERR INIT', err)
-      })
     }
   },
-  getProfile: function (boards) {
+  getProfile (boards) {
     if (this.props.id === undefined) return
     boards.getProfile(this.props.id, (err, res) => {
       if (!this.isMounted()) return true
@@ -29,14 +35,14 @@ module.exports = React.createClass({
       }
     })
   },
-  getContent: function () {
+  getContent () {
     if (this.state.name) {
       return (<Icon name="user" />)
     } else {
       return '@'
     }
   },
-  render: function () {
+  render () {
     if (this.props.id === undefined || this.props.id === 'undefined') {
       return <div className="user-id">
           <Icon name="ban" /> Unknown User

webapp/pages/board.jsx

@@ -14,13 +14,6 @@ module.exports = function (boardsAPI) {
     },
     componentDidMount () {
       boardsAPI.use(boards => {
-        /*
-        When a component inside the component being rendered by the router also needs
-        access to the boards api, it appears unitialized and never initializes to it
-        for no apparent reason. Calling init twice (one automgically and one
-        when the root component mounts) works as a cheap, horrible workaround
-        */
-        boards.init()
         if (!this.isMounted()) return
         var ee = boards.getEventEmitter()
         ee.on('init', err => {

webapp/pages/postpage.jsx

@@ -12,27 +12,15 @@ module.exports = function (boardsAPI) {
     },
     componentDidMount: function () {
       boardsAPI.use(boards => {
-        boards.getEventEmitter().on('init', err => {
+        this.setState({ api: boards })
-          if (!err && this.isMounted()) {
-            this.init(boards)
-          }
-        })
-        if (this.isMounted() && boards.isInit) {
-          this.init(boards)
-        }
-        boards.init()
       })
     },
-    init: function (boards) {
-      if (this.state.init) return
-      this.setState({ api: boards })
-    },
     getContext: function () {
       if (this.props.params.userid) {
         if (this.props.params.boardname) {
-          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>
+          return <div>Posted by <UserID id={this.props.params.userid} api={this.state.api} /> 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} api={this.state.boards} /></div>
+          return <div>Posted by <UserID id={this.props.params.userid} api={this.state.api} /></div>
         }
       } else return <div><h6 className="light">You are viewing a single post</h6></div>
     },