pl-fe: migrate kick user from group to tanstack query

Signed-off-by: mkljczk <git@mkljczk.pl>

packages/pl-fe/src/actions/groups.ts

@@ -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,
-};

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(() =>
+      onConfirm: () => kickGroupMember(undefined, {
-        toast.success(intl.formatMessage(messages.kicked, { name: account?.acct })),
+        onSuccess: () => toast.success(intl.formatMessage(messages.kicked, { name: account?.acct })),
-      ),
+      }),
     });
   };
 

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<InfiniteData<PaginatedResponse<MinifiedGroupMember>>>(
+    { 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<GroupMember>): PaginatedResponse<Omit<GroupMember, 'account'> & { 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<typeof minifyGroupMembersList>['items'][0];
 
-export { useGroupMembers, type MinifiedGroupMember };
+export { useGroupMembers, useKickGroupMemberMutation, type MinifiedGroupMember };