import React, { useState, useEffect, useRef } from 'react'; import { Link } from 'react-router-dom'; import { info, fetchUserUri, update } from '../api'; import Avatar from './Avatar'; import Icon from './Icon'; import SearchBox from './SearchBox'; import './UserInfo.css'; let isMounted; /** * User info component * @param {{uname: string, onUpdate?: function, children?: 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); } }); 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) => // @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; }; }, [props.user]); return ( user.uid ? {user.uname} : {user.uname} ); }