Show poster for each answer

Readme.md

@@ -19,7 +19,7 @@ Google and Stackoverflow implement some form of rate limiting, so constant searc
 ### Todo
 - [x] Add loading indicator.
 - [ ] Indicate selected answer.
-- [ ] Show the user that posted each answer.
+- [x] Show the user that posted each answer.
 - [x] Make a proper usage gif or screenshot.
 
 ## Related

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cerebro-stackoverflow",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Cerebro plugin to find answers to questions on stack overflow",
   "license": "MIT",
   "repository": "BrainMaestro/cerebro-stackoverflow",

src/answer.js

@@ -1,5 +1,6 @@
 const React = require('react');
 const ReactMarkdown = require('react-markdown');
+const Owner = require('./owner');
 
 class Answer extends React.Component {
   render() {
@@ -17,6 +18,7 @@ class Answer extends React.Component {
           <div className="media-content">
             <div className="content">
               <ReactMarkdown source={answer.body} />
+              <Owner owner={answer.owner} />
             </div>
           </div>
         </article>

src/owner.js

@@ -0,0 +1,34 @@
+const React = require('react');
+
+class Owner extends React.Component {
+  render() {
+    const { profile_image, display_name, reputation, link } = this.props.owner;
+
+    return (
+      <div>
+        <hr />
+        <div className="is-pulled-right">
+          <div className="image is-32x32" style={{ marginRight: 10, display: 'inline-block' }}>
+            <img src={profile_image} alt="Poster Image" />
+          </div>
+
+          <span className="is-inline-block">
+            <small>{display_name}</small><br />
+            <small>{reputation}</small>
+          </span>
+        </div>
+      </div>
+    );
+  }
+}
+
+Owner.propTypes = {
+  owner: React.PropTypes.shape({
+    profile_image: React.PropTypes.string,
+    display_name: React.PropTypes.string,
+    reputation: React.PropTypes.number,
+    link: React.PropTypes.string,
+  }),
+}
+
+module.exports = Owner;

src/question.js

@@ -4,6 +4,7 @@ const Spinner = require('react-spinkit');
 const he = require('he');
 const Answer = require('./answer');
 const SearchError = require('./search-error');
+const Owner = require('./owner');
 const { get } = require('./search');
 
 class Question extends React.Component {
@@ -61,23 +62,13 @@ class Question extends React.Component {
           </div>
 
           <div className="card-content">
-            <div className="media" style={{ marginBottom: 0 }}>
-              <div className="media-left">
-                <figure className="image is-32x32">
-                  <img src={question.owner.profile_image} alt="Image" />
-                </figure>
-              </div>
-              <div className="media-content">
-                <p className="title is-5">{question.owner.display_name}</p>
-                <p className="subtitle is-6">{question.owner.reputation}</p>
-              </div>
-            </div>
-
             <div className="content">
               <ReactMarkdown source={question.body} />
-              {this.renderTags()}
+                <Owner owner={question.owner} />
+                {this.renderTags()}
             </div>
           </div>
+
           <footer className="card-footer">
             <a className="card-footer-item" onClick={goBack}>Go Back</a>
             <a className="card-footer-item" href={question.link}>Open in Brower</a>

src/styles.sass

@@ -1,5 +1,7 @@
 @import "~bulma/sass/utilities/_all.sass"
 
+@import "~bulma/sass/base/helpers.sass"
+
 @import "~bulma/sass/grid/tiles.sass"
 
 @import "~bulma/sass/elements/button.sass"