aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--vnext/src/components/Avatar.js15
-rw-r--r--vnext/src/components/Message.js31
-rw-r--r--vnext/src/components/Types.js6
-rw-r--r--vnext/src/index.js5
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>