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 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