Merge branch 'query-account-stats' into 'develop'

Query account on hover for follow stats

See merge request soapbox-pub/soapbox-fe!1644

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,
             }],

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) {

app/soapbox/actions/suggestions.ts

@@ -91,7 +91,7 @@ const fetchTruthSuggestions = (params: Record<string, any> = {}) =>
         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;
       })

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<IHoverRefWrapper> = ({ accountId, children, inline = false, className }) => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const ref = useRef<HTMLDivElement>(null);
   const Elem: keyof JSX.IntrinsicElements = inline ? 'span' : 'div';
 
   const handleMouseEnter = () => {
     if (!isMobile(window.innerWidth)) {
+      dispatch(fetchAccount(accountId));
       showProfileHoverCard(dispatch, ref, accountId);
     }
   };