From 695672f750ec9702c75a5020c90acba7b036380d Mon Sep 17 00:00:00 2001
From: Vitaly Takmazov
Date: Tue, 26 Feb 2019 16:22:13 +0300
Subject: UserLink component
---
vnext/src/components/Thread.js | 3 ++-
vnext/src/components/Types.js | 5 ++--
vnext/src/components/UserInfo.js | 29 +++++++++++++++++++++-
vnext/src/components/__tests__/UserLink.test.js | 20 +++++++++++++++
.../__tests__/__snapshots__/UserLink.test.js.snap | 23 +++++++++++++++++
5 files changed, 76 insertions(+), 4 deletions(-)
create mode 100644 vnext/src/components/__tests__/UserLink.test.js
create mode 100644 vnext/src/components/__tests__/__snapshots__/UserLink.test.js.snap
(limited to 'vnext/src')
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 }) {
{'Recommended by '}
{
recommendations.map(it => (
-
{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 ?
+
{user.uname}
+ :
{user.uname}
+ )
+}
+
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(
+
+ <>
+
+
+
+ >
+
+ );
+ 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 [
+
+ ugnich
+ ,
+
+ ugnich
+ ,
+
+
+ ,
+]
+`;
--
cgit v1.2.3