aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/components/Message.js
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2018-06-16 23:32:45 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:52 +0300
commitce9d9ed32757e30c32fa9fe29d04491c3d0550d1 (patch)
treeb6b5a69d0fe8bb06bd19847a0055dc0ebaae5e72 /vnext/src/components/Message.js
parent694140e3197968a1d03ac58a903b20e181302cd4 (diff)
Message navigation panel
Diffstat (limited to 'vnext/src/components/Message.js')
-rw-r--r--vnext/src/components/Message.js130
1 files changed, 91 insertions, 39 deletions
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>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;Comment</span>
+ </a>
+ <a href="#" className="msg-menu msg-button">
+ <Icon name="ei-link" size="s" />
+ <span>&nbsp;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
})
};