pl-fe: migrate suggested accounts to react query

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

packages/pl-fe/src/features/feed-suggestions/feed-suggestions.tsx

@@ -3,12 +3,12 @@ import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
 import { useAccount } from 'pl-fe/api/hooks/accounts/use-account';
+import { useSuggestedAccounts } from 'pl-fe/api/hooks/trends/use-suggested-accounts';
 import Card, { CardBody, CardTitle } from 'pl-fe/components/ui/card';
 import HStack from 'pl-fe/components/ui/hstack';
 import Stack from 'pl-fe/components/ui/stack';
 import Text from 'pl-fe/components/ui/text';
 import VerificationBadge from 'pl-fe/components/verification-badge';
-import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
 
 import Emojify from '../emoji/emojify';
 import ActionButton from '../ui/components/action-button';
@@ -69,10 +69,9 @@ interface IFeedSuggesetions {
 
 const FeedSuggestions: React.FC<IFeedSuggesetions> = ({ statusId, onMoveUp, onMoveDown }) => {
   const intl = useIntl();
-  const suggestedProfiles = useAppSelector((state) => state.suggestions.items);
-  const isLoading = useAppSelector((state) => state.suggestions.isLoading);
+  const { data: suggestedProfiles, isLoading } = useSuggestedAccounts();
 
-  if (!isLoading && suggestedProfiles.length === 0) return null;
+  if (!isLoading && suggestedProfiles?.length === 0) return null;
 
   const handleHotkeyMoveUp = (e?: KeyboardEvent): void => {
     if (onMoveUp) {
@@ -107,7 +106,7 @@ const FeedSuggestions: React.FC<IFeedSuggesetions> = ({ statusId, onMoveUp, onMo
 
         <CardBody>
           <HStack space={4} alignItems='center' className='overflow-x-auto md:space-x-0 lg:overflow-x-hidden'>
-            {suggestedProfiles.slice(0, 4).map((suggestedProfile) => (
+            {suggestedProfiles?.slice(0, 4).map((suggestedProfile) => (
               <SuggestionItem key={suggestedProfile.account_id} accountId={suggestedProfile.account_id} />
             ))}
           </HStack>

packages/pl-fe/src/features/search/components/search-results.tsx

@@ -5,6 +5,7 @@ import { useSearchParams } from 'react-router-dom-v5-compat';
 
 import { useAccount } from 'pl-fe/api/hooks/accounts/use-account';
 import { useSearchAccounts, useSearchHashtags, useSearchStatuses } from 'pl-fe/api/hooks/search/use-search';
+import { useSuggestedAccounts } from 'pl-fe/api/hooks/trends/use-suggested-accounts';
 import { useTrendingLinks } from 'pl-fe/api/hooks/trends/use-trending-links';
 import { useTrendingStatuses } from 'pl-fe/api/hooks/trends/use-trending-statuses';
 import Hashtag from 'pl-fe/components/hashtag';
@@ -19,7 +20,6 @@ import StatusContainer from 'pl-fe/containers/status-container';
 import PlaceholderAccount from 'pl-fe/features/placeholder/components/placeholder-account';
 import PlaceholderHashtag from 'pl-fe/features/placeholder/components/placeholder-hashtag';
 import PlaceholderStatus from 'pl-fe/features/placeholder/components/placeholder-status';
-import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
 import { useFeatures } from 'pl-fe/hooks/use-features';
 import useTrends from 'pl-fe/queries/trends';
 
@@ -65,7 +65,7 @@ const SearchResults = () => {
     else setParams(params => ({ ...Object.fromEntries(params.entries()), type: newActiveFilter }));
   };
 
-  const suggestions = useAppSelector((state) => state.suggestions.items);
+  const { data: suggestions } = useSuggestedAccounts();
   const { data: trendingTags } = useTrends();
   const { data: trendingStatuses } = useTrendingStatuses();
   const { data: trendingLinks } = useTrendingLinks();

packages/pl-fe/src/features/ui/index.tsx

@@ -11,7 +11,6 @@ import { fetchMarker } from 'pl-fe/actions/markers';
 import { expandNotifications } from 'pl-fe/actions/notifications';
 import { register as registerPushNotifications } from 'pl-fe/actions/push-notifications';
 import { fetchScheduledStatuses } from 'pl-fe/actions/scheduled-statuses';
-import { fetchSuggestionsForTimeline } from 'pl-fe/actions/suggestions';
 import { fetchHomeTimeline } from 'pl-fe/actions/timelines';
 import { useUserStream } from 'pl-fe/api/hooks/streaming/use-user-stream';
 import SidebarNavigation from 'pl-fe/components/sidebar-navigation';
@@ -388,9 +387,7 @@ const UI: React.FC<IUI> = ({ children }) => {
 
     dispatch(fetchDraftStatuses());
 
-    dispatch(fetchHomeTimeline(false, () => {
-      dispatch(fetchSuggestionsForTimeline());
-    }));
+    dispatch(fetchHomeTimeline());
 
     dispatch(expandNotifications())
       // @ts-ignore