diff --git a/app/soapbox/components/authorize-reject-buttons.tsx b/app/soapbox/components/authorize-reject-buttons.tsx new file mode 100644 index 000000000..0a092fd78 --- /dev/null +++ b/app/soapbox/components/authorize-reject-buttons.tsx @@ -0,0 +1,73 @@ +import React, { useState } from 'react'; +import { defineMessages, useIntl } from 'react-intl'; + +import { Button, HStack } from 'soapbox/components/ui'; + +const messages = defineMessages({ + authorize: { id: 'authorize', defaultMessage: 'Accept' }, + authorized: { id: 'authorize.success', defaultMessage: 'Accepted' }, + reject: { id: 'reject', defaultMessage: 'Reject' }, + rejected: { id: 'reject.success', defaultMessage: 'Rejected' }, +}); + +interface IAuthorizeRejectButtons { + id: string + onAuthorize(id: string): Promise + onReject(id: string): Promise +} + +/** Buttons to approve or reject a pending item, usually an account. */ +const AuthorizeRejectButtons: React.FC = ({ id, onAuthorize, onReject }) => { + const intl = useIntl(); + const [state, setState] = useState<'authorized' | 'rejected' | 'pending'>('pending'); + + function handleAuthorize() { + onAuthorize(id) + .then(() => setState('authorized')) + .catch(console.error); + } + + function handleReject() { + onReject(id) + .then(() => setState('rejected')) + .catch(console.error); + } + + switch (state) { + case 'pending': + return ( + +