wip/format event objects to human readable form

src/js/components/feed.jsx

@@ -1,24 +1,37 @@
 'use strict';
 
 var React = require('react');
-var faker = require('faker');
+var request = require('axios');
 var _ = require('lodash');
 
+var transformers = require('../util');
+
+function throwError(err) {
+  setTimeout(() => {
+    throw err;
+  });
+}
+
 module.exports = React.createClass({
   getInitialState() {
     return {
-      messages: _.range(10).map(() => {
-        return {
-          image: faker.image.avatar(),
-          body: faker.hacker.phrase(),
-          timestamp: faker.date.recent(),
-          type: _.sample(['twitter', 'slack', 'github']),
-          meta: `Retweeted by @${faker.internet.userName()}`
-        }
-      })
+      messages: []
     };
   },
   componentDidMount() {
+    request.get('/api/feeds').then((res) => {
+
+      var feeds = res.data;
+      var messages = [];
+      for(var type in feeds) {
+        var feedMessages = feeds[type].map(transformers[type]);
+        messages = messages.concat(feedMessages);
+      }
+
+      this.setState({
+        messages: messages
+      });
+    }).catch(throwError);
   },
   render() {
     var messages = this.state.messages.map((message) => {
@@ -26,7 +39,7 @@ module.exports = React.createClass({
         <div className="message">
           <img className="message__image" src={message.image} />
           <div className="message__content">
-            <div className="message__body">{message.body}</div>
+            <div className="message__body" dangerouslySetInnerHTML={{__html:message.body}}></div>
             <div className="message__icon">
               <i className={`fa fa-${message.type}`}></i>
             </div>
@@ -46,3 +59,18 @@ module.exports = React.createClass({
     )
   }
 });
+        // <div className="message">
+        //   <img className="message__image" src={message.image} />
+        //   <div className="message__content">
+        //     <div className="message__body">{message.body}</div>
+        //     <div className="message__icon">
+        //       <i className={`fa fa-${message.type}`}></i>
+        //     </div>
+        //     <div className="message__details">
+        //       <span className="message__timestamp">
+        //         {require('timeago')(message.timestamp)}
+        //       </span>
+        //       <span className="message__meta">{message.meta}</span>
+        //     </div>
+        //   </div>
+        // </div>