diff options
| -rw-r--r-- | vnext/src/components/Feeds.js | 2 | ||||
| -rw-r--r-- | vnext/src/components/Message.js | 130 | ||||
| -rw-r--r-- | vnext/src/components/Thread.js | 2 |
3 files changed, 93 insertions, 41 deletions
diff --git a/vnext/src/components/Feeds.js b/vnext/src/components/Feeds.js index 9748c113..e79d7f83 100644 --- a/vnext/src/components/Feeds.js +++ b/vnext/src/components/Feeds.js @@ -57,7 +57,7 @@ class Feed extends React.Component { render() { var nodes = this.state.msgs.map(msg => { - return (<Message key={msg.mid} data={msg} />); + return (<Message key={msg.mid} data={msg} visitor={this.props.visitor} />); }); return this.state.msgs.length > 0 ? ( <div className="msgs" id="content">{nodes}</div> diff --git a/vnext/src/components/Message.js b/vnext/src/components/Message.js index d3148141..9fce97d9 100644 --- a/vnext/src/components/Message.js +++ b/vnext/src/components/Message.js @@ -2,54 +2,106 @@ import React from 'react'; import PropTypes from 'prop-types'; import ReactMarkdown from 'react-markdown'; -export default class Message extends React.Component { - render() { - const msg = this.props.data; +import Icon from './Icon'; + +export default function Message(props) { + const msg = props.data; + const visitor = props.visitor; 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> - <ReactMarkdown source={msg.body}/> - { 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> + <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> + <ReactMarkdown itemProp="description" source={msg.body} /> + {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> + } + <nav className="l"> + { 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" /> + {msg.likes > 0 && (` ${msg.likes}`)} + </span> + <span> Recommend</span> + </a> + ) : visitor.uid > 0 ? ( + <a href="/post?body=!+%23{{ msg.mid }}" className="a-like msg-button"> + <span className="msg-button-icon"> + <Icon name="ei-heart" size="s" /> + {msg.likes > 0 && (` ${msg.likes}`)} + </span> + <span> Recommend</span> + </a> + ) : ( + <a href="/login" className="a-login msg-button"> + <span className="msg-button-icon"> + <Icon name="ei-heart" size="s" /> + {msg.likes > 0 && (` ${msg.likes}`)} + </span> + <span> Recommend</span> + </a> + )} + {!Boolean(msg.ReadOnly) | (visitor.uid === msg.user.uid) && ( + <React.Fragment> + <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) ? ( + <span className="badge">${msg.replies}</span> + ) : ( + `${msg.replies}` + )) + } + </span> + <span> Comment</span> + </a> + <a href="#" className="msg-menu msg-button"> + <Icon name="ei-link" size="s" /> + <span> Share</span> + </a> + </React.Fragment> + )} + {msg.FriendsOnly && ( + <a href="#" className="a-privacy">Открыть доступ</a> + )} + </nav> + </article> ); - } } 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>) }) } Message.propTypes = { data: PropTypes.shape({ - mid: PropTypes.number.isRequired, - user: PropTypes.shape({ - uid: PropTypes.number.isRequired, - uname: PropTypes.string.isRequired - }), - timestamp: PropTypes.string.isRequired, - body: PropTypes.string + mid: PropTypes.number.isRequired, + user: PropTypes.shape({ + uid: PropTypes.number.isRequired, + uname: PropTypes.string.isRequired + }), + timestamp: PropTypes.string.isRequired, + body: PropTypes.string }) }; diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js index 1a3ac862..a1abdd6c 100644 --- a/vnext/src/components/Thread.js +++ b/vnext/src/components/Thread.js @@ -37,7 +37,7 @@ export default class Thread extends React.Component { } render() { return this.state.replies && this.state.replies.length > 0 ? ( - <Message data={this.state.replies[0]}/> + <Message data={this.state.replies[0]} visitor={this.props.visitor}/> ) : ( <Spinner /> ); |