aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/ui/UserInfo.js
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2019-05-04 21:13:12 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:54 +0300
commitf470636a70943a8ecad8bddc791a1c2dddd28e1e (patch)
treec43d109d88adbde9a696084070cdd92c6b9a004b /vnext/src/ui/UserInfo.js
parent3d7d213e3ddc5bf4f71d536f31677b768aa3b7c0 (diff)
Components -> UI
Diffstat (limited to 'vnext/src/ui/UserInfo.js')
-rw-r--r--vnext/src/ui/UserInfo.js117
1 files changed, 117 insertions, 0 deletions
diff --git a/vnext/src/ui/UserInfo.js b/vnext/src/ui/UserInfo.js
new file mode 100644
index 00000000..7d84488e
--- /dev/null
+++ b/vnext/src/ui/UserInfo.js
@@ -0,0 +1,117 @@
+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
+};