import { memo, useState, useEffect, useRef } from 'react' import { Link } from 'react-router-dom' import { info, fetchUserUri } from '../api' import Avatar from './Avatar' import Icon from './Icon' import defaultAvatar from '../assets/av-96.png' let isMounted /** * User info component * @param {{uname: string, onUpdate?: Function, children?: import('react').ReactElement}} props */ export default function UserInfo({ uname, onUpdate, children }) { const [user, setUser] = useState({ uname: uname, uid: 0 }) useEffect(() => { isMounted = true info(uname).then(response => { if (isMounted) { onUpdate && onUpdate(response.data) setUser(response.data) } }).catch(console.log) return () => { isMounted = false } }, [onUpdate, uname]) return ( <>
Was online recently
{ user.uid > 0 && <> PM Recommendations Photos }
{children} ) } /** * User summary component * @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 && I read: {user.read.length} let readers = user.readers && My readers: {user.readers.length} let mybl = user.statsMyBL && My blacklist: {user.statsMyBL} let presentItems = [read, readers, mybl].filter(Boolean) return (
{presentItems.length > 0 && presentItems.reduce((prev, curr) => [prev, ' ', curr])}
) } const UserSummary = memo(Summary) /** * Link to user * @param {{ user: import('../api').User}} props */ export function UserLink(props) { const [user, setUser] = useState(props.user) const userRef = useRef(user) useEffect(() => { isMounted = true if (userRef.current.uri) { fetchUserUri(userRef.current.uri).then(remote_user => { if (isMounted) { setUser({ uid: 0, uname: remote_user.preferredUsername, avatar: remote_user.icon && remote_user.icon.url, uri: userRef.current.uri }) } }).catch(() => { setUser({ uid: 0, uname: userRef.current.uri, uri: userRef.current.uri, avatar: defaultAvatar }) }) } return () => { isMounted = false } }, [props.user]) return ( user.uid ? {user.uname} : {user.uname} ) }