diff options
Diffstat (limited to 'vnext/src/ui/UserInfo.js')
-rw-r--r-- | vnext/src/ui/UserInfo.js | 70 |
1 files changed, 35 insertions, 35 deletions
diff --git a/vnext/src/ui/UserInfo.js b/vnext/src/ui/UserInfo.js index 2ca8c431..f71dfcdc 100644 --- a/vnext/src/ui/UserInfo.js +++ b/vnext/src/ui/UserInfo.js @@ -1,13 +1,13 @@ -import { memo, useState, useEffect, useRef } from 'react'; -import { Link } from 'react-router-dom'; +import { memo, useState, useEffect, useRef } from 'react' +import { Link } from 'react-router-dom' -import { info, fetchUserUri } from '../api'; +import { info, fetchUserUri } from '../api' -import Avatar from './Avatar'; -import Icon from './Icon'; -import defaultAvatar from '../assets/av-96.png'; +import Avatar from './Avatar' +import Icon from './Icon' +import defaultAvatar from '../assets/av-96.png' -let isMounted; +let isMounted /** * User info component @@ -17,19 +17,19 @@ export default function UserInfo({ uname, onUpdate, children }) { const [user, setUser] = useState({ uname: uname, uid: 0 - }); + }) useEffect(() => { - isMounted = true; + isMounted = true info(uname).then(response => { if (isMounted) { - onUpdate && onUpdate(response.data); - setUser(response.data); + onUpdate && onUpdate(response.data) + setUser(response.data) } - }).catch(console.log); + }).catch(console.log) return () => { - isMounted = false; - }; - }, [onUpdate, uname]); + isMounted = false + } + }, [onUpdate, uname]) return ( <> <div className="userinfo"> @@ -59,7 +59,7 @@ export default function UserInfo({ uname, onUpdate, children }) { </div> {children} </> - ); + ) } /** @@ -67,22 +67,22 @@ export default function UserInfo({ uname, onUpdate, children }) { * @param {{user: import('../api').User}} props */ function Summary({ user }) { - const readUrl = `/${user.uname}/friends`; - const readersUrl = `/${user.uname}/readers`; - const blUrl = `/${user.uname}/bl`; - let read = user.read && <Link key={readUrl} to={readUrl}>I read: {user.read.length}</Link>; - let readers = user.readers && <Link key={readersUrl} to={readersUrl}>My readers: {user.readers.length}</Link>; - let mybl = user.statsMyBL && <Link key={blUrl} to={blUrl}>My blacklist: {user.statsMyBL}</Link>; - let presentItems = [read, readers, mybl].filter(Boolean); + const readUrl = `/${user.uname}/friends` + const readersUrl = `/${user.uname}/readers` + const blUrl = `/${user.uname}/bl` + let read = user.read && <Link key={readUrl} to={readUrl}>I read: {user.read.length}</Link> + let readers = user.readers && <Link key={readersUrl} to={readersUrl}>My readers: {user.readers.length}</Link> + let mybl = user.statsMyBL && <Link key={blUrl} to={blUrl}>My blacklist: {user.statsMyBL}</Link> + let presentItems = [read, readers, mybl].filter(Boolean) return ( <div className="msg-summary"> {presentItems.length > 0 && presentItems.reduce((prev, curr) => [prev, ' ', curr])} </div> - ); + ) } -const UserSummary = memo(Summary); +const UserSummary = memo(Summary) /** @@ -90,10 +90,10 @@ const UserSummary = memo(Summary); * @param {{ user: import('../api').User}} props */ export function UserLink(props) { - const [user, setUser] = useState(props.user); - const userRef = useRef(user); + const [user, setUser] = useState(props.user) + const userRef = useRef(user) useEffect(() => { - isMounted = true; + isMounted = true if (userRef.current.uri) { fetchUserUri(userRef.current.uri).then(remote_user => { if (isMounted) { @@ -102,7 +102,7 @@ export function UserLink(props) { uname: remote_user.preferredUsername, avatar: remote_user.icon && remote_user.icon.url, uri: userRef.current.uri - }); + }) } }).catch(() => { setUser({ @@ -110,13 +110,13 @@ export function UserLink(props) { uname: userRef.current.uri, uri: userRef.current.uri, avatar: defaultAvatar - }); - }); + }) + }) } return () => { - isMounted = false; - }; - }, [props.user]); + isMounted = false + } + }, [props.user]) return ( user.uid ? <Link key={user.uid} to={`/${user.uname}/`} className="info-avatar"> @@ -125,5 +125,5 @@ export function UserLink(props) { : <a href={user.uri} className="info-avatar"> <img src={user.avatar || defaultAvatar} />{user.uname} </a> - ); + ) } |