Refactor 'usePendingGroups' into new api hooks

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

@@ -0,0 +1,30 @@
+import { Entities } from 'soapbox/entity-store/entities';
+import { useEntities } from 'soapbox/entity-store/hooks';
+import { useApi, useFeatures, useOwnAccount } from 'soapbox/hooks';
+import { Group, groupSchema } from 'soapbox/schemas';
+
+function usePendingGroups() {
+  const api = useApi();
+  const { account } = useOwnAccount();
+  const features = useFeatures();
+
+  const { entities, ...result } = useEntities<Group>(
+    [Entities.GROUPS, account?.id as string, 'pending'],
+    () => api.get('/api/v1/groups', {
+      params: {
+        pending: true,
+      },
+    }),
+    {
+      schema: groupSchema,
+      enabled: !!account && features.groupsPending,
+    },
+  );
+
+  return {
+    ...result,
+    groups: entities,
+  };
+}
+
+export { usePendingGroups };

app/soapbox/api/hooks/index.ts

@@ -35,6 +35,7 @@ export { useGroupsFromTag } from './groups/useGroupsFromTag';
 export { useJoinGroup } from './groups/useJoinGroup';
 export { useMuteGroup } from './groups/useMuteGroup';
 export { useLeaveGroup } from './groups/useLeaveGroup';
+export { usePendingGroups } from './groups/usePendingGroups';
 export { usePopularGroups } from './groups/usePopularGroups';
 export { usePopularTags } from './groups/usePopularTags';
 export { usePromoteGroupMember } from './groups/usePromoteGroupMember';

app/soapbox/features/group/components/group-action-button.tsx

@@ -3,13 +3,11 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { fetchGroupRelationshipsSuccess } from 'soapbox/actions/groups';
 import { openModal } from 'soapbox/actions/modals';
-import { useCancelMembershipRequest, useJoinGroup, useLeaveGroup } from 'soapbox/api/hooks';
+import { useCancelMembershipRequest, useJoinGroup, useLeaveGroup, usePendingGroups } from 'soapbox/api/hooks';
 import { Button } from 'soapbox/components/ui';
 import { importEntities } from 'soapbox/entity-store/actions';
 import { Entities } from 'soapbox/entity-store/entities';
-import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
-import { queryClient } from 'soapbox/queries/client';
-import { GroupKeys } from 'soapbox/queries/groups';
+import { useAppDispatch } from 'soapbox/hooks';
 import { GroupRoles } from 'soapbox/schemas/group-member';
 import toast from 'soapbox/toast';
 
@@ -31,11 +29,11 @@ const messages = defineMessages({
 const GroupActionButton = ({ group }: IGroupActionButton) => {
   const dispatch = useAppDispatch();
   const intl = useIntl();
-  const { account } = useOwnAccount();
 
   const joinGroup = useJoinGroup(group);
   const leaveGroup = useLeaveGroup(group);
   const cancelRequest = useCancelMembershipRequest(group);
+  const { invalidate: invalidatePendingGroups } = usePendingGroups();
 
   const isRequested = group.relationship?.requested;
   const isNonMember = !group.relationship?.member && !isRequested;
@@ -46,8 +44,8 @@ const GroupActionButton = ({ group }: IGroupActionButton) => {
   const onJoinGroup = () => joinGroup.mutate({}, {
     onSuccess(entity) {
       joinGroup.invalidate();
+      invalidatePendingGroups();
       dispatch(fetchGroupRelationshipsSuccess([entity]));
-      queryClient.invalidateQueries(GroupKeys.pendingGroups(account?.id as string));
 
       toast.success(
         group.locked
@@ -84,7 +82,7 @@ const GroupActionButton = ({ group }: IGroupActionButton) => {
         requested: false,
       };
       dispatch(importEntities([entity], Entities.GROUP_RELATIONSHIPS));
-      queryClient.invalidateQueries(GroupKeys.pendingGroups(account?.id as string));
+      invalidatePendingGroups();
     },
   });
 

app/soapbox/features/groups/components/pending-groups-row.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
+import { usePendingGroups } from 'soapbox/api/hooks';
 import { PendingItemsRow } from 'soapbox/components/pending-items-row';
 import { Divider } from 'soapbox/components/ui';
 import { useFeatures } from 'soapbox/hooks';
-import { usePendingGroups } from 'soapbox/queries/groups';
 
 export default () => {
   const features = useFeatures();

app/soapbox/features/groups/pending-requests.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
+import { usePendingGroups } from 'soapbox/api/hooks';
 import GroupCard from 'soapbox/components/group-card';
 import ScrollableList from 'soapbox/components/scrollable-list';
 import { Column, Stack, Text } from 'soapbox/components/ui';
-import { usePendingGroups } from 'soapbox/queries/groups';
 
 import PlaceholderGroupCard from '../placeholder/components/placeholder-group-card';
 

app/soapbox/queries/groups.ts

@@ -1,11 +1,9 @@
-import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 import { AxiosRequestConfig } from 'axios';
 
-import { getNextLink } from 'soapbox/api';
-import { useApi, useFeatures, useOwnAccount } from 'soapbox/hooks';
+import { useApi, useFeatures } from 'soapbox/hooks';
 import { normalizeGroup, normalizeGroupRelationship } from 'soapbox/normalizers';
 import { Group, GroupRelationship } from 'soapbox/types/entities';
-import { flattenPages, PaginatedResult } from 'soapbox/utils/queries';
 
 const GroupKeys = {
   group: (id: string) => ['groups', 'group', id] as const,
@@ -46,52 +44,6 @@ const useGroupsApi = () => {
   return { fetchGroups };
 };
 
-const usePendingGroups = () => {
-  const features = useFeatures();
-  const { account } = useOwnAccount();
-  const { fetchGroups } = useGroupsApi();
-
-  const getGroups = async (pageParam?: any): Promise<PaginatedResult<Group>> => {
-    const endpoint = '/api/v1/groups';
-    const nextPageLink = pageParam?.link;
-    const uri = nextPageLink || endpoint;
-    const { response, groups } = await fetchGroups(uri, {
-      pending: true,
-    });
-
-    const link = getNextLink(response);
-    const hasMore = !!link;
-
-    return {
-      result: groups,
-      hasMore,
-      link,
-    };
-  };
-
-  const queryInfo = useInfiniteQuery(
-    GroupKeys.pendingGroups(account?.id as string),
-    ({ pageParam }: any) => getGroups(pageParam),
-    {
-      enabled: !!account && features.groupsPending,
-      keepPreviousData: true,
-      getNextPageParam: (config) => {
-        if (config?.hasMore) {
-          return { nextLink: config?.link };
-        }
-
-        return undefined;
-      },
-    });
-
-  const data = flattenPages(queryInfo.data);
-
-  return {
-    ...queryInfo,
-    groups: data || [],
-  };
-};
-
 const useGroup = (id: string) => {
   const features = useFeatures();
   const { fetchGroups } = useGroupsApi();
@@ -113,6 +65,4 @@ const useGroup = (id: string) => {
 
 export {
   useGroup,
-  usePendingGroups,
-  GroupKeys,
 };