bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
Signed-off-by: mkljczk <git@mkljczk.pl>
This commit is contained in:
mkljczk 2024-12-05 10:56:55 +01:00
parent 72523df008
commit 42e857db76
3 changed files with 30 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
packages/pl-fe/src/actions/groups.ts
View file

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

10
packages/pl-fe/src/features/group/components/group-member-list-item.tsx
View file

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

26
packages/pl-fe/src/queries/groups/use-group-members.ts
View file

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