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 { FormattedMessage } from 'react-intl';
import { HStack, IconButton, Text } from 'soapbox/components/ui'; import { HStack, IconButton, Text } from 'soapbox/components/ui';
@ -6,50 +6,45 @@ import { HStack, IconButton, Text } from 'soapbox/components/ui';
interface IAuthorizeRejectButtons { interface IAuthorizeRejectButtons {
onAuthorize(): Promise<unknown> | unknown onAuthorize(): Promise<unknown> | unknown
onReject(): Promise<unknown> | unknown onReject(): Promise<unknown> | unknown
countdown?: number
} }
/** Buttons to approve or reject a pending item, usually an account. */ /** Buttons to approve or reject a pending item, usually an account. */
const AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({ onAuthorize, onReject }) => { const AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({ onAuthorize, onReject, countdown = 0 }) => {
const [state, setState] = useState<'authorized' | 'rejected' | 'pending'>('pending'); const [state, setState] = useState<'authorizing' | 'rejecting' | 'authorized' | 'rejected' | 'pending'>('pending');
const timeout = useRef<NodeJS.Timeout>();
async function handleAuthorize() { function handleAction(present: 'authorizing' | 'rejecting', past: 'authorized' | 'rejected'): void {
try { if (state === present) {
await onAuthorize(); if (timeout.current) {
setState('authorized'); clearTimeout(timeout.current);
} catch (e) { }
console.error(e); setState('pending');
} else {
setState(present);
timeout.current = setTimeout(async () => {
try {
await onAuthorize();
setState(past);
} catch (e) {
console.error(e);
}
}, countdown);
} }
} }
async function handleReject() { const handleAuthorize = async () => handleAction('authorizing', 'authorized');
try { const handleReject = async () => handleAction('rejecting', 'rejected');
await onReject();
setState('rejected'); useEffect(() => {
} catch (e) { return () => {
console.error(e); if (timeout.current) {
} clearTimeout(timeout.current);
} }
};
}, []);
switch (state) { 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': case 'authorized':
return ( return (
<div className='rounded-full bg-gray-100 px-4 py-2 dark:bg-gray-800'> <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> </Text>
</div> </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>
);
} }
}; };