diff --git a/packages/pl-fe/src/columns/trends.tsx b/packages/pl-fe/src/columns/trends.tsx index 0dfba0aff..47876c169 100644 --- a/packages/pl-fe/src/columns/trends.tsx +++ b/packages/pl-fe/src/columns/trends.tsx @@ -9,10 +9,10 @@ import StatusContainer from '@/containers/status-container'; import PlaceholderAccount from '@/features/placeholder/components/placeholder-account'; import PlaceholderHashtag from '@/features/placeholder/components/placeholder-hashtag'; import PlaceholderStatus from '@/features/placeholder/components/placeholder-status'; -import useTrends from '@/queries/trends'; import { useSuggestedAccounts } from '@/queries/trends/use-suggested-accounts'; import { useTrendingLinks } from '@/queries/trends/use-trending-links'; import { useTrendingStatuses } from '@/queries/trends/use-trending-statuses'; +import useTrendingTags from '@/queries/trends/use-trending-tags'; interface ITrendsColumn { type: 'accounts' | 'hashtags' | 'statuses' | 'links'; @@ -26,7 +26,11 @@ const TrendsColumn: React.FC = ({ type, multiColumn }) => { isFetching: isFetchingAccounts, isLoading: isLoadingAccounts, } = useSuggestedAccounts(); - const { data: trendingTags, isFetching: isFetchingTags, isLoading: isLoadingTags } = useTrends(); + const { + data: trendingTags, + isFetching: isFetchingTags, + isLoading: isLoadingTags, + } = useTrendingTags(); const { data: trendingStatuses, isFetching: isFetchingStatuses, diff --git a/packages/pl-fe/src/features/ui/components/panels/trends-panel.tsx b/packages/pl-fe/src/features/ui/components/panels/trends-panel.tsx index ddfc2b6b4..28c8287aa 100644 --- a/packages/pl-fe/src/features/ui/components/panels/trends-panel.tsx +++ b/packages/pl-fe/src/features/ui/components/panels/trends-panel.tsx @@ -6,14 +6,14 @@ import Hashtag from '@/components/hashtag'; import Text from '@/components/ui/text'; import Widget from '@/components/ui/widget'; import PlaceholderSidebarTrends from '@/features/placeholder/components/placeholder-sidebar-trends'; -import useTrends from '@/queries/trends'; +import useTrendingTags from '@/queries/trends/use-trending-tags'; interface ITrendsPanel { limit: number; } const TrendsPanel = ({ limit }: ITrendsPanel) => { - const { data: trends, isFetching } = useTrends(); + const { data: trends, isFetching } = useTrendingTags(); if (!isFetching && !trends?.length) { return null; diff --git a/packages/pl-fe/src/features/ui/components/panels/who-to-follow-panel.tsx b/packages/pl-fe/src/features/ui/components/panels/who-to-follow-panel.tsx index e3ad9f6ce..0d2a352a4 100644 --- a/packages/pl-fe/src/features/ui/components/panels/who-to-follow-panel.tsx +++ b/packages/pl-fe/src/features/ui/components/panels/who-to-follow-panel.tsx @@ -7,7 +7,10 @@ import Widget from '@/components/ui/widget'; import AccountContainer from '@/containers/account-container'; import PlaceholderSidebarSuggestions from '@/features/placeholder/components/placeholder-sidebar-suggestions'; import { useFeatures } from '@/hooks/use-features'; -import { useDismissSuggestion, useSuggestions } from '@/queries/suggestions'; +import { + useDismissSuggestion, + useSuggestedAccounts, +} from '@/queries/trends/use-suggested-accounts'; import type { Account as AccountEntity } from 'pl-api'; @@ -23,7 +26,7 @@ const WhoToFollowPanel = ({ limit }: IWhoToFollowPanel) => { const features = useFeatures(); const intl = useIntl(); - const { data: suggestions = [], isFetching } = useSuggestions(); + const { data: suggestions = [], isFetching } = useSuggestedAccounts(); const dismissSuggestion = useDismissSuggestion(); const suggestionsToRender = suggestions.slice(0, limit); diff --git a/packages/pl-fe/src/hooks/use-compose-suggestions.ts b/packages/pl-fe/src/hooks/use-compose-suggestions.ts index fc761f186..8b8f991f9 100644 --- a/packages/pl-fe/src/hooks/use-compose-suggestions.ts +++ b/packages/pl-fe/src/hooks/use-compose-suggestions.ts @@ -6,7 +6,7 @@ import { useDebounce } from '@/hooks/use-debounce'; import { useCustomEmojis } from '@/queries/instance/use-custom-emojis'; import { useSearchHashtags } from '@/queries/search/use-search'; import { useAccountSearch } from '@/queries/search/use-search-accounts'; -import useTrends from '@/queries/trends'; +import useTrendingTags from '@/queries/trends/use-trending-tags'; const useComposeSuggestions = (token: string): Array => { const debouncedToken = useDebounce(token, 300); @@ -24,7 +24,7 @@ const useComposeSuggestions = (token: string): Array => { resolve: false, limit: 5, }); - const { data: trendingTags } = useTrends(); + const { data: trendingTags } = useTrendingTags(); const { data: searchResult } = useSearchHashtags( searchedType === 'hashtags' ? debouncedToken : '', ); diff --git a/packages/pl-fe/src/queries/suggestions.ts b/packages/pl-fe/src/queries/suggestions.ts deleted file mode 100644 index df3a86374..000000000 --- a/packages/pl-fe/src/queries/suggestions.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { useMutation, keepPreviousData, useQuery, useQueryClient } from '@tanstack/react-query'; - -import { batcher } from '@/api/batcher'; -import { useClient } from '@/hooks/use-client'; -import { useLoggedIn } from '@/hooks/use-logged-in'; -import { queryKeys } from '@/queries/keys'; - -import { removePageItem } from '../utils/queries'; - -const useSuggestions = () => { - const client = useClient(); - const { isLoggedIn } = useLoggedIn(); - const queryClient = useQueryClient(); - - const getSuggestions = async () => { - const response = await client.myAccount.getSuggestions(); - - const fetcher = batcher.relationships(client).fetch; - - for (const { account } of response) { - fetcher(account.id); - queryClient.setQueryData(queryKeys.accounts.show(account.id), account); - } - - return response.map(({ account, ...x }) => ({ ...x, account_id: account.id })); - }; - - const query = useQuery({ - queryKey: queryKeys.suggestions.all, - queryFn: () => getSuggestions(), - placeholderData: keepPreviousData, - enabled: isLoggedIn, - }); - - return query; -}; - -const useDismissSuggestion = () => { - const client = useClient(); - - return useMutation({ - mutationFn: (accountId: string) => client.myAccount.dismissSuggestions(accountId), - onMutate(accountId: string) { - removePageItem( - queryKeys.suggestions.all, - accountId, - (item: any, newItem: any) => item.account_id === newItem, - ); - }, - }); -}; - -export { useSuggestions, useDismissSuggestion }; diff --git a/packages/pl-fe/src/queries/trends/use-suggested-accounts.ts b/packages/pl-fe/src/queries/trends/use-suggested-accounts.ts index d74e3ba57..a1ff04be4 100644 --- a/packages/pl-fe/src/queries/trends/use-suggested-accounts.ts +++ b/packages/pl-fe/src/queries/trends/use-suggested-accounts.ts @@ -1,7 +1,10 @@ -import { useQuery, useQueryClient } from '@tanstack/react-query'; +import { keepPreviousData, useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; +import { batcher } from '@/api/batcher'; import { useClient } from '@/hooks/use-client'; import { useFeatures } from '@/hooks/use-features'; +import { useLoggedIn } from '@/hooks/use-logged-in'; +import { removePageItem } from '@/utils/queries'; import { queryKeys } from '../keys'; @@ -12,24 +15,45 @@ type MinifiedSuggestion = Omit & { account_id: string }; const useSuggestedAccounts = () => { const client = useClient(); const features = useFeatures(); + const { isLoggedIn } = useLoggedIn(); const queryClient = useQueryClient(); - return useQuery({ + const getSuggestions = async (): Promise => { + const response = await client.myAccount.getSuggestions(); + + const fetcher = batcher.relationships(client).fetch; + + for (const { account } of response) { + fetcher(account.id); + queryClient.setQueryData(queryKeys.accounts.show(account.id), account); + } + + return response.map(({ account, ...x }) => ({ ...x, account_id: account.id })); + }; + + const query = useQuery({ queryKey: queryKeys.suggestions.all, - queryFn: () => - client.myAccount.getSuggestions().then((suggestions) => { - for (const { account } of suggestions) { - queryClient.setQueryData(queryKeys.accounts.show(account.id), account); - } - return suggestions.map( - ({ account, ...suggestion }): MinifiedSuggestion => ({ - account_id: account.id, - ...suggestion, - }), - ); - }), - enabled: features.suggestions || features.suggestionsV2, + queryFn: () => getSuggestions(), + placeholderData: keepPreviousData, + enabled: (isLoggedIn && features.suggestions) || features.suggestionsV2, + }); + + return query; +}; + +const useDismissSuggestion = () => { + const client = useClient(); + + return useMutation({ + mutationFn: (accountId: string) => client.myAccount.dismissSuggestions(accountId), + onMutate(accountId: string) { + removePageItem( + queryKeys.suggestions.all, + accountId, + (item: any, newItem: any) => item.account_id === newItem, + ); + }, }); }; -export { useSuggestedAccounts, type MinifiedSuggestion }; +export { useSuggestedAccounts, useDismissSuggestion, type MinifiedSuggestion }; diff --git a/packages/pl-fe/src/queries/trends.ts b/packages/pl-fe/src/queries/trends/use-trending-tags.ts similarity index 90% rename from packages/pl-fe/src/queries/trends.ts rename to packages/pl-fe/src/queries/trends/use-trending-tags.ts index bed1e4380..2a1327ef9 100644 --- a/packages/pl-fe/src/queries/trends.ts +++ b/packages/pl-fe/src/queries/trends/use-trending-tags.ts @@ -7,7 +7,7 @@ import { queryKeys } from '@/queries/keys'; import type { Tag } from 'pl-api'; -const useTrends = () => { +const useTrendingTags = () => { const client = useClient(); const features = useFeatures(); const { isLoggedIn } = useLoggedIn(); @@ -21,4 +21,4 @@ const useTrends = () => { }); }; -export { useTrends as default }; +export { useTrendingTags as default };