Merge branch 'pending-timer' into 'develop'
AuthorizeRejectButtons: add a countdown timer, remove rejectUserModal See merge request soapbox-pub/soapbox!2382
This commit is contained in:
Alex Gleason
commit
f2744cdf98
|
|
@ -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,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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 [state, setState] = useState<'authorized' | 'rejected' | 'pending'>('pending');
|
||||
const AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({ onAuthorize, onReject, countdown }) => {
|
||||
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',
|
||||
action: () => Promise<unknown> | unknown,
|
||||
): void {
|
||||
if (state === present) {
|
||||
if (timeout.current) {
|
||||
clearTimeout(timeout.current);
|
||||
}
|
||||
setState('pending');
|
||||
} else {
|
||||
const doAction = async () => {
|
||||
try {
|
||||
await onAuthorize();
|
||||
setState('authorized');
|
||||
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() {
|
||||
try {
|
||||
await onReject();
|
||||
setState('rejected');
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
const handleAuthorize = async () => handleAction('authorizing', 'authorized', onAuthorize);
|
||||
const handleReject = async () => handleAction('rejecting', 'rejected', onReject);
|
||||
|
||||
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'>
|
||||
<Text theme='muted' size='sm'>
|
||||
<FormattedMessage id='authorize.success' defaultMessage='Approved' />
|
||||
</Text>
|
||||
</div>
|
||||
<ActionEmblem text={<FormattedMessage id='authorize.success' defaultMessage='Approved' />} />
|
||||
);
|
||||
case 'rejected':
|
||||
return (
|
||||
<div className='rounded-full bg-gray-100 px-4 py-2 dark:bg-gray-800'>
|
||||
<Text theme='muted' size='sm'>
|
||||
<FormattedMessage id='reject.success' defaultMessage='Rejected' />
|
||||
</Text>
|
||||
</div>
|
||||
<ActionEmblem text={<FormattedMessage id='reject.success' defaultMessage='Rejected' />} />
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<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 };
|
||||
|
|
@ -1,18 +1,10 @@
|
|||
import React, { useCallback } from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
|
||||
import { approveUsers } from 'soapbox/actions/admin';
|
||||
import { rejectUserModal } from 'soapbox/actions/moderation';
|
||||
import { approveUsers, deleteUsers } from 'soapbox/actions/admin';
|
||||
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 = () => {
|
||||
return dispatch(approveUsers([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();
|
||||
}));
|
||||
});
|
||||
};
|
||||
const handleApprove = () => dispatch(approveUsers([account.id]));
|
||||
const handleReject = () => dispatch(deleteUsers([account.id]));
|
||||
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ const AccountAuthorize: React.FC<IAccountAuthorize> = ({ id }) => {
|
|||
<AuthorizeRejectButtons
|
||||
onAuthorize={onAuthorize}
|
||||
onReject={onReject}
|
||||
countdown={3000}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@ const MembershipRequest: React.FC<IMembershipRequest> = ({ account, onAuthorize,
|
|||
<AuthorizeRejectButtons
|
||||
onAuthorize={handleAuthorize}
|
||||
onReject={handleReject}
|
||||
countdown={3000}
|
||||
/>
|
||||
</HStack>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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.",
|
||||
|
|
|
|||
Loading…
Reference in New Issue