diff --git a/packages/pl-fe/src/actions/groups.ts b/packages/pl-fe/src/actions/groups.ts deleted file mode 100644 index 3db7161d5..000000000 --- a/packages/pl-fe/src/actions/groups.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { getClient } from '../api'; - -import type { AppDispatch, RootState } from 'pl-fe/store'; - -const groupKick = (groupId: string, accountId: string) => - (dispatch: AppDispatch, getState: () => RootState) => { - return getClient(getState).experimental.groups.kickGroupUsers(groupId, [accountId]); - }; - -export { - groupKick, -}; diff --git a/packages/pl-fe/src/features/group/components/group-member-list-item.tsx b/packages/pl-fe/src/features/group/components/group-member-list-item.tsx index 80cd58e35..2ba5da657 100644 --- a/packages/pl-fe/src/features/group/components/group-member-list-item.tsx +++ b/packages/pl-fe/src/features/group/components/group-member-list-item.tsx @@ -3,7 +3,6 @@ import { GroupRoles } from 'pl-api'; import React, { useMemo } from 'react'; import { defineMessages, useIntl } from 'react-intl'; -import { groupKick } from 'pl-fe/actions/groups'; import { useAccount } from 'pl-fe/api/hooks/accounts/use-account'; import { useDemoteGroupMember } from 'pl-fe/api/hooks/groups/use-demote-group-member'; import { usePromoteGroupMember } from 'pl-fe/api/hooks/groups/use-promote-group-member'; @@ -15,12 +14,12 @@ import { Entities } from 'pl-fe/entity-store/entities'; import PlaceholderAccount from 'pl-fe/features/placeholder/components/placeholder-account'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useBlockGroupUserMutation } from 'pl-fe/queries/groups/use-group-blocks'; +import { useKickGroupMemberMutation, type MinifiedGroupMember } from 'pl-fe/queries/groups/use-group-members'; import { useModalsStore } from 'pl-fe/stores/modals'; import toast from 'pl-fe/toast'; import type { Menu as IMenu } from 'pl-fe/components/dropdown-menu'; import type { Group } from 'pl-fe/normalizers/group'; -import type { MinifiedGroupMember } from 'pl-fe/queries/groups/use-group-members'; const messages = defineMessages({ adminLimitTitle: { id: 'group.member.admin.limit.title', defaultMessage: 'Admin limit reached' }, @@ -54,6 +53,7 @@ const GroupMemberListItem = ({ member, group }: IGroupMemberListItem) => { const { openModal } = useModalsStore(); const { mutate: blockGroupMember } = useBlockGroupUserMutation(group.id, member.account_id); + const { mutate: kickGroupMember } = useKickGroupMemberMutation(group.id, member.account_id); const promoteGroupMember = usePromoteGroupMember(group, member); const demoteGroupMember = useDemoteGroupMember(group, member); @@ -73,9 +73,9 @@ const GroupMemberListItem = ({ member, group }: IGroupMemberListItem) => { heading: intl.formatMessage(messages.kickFromGroupHeading, { name: account?.username }), message: intl.formatMessage(messages.kickFromGroupMessage, { name: account?.username }), confirm: intl.formatMessage(messages.kickConfirm), - onConfirm: () => dispatch(groupKick(group.id, account?.id as string)).then(() => - toast.success(intl.formatMessage(messages.kicked, { name: account?.acct })), - ), + onConfirm: () => kickGroupMember(undefined, { + onSuccess: () => toast.success(intl.formatMessage(messages.kicked, { name: account?.acct })), + }), }); }; diff --git a/packages/pl-fe/src/queries/groups/use-group-members.ts b/packages/pl-fe/src/queries/groups/use-group-members.ts index eca20278f..2b2a7e835 100644 --- a/packages/pl-fe/src/queries/groups/use-group-members.ts +++ b/packages/pl-fe/src/queries/groups/use-group-members.ts @@ -1,11 +1,25 @@ +import { type InfiniteData, useMutation } from '@tanstack/react-query'; import { GroupMember, GroupRole, PaginatedResponse } from 'pl-api'; import { importEntities } from 'pl-fe/actions/importer'; +import { useClient } from 'pl-fe/hooks/use-client'; import { makePaginatedResponseQuery } from 'pl-fe/queries/utils/make-paginated-response-query'; import { store } from 'pl-fe/store'; +import { queryClient } from '../client'; import { minifyList } from '../utils/minify-list'; +const removeGroupMember = (groupId: string, accountId: string) => + queryClient.setQueriesData>>( + { queryKey: ['accountsLists', 'groupMembers', groupId] }, + (data) => data + ? ({ + ...data, + pages: data.pages.map((page) => ({ ...page, items: page.items.filter((member) => member.account_id !== accountId) })), + }) + : undefined, + ); + const minifyGroupMembersList = (response: PaginatedResponse): PaginatedResponse & { account_id: string }> => minifyList(response, ({ account, ...groupMember }) => ({ ...groupMember, account_id: account.id }), (groupMembers) => { store.dispatch(importEntities({ accounts: groupMembers.map(({ account }) => account) }) as any); @@ -16,6 +30,16 @@ const useGroupMembers = makePaginatedResponseQuery( (client, [groupId, role]) => client.experimental.groups.getGroupMemberships(groupId, role).then(minifyGroupMembersList), ); +const useKickGroupMemberMutation = (groupId: string, accountId: string) => { + const client = useClient(); + + return useMutation({ + mutationKey: ['accountsLists', 'groupMembers', groupId, accountId], + mutationFn: () => client.experimental.groups.kickGroupUsers(groupId, [accountId]), + onSuccess: () => removeGroupMember(groupId, accountId), + }); +}; + type MinifiedGroupMember = ReturnType['items'][0]; -export { useGroupMembers, type MinifiedGroupMember }; +export { useGroupMembers, useKickGroupMemberMutation, type MinifiedGroupMember };