phanpy/src/components/follow-request-buttons.jsx

81 lines
2.3 KiB
React
Raw Normal View History

import { useState } from 'preact/hooks';
import { api } from '../utils/api';
import Icon from './icon';
import Loader from './loader';
function FollowRequestButtons({ accountID, onChange }) {
const { masto } = api();
const [uiState, setUIState] = useState('default');
const [requestState, setRequestState] = useState(null); // accept, reject
const [relationship, setRelationship] = useState(null);
const hasRelationship = relationship !== null;
return (
<p class="follow-request-buttons">
<button
type="button"
disabled={uiState === 'loading' || hasRelationship}
onClick={() => {
setUIState('loading');
setRequestState('accept');
(async () => {
try {
const rel = await masto.v1.followRequests.authorize(accountID);
if (!rel?.followedBy) {
throw new Error('Follow request not accepted');
}
setRelationship(rel);
onChange();
} catch (e) {
console.error(e);
}
setUIState('default');
})();
}}
>
Accept
</button>{' '}
<button
type="button"
disabled={uiState === 'loading' || hasRelationship}
class="light danger"
onClick={() => {
setUIState('loading');
setRequestState('reject');
(async () => {
try {
const rel = await masto.v1.followRequests.reject(accountID);
if (rel?.followedBy) {
throw new Error('Follow request not rejected');
}
setRelationship(rel);
onChange();
} catch (e) {
console.error(e);
setUIState('default');
}
})();
}}
>
Reject
</button>
<span class="follow-request-states">
{hasRelationship && requestState ? (
requestState === 'accept' ? (
<Icon icon="check-circle" alt="Accepted" class="follow-accepted" />
) : (
<Icon icon="x-circle" alt="Rejected" class="follow-rejected" />
)
) : (
<Loader hidden={uiState !== 'loading'} />
)}
</span>
</p>
);
}
export default FollowRequestButtons;