diff --git a/src/components/account-info.jsx b/src/components/account-info.jsx index e24101b8..bbe4e743 100644 --- a/src/components/account-info.jsx +++ b/src/components/account-info.jsx @@ -1,8 +1,14 @@ import './account-info.css'; import { Menu, MenuDivider, MenuItem, SubMenu } from '@szhsin/react-menu'; -import { useEffect, useMemo, useReducer, useRef, useState } from 'preact/hooks'; -import { proxy, useSnapshot } from 'valtio'; +import { + useCallback, + useEffect, + useMemo, + useReducer, + useRef, + useState, +} from 'preact/hooks'; import { api } from '../utils/api'; import enhanceContent from '../utils/enhance-content'; @@ -49,10 +55,6 @@ const MUTE_DURATIONS_LABELS = { const LIMIT = 80; -const accountInfoStates = proxy({ - familiarFollowers: [], -}); - function AccountInfo({ account, fetchAccount = () => {}, @@ -63,10 +65,10 @@ function AccountInfo({ const { masto } = api({ instance, }); + const { masto: currentMasto } = api(); const [uiState, setUIState] = useState('default'); const isString = typeof account === 'string'; const [info, setInfo] = useState(isString ? null : account); - const snapAccountInfoStates = useSnapshot(accountInfoStates); const isSelf = useMemo( () => account.id === store.session.get('currentAccount'), @@ -202,6 +204,75 @@ function AccountInfo({ const LinkOrDiv = standalone ? 'div' : Link; const accountLink = instance ? `/${instance}/a/${id}` : `/a/${id}`; + const [familiarFollowers, setFamiliarFollowers] = useState([]); + const [postingStats, setPostingStats] = useState(); + const hasPostingStats = postingStats?.total >= 3; + + const onRelationshipChange = useCallback( + ({ relationship, currentID }) => { + if (!relationship.following) { + (async () => { + try { + const fetchFamiliarFollowers = + currentMasto.v1.accounts.fetchFamiliarFollowers(currentID); + const fetchStatuses = currentMasto.v1.accounts + .listStatuses(currentID, { + limit: 20, + }) + .next(); + + const followers = await fetchFamiliarFollowers; + console.log('fetched familiar followers', followers); + setFamiliarFollowers( + followers[0].accounts.slice(0, FAMILIAR_FOLLOWERS_LIMIT), + ); + + if (!standalone) { + const { value: statuses } = await fetchStatuses; + console.log('fetched statuses', statuses); + const stats = { + total: statuses.length, + originals: 0, + replies: 0, + boosts: 0, + }; + // Categories statuses by type + // - Original posts (not replies to others) + // - Threads (self-replies + 1st original post) + // - Boosts (reblogs) + // - Replies (not-self replies) + statuses.forEach((status) => { + if (status.reblog) { + stats.boosts++; + } else if ( + status.inReplyToAccountId !== currentID && + !!status.inReplyToId + ) { + stats.replies++; + } else { + stats.originals++; + } + }); + + // Count days since last post + stats.daysSinceLastPost = Math.ceil( + (Date.now() - + new Date(statuses[statuses.length - 1].createdAt)) / + 86400000, + ); + + console.log('posting stats', stats); + setPostingStats(stats); + } + } catch (e) { + console.error(e); + } + })(); + } + }, + [standalone], + ); + return (
- {!!snapAccountInfoStates.familiarFollowers.length && ( + {!!familiarFollowers.length && ( - {(snapAccountInfoStates.familiarFollowers || []).map( - (follower) => ( - - ), - )} + {familiarFollowers.map((follower) => ( + + ))} )} @@ -514,11 +583,75 @@ function AccountInfo({ )}
+ {hasPostingStats && ( + { + states.showAccount = false; + }} + > +
+
+
+
+ {postingStats.daysSinceLastPost < 365 + ? `Last ${postingStats.total} posts in the past + ${postingStats.daysSinceLastPost} day${ + postingStats.daysSinceLastPost > 1 ? 's' : '' + }` + : ` + Last ${postingStats.total} posts in the past year(s) + `} +
+
+
+ + {' '} + Original + {' '} + + {' '} + Replies + {' '} + + {' '} + Boosts + +
+
+
+
+ + )} @@ -530,7 +663,12 @@ function AccountInfo({ const FAMILIAR_FOLLOWERS_LIMIT = 3; -function RelatedActions({ info, instance, authenticated, standalone }) { +function RelatedActions({ + info, + instance, + authenticated, + onRelationshipChange = () => {}, +}) { if (!info) return null; const { masto: currentMasto, @@ -541,7 +679,6 @@ function RelatedActions({ info, instance, authenticated, standalone }) { const [relationshipUIState, setRelationshipUIState] = useState('default'); const [relationship, setRelationship] = useState(null); - const [postingStats, setPostingStats] = useState(); const { id, acct, url, username, locked, lastStatusAt, note, fields, moved } = info; @@ -604,8 +741,6 @@ function RelatedActions({ info, instance, authenticated, standalone }) { if (moved) return; setRelationshipUIState('loading'); - accountInfoStates.familiarFollowers = []; - setPostingStats(null); const fetchRelationships = currentMasto.v1.accounts.fetchRelationships([ currentID, @@ -619,63 +754,7 @@ function RelatedActions({ info, instance, authenticated, standalone }) { if (relationships.length) { const relationship = relationships[0]; setRelationship(relationship); - - if (!relationship.following) { - try { - const fetchFamiliarFollowers = - currentMasto.v1.accounts.fetchFamiliarFollowers(currentID); - const fetchStatuses = currentMasto.v1.accounts - .listStatuses(currentID, { - limit: 20, - }) - .next(); - - const followers = await fetchFamiliarFollowers; - console.log('fetched familiar followers', followers); - accountInfoStates.familiarFollowers = - followers[0].accounts.slice(0, FAMILIAR_FOLLOWERS_LIMIT); - - if (!standalone) { - const { value: statuses } = await fetchStatuses; - console.log('fetched statuses', statuses); - const stats = { - total: statuses.length, - originals: 0, - replies: 0, - boosts: 0, - }; - // Categories statuses by type - // - Original posts (not replies to others) - // - Threads (self-replies + 1st original post) - // - Boosts (reblogs) - // - Replies (not-self replies) - statuses.forEach((status) => { - if (status.reblog) { - stats.boosts++; - } else if ( - status.inReplyToAccountId !== currentID && - !!status.inReplyToId - ) { - stats.replies++; - } else { - stats.originals++; - } - }); - - // Count days since last post - stats.daysSinceLastPost = Math.ceil( - (Date.now() - - new Date(statuses[statuses.length - 1].createdAt)) / - 86400000, - ); - - console.log('posting stats', stats); - setPostingStats(stats); - } - } catch (e) { - console.error(e); - } - } + onRelationshipChange({ relationship, currentID }); } } catch (e) { console.error(e); @@ -697,74 +776,8 @@ function RelatedActions({ info, instance, authenticated, standalone }) { const [showTranslatedBio, setShowTranslatedBio] = useState(false); const [showAddRemoveLists, setShowAddRemoveLists] = useState(false); - const hasPostingStats = postingStats?.total >= 3; - const accountLink = instance ? `/${instance}/a/${id}` : `/a/${id}`; - return ( <> - {hasPostingStats && ( - { - states.showAccount = false; - }} - > -
-
-
-
- {postingStats.daysSinceLastPost < 365 - ? `Last ${postingStats.total} posts in the past - ${postingStats.daysSinceLastPost} day${ - postingStats.daysSinceLastPost > 1 ? 's' : '' - }` - : ` - Last ${postingStats.total} posts in the past year(s) - `} -
-
-
- - {' '} - Original - {' '} - - {' '} - Replies - {' '} - - {' '} - Boosts - -
-
-
-
- - )}

{followedBy ? ( diff --git a/src/components/status.jsx b/src/components/status.jsx index 030bcf47..8477ef2e 100644 --- a/src/components/status.jsx +++ b/src/components/status.jsx @@ -872,6 +872,16 @@ function Status({ }, ); + const displayedMediaAttachments = mediaAttachments.slice( + 0, + isSizeLarge ? undefined : 4, + ); + const showMultipleMediaCaptions = + mediaAttachments.length > 1 && + displayedMediaAttachments.some( + (media) => !!media.description && !isMediaCaptionLong(media.description), + ); + return (

{ @@ -1268,19 +1278,11 @@ function Status({ {!!mediaAttachments.length && ( 1 && - mediaAttachments.some( - (media) => - !!media.description && - !isMediaCaptionLong(media.description), - ) - } + enabled={showMultipleMediaCaptions} captionChildren={() => { - return mediaAttachments.map( + return displayedMediaAttachments.map( (media, i) => - !!media.description && - !isMediaCaptionLong(media.description) && ( + !!media.description && (
{ @@ -1305,33 +1307,28 @@ function Status({ mediaAttachments.length > 2 ? 'media-gt2' : '' } ${mediaAttachments.length > 4 ? 'media-gt4' : ''}`} > - {mediaAttachments - .slice(0, isSizeLarge ? undefined : 4) - .map((media, i) => ( - 1 && - !!media.description && - !isMediaCaptionLong(media.description) && - i + 1 - } - to={`/${instance}/s/${id}?${ - withinContext ? 'media' : 'media-only' - }=${i + 1}`} - onClick={ - onMediaClick - ? (e) => { - onMediaClick(e, i, media, status); - } - : undefined - } - /> - ))} + {displayedMediaAttachments.map((media, i) => ( + { + onMediaClick(e, i, media, status); + } + : undefined + } + /> + ))}
)}