diff --git a/app/soapbox/features/group/group-members.tsx b/app/soapbox/features/group/group-members.tsx index b1ab415f4..b20a37c71 100644 --- a/app/soapbox/features/group/group-members.tsx +++ b/app/soapbox/features/group/group-members.tsx @@ -24,7 +24,7 @@ const GroupMembers: React.FC = (props) => { const { groupMembers: owners, isFetching: isFetchingOwners } = useGroupMembers(groupId, GroupRoles.OWNER); const { groupMembers: admins, isFetching: isFetchingAdmins } = useGroupMembers(groupId, GroupRoles.ADMIN); const { groupMembers: users, isFetching: isFetchingUsers, fetchNextPage, hasNextPage } = useGroupMembers(groupId, GroupRoles.USER); - const { entities: pending, isFetching: isFetchingPending } = useGroupMembershipRequests(groupId); + const { accounts: pending, isFetching: isFetchingPending } = useGroupMembershipRequests(groupId); const isLoading = isFetchingGroup || isFetchingOwners || isFetchingAdmins || isFetchingUsers || isFetchingPending; diff --git a/app/soapbox/features/group/group-membership-requests.tsx b/app/soapbox/features/group/group-membership-requests.tsx index e769a1680..32f36f9bb 100644 --- a/app/soapbox/features/group/group-membership-requests.tsx +++ b/app/soapbox/features/group/group-membership-requests.tsx @@ -1,11 +1,11 @@ import React from 'react'; import { FormattedMessage, defineMessages, useIntl } from 'react-intl'; -import { authorizeGroupMembershipRequest, rejectGroupMembershipRequest } from 'soapbox/actions/groups'; import Account from 'soapbox/components/account'; +import { AuthorizeRejectButtons } from 'soapbox/components/authorize-reject-buttons'; import ScrollableList from 'soapbox/components/scrollable-list'; -import { Button, Column, HStack, Spinner } from 'soapbox/components/ui'; -import { useAppDispatch, useGroup } from 'soapbox/hooks'; +import { Column, HStack, Spinner } from 'soapbox/components/ui'; +import { useGroup } from 'soapbox/hooks'; import { useGroupMembershipRequests } from 'soapbox/hooks/api/groups/useGroupMembershipRequests'; import toast from 'soapbox/toast'; @@ -19,50 +19,44 @@ const messages = defineMessages({ heading: { id: 'column.group_pending_requests', defaultMessage: 'Pending requests' }, authorize: { id: 'group.group_mod_authorize', defaultMessage: 'Accept' }, authorized: { id: 'group.group_mod_authorize.success', defaultMessage: 'Accepted @{name} to group' }, + authorizeFail: { id: 'group.group_mod_authorize.fail', defaultMessage: 'Failed to approve @{name}' }, reject: { id: 'group.group_mod_reject', defaultMessage: 'Reject' }, rejected: { id: 'group.group_mod_reject.success', defaultMessage: 'Rejected @{name} from group' }, + rejectFail: { id: 'group.group_mod_reject.fail', defaultMessage: 'Failed to reject @{name}' }, }); interface IMembershipRequest { account: AccountEntity - groupId: string + onAuthorize(accountId: string): Promise + onReject(accountId: string): Promise } -const MembershipRequest: React.FC = ({ account, groupId }) => { +const MembershipRequest: React.FC = ({ account, onAuthorize, onReject }) => { const intl = useIntl(); - const dispatch = useAppDispatch(); if (!account) return null; - const handleAuthorize = () => - dispatch(authorizeGroupMembershipRequest(groupId, account.id)).then(() => { - toast.success(intl.formatMessage(messages.authorized, { name: account.acct })); - }); + function handleAuthorize(accountId: string) { + return onAuthorize(accountId) + .catch(() => toast.error(intl.formatMessage(messages.authorizeFail, { name: account.username }))); + } - const handleReject = () => - dispatch(rejectGroupMembershipRequest(groupId, account.id)).then(() => { - toast.success(intl.formatMessage(messages.rejected, { name: account.acct })); - }); + function handleReject(accountId: string) { + return onReject(accountId) + .catch(() => toast.error(intl.formatMessage(messages.rejectFail, { name: account.username }))); + } return (
- -