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 }); useEffect(() => { isMounted = true; info(user.uname).then(response => { if (isMounted) { setUser(response.data); props.onUpdate && props.onUpdate(response.data); } }); return () => { isMounted = false; }; }, []); return ( <>
Was online recently
{ user.uid > 0 && <> PM Recommendations Photos { user.read && I read: {user.read.length} } My readers: {user.readers ? user.readers.length : 0} { user.statsMyBL && My blacklist: {user.statsMyBL} } }
{props.children} ); } 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 }