Message navigation panel

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>&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
     })
 };
 
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 />
     );