Switch to batch queries for accepting/dismissing all notification requests

Fixes #29721

app/javascript/mastodon/actions/notifications.js

@@ -64,6 +64,14 @@ export const NOTIFICATION_REQUEST_DISMISS_REQUEST = 'NOTIFICATION_REQUEST_DISMIS
 export const NOTIFICATION_REQUEST_DISMISS_SUCCESS = 'NOTIFICATION_REQUEST_DISMISS_SUCCESS';
 export const NOTIFICATION_REQUEST_DISMISS_FAIL    = 'NOTIFICATION_REQUEST_DISMISS_FAIL';
 
+export const NOTIFICATION_REQUESTS_ACCEPT_REQUEST = 'NOTIFICATION_REQUESTS_ACCEPT_REQUEST';
+export const NOTIFICATION_REQUESTS_ACCEPT_SUCCESS = 'NOTIFICATION_REQUESTS_ACCEPT_SUCCESS';
+export const NOTIFICATION_REQUESTS_ACCEPT_FAIL    = 'NOTIFICATION_REQUESTS_ACCEPT_FAIL';
+
+export const NOTIFICATION_REQUESTS_DISMISS_REQUEST = 'NOTIFICATION_REQUESTS_DISMISS_REQUEST';
+export const NOTIFICATION_REQUESTS_DISMISS_SUCCESS = 'NOTIFICATION_REQUESTS_DISMISS_SUCCESS';
+export const NOTIFICATION_REQUESTS_DISMISS_FAIL    = 'NOTIFICATION_REQUESTS_DISMISS_FAIL';
+
 export const NOTIFICATIONS_FOR_REQUEST_FETCH_REQUEST = 'NOTIFICATIONS_FOR_REQUEST_FETCH_REQUEST';
 export const NOTIFICATIONS_FOR_REQUEST_FETCH_SUCCESS = 'NOTIFICATIONS_FOR_REQUEST_FETCH_SUCCESS';
 export const NOTIFICATIONS_FOR_REQUEST_FETCH_FAIL    = 'NOTIFICATIONS_FOR_REQUEST_FETCH_FAIL';
@@ -496,6 +504,62 @@ export const dismissNotificationRequestFail = (id, error) => ({
   error,
 });
 
+export const acceptNotificationRequests = (ids) => (dispatch, getState) => {
+  const count = ids.reduce((count, id) => count + selectNotificationCountForRequest(getState(), id), 0);
+  dispatch(acceptNotificationRequestsRequest(ids));
+
+  api().post(`/api/v1/notifications/requests/accept`, { id: ids }).then(() => {
+    dispatch(acceptNotificationRequestsSuccess(ids));
+    dispatch(decreasePendingNotificationsCount(count));
+  }).catch(err => {
+    dispatch(acceptNotificationRequestFail(ids, err));
+  });
+};
+
+export const acceptNotificationRequestsRequest = ids => ({
+  type: NOTIFICATION_REQUESTS_ACCEPT_REQUEST,
+  ids,
+});
+
+export const acceptNotificationRequestsSuccess = ids => ({
+  type: NOTIFICATION_REQUESTS_ACCEPT_SUCCESS,
+  ids,
+});
+
+export const acceptNotificationRequestsFail = (ids, error) => ({
+  type: NOTIFICATION_REQUESTS_ACCEPT_FAIL,
+  ids,
+  error,
+});
+
+export const dismissNotificationRequests = (ids) => (dispatch, getState) => {
+  const count = ids.reduce((count, id) => count + selectNotificationCountForRequest(getState(), id), 0);
+  dispatch(acceptNotificationRequestsRequest(ids));
+
+  api().post(`/api/v1/notifications/requests/dismiss`, { id: ids }).then(() => {
+    dispatch(dismissNotificationRequestsSuccess(ids));
+    dispatch(decreasePendingNotificationsCount(count));
+  }).catch(err => {
+    dispatch(dismissNotificationRequestFail(ids, err));
+  });
+};
+
+export const dismissNotificationRequestsRequest = ids => ({
+  type: NOTIFICATION_REQUESTS_DISMISS_REQUEST,
+  ids,
+});
+
+export const dismissNotificationRequestsSuccess = ids => ({
+  type: NOTIFICATION_REQUESTS_DISMISS_SUCCESS,
+  ids,
+});
+
+export const dismissNotificationRequestsFail = (ids, error) => ({
+  type: NOTIFICATION_REQUESTS_DISMISS_FAIL,
+  ids,
+  error,
+});
+
 export const fetchNotificationsForRequest = accountId => (dispatch, getState) => {
   const current = getState().getIn(['notificationRequests', 'current']);
   const params = { account_id: accountId };

app/javascript/mastodon/components/dropdown_menu.jsx

@@ -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}

app/javascript/mastodon/features/notifications/requests.jsx

@@ -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, acceptNotificationRequests, dismissNotificationRequests } 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,48 @@ 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: () =>
+          dispatch(acceptNotificationRequests(notificationRequests.map((request) => 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: () =>
+          dispatch(dismissNotificationRequests(notificationRequests.map((request) => 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 +100,7 @@ export const NotificationRequests = ({ multiColumn }) => {
         title={intl.formatMessage(messages.title)}
         onClick={handleHeaderClick}
         multiColumn={multiColumn}
+        extraButton={dropDownMenu}
         showBackButton
       />
 

app/javascript/mastodon/reducers/notification_requests.js

@@ -12,6 +12,8 @@ import {
   NOTIFICATION_REQUEST_FETCH_FAIL,
   NOTIFICATION_REQUEST_ACCEPT_REQUEST,
   NOTIFICATION_REQUEST_DISMISS_REQUEST,
+  NOTIFICATION_REQUESTS_ACCEPT_REQUEST,
+  NOTIFICATION_REQUESTS_DISMISS_REQUEST,
   NOTIFICATIONS_FOR_REQUEST_FETCH_REQUEST,
   NOTIFICATIONS_FOR_REQUEST_FETCH_SUCCESS,
   NOTIFICATIONS_FOR_REQUEST_FETCH_FAIL,
@@ -74,6 +76,9 @@ export const notificationRequestsReducer = (state = initialState, action) => {
   case NOTIFICATION_REQUEST_ACCEPT_REQUEST:
   case NOTIFICATION_REQUEST_DISMISS_REQUEST:
     return removeRequest(state, action.id);
+  case NOTIFICATION_REQUESTS_ACCEPT_REQUEST:
+  case NOTIFICATION_REQUESTS_DISMISS_REQUEST:
+    return action.ids.reduce((state, id) => removeRequest(state, id), state);
   case NOTIFICATION_REQUEST_FETCH_REQUEST:
     return state.set('current', initialState.get('current').set('isLoading', true));
   case NOTIFICATION_REQUEST_FETCH_SUCCESS: