AvatarLink

2 files changed, 12 insertions, 3 deletions

diff --git a/vnext/src/App.js b/vnext/src/App.js
index 5726c511..5b343c0a 100644
--- a/vnext/src/App.js
+++ b/vnext/src/App.js
@@ -11,7 +11,7 @@ import Chat from './components/Chat';
 import Post from './components/Post';
 import Thread from './components/Thread';
 import LoginButton from './components/LoginButton';
-import Avatar from './components/Avatar';
+import { AvatarLink } from './components/Avatar';
 import Header from './components/Header';
 import SearchBox from './components/SearchBox';
 
@@ -91,7 +91,7 @@ export default class App extends React.Component {
             <div id="header_wrapper">
               {user.uid > 0 ?
                 <div id="ctitle">
-                  {user.uname ? <Avatar user={user} /> : <Icon name="ei-spinner" size="m" />}
+                  {user.uname ? <AvatarLink user={user} /> : <Icon name="ei-spinner" size="m" />}
                 </div>
                 :
                 <div id="logo"><Link to="/">Juick</Link></div>
diff --git a/vnext/src/components/Avatar.js b/vnext/src/components/Avatar.js
index 31d7dd34..c42a048a 100644
--- a/vnext/src/components/Avatar.js
+++ b/vnext/src/components/Avatar.js
@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
 
 import { UserType } from './Types';
 
-const Avatar = React.memo(function AvatarComponent(props) {
+const Avatar = React.memo(props => {
     return (
         <div style={{ display: 'flex' }}>
             <div className="msg-avatar">
@@ -26,6 +26,15 @@ const Avatar = React.memo(function AvatarComponent(props) {
 
 export default Avatar;
 
+export const AvatarLink = React.memo(props => {
+    return (
+        <Link to={{ pathname: props.link || `/${props.user.uname}/` }}>
+            <img src={`//i.juick.com/a/${props.user.uid}.png`} alt={`${props.user.uname}`} />
+            {props.user.uname}
+        </Link>
+    );
+});
+
 Avatar.propTypes = {
     user: UserType,
     link: PropTypes.string,