import React, { 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 SearchBox from './SearchBox'; import './UserInfo.css'; let isMounted; /** * User info component * @param {{user: string, onUpdate?: function, children?: Element}} props */ export default function UserInfo(props) { /** @type {import('../api').User} user */ const currentUser = { uname: props.user, uid: 0 }; const [user, setUser] = useState(currentUser); const { onUpdate } = props; const userRef = useRef(user); useEffect(() => { isMounted = true; if (!userRef.current.avatar) { info(userRef.current.uname).then(response => { if (isMounted) { onUpdate && onUpdate(response.data); setUser(response.data); } }); } return () => { isMounted = false; }; }, [onUpdate]); return ( <>
Was online recently
{ user.uid > 0 && <> PM Recommendations Photos }
{props.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) => // @ts-ignore [prev, ' ', curr])}
); } const UserSummary = React.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(response => { if (isMounted) { setUser(response.data); } }); } return () => { isMounted = false; }; }, []); return ( user.uid ? {user.uname} : {user.uname} ); }