diff options
author | 2019-02-26 16:22:13 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:54 +0300 | |
commit | 695672f750ec9702c75a5020c90acba7b036380d (patch) | |
tree | 0cc4e5f386c531e485a232922ec61c8603f8274b /vnext/src | |
parent | f507e0639cb29ccf74926177e7230255f07648fb (diff) |
UserLink component
Diffstat (limited to 'vnext/src')
-rw-r--r-- | vnext/src/components/Thread.js | 3 | ||||
-rw-r--r-- | vnext/src/components/Types.js | 5 | ||||
-rw-r--r-- | vnext/src/components/UserInfo.js | 29 | ||||
-rw-r--r-- | vnext/src/components/__tests__/UserLink.test.js | 20 | ||||
-rw-r--r-- | vnext/src/components/__tests__/__snapshots__/UserLink.test.js.snap | 23 |
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>, +] +`; |