Reorganize GroupMembershipRequests a little

app/soapbox/features/group/group-membership-requests.tsx

@@ -17,34 +17,21 @@ type RouteParams = { id: string };
 
 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
-  onAuthorize(accountId: string): Promise<unknown>
-  onReject(accountId: string): Promise<unknown>
+  onAuthorize(account: AccountEntity): Promise<unknown>
+  onReject(account: AccountEntity): Promise<unknown>
 }
 
 const MembershipRequest: React.FC<IMembershipRequest> = ({ account, onAuthorize, onReject }) => {
-  const intl = useIntl();
-
   if (!account) return null;
 
-  function handleAuthorize() {
-    return onAuthorize(account.id)
-      .catch(() => toast.error(intl.formatMessage(messages.authorizeFail, { name: account.username })));
-  }
-
-  function handleReject() {
-    return onReject(account.id)
-      .catch(() => toast.error(intl.formatMessage(messages.rejectFail, { name: account.username })));
-  }
+  const handleAuthorize = () => onAuthorize(account);
+  const handleReject = () => onReject(account);
 
   return (
     <HStack space={1} alignItems='center' justifyContent='between' className='p-2.5'>
@@ -65,9 +52,8 @@ interface IGroupMembershipRequests {
 }
 
 const GroupMembershipRequests: React.FC<IGroupMembershipRequests> = ({ params }) => {
-  const intl = useIntl();
-
   const id = params?.id;
+  const intl = useIntl();
 
   const { group } = useGroup(id);
   const { accounts, isLoading, authorize, reject } = useGroupMembershipRequests(id);
@@ -81,11 +67,24 @@ const GroupMembershipRequests: React.FC<IGroupMembershipRequests> = ({ params })
   }
 
   if (!group.relationship.role || !['owner', 'admin', 'moderator'].includes(group.relationship.role)) {
-    return (<ColumnForbidden />);
+    return <ColumnForbidden />;
   }
 
-  const handleAuthorize = (accountId: string) => authorize(accountId);
-  const handleReject = (accountId: string) => reject(accountId);
+  async function handleAuthorize(account: AccountEntity) {
+    try {
+      await authorize(account.id);
+    } catch (_e) {
+      toast.error(intl.formatMessage(messages.authorizeFail, { name: account.username }));
+    }
+  }
+
+  async function handleReject(account: AccountEntity) {
+    try {
+      await reject(account.id);
+    } catch (_e) {
+      toast.error(intl.formatMessage(messages.rejectFail, { name: account.username }));
+    }
+  }
 
   return (
     <Column label={intl.formatMessage(messages.heading)} backHref={`/groups/${id}/manage`}>