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
+ }
+ />
+ ))}
)}