diff --git a/app/soapbox/actions/__tests__/suggestions.test.ts b/app/soapbox/actions/__tests__/suggestions.test.ts index 3c8d0c95a..a153208a7 100644 --- a/app/soapbox/actions/__tests__/suggestions.test.ts +++ b/app/soapbox/actions/__tests__/suggestions.test.ts @@ -57,6 +57,7 @@ describe('fetchSuggestions()', () => { avatar_static: response[0].account_avatar, id: response[0].account_id, note: response[0].note, + should_refetch: true, verified: response[0].verified, display_name: response[0].display_name, }], diff --git a/app/soapbox/actions/importer/index.ts b/app/soapbox/actions/importer/index.ts index 87c6cca85..20041180b 100644 --- a/app/soapbox/actions/importer/index.ts +++ b/app/soapbox/actions/importer/index.ts @@ -40,12 +40,17 @@ export function importFetchedAccount(account: APIEntity) { return importFetchedAccounts([account]); } -export function importFetchedAccounts(accounts: APIEntity[]) { +export function importFetchedAccounts(accounts: APIEntity[], args = { should_refetch: false }) { + const { should_refetch } = args; const normalAccounts: APIEntity[] = []; const processAccount = (account: APIEntity) => { if (!account.id) return; + if (should_refetch) { + account.should_refetch = true; + } + normalAccounts.push(account); if (account.moved) { diff --git a/app/soapbox/actions/suggestions.ts b/app/soapbox/actions/suggestions.ts index 86743f5aa..600dffb7d 100644 --- a/app/soapbox/actions/suggestions.ts +++ b/app/soapbox/actions/suggestions.ts @@ -91,7 +91,7 @@ const fetchTruthSuggestions = (params: Record = {}) => const next = getLinks(response).refs.find(link => link.rel === 'next')?.uri; const accounts = suggestedProfiles.map(mapSuggestedProfileToAccount); - dispatch(importFetchedAccounts(accounts)); + dispatch(importFetchedAccounts(accounts, { should_refetch: true })); dispatch({ type: SUGGESTIONS_TRUTH_FETCH_SUCCESS, suggestions: suggestedProfiles, next, skipLoading: true }); return suggestedProfiles; }) diff --git a/app/soapbox/components/hover_ref_wrapper.tsx b/app/soapbox/components/hover_ref_wrapper.tsx index 2090543cc..7e103f3e5 100644 --- a/app/soapbox/components/hover_ref_wrapper.tsx +++ b/app/soapbox/components/hover_ref_wrapper.tsx @@ -1,12 +1,13 @@ import classNames from 'classnames'; import debounce from 'lodash/debounce'; import React, { useRef } from 'react'; -import { useDispatch } from 'react-redux'; +import { fetchAccount } from 'soapbox/actions/accounts'; import { openProfileHoverCard, closeProfileHoverCard, } from 'soapbox/actions/profile_hover_card'; +import { useAppDispatch } from 'soapbox/hooks'; import { isMobile } from 'soapbox/is_mobile'; const showProfileHoverCard = debounce((dispatch, ref, accountId) => { @@ -21,12 +22,13 @@ interface IHoverRefWrapper { /** Makes a profile hover card appear when the wrapped element is hovered. */ export const HoverRefWrapper: React.FC = ({ accountId, children, inline = false, className }) => { - const dispatch = useDispatch(); + const dispatch = useAppDispatch(); const ref = useRef(null); const Elem: keyof JSX.IntrinsicElements = inline ? 'span' : 'div'; const handleMouseEnter = () => { if (!isMobile(window.innerWidth)) { + dispatch(fetchAccount(accountId)); showProfileHoverCard(dispatch, ref, accountId); } };