Move pendingCount logic to useEntities

app/soapbox/entity-store/hooks/useEntities.ts

@@ -129,6 +129,8 @@ function useEntities<TEntity extends Entity>(
     isFetching,
     isLoading: isFetching && entities.length === 0,
     invalidate,
+    /** The `X-Total-Count` from the API if available, or the length of items in the store. */
+    count: typeof totalCount === 'number' ? totalCount : entities.length,
   };
 }
 

app/soapbox/features/group/group-members.tsx

@@ -25,7 +25,7 @@ const GroupMembers: React.FC<IGroupMembers> = (props) => {
   const { groupMembers: owners, isFetching: isFetchingOwners } = useGroupMembers(groupId, GroupRoles.OWNER);
   const { groupMembers: admins, isFetching: isFetchingAdmins } = useGroupMembers(groupId, GroupRoles.ADMIN);
   const { groupMembers: users, isFetching: isFetchingUsers, fetchNextPage, hasNextPage } = useGroupMembers(groupId, GroupRoles.USER);
-  const { accounts: pending, isFetching: isFetchingPending, totalCount: pendingTotalCount } = useGroupMembershipRequests(groupId);
+  const { isFetching: isFetchingPending, count: pendingCount } = useGroupMembershipRequests(groupId);
 
   const isLoading = isFetchingGroup || isFetchingOwners || isFetchingAdmins || isFetchingUsers || isFetchingPending;
 
@@ -35,9 +35,6 @@ const GroupMembers: React.FC<IGroupMembers> = (props) => {
     ...users,
   ], [owners, admins, users]);
 
-  // If the API gives us `X-Total-Count`, use it. Otherwise fallback to the number in the store.
-  const pendingCount = typeof pendingTotalCount === 'number' ? pendingTotalCount : pending.length;
-
   return (
     <>
       <ScrollableList