diff --git a/app/soapbox/features/group/components/group-action-button.tsx b/app/soapbox/features/group/components/group-action-button.tsx index 96653f97e..28f860a46 100644 --- a/app/soapbox/features/group/components/group-action-button.tsx +++ b/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)); }, }); diff --git a/app/soapbox/queries/groups.ts b/app/soapbox/queries/groups.ts index daf39806e..2291ba420 100644 --- a/app/soapbox/queries/groups.ts +++ b/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> => { - 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, };