Groups: use entity store for pending requests

app/soapbox/entity-store/entities.ts

@@ -1,4 +1,5 @@
 export enum Entities {
+  ACCOUNTS = 'Accounts',
   GROUPS = 'Groups',
   GROUP_RELATIONSHIPS = 'GroupRelationships',
   GROUP_MEMBERSHIPS = 'GroupMemberships',

app/soapbox/features/group/group-membership-requests.tsx

@@ -6,6 +6,7 @@ import Account from 'soapbox/components/account';
 import ScrollableList from 'soapbox/components/scrollable-list';
 import { Button, Column, HStack, Spinner } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector, useGroup } from 'soapbox/hooks';
+import { useGroupMembershipRequests } from 'soapbox/hooks/api/groups/useGroupMembershipRequests';
 import { makeGetAccount } from 'soapbox/selectors';
 import toast from 'soapbox/toast';
 
@@ -80,7 +81,8 @@ const GroupMembershipRequests: React.FC<IGroupMembershipRequests> = ({ params })
   const id = params?.id;
 
   const { group } = useGroup(id);
-  const accountIds = useAppSelector((state) => state.user_lists.membership_requests.get(id)?.items);
+  const { entities } = useGroupMembershipRequests(id);
+  const accountIds = entities.map(e => e.id);
 
   useEffect(() => {
     dispatch(fetchGroupMembershipRequests(id));

app/soapbox/hooks/api/groups/useGroupMembershipRequests.ts

@@ -0,0 +1,13 @@
+import { Entities } from 'soapbox/entity-store/entities';
+import { useEntities } from 'soapbox/entity-store/hooks';
+import { accountSchema } from 'soapbox/schemas';
+
+function useGroupMembershipRequests(groupId: string) {
+  return useEntities(
+    [Entities.ACCOUNTS, 'membership_requests', groupId],
+    `/api/v1/groups/${groupId}/membership_requests`,
+    { schema: accountSchema },
+  );
+}
+
+export { useGroupMembershipRequests };