5 files changed, 76 insertions, 4 deletions
diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js
index cf7291a8..7a1b48f3 100644
--- a/vnext/src/components/Thread.js
+++ b/vnext/src/components/Thread.js
@@ -11,6 +11,7 @@ import MessageInput from './MessageInput';
 import Spinner from './Spinner';
 import Avatar from './Avatar';
 import Button from './Button';
+import { UserLink } from './UserInfo';
 
 import { format } from '../utils/embed';
 
@@ -169,7 +170,7 @@ function Recommendations({ forMessage, ...rest }) {
     <div className="msg-recomms">{'Recommended by '}
       {
         recommendations.map(it => (
-          <Link key={it} to={`/${it}/`}>{it}</Link>
+          <UserLink user={it} />
         )).reduce((prev, curr) => [prev, ', ', curr])
       }
       {
diff --git a/vnext/src/components/Types.js b/vnext/src/components/Types.js
index 5a495ff3..9bf7b513 100644
--- a/vnext/src/components/Types.js
+++ b/vnext/src/components/Types.js
@@ -1,9 +1,10 @@
 import PropTypes from 'prop-types';
 
 export const UserType = PropTypes.shape({
-    uid: PropTypes.number,
+    uid: PropTypes.number.isRequired,
     uname: PropTypes.string,
-    avatar: PropTypes.string
+    avatar: PropTypes.string,
+    uri: PropTypes.string
 });
 
 export const MessageType = PropTypes.shape({
diff --git a/vnext/src/components/UserInfo.js b/vnext/src/components/UserInfo.js
index c76ef0c7..0a601834 100644
--- a/vnext/src/components/UserInfo.js
+++ b/vnext/src/components/UserInfo.js
@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
 
 import { UserType } from './Types';
 
-import { info } from '../api';
+import { info, fetchUserUri } from '../api';
 
 import Avatar from './Avatar';
 import Icon from './Icon';
@@ -65,8 +65,35 @@ export default function UserInfo(props) {
     );
 }
 
+export function UserLink(props) {
+    const [user, setUser] = useState(props.user);
+    useEffect(() => {
+        setUser(props.user);
+        isMounted = true;
+        if (!user.uid && user.uri) {
+            fetchUserUri(user.uri).then(response => {
+                if (isMounted) {
+                    setUser(response.data);
+                }
+            });
+            return () => {
+                isMounted = false;
+            };
+        }
+    }, [props.user]);
+    return (
+        user.uid ?
+            <Link key={user.uid} to={`/${user.uname}/`}>{user.uname}</Link>
+            : <a href={user.uri}>{user.uname}</a>
+    )
+}
+
 UserInfo.propTypes = {
     user: PropTypes.string.isRequired,
     onUpdate: PropTypes.func,
     children: PropTypes.node
 };
+
+UserLink.propTypes = {
+    user: UserType.isRequired
+}
diff --git a/vnext/src/components/__tests__/UserLink.test.js b/vnext/src/components/__tests__/UserLink.test.js
new file mode 100644
index 00000000..a75344b0
--- /dev/null
+++ b/vnext/src/components/__tests__/UserLink.test.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { MemoryRouter, Switch, Route } from 'react-router-dom';
+
+import { UserLink } from '../UserInfo';
+import renderer from 'react-test-renderer';
+
+test('UserLink renders correctly', async () => {
+    const component = renderer.create(
+        <MemoryRouter>
+            <>
+            <UserLink user={{ uid: 1, uname: 'ugnich', avatar: 'https://juick.com/i/a/1-deadbeef.png' }} />
+            <UserLink user={{ uid: 1, uname: 'ugnich', avatar: 'https://juick.com/i/a/1-deadbeef.png', uri: '' }} />
+            <UserLink user={{ uid: 0, uname: '', uri: 'https://example.com/u/test' }} />
+            </>
+        </MemoryRouter>
+    );
+    await Promise.resolve();
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+});
diff --git a/vnext/src/components/__tests__/__snapshots__/UserLink.test.js.snap b/vnext/src/components/__tests__/__snapshots__/UserLink.test.js.snap
new file mode 100644
index 00000000..d7eaed28
--- /dev/null
+++ b/vnext/src/components/__tests__/__snapshots__/UserLink.test.js.snap
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UserLink renders correctly 1`] = `
+Array [
+  <a
+    href="/ugnich/"
+    onClick={[Function]}
+  >
+    ugnich
+  </a>,
+  <a
+    href="/ugnich/"
+    onClick={[Function]}
+  >
+    ugnich
+  </a>,
+  <a
+    href="https://example.com/u/test"
+  >
+    
+  </a>,
+]
+`;