aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'vnext/src/components')
-rw-r--r--vnext/src/components/message.jsx50
1 files changed, 38 insertions, 12 deletions
diff --git a/vnext/src/components/message.jsx b/vnext/src/components/message.jsx
index 78ebdd38..cf287ce9 100644
--- a/vnext/src/components/message.jsx
+++ b/vnext/src/components/message.jsx
@@ -2,25 +2,51 @@ import React from 'react'
import PropTypes from 'prop-types'
export default class Message extends React.Component {
- render() { return (
- <article>
- <aside>
- <a href={this.props.user.uname + "/"}>
- <img src={"//i.juick.com/a/" + this.props.user.uid + ".png"} alt=""/></a>
- </aside>
- <header className="u">@<a href={this.props.user.uname + "/"}>{this.props.user.uname}</a>: </header>
- <header className="t"><a href={this.props.user.uname + "/" + this.props.mid}>
- <time dateTime={this.props.timestamp} title={this.props.timestamp}>{this.props.timestamp}</time></a></header>
- <p>{this.props.body}</p>
- </article>) }
+ render() {
+ const msg = this.props.data;
+ return (
+ <article itemProp="blogPost" itemScope="" itemType="http://schema.org/BlogPosting" itemRef="org">
+ <header className="h">
+ <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>
+ <div className="msg-ts">
+ <a href={`/${msg.user.uname}/${msg.mid}`}>
+ <time itemProp="datePublished dateModified" itemType="http://schema.org/Date" dateTime={msg.timestamp}
+ title={msg.timestamp}>
+ {msg.timestamp}
+ </time>
+ </a>
+ </div>
+ <div className="msg-tags" itemProp="headline">
+ <Tags data={msg.tags || []} />
+ </div>
+ </header>
+ <p>{msg.body}</p>
+ { msg.photo &&
+ <p className="ir"><a href={`//i.juick.com/p/${msg.mid}.${msg.attach}`} data-fname={`${msg.mid}.${msg.attach}`}>
+ <img itemProp="image" src={`//i.juick.com/p/${msg.mid}.${msg.attach}`} alt=""/></a>
+ </p>
+ }
+ </article>
+ )}
};
+function Tags(props) {
+ return props.data && props.data.map(tag => { return (<a key={tag} href={`/tag/${ tag}`} title={ tag }>{ tag }</a>) })
+}
+
Message.propTypes = {
+ msg: PropTypes.shape({
mid: PropTypes.number.isRequired,
user: PropTypes.shape({
uid: PropTypes.number.isRequired,
uname: PropTypes.string.isRequired
}),
timestamp: PropTypes.string.isRequired,
- body: PropTypes.string.isRequired
+ body: PropTypes.string
+ })
}