diff --git a/app/soapbox/components/authorize-reject-buttons.tsx b/app/soapbox/components/authorize-reject-buttons.tsx index 66d8d1d4a..bc398132f 100644 --- a/app/soapbox/components/authorize-reject-buttons.tsx +++ b/app/soapbox/components/authorize-reject-buttons.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import { FormattedMessage } from 'react-intl'; import { HStack, IconButton, Text } from 'soapbox/components/ui'; @@ -6,50 +6,45 @@ import { HStack, IconButton, Text } from 'soapbox/components/ui'; interface IAuthorizeRejectButtons { onAuthorize(): Promise | unknown onReject(): Promise | unknown + countdown?: number } /** Buttons to approve or reject a pending item, usually an account. */ -const AuthorizeRejectButtons: React.FC = ({ onAuthorize, onReject }) => { - const [state, setState] = useState<'authorized' | 'rejected' | 'pending'>('pending'); +const AuthorizeRejectButtons: React.FC = ({ onAuthorize, onReject, countdown = 0 }) => { + const [state, setState] = useState<'authorizing' | 'rejecting' | 'authorized' | 'rejected' | 'pending'>('pending'); + const timeout = useRef(); - async function handleAuthorize() { - try { - await onAuthorize(); - setState('authorized'); - } catch (e) { - console.error(e); + function handleAction(present: 'authorizing' | 'rejecting', past: 'authorized' | 'rejected'): void { + if (state === present) { + if (timeout.current) { + clearTimeout(timeout.current); + } + setState('pending'); + } else { + setState(present); + timeout.current = setTimeout(async () => { + try { + await onAuthorize(); + setState(past); + } catch (e) { + console.error(e); + } + }, countdown); } } - async function handleReject() { - try { - await onReject(); - setState('rejected'); - } catch (e) { - console.error(e); - } - } + const handleAuthorize = async () => handleAction('authorizing', 'authorized'); + const handleReject = async () => handleAction('rejecting', 'rejected'); + + useEffect(() => { + return () => { + if (timeout.current) { + clearTimeout(timeout.current); + } + }; + }, []); switch (state) { - case 'pending': - return ( - - - - - ); case 'authorized': return (
@@ -66,6 +61,27 @@ const AuthorizeRejectButtons: React.FC = ({ onAuthorize
); + default: + return ( + + + + + ); } };