import './account.css'; import { useEffect, useState } from 'preact/hooks'; import emojifyText from '../utils/emojify-text'; import enhanceContent from '../utils/enhance-content'; import handleContentLinks from '../utils/handle-content-links'; import shortenNumber from '../utils/shorten-number'; import states, { hideAllModals } from '../utils/states'; import store from '../utils/store'; import Avatar from './avatar'; import Icon from './icon'; import Link from './link'; import NameText from './name-text'; function Account({ account, onClose }) { const [uiState, setUIState] = useState('default'); const isString = typeof account === 'string'; const [info, setInfo] = useState(isString ? null : account); useEffect(() => { if (isString) { setUIState('loading'); (async () => { try { const info = await masto.v1.accounts.lookup({ acct: account, skip_webfinger: false, }); setInfo(info); setUIState('default'); } catch (e) { try { const result = await masto.v2.search({ q: account, type: 'accounts', limit: 1, resolve: true, }); if (result.accounts.length) { setInfo(result.accounts[0]); setUIState('default'); return; } setUIState('error'); } catch (err) { console.error(err); setUIState('error'); } } })(); } else { setInfo(account); } }, [account]); const { acct, avatar, avatarStatic, bot, createdAt, displayName, emojis, fields, followersCount, followingCount, group, header, headerStatic, id, lastStatusAt, locked, note, statusesCount, url, username, } = info || {}; const [relationshipUIState, setRelationshipUIState] = useState('default'); const [relationship, setRelationship] = useState(null); const [familiarFollowers, setFamiliarFollowers] = useState([]); useEffect(() => { if (info) { const currentAccount = store.session.get('currentAccount'); if (currentAccount === id) { // It's myself! return; } setRelationshipUIState('loading'); setFamiliarFollowers([]); (async () => { const fetchRelationships = masto.v1.accounts.fetchRelationships([id]); const fetchFamiliarFollowers = masto.v1.accounts.fetchFamiliarFollowers(id); try { const relationships = await fetchRelationships; console.log('fetched relationship', relationships); if (relationships.length) { const relationship = relationships[0]; setRelationship(relationship); if (!relationship.following) { try { const followers = await fetchFamiliarFollowers; console.log('fetched familiar followers', followers); setFamiliarFollowers(followers[0].accounts.slice(0, 10)); } catch (e) { console.error(e); } } } setRelationshipUIState('default'); } catch (e) { console.error(e); setRelationshipUIState('error'); } })(); } }, [info]); const { following, showingReblogs, notifying, followedBy, blocking, blockedBy, muting, mutingNotifications, requested, domainBlocking, endorsed, } = relationship || {}; return (
{uiState === 'error' && (

Unable to load account.

Go to account page

)} {uiState === 'loading' ? ( <>
███ ████████████

████████ ███████

███████████████ ███████████████

██ Posts ██ Following ██ Followers

) : ( info && ( <>
{bot && ( <> Automated )}
{fields?.length > 0 && ( )}

{ hideAllModals(); }} > Posts
{shortenNumber(statusesCount)} {' '} Following
{shortenNumber(followingCount)} {' '}
Followers
{shortenNumber(followersCount)} {' '}
{!!createdAt && ( Joined
)}

{familiarFollowers?.length > 0 && (

Common followers{' '} {familiarFollowers.map((follower) => ( { e.preventDefault(); states.showAccount = follower; }} > ))}

)}

{followedBy ? Following you : }{' '} {relationshipUIState !== 'loading' && relationship && ( )}

) )}
); } export default Account;