diff options
author | 2019-05-04 21:13:12 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:54 +0300 | |
commit | f470636a70943a8ecad8bddc791a1c2dddd28e1e (patch) | |
tree | c43d109d88adbde9a696084070cdd92c6b9a004b /vnext/src/components/UserInfo.js | |
parent | 3d7d213e3ddc5bf4f71d536f31677b768aa3b7c0 (diff) |
Components -> UI
Diffstat (limited to 'vnext/src/components/UserInfo.js')
-rw-r--r-- | vnext/src/components/UserInfo.js | 117 |
1 files changed, 0 insertions, 117 deletions
diff --git a/vnext/src/components/UserInfo.js b/vnext/src/components/UserInfo.js deleted file mode 100644 index 7d84488e..00000000 --- a/vnext/src/components/UserInfo.js +++ /dev/null @@ -1,117 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import PropTypes from 'prop-types'; -import { Link } from 'react-router-dom'; - -import { UserType } from './Types'; - -import { info, fetchUserUri } from '../api'; - -import Avatar from './Avatar'; -import Icon from './Icon'; -import SearchBox from './SearchBox'; - -import './UserInfo.css'; - -let isMounted; - -export default function UserInfo(props) { - const [user, setUser] = useState({ uname: props.user, uid: 0 }); - const { onUpdate } = props; - useEffect(() => { - isMounted = true; - if (!user.avatar) { - info(user.uname).then(response => { - if (isMounted) { - setUser(response.data); - onUpdate && onUpdate(response.data); - } - }); - } - return () => { - isMounted = false; - }; - }, [onUpdate, user, user.avatar]); - return ( - <> - <div className="userinfo"> - <Avatar user={user}> - <div className="msg-ts">Was online recently</div> - </Avatar> - </div> - <UserSummary user={user} /> - <div className="l"> - { - user.uid > 0 && - <> - <Link to={`/pm/${user.uname}`}> - <Icon name="ei-envelope" size="s" /> - <span className="desktop">PM</span> - </Link> - <Link to={`/${user.uname}/?show=recomm`} rel="nofollow"> - <Icon name="ei-heart" size="s" /> - <span className="desktop">Recommendations</span> - </Link> - <Link to={`/${user.uname}/?media=1`} rel="nofollow"> - <Icon name="ei-camera" size="s" /> - <span className="desktop">Photos</span> - </Link> - </> - } - </div> - {props.children} - </> - ); -} - -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); - return ( - <div className="msg-summary"> - {presentItems.length > 0 && presentItems.reduce((prev, curr) => [prev, ' ', curr])} - </div> - ); -} - -Summary.propTypes = { - user: UserType.isRequired -}; - -const UserSummary = React.memo(Summary); - -export function UserLink(props) { - const [user, setUser] = useState(props.user); - useEffect(() => { - isMounted = true; - if (!user.uid && user.uri) { - fetchUserUri(user.uri).then(response => { - if (isMounted) { - setUser({ ...response.data, uid: 66666666 }); - } - }); - } - return () => { - isMounted = false; - }; - }, [user.uid, user.uri]); - return ( - user.uid ? - <Link key={user.uid} to={`/${user.uname}/`} className="info-avatar"><img src={user.avatar} />{user.uname}</Link> - : <a href={user.uri} className="info-avatar"><img src={user.avatar} />{user.uname}</a> - ); -} - -UserInfo.propTypes = { - user: PropTypes.string.isRequired, - onUpdate: PropTypes.func, - children: PropTypes.node -}; - -UserLink.propTypes = { - user: UserType.isRequired -}; |