From ae898444ad6d2c3b9e8327093d4584b561660104 Mon Sep 17 00:00:00 2001
From: Enrico Fasoli <fazius2009@gmail.com>
Date: Mon, 23 Nov 2015 18:38:21 +0100
Subject: [PATCH] moved fontawesome css in Icon component and Clock in his own
 component

---
 webapp/app.jsx                |  1 -
 webapp/components/clock.jsx   | 25 +++++++++++++++++++++++++
 webapp/components/comment.jsx | 12 ++----------
 webapp/components/icon.jsx    |  1 +
 webapp/components/post.jsx    | 12 ++----------
 webapp/style.css              |  4 ++++
 6 files changed, 34 insertions(+), 21 deletions(-)
 create mode 100644 webapp/components/clock.jsx

diff --git a/webapp/app.jsx b/webapp/app.jsx
index c2f4a65..624a190 100644
--- a/webapp/app.jsx
+++ b/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
 
diff --git a/webapp/components/clock.jsx b/webapp/components/clock.jsx
new file mode 100644
index 0000000..10136d9
--- /dev/null
+++ b/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>
+  }
+})
diff --git a/webapp/components/comment.jsx b/webapp/components/comment.jsx
index bc6767a..5134dcd 100644
--- a/webapp/components/comment.jsx
+++ b/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>
diff --git a/webapp/components/icon.jsx b/webapp/components/icon.jsx
index c697bd8..24a7754 100644
--- a/webapp/components/icon.jsx
+++ b/webapp/components/icon.jsx
@@ -1,4 +1,5 @@
 var React = require('react')
+require('font-awesome.min.css')
 
 module.exports = React.createClass({
   class: function(){
diff --git a/webapp/components/post.jsx b/webapp/components/post.jsx
index 4d147d3..c34deac 100644
--- a/webapp/components/post.jsx
+++ b/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>
diff --git a/webapp/style.css b/webapp/style.css
index 653c24d..271f481 100644
--- a/webapp/style.css
+++ b/webapp/style.css
@@ -20,6 +20,10 @@ a {
   text-decoration: none;
 }
 
+.clock {
+  display: inline
+}
+
 .black {
   color: black
 }