Make account hooks DRY with useAccountList
This commit is contained in:
parent
df4975c688
commit
242c6026d5
7 changed files with 81 additions and 68 deletions
70
app/soapbox/api/hooks/accounts/useAccountList.ts
Normal file
70
app/soapbox/api/hooks/accounts/useAccountList.ts
Normal file
|
@ -0,0 +1,70 @@
|
|||
import { Entities } from 'soapbox/entity-store/entities';
|
||||
import { useEntities } from 'soapbox/entity-store/hooks';
|
||||
import { useApi } from 'soapbox/hooks';
|
||||
import { Account, accountSchema } from 'soapbox/schemas';
|
||||
|
||||
import { useRelationships } from './useRelationships';
|
||||
|
||||
import type { EntityFn } from 'soapbox/entity-store/hooks/types';
|
||||
|
||||
interface useAccountListOpts {
|
||||
enabled?: boolean
|
||||
}
|
||||
|
||||
function useAccountList(listKey: string[], entityFn: EntityFn<void>, opts: useAccountListOpts = {}) {
|
||||
const { entities, ...rest } = useEntities(
|
||||
[Entities.ACCOUNTS, ...listKey],
|
||||
entityFn,
|
||||
{ schema: accountSchema, enabled: opts.enabled },
|
||||
);
|
||||
|
||||
const { relationships } = useRelationships(
|
||||
listKey,
|
||||
entities.map(({ id }) => id),
|
||||
);
|
||||
|
||||
const accounts: Account[] = entities.map((account) => ({
|
||||
...account,
|
||||
relationship: relationships[account.id],
|
||||
}));
|
||||
|
||||
return { accounts, ...rest };
|
||||
}
|
||||
|
||||
function useBlocks() {
|
||||
const api = useApi();
|
||||
return useAccountList(['blocks'], () => api.get('/api/v1/blocks'));
|
||||
}
|
||||
|
||||
function useMutes() {
|
||||
const api = useApi();
|
||||
return useAccountList(['mutes'], () => api.get('/api/v1/mutes'));
|
||||
}
|
||||
|
||||
function useFollowing(accountId: string | undefined) {
|
||||
const api = useApi();
|
||||
|
||||
return useAccountList(
|
||||
[accountId!, 'following'],
|
||||
() => api.get(`/api/v1/accounts/${accountId}/following`),
|
||||
{ enabled: !!accountId },
|
||||
);
|
||||
}
|
||||
|
||||
function useFollowers(accountId: string | undefined) {
|
||||
const api = useApi();
|
||||
|
||||
return useAccountList(
|
||||
[accountId!, 'followers'],
|
||||
() => api.get(`/api/v1/accounts/${accountId}/followers`),
|
||||
{ enabled: !!accountId },
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
useAccountList,
|
||||
useBlocks,
|
||||
useMutes,
|
||||
useFollowing,
|
||||
useFollowers,
|
||||
};
|
|
@ -1,31 +0,0 @@
|
|||
import { Entities } from 'soapbox/entity-store/entities';
|
||||
import { useEntities } from 'soapbox/entity-store/hooks';
|
||||
import { useApi, useLoggedIn } from 'soapbox/hooks';
|
||||
import { Account, accountSchema } from 'soapbox/schemas';
|
||||
|
||||
import { useRelationships } from './useRelationships';
|
||||
|
||||
function useBlocks(type: 'blocks' | 'mutes' = 'blocks') {
|
||||
const api = useApi();
|
||||
const { isLoggedIn } = useLoggedIn();
|
||||
|
||||
const { entities, ...rest } = useEntities(
|
||||
[Entities.ACCOUNTS, type],
|
||||
() => api.get(`/api/v1/${type}`),
|
||||
{ schema: accountSchema, enabled: isLoggedIn },
|
||||
);
|
||||
|
||||
const { relationships } = useRelationships(
|
||||
[type],
|
||||
entities.map(({ id }) => id),
|
||||
);
|
||||
|
||||
const accounts: Account[] = entities.map((account) => ({
|
||||
...account,
|
||||
relationship: relationships[account.id],
|
||||
}));
|
||||
|
||||
return { accounts, ...rest };
|
||||
}
|
||||
|
||||
export { useBlocks };
|
|
@ -1,30 +0,0 @@
|
|||
import { Entities } from 'soapbox/entity-store/entities';
|
||||
import { useEntities } from 'soapbox/entity-store/hooks';
|
||||
import { useApi } from 'soapbox/hooks';
|
||||
import { Account, accountSchema } from 'soapbox/schemas';
|
||||
|
||||
import { useRelationships } from './useRelationships';
|
||||
|
||||
function useFollowing(accountId: string | undefined, type: 'followers' | 'following') {
|
||||
const api = useApi();
|
||||
|
||||
const { entities, ...rest } = useEntities(
|
||||
[Entities.ACCOUNTS, accountId!, type],
|
||||
() => api.get(`/api/v1/accounts/${accountId}/${type}`),
|
||||
{ schema: accountSchema, enabled: !!accountId },
|
||||
);
|
||||
|
||||
const { relationships } = useRelationships(
|
||||
[accountId!, type],
|
||||
entities.map(({ id }) => id),
|
||||
);
|
||||
|
||||
const accounts: Account[] = entities.map((account) => ({
|
||||
...account,
|
||||
relationship: relationships[account.id],
|
||||
}));
|
||||
|
||||
return { accounts, ...rest };
|
||||
}
|
||||
|
||||
export { useFollowing };
|
|
@ -2,9 +2,13 @@
|
|||
// Accounts
|
||||
export { useAccount } from './accounts/useAccount';
|
||||
export { useAccountLookup } from './accounts/useAccountLookup';
|
||||
export { useBlocks } from './accounts/useBlocks';
|
||||
export {
|
||||
useBlocks,
|
||||
useMutes,
|
||||
useFollowers,
|
||||
useFollowing,
|
||||
} from './accounts/useAccountList';
|
||||
export { useFollow } from './accounts/useFollow';
|
||||
export { useFollowing } from './accounts/useFollowing';
|
||||
export { useRelationships } from './accounts/useRelationships';
|
||||
export { usePatronUser } from './accounts/usePatronUser';
|
||||
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react';
|
||||
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
||||
|
||||
import { useAccountLookup, useFollowing } from 'soapbox/api/hooks';
|
||||
import { useAccountLookup, useFollowers } from 'soapbox/api/hooks';
|
||||
import Account from 'soapbox/components/account';
|
||||
import MissingIndicator from 'soapbox/components/missing-indicator';
|
||||
import ScrollableList from 'soapbox/components/scrollable-list';
|
||||
|
@ -28,7 +28,7 @@ const Followers: React.FC<IFollowers> = ({ params }) => {
|
|||
hasNextPage,
|
||||
fetchNextPage,
|
||||
isLoading,
|
||||
} = useFollowing(account?.id, 'followers');
|
||||
} = useFollowers(account?.id);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
|
|
|
@ -28,7 +28,7 @@ const Following: React.FC<IFollowing> = ({ params }) => {
|
|||
hasNextPage,
|
||||
fetchNextPage,
|
||||
isLoading,
|
||||
} = useFollowing(account?.id, 'following');
|
||||
} = useFollowing(account?.id);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react';
|
||||
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
|
||||
|
||||
import { useBlocks } from 'soapbox/api/hooks';
|
||||
import { useMutes } from 'soapbox/api/hooks';
|
||||
import Account from 'soapbox/components/account';
|
||||
import ScrollableList from 'soapbox/components/scrollable-list';
|
||||
import { Column, Spinner } from 'soapbox/components/ui';
|
||||
|
@ -18,7 +18,7 @@ const Mutes: React.FC = () => {
|
|||
hasNextPage,
|
||||
fetchNextPage,
|
||||
isLoading,
|
||||
} = useBlocks('mutes');
|
||||
} = useMutes();
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
|
|
Loading…
Reference in a new issue