AuthorizeRejectButtons: add countdown functionality

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> | unknown
   onReject(): Promise<unknown> | unknown
+  countdown?: number
 }
 
 /** Buttons to approve or reject a pending item, usually an account. */
-const AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({ onAuthorize, onReject }) => {
-  const [state, setState] = useState<'authorized' | 'rejected' | 'pending'>('pending');
+const AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({ onAuthorize, onReject, countdown = 0 }) => {
+  const [state, setState] = useState<'authorizing' | 'rejecting' | 'authorized' | 'rejected' | 'pending'>('pending');
+  const timeout = useRef<NodeJS.Timeout>();
 
-  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 (
-        <HStack space={3} alignItems='center'>
-          <IconButton
-            src={require('@tabler/icons/x.svg')}
-            onClick={handleReject}
-            theme='seamless'
-            className='h-10 w-10 items-center justify-center border-2 border-danger-600/10 hover:border-danger-600'
-            iconClassName='h-6 w-6 text-danger-600'
-          />
-          <IconButton
-            src={require('@tabler/icons/check.svg')}
-            onClick={handleAuthorize}
-            theme='seamless'
-            className='h-10 w-10 items-center justify-center border-2 border-primary-500/10 hover:border-primary-500'
-            iconClassName='h-6 w-6 text-primary-500'
-          />
-        </HStack>
-      );
     case 'authorized':
       return (
         <div className='rounded-full bg-gray-100 px-4 py-2 dark:bg-gray-800'>
@@ -66,6 +61,27 @@ const AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({ onAuthorize
           </Text>
         </div>
       );
+    default:
+      return (
+        <HStack space={3} alignItems='center'>
+          <IconButton
+            src={require('@tabler/icons/x.svg')}
+            onClick={handleReject}
+            theme='seamless'
+            className='h-10 w-10 items-center justify-center border-2 border-danger-600/10 hover:border-danger-600'
+            iconClassName='h-6 w-6 text-danger-600'
+            disabled={state === 'authorizing'}
+          />
+          <IconButton
+            src={require('@tabler/icons/check.svg')}
+            onClick={handleAuthorize}
+            theme='seamless'
+            className='h-10 w-10 items-center justify-center border-2 border-primary-500/10 hover:border-primary-500'
+            iconClassName='h-6 w-6 text-primary-500'
+            disabled={state === 'rejecting'}
+          />
+        </HStack>
+      );
   }
 };