bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

AuthorizeRejectButtons: add countdown functionality

Browse source
This commit is contained in:
Alex Gleason 2023-03-27 15:31:13 -05:00
parent ff5eb736fc
commit 6f705a827e
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
1 changed files with 52 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
app/soapbox/components/authorize-reject-buttons.tsx
View file

@ -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>
);
}
};