import React, { useState, useEffect } 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; /** * Wrapper for dumb VSCode * @param {import('../api').User} user */ function useUserState(user) { return useState(user); } /** * User info component * @param {{user: string, onUpdate?: function, children?: Element}} props */ export default function UserInfo(props) { const [user, setUser] = useUserState({ 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 ( <>
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) => [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); useEffect(() => { isMounted = true; if (user.uri) { fetchUserUri(user.uri).then(response => { if (isMounted) { setUser(response.data); } }); } return () => { isMounted = false; }; }, [user.uid, user.uri]); return ( user.uid ? {user.uname} : {user.uname} ); }