layout refresh

5 files changed, 140 insertions, 50 deletions

diff --git a/vnext/src/components/Avatar.js b/vnext/src/components/Avatar.js
index 0df0dbd7..f79d7b09 100644
--- a/vnext/src/components/Avatar.js
+++ b/vnext/src/components/Avatar.js
@@ -6,15 +6,26 @@ import { UserType } from './Types';
 
 export default function Avatar(props) {
     return (
-        <div className="msg-avatar">
-            <Link to={{ pathname: props.link || `/${props.user.uname}/`}}>
-                <img src={`//i.juick.com/a/${props.user.uid}.png`} alt={`${props.user.uname}`} />
-            </Link>
+        <div style={{ display: 'flex' }}>
+            <div className="msg-avatar">
+                <Link to={{ pathname: props.link || `/${props.user.uname}/` }}>
+                    <img src={`//i.juick.com/a/${props.user.uid}.png`} alt={`${props.user.uname}`} />
+                </Link>
+            </div>
+            <div style={{ display: 'flex', flexDirection: 'column' }}>
+                <span itemProp="author" itemScope="" itemType="http://schema.org/Person">
+                    <Link to={{ pathname: `/${props.user.uname}/` }} itemProp="url" rel="author">
+                        <span itemProp="name">{props.user.uname}</span>
+                    </Link>
+                </span>
+                {props.children}
+            </div>
         </div>
     );
 }
 
 Avatar.propTypes = {
     user: UserType,
-    link: PropTypes.string
+    link: PropTypes.string,
+    children: PropTypes.node
 };
diff --git a/vnext/src/components/Feeds.js b/vnext/src/components/Feeds.js
index 194af71c..a7833f67 100644
--- a/vnext/src/components/Feeds.js
+++ b/vnext/src/components/Feeds.js
@@ -8,6 +8,8 @@ import moment from 'moment';
 import Message from './Message';
 import Spinner from './Spinner';
 
+import UserInfo from './UserInfo';
+
 import { getMessages } from '../api';
 import { UserType } from './Types';
 
@@ -38,7 +40,12 @@ export function Blog(props) {
     search: search,
     pageParam: search.search ? 'page' : 'before_mid'
   };
-  return (<Feed authRequired={false} query={query} {...props} />);
+  return (
+    <>
+      <UserInfo user={user} />
+      <Feed authRequired={false} query={query} {...props} />
+    </>
+  );
 }
 
 export function Tag(props) {
@@ -75,7 +82,7 @@ class Feed extends React.Component {
 
   shouldComponentUpdate(nextProps, nextState) {
     return this.props.visitor.uid !== nextProps.visitor.uid
-    || this.state !== nextState || this.props.location !== nextProps.location;
+      || this.state !== nextState || this.props.location !== nextProps.location;
   }
 
   getSnapshotBeforeUpdate(prevProps) {
diff --git a/vnext/src/components/Message.js b/vnext/src/components/Message.js
index f091296b..b36936ba 100644
--- a/vnext/src/components/Message.js
+++ b/vnext/src/components/Message.js
@@ -13,20 +13,16 @@ export default function Message({ data, visitor, children, ...rest }) {
     return (
         <div className="msg-cont" itemProp="blogPost" itemScope="" itemType="http://schema.org/BlogPosting" itemRef="org">
             <header className="h">
-                <span itemProp="author" itemScope="" itemType="http://schema.org/Person">
-                    <Link to={{ pathname: `/${data.user.uname}/` }} itemProp="url" rel="author">
-                        <span itemProp="name">{data.user.uname}</span>
-                    </Link>
-                </span>
-                <Avatar user={data.user} />
-                <div className="msg-ts">
-                    <Link to={{ pathname: `/${data.user.uname}/${data.mid}`, state: { msg: data } }}>
-                        <time itemProp="datePublished dateModified" itemType="http://schema.org/Date" dateTime={data.timestamp}
-                            title={moment.utc(data.timestamp).local().format('lll')}>
-                            {moment.utc(data.timestamp).fromNow()}
-                        </time>
-                    </Link>
-                </div>
+                <Avatar user={data.user}>
+                    <div className="msg-ts">
+                        <Link to={{ pathname: `/${data.user.uname}/${data.mid}`, state: { msg: data } }}>
+                            <time itemProp="datePublished dateModified" itemType="http://schema.org/Date" dateTime={data.timestamp}
+                                title={moment.utc(data.timestamp).local().format('lll')}>
+                                {moment.utc(data.timestamp).fromNow()}
+                            </time>
+                        </Link>
+                    </div>
+                </Avatar>
                 <Tags user={data.user} data={data.tags || []} />
             </header>
             <div className="msg-txt">
diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js
index b0e73b40..2097a315 100644
--- a/vnext/src/components/Thread.js
+++ b/vnext/src/components/Thread.js
@@ -45,7 +45,7 @@ export default class Thread extends React.Component {
       .then(response => {
         let msg = response.data.shift();
         this.setState({
-          msg: {...msg},
+          msg: { ...msg },
           replies: response.data,
           loading: false,
           active: 0
@@ -100,29 +100,20 @@ export default class Thread extends React.Component {
               <li id={msg.rid} key={msg.rid} className="msg">
                 <div className="msg-cont">
                   <div className="msg-header">
-                    {!msg.user.banned ? (
-                      <>
-                        <span itemProp="author" itemScope="" itemType="http://schema.org/Person">
-                          <Link to={`/${msg.user.uname}/`} itemProp="url" rel="author"><span itemProp="name">{msg.user.uname}</span></Link>
-                        </span><Avatar user={msg.user} />
-                      </>) : (
-                        <>
-                          <span>[удалено]:</span><Avatar user={{ uid: 0 }} />
-                        </>
-                      )
-                    }
-                    <div className="msg-ts">
-                      <a href={`/${msg.user.uname}/${msg.mid}`}>
-                        <time itemProp="datePublished dateModified" itemType="http://schema.org/Date" dateTime={msg.timestamp}
-                          title={moment.utc(msg.timestamp).local().format('lll')}>
-                          {moment.utc(msg.timestamp).fromNow()}
-                        </time>
-                      </a>
-                      {msg.replyto > 0 &&
-                        (
-                          <a href={`#${msg.replyto}`}> in reply to {msg.to.uname}&nbsp;</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}
+                            title={moment.utc(msg.timestamp).local().format('lll')}>
+                            {moment.utc(msg.timestamp).fromNow()}
+                          </time>
+                        </a>
+                        {msg.replyto > 0 &&
+                          (
+                            <a href={`#${msg.replyto}`}> in reply to {msg.to.uname}&nbsp;</a>
+                          )}
+                      </div>
+                    </Avatar>
                   </div>
                   <div className="msg-txt"><p dangerouslySetInnerHTML={{ __html: format(msg.body, msg.mid, (msg.tags || []).indexOf('code') >= 0) }}></p></div>
                   {
@@ -149,10 +140,10 @@ export default class Thread extends React.Component {
               </li>
             )) : (
                 <>
-                  {Array(loaders).fill().map((it, i) => <Spinner key={i} />)}
-                </>
-              )
-          }
+            {Array(loaders).fill().map((it, i) => <Spinner key={i} />)}
+          </>
+          )
+      }
         </ul>
       </>
     );
@@ -170,7 +161,7 @@ Thread.propTypes = {
   visitor: UserType.isRequired
 };
 
-function Recommendations({forMessage, ...rest}) {
+function Recommendations({ forMessage, ...rest }) {
   const { likes, recommendations } = forMessage;
   return recommendations && recommendations.length > 0 && (
     <div className="msg-recomms">{'Recommended by '}
diff --git a/vnext/src/components/UserInfo.js b/vnext/src/components/UserInfo.js
new file mode 100644
index 00000000..147bb6f8
--- /dev/null
+++ b/vnext/src/components/UserInfo.js
@@ -0,0 +1,85 @@
+import React from 'react';
+
+import { Link } from 'react-router-dom';
+
+import { info } from '../api';
+
+import Avatar from './Avatar';
+import Icon from './Icon';
+import SearchBox from './SearchBox';
+
+export default class UserInfo extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            user: { uname: props.user, uid: 0 }
+        };
+    }
+    componentDidMount() {
+        info(this.state.user.uname).then(response => {
+            this.setState({
+                user: response.data[0]
+            });
+        });
+    }
+    render() {
+        const { user } = this.state;
+        return (
+            <div style={{ padding: '14px' }}>
+                <Avatar user={user}>
+                    <div className="msg-ts">Was online recently</div>
+                </Avatar>
+                <div>
+                    {
+                        user.uid > 0 &&
+                        <>
+                            <ul>                                
+                                <li>
+                                    <Link to="/pm">
+                                        <Icon name="ei-envelope" size="s" />PM
+                              </Link>
+                                </li>
+                                <li>
+                                    <Link to={`/${user.uname}/?show=recomm`} rel="nofollow">
+                                        <Icon name="ei-heart" size="s" />Recommendations
+                              </Link>
+                                </li>
+                                <li>
+                                    <Link to={`/${user.uname}/?media=1`} rel="nofollow">
+                                        <Icon name="ei-camera" size="s" />Photos
+                              </Link>
+                                </li>
+                            </ul>
+                            <hr />
+                            <SearchBox pathname={`/${user.uname}/`} onSearch={this.search} {...this.props} />
+                            <hr />
+                            <div id="ustats">
+                                <ul>
+                                    {
+                                        user.read &&
+                                        <li><Link to={`/${user.uname}/friends`}>I read: {user.read.length}</Link></li>
+                                    }
+                                    <li><Link to={`/${user.uname}/readers`}>My readers: {user.readers ? user.readers.length : 0}</Link></li>
+                                    {
+                                        user.statsMyBL &&
+                                        <li><Link to={`/${user.uname}/bl`}>My blacklist: {user.statsMyBL}</Link></li>
+                                    }
+                                    <li>Messages: {user.statsMessages}</li>
+                                    <li>Comments: {user.statsReplies}</li>
+                                </ul>
+                                {
+                                    user.read &&
+                                    <div className="iread">
+                                        {
+                                            user.read.map(u => <Avatar user={u} key={u.uid} />)
+                                        }
+                                    </div>
+                                }
+                            </div>
+                        </>
+                    }
+                </div>
+            </div>
+        );
+    }
+}
\ No newline at end of file