diff options
| -rw-r--r-- | vnext/src/components/Avatar.js | 15 | ||||
| -rw-r--r-- | vnext/src/components/Message.js | 31 | ||||
| -rw-r--r-- | vnext/src/components/Types.js | 6 | ||||
| -rw-r--r-- | vnext/src/index.js | 5 |
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> 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> |