moved fontawesome css in Icon component and Clock in his own component

webapp/app.jsx

@@ -11,7 +11,6 @@ require('normalize.css')
 require('skeleton.css')
 require('style.css')
 require('raleway.css')
-require('font-awesome.min.css')
 
 // Load Components
 

webapp/components/clock.jsx

@@ -0,0 +1,25 @@
+var React = require('react')
+var Icon = require('icon.jsx')
+
+module.exports = React.createClass({
+  getInitialState: function(){
+    return { moment: false }
+  },
+  componentDidMount: function(){
+    require.ensure(['moment'],_ => {
+      if(this.isMounted()) this.setState({ moment: require('moment') })
+    })
+  },
+  getDate: function(){
+    if(this.props.date){
+      if(this.state.moment)
+        return this.state.moment.unix(this.props.date).fromNow()
+      else return <Icon name="refresh" className="fa-spin" />
+    } else {
+      return 'Unknown Date'
+    }
+  },
+  render: function(){
+    return <div className="clock"><Icon name="clock-o" className={this.props.className} /> {this.getDate()}</div>
+  }
+})

webapp/components/comment.jsx

@@ -1,6 +1,7 @@
 var React = require('react')
 var Markdown = require('markdown.jsx')
 var Icon = require('icon.jsx')
+var Clock = require('clock.jsx')
 
 module.exports = function(boardsAPI){
   var UserID = require('userID.jsx')(boardsAPI)
@@ -13,21 +14,12 @@ module.exports = function(boardsAPI){
         if(this.isMounted()) this.setState({ moment: require('moment') })
       })
     },
-    getDate: function(){
-      if(this.props.comment.date){
-        if(this.state.moment)
-          return this.state.moment.unix(this.props.comment.date).fromNow()
-        else return '...'
-      } else {
-        return 'Unknown Date'
-      }
-    },
     render: function(){
       if(this.props.comment){
         return <div className="comment"><hr/>
           <div className="icons">
             <UserID id={this.props.comment.op} />
-            <Icon name="clock-o" className="not-first"/> {this.getDate()}
+            <Clock date={this.props.comment.date} />
           </div>
           <Markdown source={this.props.comment.text} />
         <hr/></div>

webapp/components/icon.jsx

@@ -1,4 +1,5 @@
 var React = require('react')
+require('font-awesome.min.css')
 
 module.exports = React.createClass({
   class: function(){

webapp/components/post.jsx

@@ -2,19 +2,11 @@ var React = require('react')
 var Markdown = require('markdown.jsx')
 var Icon = require('icon.jsx')
 var Link = require('react-router').Link
+var Clock = require('clock.jsx')
 
 module.exports = function(boardsAPI){
   var UserID = require('userID.jsx')(boardsAPI)
   return React.createClass({
-    getDate: function(){
-      if(this.props.post.date){
-        if(this.state.moment)
-          return this.state.moment.unix(this.props.post.date).fromNow()
-        else return '...'
-      } else {
-        return 'Unknown Date'
-      }
-    },
     getInitialState: function(){
       return { moment: false }
     },
@@ -41,7 +33,7 @@ module.exports = function(boardsAPI){
           <Markdown source={this.props.post.text} /><hr/>
           <div className="icons">
             <UserID id={this.props.post.op}></UserID>
-            <Icon name="clock-o" className="not-first"/> {this.getDate()}
+            <Clock className="not-first" date={this.props.post.date} />
             <Icon name="comments" className="not-first" /> <Link className="nounderline" to={this.postLink()}>View</Link>
           </div>
         </div>

webapp/style.css

@@ -20,6 +20,10 @@ a {
   text-decoration: none;
 }
 
+.clock {
+  display: inline
+}
+
 .black {
   color: black
 }