aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--vnext/src/components/Thread.js3
-rw-r--r--vnext/src/components/Types.js5
-rw-r--r--vnext/src/components/UserInfo.js29
-rw-r--r--vnext/src/components/__tests__/UserLink.test.js20
-rw-r--r--vnext/src/components/__tests__/__snapshots__/UserLink.test.js.snap23
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>,
+]
+`;