diff --git a/src/components/account.css b/src/components/account.css index 276cac63..5764ebbf 100644 --- a/src/components/account.css +++ b/src/components/account.css @@ -70,3 +70,12 @@ #account-container .profile-field p { margin: 0; } + +#account-container .common-followers { + border-top: 1px solid var(--outline-color); + border-bottom: 1px solid var(--outline-color); + padding: 8px 0; + font-size: 90%; + line-height: 1.5; + color: var(--text-insignificant-color); +} diff --git a/src/components/account.jsx b/src/components/account.jsx index b8a764aa..d61c8481 100644 --- a/src/components/account.jsx +++ b/src/components/account.jsx @@ -6,6 +6,7 @@ import emojifyText from '../utils/emojify-text'; import enhanceContent from '../utils/enhance-content'; import handleAccountLinks from '../utils/handle-account-links'; import shortenNumber from '../utils/shorten-number'; +import states from '../utils/states'; import store from '../utils/store'; import Avatar from './avatar'; @@ -48,6 +49,8 @@ function Account({ account }) { } } })(); + } else { + setInfo(account); } }, [account]); @@ -76,6 +79,7 @@ function Account({ account }) { const [relationshipUIState, setRelationshipUIState] = useState('default'); const [relationship, setRelationship] = useState(null); + const [familiarFollowers, setFamiliarFollowers] = useState([]); useEffect(() => { if (info) { const currentAccount = store.session.get('currentAccount'); @@ -84,14 +88,29 @@ function Account({ account }) { return; } setRelationshipUIState('loading'); + setFamiliarFollowers([]); + (async () => { + const fetchRelationships = masto.v1.accounts.fetchRelationships([id]); + const fetchFamiliarFollowers = + masto.v1.accounts.fetchFamiliarFollowers(id); + try { - const relationships = await masto.v1.accounts.fetchRelationships([ - id, - ]); + const relationships = await fetchRelationships; console.log('fetched relationship', relationships); if (relationships.length) { - setRelationship(relationships[0]); + 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) { @@ -225,6 +244,29 @@ function Account({ account }) { )}

+ {familiarFollowers?.length > 0 && ( +

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

+ )}

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