Make account hooks DRY with useAccountList

This commit is contained in:
Alex Gleason 2023-06-26 11:22:02 -05:00
parent df4975c688
commit 242c6026d5
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
7 changed files with 81 additions and 68 deletions

View 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,
};

View file

@ -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 };

View file

@ -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 };

View file

@ -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';

View file

@ -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 (

View file

@ -28,7 +28,7 @@ const Following: React.FC<IFollowing> = ({ params }) => {
hasNextPage,
fetchNextPage,
isLoading,
} = useFollowing(account?.id, 'following');
} = useFollowing(account?.id);
if (isLoading) {
return (

View file

@ -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 (