mirror of
https://github.com/mastodon/mastodon.git
synced 2024-08-20 21:08:15 -07:00
Add ability to dismiss or accept all displayed notification request at once
Fixes #29721
This commit is contained in:
parent
a50c8e951f
commit
cf2a140a14
2 changed files with 64 additions and 1 deletions
|
@ -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}
|
||||
|
|
|
@ -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
|
||||
/>
|
||||
|
||||
|
|
Loading…
Reference in a new issue