diff --git a/packages/pl-fe/src/api/hooks/accounts/use-account-list.ts b/packages/pl-fe/src/api/hooks/accounts/use-account-list.ts deleted file mode 100644 index 62f808def..000000000 --- a/packages/pl-fe/src/api/hooks/accounts/use-account-list.ts +++ /dev/null @@ -1,79 +0,0 @@ -import { useInfiniteQuery } from '@tanstack/react-query'; - -import { Entities } from 'pl-fe/entity-store/entities'; -import { useClient } from 'pl-fe/hooks/use-client'; -import { type Account, normalizeAccount } from 'pl-fe/normalizers/account'; -import { flattenPages } from 'pl-fe/utils/queries'; - -import { useRelationships } from './use-relationships'; - -import type { PaginatedResponse, Account as BaseAccount } from 'pl-api'; -import type { EntityFn } from 'pl-fe/entity-store/hooks/types'; - -const useAccountList = (listKey: string[], entityFn: EntityFn) => { - const getAccounts = async (pageParam?: Pick, 'next'>) => { - const response = await (pageParam?.next ? pageParam.next() : entityFn()) as PaginatedResponse; - - return { - ...response, - items: response.items.map(normalizeAccount), - }; - }; - - const queryInfo = useInfiniteQuery({ - queryKey: [Entities.ACCOUNTS, ...listKey], - queryFn: ({ pageParam }) => getAccounts(pageParam), - enabled: true, - initialPageParam: { next: null as (() => Promise>) | null }, - getNextPageParam: (config) => config.next ? config : undefined, - }); - - const data = flattenPages(queryInfo.data as any) || []; - - const { relationships } = useRelationships( - listKey, - data.map(({ id }) => id), - ); - - const accounts = data.map((account) => ({ - ...account, - relationship: relationships[account.id], - })); - - return { accounts, ...queryInfo }; -}; - -const useBlocks = () => { - const client = useClient(); - return useAccountList(['blocks'], () => client.filtering.getBlocks()); -}; - -const useMutes = () => { - const client = useClient(); - return useAccountList(['mutes'], () => client.filtering.getMutes()); -}; - -const useFollowing = (accountId: string | undefined) => { - const client = useClient(); - - return useAccountList( - [accountId!, 'following'], - () => client.accounts.getAccountFollowing(accountId!), - ); -}; - -const useFollowers = (accountId: string | undefined) => { - const client = useClient(); - - return useAccountList( - [accountId!, 'followers'], - () => client.accounts.getAccountFollowers(accountId!), - ); -}; - -export { - useBlocks, - useMutes, - useFollowing, - useFollowers, -}; diff --git a/packages/pl-fe/src/components/birthday-panel.tsx b/packages/pl-fe/src/components/birthday-panel.tsx index 33f7d6f7a..f7199d6c5 100644 --- a/packages/pl-fe/src/components/birthday-panel.tsx +++ b/packages/pl-fe/src/components/birthday-panel.tsx @@ -59,7 +59,6 @@ const BirthdayPanel = ({ limit }: IBirthdayPanel) => { {birthdaysToRender.map(accountId => ( , but it isn't id={accountId} withRelationship={false} /> diff --git a/packages/pl-fe/src/features/followers/index.tsx b/packages/pl-fe/src/features/followers/index.tsx index 07bbfa9e5..7b9246366 100644 --- a/packages/pl-fe/src/features/followers/index.tsx +++ b/packages/pl-fe/src/features/followers/index.tsx @@ -1,13 +1,13 @@ import React from 'react'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; -import { useFollowers } from 'pl-fe/api/hooks/accounts/use-account-list'; import { useAccountLookup } from 'pl-fe/api/hooks/accounts/use-account-lookup'; -import Account from 'pl-fe/components/account'; import MissingIndicator from 'pl-fe/components/missing-indicator'; import ScrollableList from 'pl-fe/components/scrollable-list'; import Column from 'pl-fe/components/ui/column'; import Spinner from 'pl-fe/components/ui/spinner'; +import AccountContainer from 'pl-fe/containers/account-container'; +import { useFollowers } from 'pl-fe/queries/account-lists/use-follows'; const messages = defineMessages({ heading: { id: 'column.followers', defaultMessage: 'Followers' }, @@ -26,9 +26,10 @@ const Followers: React.FC = ({ params }) => { const { account, isUnavailable } = useAccountLookup(params?.username); const { - accounts, + data = [], hasNextPage, fetchNextPage, + isFetching, isLoading, } = useFollowers(account?.id); @@ -60,10 +61,14 @@ const Followers: React.FC = ({ params }) => { onLoadMore={fetchNextPage} emptyMessage={} itemClassName='pb-4' + isLoading={isFetching} > - {accounts.map((account) => - , - )} + {data.map((accountId) => ( + + ))} ); diff --git a/packages/pl-fe/src/features/following/index.tsx b/packages/pl-fe/src/features/following/index.tsx index 17518d1c7..1061bab3a 100644 --- a/packages/pl-fe/src/features/following/index.tsx +++ b/packages/pl-fe/src/features/following/index.tsx @@ -1,13 +1,13 @@ import React from 'react'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; -import { useFollowing } from 'pl-fe/api/hooks/accounts/use-account-list'; import { useAccountLookup } from 'pl-fe/api/hooks/accounts/use-account-lookup'; -import Account from 'pl-fe/components/account'; import MissingIndicator from 'pl-fe/components/missing-indicator'; import ScrollableList from 'pl-fe/components/scrollable-list'; import Column from 'pl-fe/components/ui/column'; import Spinner from 'pl-fe/components/ui/spinner'; +import AccountContainer from 'pl-fe/containers/account-container'; +import { useFollowing } from 'pl-fe/queries/account-lists/use-follows'; const messages = defineMessages({ heading: { id: 'column.following', defaultMessage: 'Following' }, @@ -26,9 +26,10 @@ const Following: React.FC = ({ params }) => { const { account, isUnavailable } = useAccountLookup(params?.username); const { - accounts, + data = [], hasNextPage, fetchNextPage, + isFetching, isLoading, } = useFollowing(account?.id); @@ -60,9 +61,13 @@ const Following: React.FC = ({ params }) => { onLoadMore={fetchNextPage} emptyMessage={} itemClassName='pb-4' + isLoading={isFetching} > - {accounts.map((account) => ( - + {data.map((accountId) => ( + ))} diff --git a/packages/pl-fe/src/pages/settings/blocks.tsx b/packages/pl-fe/src/pages/settings/blocks.tsx index 13d04eddb..3e7e2622f 100644 --- a/packages/pl-fe/src/pages/settings/blocks.tsx +++ b/packages/pl-fe/src/pages/settings/blocks.tsx @@ -1,11 +1,12 @@ +import clsx from 'clsx'; import React from 'react'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; -import { useBlocks } from 'pl-fe/api/hooks/accounts/use-account-list'; -import Account from 'pl-fe/components/account'; import ScrollableList from 'pl-fe/components/scrollable-list'; import Column from 'pl-fe/components/ui/column'; import Spinner from 'pl-fe/components/ui/spinner'; +import AccountContainer from 'pl-fe/containers/account-container'; +import { useBlocks } from 'pl-fe/queries/account-lists/use-blocks'; const messages = defineMessages({ heading: { id: 'column.blocks', defaultMessage: 'Blocks' }, @@ -15,10 +16,11 @@ const BlocksPage: React.FC = () => { const intl = useIntl(); const { - accounts, + data = [], hasNextPage, fetchNextPage, isLoading, + isFetching, } = useBlocks(); if (isLoading) { @@ -39,10 +41,11 @@ const BlocksPage: React.FC = () => { hasMore={hasNextPage} emptyMessage={emptyMessage} emptyMessageCard={false} - itemClassName='pb-4 last:pb-0' + itemClassName={clsx('pb-4', { 'last:pb-0': !hasNextPage })} + isLoading={isFetching} > - {accounts.map((account) => ( - + {data.map((accountId) => ( + ))} diff --git a/packages/pl-fe/src/pages/settings/mutes.tsx b/packages/pl-fe/src/pages/settings/mutes.tsx index 84cb82e24..7de3170db 100644 --- a/packages/pl-fe/src/pages/settings/mutes.tsx +++ b/packages/pl-fe/src/pages/settings/mutes.tsx @@ -1,11 +1,12 @@ +import clsx from 'clsx'; import React from 'react'; import { defineMessages, useIntl, FormattedMessage } from 'react-intl'; -import { useMutes } from 'pl-fe/api/hooks/accounts/use-account-list'; import ScrollableList from 'pl-fe/components/scrollable-list'; import Column from 'pl-fe/components/ui/column'; import Stack from 'pl-fe/components/ui/stack'; import AccountContainer from 'pl-fe/containers/account-container'; +import { useMutes } from 'pl-fe/queries/account-lists/use-blocks'; const messages = defineMessages({ heading: { id: 'column.mutes', defaultMessage: 'Mutes' }, @@ -15,32 +16,28 @@ const MutesPage: React.FC = () => { const intl = useIntl(); const { - accounts, - hasNextPage: hasNextAccountsPage, - fetchNextPage: fetchNextAccounts, - isLoading: isLoadingAccounts, + data = [], + hasNextPage, + fetchNextPage, + isFetching, } = useMutes(); - const scrollableListProps = { - itemClassName: 'pb-4 last:pb-0', - scrollKey: 'mutes', - emptyMessageCard: false, - }; - return ( } + emptyMessageCard={false} > - {accounts.map((accounts) => - , + {data.map((accountId) => + , )} diff --git a/packages/pl-fe/src/queries/account-lists/use-blocks.ts b/packages/pl-fe/src/queries/account-lists/use-blocks.ts new file mode 100644 index 000000000..78559b8a2 --- /dev/null +++ b/packages/pl-fe/src/queries/account-lists/use-blocks.ts @@ -0,0 +1,14 @@ +import { makePaginatedResponseQuery } from '../utils/make-paginated-response-query'; +import { minifyAccountList } from '../utils/minify-list'; + +const useBlocks = makePaginatedResponseQuery( + () => ['accountsLists', 'blocked'], + (client) => client.filtering.getBlocks({ with_relationships: true }).then(minifyAccountList), +); + +const useMutes = makePaginatedResponseQuery( + () => ['accountsLists', 'muted'], + (client) => client.filtering.getMutes({ with_relationships: true }).then(minifyAccountList), +); + +export { useBlocks, useMutes }; diff --git a/packages/pl-fe/src/queries/account-lists/use-follows.ts b/packages/pl-fe/src/queries/account-lists/use-follows.ts new file mode 100644 index 000000000..99196c4c8 --- /dev/null +++ b/packages/pl-fe/src/queries/account-lists/use-follows.ts @@ -0,0 +1,25 @@ +import { makePaginatedResponseQuery } from '../utils/make-paginated-response-query'; +import { minifyAccountList } from '../utils/minify-list'; + +const useFollowers = makePaginatedResponseQuery( + (accountId?: string) => ['accountsLists', 'followers', accountId], + (client, [accountId]) => client.accounts.getAccountFollowers(accountId!, { with_relationships: true }).then(minifyAccountList), + undefined, + (accountId) => !!accountId, +); + +const useFollowing = makePaginatedResponseQuery( + (accountId?: string) => ['accountsLists', 'following', accountId], + (client, [accountId]) => client.accounts.getAccountFollowing(accountId!, { with_relationships: true }).then(minifyAccountList), + undefined, + (accountId) => !!accountId, +); + +const useSubscribers = makePaginatedResponseQuery( + (accountId?: string) => ['accountsLists', 'subscribers', accountId], + (client, [accountId]) => client.accounts.getAccountSubscribers(accountId!, { with_relationships: true }).then(minifyAccountList), + undefined, + (accountId) => !!accountId, +); + +export { useFollowers, useFollowing, useSubscribers };