Merge branch 'pending-timer' into 'develop'

AuthorizeRejectButtons: add a countdown timer, remove rejectUserModal

See merge request soapbox-pub/soapbox!2382

app/soapbox/actions/moderation.tsx

@@ -112,27 +112,6 @@ const deleteUserModal = (intl: IntlShape, accountId: string, afterConfirm = () =
     }));
   };
 
-const rejectUserModal = (intl: IntlShape, accountId: string, afterConfirm = () => {}) =>
-  (dispatch: AppDispatch, getState: () => RootState) => {
-    const state = getState();
-    const acct = state.accounts.get(accountId)!.acct;
-    const name = state.accounts.get(accountId)!.username;
-
-    dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/user-off.svg'),
-      heading: intl.formatMessage(messages.rejectUserHeading, { acct }),
-      message: intl.formatMessage(messages.rejectUserPrompt, { acct }),
-      confirm: intl.formatMessage(messages.rejectUserConfirm, { name }),
-      onConfirm: () => {
-        dispatch(deleteUsers([accountId]))
-          .then(() => {
-            afterConfirm();
-          })
-          .catch(() => {});
-      },
-    }));
-  };
-
 const toggleStatusSensitivityModal = (intl: IntlShape, statusId: string, sensitive: boolean, afterConfirm = () => {}) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     const state = getState();
@@ -178,7 +157,6 @@ const deleteStatusModal = (intl: IntlShape, statusId: string, afterConfirm = ()
 export {
   deactivateUserModal,
   deleteUserModal,
-  rejectUserModal,
   toggleStatusSensitivityModal,
   deleteStatusModal,
 };

app/soapbox/components/authorize-reject-buttons.tsx

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import clsx from 'clsx';
+import React, { useEffect, useRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { HStack, IconButton, Text } from 'soapbox/components/ui';
@@ -6,67 +7,133 @@ 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 AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({ onAuthorize, onReject, countdown }) => {
-  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(
-    try {
+    present: 'authorizing' | 'rejecting',
-      await onAuthorize();
+    past: 'authorized' | 'rejected',
-      setState('authorized');
+    action: () => Promise<unknown> | unknown,
-    } catch (e) {
+  ): void {
-      console.error(e);
+    if (state === present) {
+      if (timeout.current) {
+        clearTimeout(timeout.current);
+      }
+      setState('pending');
+    } else {
+      const doAction = async () => {
+        try {
+          await action();
+          setState(past);
+        } catch (e) {
+          console.error(e);
+        }
+      };
+      if (typeof countdown === 'number') {
+        setState(present);
+        timeout.current = setTimeout(doAction, countdown);
+      } else {
+        doAction();
+      }
     }
   }
 
-  async function handleReject() {
+  const handleAuthorize = async () => handleAction('authorizing', 'authorized', onAuthorize);
-    try {
+  const handleReject = async () => handleAction('rejecting', 'rejected', onReject);
-      await onReject();
+
-      setState('rejected');
+  useEffect(() => {
-    } catch (e) {
+    return () => {
-      console.error(e);
+      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'>
+        <ActionEmblem text={<FormattedMessage id='authorize.success' defaultMessage='Approved' />} />
-          <Text theme='muted' size='sm'>
-            <FormattedMessage id='authorize.success' defaultMessage='Approved' />
-          </Text>
-        </div>
       );
     case 'rejected':
       return (
-        <div className='rounded-full bg-gray-100 px-4 py-2 dark:bg-gray-800'>
+        <ActionEmblem text={<FormattedMessage id='reject.success' defaultMessage='Rejected' />} />
-          <Text theme='muted' size='sm'>
+      );
-            <FormattedMessage id='reject.success' defaultMessage='Rejected' />
+    default:
-          </Text>
+      return (
-        </div>
+        <HStack space={3} alignItems='center'>
+          <AuthorizeRejectButton
+            theme='danger'
+            icon={require('@tabler/icons/x.svg')}
+            action={handleReject}
+            isLoading={state === 'rejecting'}
+            disabled={state === 'authorizing'}
+          />
+          <AuthorizeRejectButton
+            theme='primary'
+            icon={require('@tabler/icons/check.svg')}
+            action={handleAuthorize}
+            isLoading={state === 'authorizing'}
+            disabled={state === 'rejecting'}
+          />
+        </HStack>
       );
   }
 };
 
+interface IActionEmblem {
+  text: React.ReactNode
+}
+
+const ActionEmblem: React.FC<IActionEmblem> = ({ text }) => {
+  return (
+    <div className='rounded-full bg-gray-100 px-4 py-2 dark:bg-gray-800'>
+      <Text theme='muted' size='sm'>
+        {text}
+      </Text>
+    </div>
+  );
+};
+
+interface IAuthorizeRejectButton {
+  theme: 'primary' | 'danger'
+  icon: string
+  action(): void
+  isLoading?: boolean
+  disabled?: boolean
+}
+
+const AuthorizeRejectButton: React.FC<IAuthorizeRejectButton> = ({ theme, icon, action, isLoading, disabled }) => {
+  return (
+    <div className='relative'>
+      <IconButton
+        src={isLoading ? require('@tabler/icons/player-stop-filled.svg') : icon}
+        onClick={action}
+        theme='seamless'
+        className={clsx('h-10 w-10 items-center justify-center border-2', {
+          'border-primary-500/10 hover:border-primary-500': theme === 'primary',
+          'border-danger-600/10 hover:border-danger-600': theme === 'danger',
+        })}
+        iconClassName={clsx('h-6 w-6', {
+          'text-primary-500': theme === 'primary',
+          'text-danger-600': theme === 'danger',
+        })}
+        disabled={disabled}
+      />
+      {(isLoading) && (
+        <div
+          className={clsx('pointer-events-none absolute inset-0 h-10 w-10 animate-spin rounded-full border-2 border-transparent', {
+            'border-t-primary-500': theme === 'primary',
+            'border-t-danger-600': theme === 'danger',
+          })}
+        />
+      )}
+    </div>
+  );
+};
+
 export { AuthorizeRejectButtons };

app/soapbox/features/admin/components/unapproved-account.tsx

@@ -1,18 +1,10 @@
 import React, { useCallback } from 'react';
-import { defineMessages, useIntl } from 'react-intl';
 
-import { approveUsers } from 'soapbox/actions/admin';
+import { approveUsers, deleteUsers } from 'soapbox/actions/admin';
-import { rejectUserModal } from 'soapbox/actions/moderation';
 import { AuthorizeRejectButtons } from 'soapbox/components/authorize-reject-buttons';
 import { Stack, HStack, Text } from 'soapbox/components/ui';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
 import { makeGetAccount } from 'soapbox/selectors';
-import toast from 'soapbox/toast';
-
-const messages = defineMessages({
-  approved: { id: 'admin.awaiting_approval.approved_message', defaultMessage: '{acct} was approved!' },
-  rejected: { id: 'admin.awaiting_approval.rejected_message', defaultMessage: '{acct} was rejected.' },
-});
 
 interface IUnapprovedAccount {
   accountId: string
@@ -20,7 +12,6 @@ interface IUnapprovedAccount {
 
 /** Displays an unapproved account for moderation purposes. */
 const UnapprovedAccount: React.FC<IUnapprovedAccount> = ({ accountId }) => {
-  const intl = useIntl();
   const dispatch = useAppDispatch();
   const getAccount = useCallback(makeGetAccount(), []);
 
@@ -29,23 +20,8 @@ const UnapprovedAccount: React.FC<IUnapprovedAccount> = ({ accountId }) => {
 
   if (!account) return null;
 
-  const handleApprove = () => {
+  const handleApprove = () => dispatch(approveUsers([account.id]));
-    return dispatch(approveUsers([account.id]))
+  const handleReject = () => dispatch(deleteUsers([account.id]));
-      .then(() => {
-        const message = intl.formatMessage(messages.approved, { acct: `@${account.acct}` });
-        toast.success(message);
-      });
-  };
-
-  const handleReject = () => {
-    return new Promise<void>((resolve) => {
-      dispatch(rejectUserModal(intl, account.id, () => {
-        const message = intl.formatMessage(messages.rejected, { acct: `@${account.acct}` });
-        toast.info(message);
-        resolve();
-      }));
-    });
-  };
 
   return (
     <HStack space={4} justifyContent='between'>
@@ -62,6 +38,7 @@ const UnapprovedAccount: React.FC<IUnapprovedAccount> = ({ accountId }) => {
         <AuthorizeRejectButtons
           onAuthorize={handleApprove}
           onReject={handleReject}
+          countdown={3000}
         />
       </Stack>
     </HStack>

app/soapbox/features/follow-requests/components/account-authorize.tsx

@@ -29,6 +29,7 @@ const AccountAuthorize: React.FC<IAccountAuthorize> = ({ id }) => {
           <AuthorizeRejectButtons
             onAuthorize={onAuthorize}
             onReject={onReject}
+            countdown={3000}
           />
         }
       />

app/soapbox/features/group/group-membership-requests.tsx

@@ -42,6 +42,7 @@ const MembershipRequest: React.FC<IMembershipRequest> = ({ account, onAuthorize,
       <AuthorizeRejectButtons
         onAuthorize={handleAuthorize}
         onReject={handleReject}
+        countdown={3000}
       />
     </HStack>
   );

app/soapbox/locales/en.json

@@ -91,9 +91,7 @@
   "admin.announcements.edit": "Edit",
   "admin.announcements.ends_at": "Ends at:",
   "admin.announcements.starts_at": "Starts at:",
-  "admin.awaiting_approval.approved_message": "{acct} was approved!",
   "admin.awaiting_approval.empty_message": "There is nobody waiting for approval. When a new user signs up, you can review them here.",
-  "admin.awaiting_approval.rejected_message": "{acct} was rejected.",
   "admin.dashboard.registration_mode.approval_hint": "Users can sign up, but their account only gets activated when an admin approves it.",
   "admin.dashboard.registration_mode.approval_label": "Approval Required",
   "admin.dashboard.registration_mode.closed_hint": "Nobody can sign up. You can still invite people.",