Avatar component

4 files changed, 37 insertions, 20 deletions

diff --git a/vnext/src/components/Avatar.js b/vnext/src/components/Avatar.js
new file mode 100644
index 00000000..72b5d2d1
--- /dev/null
+++ b/vnext/src/components/Avatar.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { UserType } from './Types';
+
+export default function Avatar(props) {
+    return (
+        <div className="msg-avatar"><a href={`/${props.user.uname}/`}>
+            <img src={`//i.juick.com/a/${props.user.uid}.png`} alt={`${props.user.uname}`} /></a>
+        </div>
+    );
+}
+
+Avatar.propTypes = {
+    user: UserType
+}
diff --git a/vnext/src/components/Message.js b/vnext/src/components/Message.js
index 0c322a66..d1a9c51f 100644
--- a/vnext/src/components/Message.js
+++ b/vnext/src/components/Message.js
@@ -3,7 +3,9 @@ import PropTypes from 'prop-types';
 import ReactMarkdown from 'react-markdown';
 import moment from 'moment';
 
+import { UserType } from './Types';
 import Icon from './Icon';
+import Avatar from './Avatar';
 
 export default function Message(props) {
     const msg = props.data;
@@ -14,9 +16,7 @@ export default function Message(props) {
                 <span itemProp="author" itemScope="" itemType="http://schema.org/Person">
                     <a href={`/${msg.user.uname}/`} itemProp="url" rel="author"><span itemProp="name">{msg.user.uname}</span></a>
                 </span>
-                <div className="msg-avatar"><a href={`/${msg.user.uname}/`}>
-                    <img src={`//i.juick.com/a/${msg.user.uid}.png`} alt={`${msg.user.uname}`} /></a>
-                </div>
+                <Avatar user={msg.user} />
                 <div className="msg-ts">
                     <a href={`/${msg.user.uname}/${msg.mid}`}>
                         <time itemProp="datePublished dateModified" itemType="http://schema.org/Date" dateTime={msg.timestamp}
@@ -36,7 +36,7 @@ export default function Message(props) {
                 </p>
             }
             <nav className="l">
-                { visitor.uid === msg.user.uid ? (
+                {visitor.uid === msg.user.uid ? (
                     <a href={`/${msg.user.uname}/${msg.mid}`} className="a-like msg-button">
                         <span className="msg-button-icon">
                             <Icon name="ei-heart" size="s" />
@@ -66,12 +66,12 @@ export default function Message(props) {
                         <a href={`/${msg.user.uname}/${msg.mid}`} className="a-comment msg-button">
                             <span className="msg-button-icon">
                                 <Icon name="ei-comment" size="s" />
-                                { msg.replies > 0 &&
-                                        (Boolean(msg.unread) ? (
+                                {msg.replies > 0 &&
+                                    (Boolean(msg.unread) ? (
                                         <span className="badge">${msg.replies}</span>
                                     ) : (
                                             `${msg.replies}`
-                                        ))                                    
+                                        ))
                                 }
                             </span>
                             <span>&nbsp;Comment</span>
@@ -91,24 +91,21 @@ export default function Message(props) {
 }
 
 function Tags(props) {
-    return props.data && props.data.map(tag => { 
-        return (<a key={tag} href={`/tag/${tag}`} title={tag}>{tag}</a>) 
+    return props.data && props.data.map(tag => {
+        return (<a key={tag} href={`/tag/${tag}`} title={tag}>{tag}</a>)
     })
 }
 
-Tags.propTypes = {
-    data: PropTypes.array
-}
-
 Message.propTypes = {
     data: PropTypes.shape({
         mid: PropTypes.number.isRequired,
-        user: PropTypes.shape({
-            uid: PropTypes.number.isRequired,
-            uname: PropTypes.string.isRequired
-        }),
+        user: UserType,
         timestamp: PropTypes.string.isRequired,
         body: PropTypes.string
     })
 };
 
+Tags.propTypes = {
+    data: PropTypes.array
+}
+
diff --git a/vnext/src/components/Types.js b/vnext/src/components/Types.js
new file mode 100644
index 00000000..2bd07458
--- /dev/null
+++ b/vnext/src/components/Types.js
@@ -0,0 +1,6 @@
+import PropTypes from 'prop-types';
+
+export const UserType = PropTypes.shape({
+    uid: PropTypes.number.isRequired,
+    uname: PropTypes.string.isRequired
+});
diff --git a/vnext/src/index.js b/vnext/src/index.js
index bf1d78ac..e5eda859 100644
--- a/vnext/src/index.js
+++ b/vnext/src/index.js
@@ -7,6 +7,7 @@ import Post from './components/Post';
 import Thread from './components/Thread';
 import LoginButton from './components/LoginButton';
 import Footer from './components/Footer';
+import Avatar from './components/Avatar';
 
 const elClassHidden = 'header--hidden'
 const elClassBackground = 'header--background';
@@ -85,9 +86,7 @@ class App extends React.Component {
             <div id="header_wrapper">
               {this.state.visitor.uid > 0 ?
                 <div id="ctitle">
-                  <a href={`/${this.state.visitor.uname}`}>
-                    <img src={`//i.juick.com/a/${this.state.visitor.uid}.png`} alt="" />{this.state.visitor.uname}
-                  </a>
+                  <Avatar user={this.state.visitor} />
                 </div>
                 :
                 <div id="logo"><Link to="/">Juick</Link></div>