Add useBlocks hook, switch over blocks and mutes to hooks

app/soapbox/api/hooks/accounts/useBlocks.ts

@@ -0,0 +1,31 @@
+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 };

app/soapbox/api/hooks/index.ts

@@ -2,6 +2,7 @@
 // Accounts
 export { useAccount } from './accounts/useAccount';
 export { useAccountLookup } from './accounts/useAccountLookup';
+export { useBlocks } from './accounts/useBlocks';
 export { useFollow } from './accounts/useFollow';
 export { useFollowing } from './accounts/useFollowing';
 export { useRelationships } from './accounts/useRelationships';

app/soapbox/features/blocks/index.tsx

@@ -1,33 +1,26 @@
-import debounce from 'lodash/debounce';
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { fetchBlocks, expandBlocks } from 'soapbox/actions/blocks';
+import { useBlocks } from 'soapbox/api/hooks';
+import Account from 'soapbox/components/account';
 import ScrollableList from 'soapbox/components/scrollable-list';
 import { Column, Spinner } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
 const messages = defineMessages({
   heading: { id: 'column.blocks', defaultMessage: 'Blocked users' },
 });
 
-const handleLoadMore = debounce((dispatch) => {
-  dispatch(expandBlocks());
-}, 300, { leading: true });
-
 const Blocks: React.FC = () => {
-  const dispatch = useAppDispatch();
   const intl = useIntl();
 
-  const accountIds = useAppSelector((state) => state.user_lists.blocks.items);
+  const {
-  const hasMore = useAppSelector((state) => !!state.user_lists.blocks.next);
+    accounts,
+    hasNextPage,
+    fetchNextPage,
+    isLoading,
+  } = useBlocks();
 
-  React.useEffect(() => {
+  if (isLoading) {
-    dispatch(fetchBlocks());
-  }, []);
-
-  if (!accountIds) {
     return (
       <Column>
         <Spinner />
@@ -41,14 +34,14 @@ const Blocks: React.FC = () => {
     <Column label={intl.formatMessage(messages.heading)}>
       <ScrollableList
         scrollKey='blocks'
-        onLoadMore={() => handleLoadMore(dispatch)}
+        onLoadMore={fetchNextPage}
-        hasMore={hasMore}
+        hasMore={hasNextPage}
         emptyMessage={emptyMessage}
         itemClassName='pb-4'
       >
-        {accountIds.map((id) =>
+        {accounts.map((account) => (
-          <AccountContainer key={id} id={id} actionType='blocking' />,
+          <Account key={account.id} account={account} actionType='blocking' />
-        )}
+        ))}
       </ScrollableList>
     </Column>
   );

app/soapbox/features/mutes/index.tsx

@@ -1,33 +1,26 @@
-import debounce from 'lodash/debounce';
 import React from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { fetchMutes, expandMutes } from 'soapbox/actions/mutes';
+import { useBlocks } from 'soapbox/api/hooks';
+import Account from 'soapbox/components/account';
 import ScrollableList from 'soapbox/components/scrollable-list';
 import { Column, Spinner } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
 const messages = defineMessages({
   heading: { id: 'column.mutes', defaultMessage: 'Muted users' },
 });
 
-const handleLoadMore = debounce((dispatch) => {
-  dispatch(expandMutes());
-}, 300, { leading: true });
-
 const Mutes: React.FC = () => {
-  const dispatch = useAppDispatch();
   const intl = useIntl();
 
-  const accountIds = useAppSelector((state) => state.user_lists.mutes.items);
+  const {
-  const hasMore = useAppSelector((state) => !!state.user_lists.mutes.next);
+    accounts,
+    hasNextPage,
+    fetchNextPage,
+    isLoading,
+  } = useBlocks('mutes');
 
-  React.useEffect(() => {
+  if (isLoading) {
-    dispatch(fetchMutes());
-  }, []);
-
-  if (!accountIds) {
     return (
       <Column>
         <Spinner />
@@ -41,14 +34,14 @@ const Mutes: React.FC = () => {
     <Column label={intl.formatMessage(messages.heading)}>
       <ScrollableList
         scrollKey='mutes'
-        onLoadMore={() => handleLoadMore(dispatch)}
+        onLoadMore={fetchNextPage}
-        hasMore={hasMore}
+        hasMore={hasNextPage}
         emptyMessage={emptyMessage}
         itemClassName='pb-4'
       >
-        {accountIds.map((id) =>
+        {accounts.map((account) => (
-          <AccountContainer key={id} id={id} actionType='muting' />,
+          <Account key={account.id} account={account} actionType='muting' />
-        )}
+        ))}
       </ScrollableList>
     </Column>
   );