Clear pending groups cache

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

@@ -5,8 +5,10 @@ import { openModal } from 'soapbox/actions/modals';
 import { Button } from 'soapbox/components/ui';
 import { importEntities } from 'soapbox/entity-store/actions';
 import { Entities } from 'soapbox/entity-store/entities';
-import { useAppDispatch } from 'soapbox/hooks';
+import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
 import { useCancelMembershipRequest, useJoinGroup, useLeaveGroup } from 'soapbox/hooks/api';
+import { queryClient } from 'soapbox/queries/client';
+import { GroupKeys } from 'soapbox/queries/groups';
 import { GroupRoles } from 'soapbox/schemas/group-member';
 import toast from 'soapbox/toast';
 
@@ -28,6 +30,7 @@ const messages = defineMessages({
 const GroupActionButton = ({ group }: IGroupActionButton) => {
   const dispatch = useAppDispatch();
   const intl = useIntl();
+  const account = useOwnAccount();
 
   const joinGroup = useJoinGroup(group);
   const leaveGroup = useLeaveGroup(group);
@@ -42,6 +45,7 @@ const GroupActionButton = ({ group }: IGroupActionButton) => {
   const onJoinGroup = () => joinGroup.mutate({}, {
     onSuccess() {
       joinGroup.invalidate();
+      queryClient.invalidateQueries(GroupKeys.pendingGroups(account?.id as string));
 
       toast.success(
         group.locked
@@ -71,6 +75,7 @@ const GroupActionButton = ({ group }: IGroupActionButton) => {
         requested: false,
       };
       dispatch(importEntities([entity], Entities.GROUP_RELATIONSHIPS));
+      queryClient.invalidateQueries(GroupKeys.pendingGroups(account?.id as string));
     },
   });
 

app/soapbox/queries/groups.ts

@@ -9,10 +9,7 @@ import { flattenPages, PaginatedResult } from 'soapbox/utils/queries';
 
 const GroupKeys = {
   group: (id: string) => ['groups', 'group', id] as const,
-  myGroups: (userId: string) => ['groups', userId] as const,
   pendingGroups: (userId: string) => ['groups', userId, 'pending'] as const,
-  popularGroups: ['groups', 'popular'] as const,
-  suggestedGroups: ['groups', 'suggested'] as const,
 };
 
 const useGroupsApi = () => {
@@ -49,50 +46,6 @@ const useGroupsApi = () => {
   return { fetchGroups };
 };
 
-const useGroups = () => {
-  const account = useOwnAccount();
-  const features = useFeatures();
-  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);
-
-    const link = getNextLink(response);
-    const hasMore = !!link;
-
-    return {
-      result: groups,
-      hasMore,
-      link,
-    };
-  };
-
-  const queryInfo = useInfiniteQuery(
-    GroupKeys.myGroups(account?.id as string),
-    ({ pageParam }: any) => getGroups(pageParam),
-    {
-      enabled: !!account && features.groups,
-      keepPreviousData: true,
-      getNextPageParam: (config) => {
-        if (config?.hasMore) {
-          return { nextLink: config?.link };
-        }
-
-        return undefined;
-      },
-    });
-
-  const data = flattenPages(queryInfo.data);
-
-  return {
-    ...queryInfo,
-    groups: data || [],
-  };
-};
-
 const usePendingGroups = () => {
   const features = useFeatures();
   const account = useOwnAccount();
@@ -162,4 +115,5 @@ export {
   useGroup,
   useGroups,
   usePendingGroups,
+  GroupKeys,
 };