Add ability to dismiss or accept all displayed notification request at once

Fixes #29721
This commit is contained in:
Claire 2024-07-31 14:21:46 +02:00
parent da5b45a573
commit 9e0d035aaf
2 changed files with 64 additions and 1 deletions

View File

@ -179,6 +179,7 @@ class Dropdown extends PureComponent {
renderItem: PropTypes.func,
renderHeader: PropTypes.func,
onItemClick: PropTypes.func,
className: PropTypes.string,
...WithRouterPropTypes
};
@ -284,6 +285,7 @@ class Dropdown extends PureComponent {
children,
renderItem,
renderHeader,
className,
} = this.props;
const open = this.state.id === openDropdownId;
@ -296,6 +298,7 @@ class Dropdown extends PureComponent {
ref: this.setTargetRef,
}) : (
<IconButton
className={className}
icon={!open ? icon : 'close'}
iconComponent={iconComponent}
title={title}

View File

@ -8,15 +8,26 @@ import { Helmet } from 'react-helmet';
import { useSelector, useDispatch } from 'react-redux';
import InventoryIcon from '@/material-icons/400-24px/inventory_2.svg?react';
import { fetchNotificationRequests, expandNotificationRequests } from 'mastodon/actions/notifications';
import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
import { openModal } from 'mastodon/actions/modal';
import { fetchNotificationRequests, expandNotificationRequests, acceptNotificationRequest, dismissNotificationRequest } from 'mastodon/actions/notifications';
import Column from 'mastodon/components/column';
import ColumnHeader from 'mastodon/components/column_header';
import ScrollableList from 'mastodon/components/scrollable_list';
import DropdownMenuContainer from 'mastodon/containers/dropdown_menu_container';
import { NotificationRequest } from './components/notification_request';
const messages = defineMessages({
title: { id: 'notification_requests.title', defaultMessage: 'Filtered notifications' },
accept_all: { id: 'notification_requests.accept_all', defaultMessage: 'Accept all notification requests' },
dismiss_all: { id: 'notification_requests.dismiss_all', defaultMessage: 'Dismiss all notification requests' },
confirm_accept_all_title: { id: 'notification_requests.confirm_accept_all.title', defaultMessage: 'Accept notification requests?' },
confirm_accept_all_message: { id: 'notification_requests.confirm_accept_all.message', defaultMessage: 'You are about to accept {count, plural, one {one notification request} other {# notification requests}}. Are you sure you want to proceed?' },
confirm_accept_all_button: { id: 'notification_requests.confirm_accept_all.button', defaultMessage: 'Accept all' },
confirm_dismiss_all_title: { id: 'notification_requests.confirm_dismiss_all.title', defaultMessage: 'Dismiss notification requests?' },
confirm_dismiss_all_message: { id: 'notification_requests.confirm_dismiss_all.message', defaultMessage: "You are about to dismiss {count, plural, one {one notification request} other {# notification requests}}. You won't be able to easily access {count, plural, one {it} other {them}} again. Are you sure you want to proceed?" },
confirm_dismiss_all_button: { id: 'notification_requests.confirm_dismiss_all.button', defaultMessage: 'Dismiss all' },
});
export const NotificationRequests = ({ multiColumn }) => {
@ -39,6 +50,54 @@ export const NotificationRequests = ({ multiColumn }) => {
dispatch(fetchNotificationRequests());
}, [dispatch]);
const handleAcceptAll = useCallback(() => {
dispatch(openModal({
modalType: 'CONFIRM',
modalProps: {
title: intl.formatMessage(messages.confirm_accept_all_title),
message: intl.formatMessage(messages.confirm_accept_all_message, { count: notificationRequests.size }),
confirm: intl.formatMessage(messages.confirm_accept_all_button),
onConfirm: () => {
notificationRequests.forEach((request) =>
dispatch(acceptNotificationRequest(request.get('id')))
);
},
},
}));
}, [dispatch, notificationRequests, intl]);
const handleDismissAll = useCallback(() => {
dispatch(openModal({
modalType: 'CONFIRM',
modalProps: {
title: intl.formatMessage(messages.confirm_dismiss_all_title),
message: intl.formatMessage(messages.confirm_dismiss_all_message, { count: notificationRequests.size }),
confirm: intl.formatMessage(messages.confirm_dismiss_all_button),
onConfirm: () => {
notificationRequests.forEach((request) =>
dispatch(dismissNotificationRequest(request.get('id')))
);
},
}
}));
}, [dispatch, notificationRequests, intl]);
const menu = [
{ text: intl.formatMessage(messages.accept_all), action: handleAcceptAll },
{ text: intl.formatMessage(messages.dismiss_all), action: handleDismissAll, dangerous: true },
];
const dropDownMenu = (
<DropdownMenuContainer
className='column-header__button'
items={menu}
icon='ellipsis-v'
iconComponent={MoreHorizIcon}
size={24}
direction='right'
/>
);
return (
<Column bindToDocument={!multiColumn} ref={columnRef} label={intl.formatMessage(messages.title)}>
<ColumnHeader
@ -47,6 +106,7 @@ export const NotificationRequests = ({ multiColumn }) => {
title={intl.formatMessage(messages.title)}
onClick={handleHeaderClick}
multiColumn={multiColumn}
extraButton={dropDownMenu}
showBackButton
/>