diff --git a/app/javascript/flavours/glitch/features/notifications/requests.jsx b/app/javascript/flavours/glitch/features/notifications/requests.jsx index 6db16a42d1..970ce3b40c 100644 --- a/app/javascript/flavours/glitch/features/notifications/requests.jsx +++ b/app/javascript/flavours/glitch/features/notifications/requests.jsx @@ -7,6 +7,7 @@ import { Helmet } from 'react-helmet'; import { useSelector, useDispatch } from 'react-redux'; +import ArrowDropDownIcon from '@/material-icons/400-24px/arrow_drop_down.svg?react'; import InventoryIcon from '@/material-icons/400-24px/inventory_2.svg?react'; import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react'; import { openModal } from 'flavours/glitch/actions/modal'; @@ -15,6 +16,7 @@ import { changeSetting } from 'flavours/glitch/actions/settings'; import { CheckBox } from 'flavours/glitch/components/check_box'; import Column from 'flavours/glitch/components/column'; import ColumnHeader from 'flavours/glitch/components/column_header'; +import { Icon } from 'flavours/glitch/components/icon'; import ScrollableList from 'flavours/glitch/components/scrollable_list'; import DropdownMenuContainer from 'flavours/glitch/containers/dropdown_menu_container'; @@ -26,16 +28,14 @@ const messages = defineMessages({ title: { id: 'notification_requests.title', defaultMessage: 'Filtered notifications' }, maximize: { id: 'notification_requests.maximize', defaultMessage: 'Maximize' }, more: { id: 'status.more', defaultMessage: 'More' }, - acceptAll: { id: 'notification_requests.accept_all', defaultMessage: 'Accept all' }, - dismissAll: { id: 'notification_requests.dismiss_all', defaultMessage: 'Dismiss all' }, - acceptMultiple: { id: 'notification_requests.accept_multiple', defaultMessage: '{count, plural, one {Accept # request} other {Accept # requests}}' }, - dismissMultiple: { id: 'notification_requests.dismiss_multiple', defaultMessage: '{count, plural, one {Dismiss # request} other {Dismiss # requests}}' }, - confirmAcceptAllTitle: { id: 'notification_requests.confirm_accept_all.title', defaultMessage: 'Accept notification requests?' }, - confirmAcceptAllMessage: { 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?' }, - confirmAcceptAllButton: { id: 'notification_requests.confirm_accept_all.button', defaultMessage: 'Accept all' }, - confirmDismissAllTitle: { id: 'notification_requests.confirm_dismiss_all.title', defaultMessage: 'Dismiss notification requests?' }, - confirmDismissAllMessage: { 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?" }, - confirmDismissAllButton: { id: 'notification_requests.confirm_dismiss_all.button', defaultMessage: 'Dismiss all' }, + acceptMultiple: { id: 'notification_requests.accept_multiple', defaultMessage: '{count, plural, one {Accept # request…} other {Accept # requests…}}' }, + dismissMultiple: { id: 'notification_requests.dismiss_multiple', defaultMessage: '{count, plural, one {Dismiss # request…} other {Dismiss # requests…}}' }, + confirmAcceptMultipleTitle: { id: 'notification_requests.confirm_accept_multiple.title', defaultMessage: 'Accept notification requests?' }, + confirmAcceptMultipleMessage: { id: 'notification_requests.confirm_accept_multiple.message', defaultMessage: 'You are about to accept {count, plural, one {one notification request} other {# notification requests}}. Are you sure you want to proceed?' }, + confirmAcceptMultipleButton: { id: 'notification_requests.confirm_accept_multiple.button', defaultMessage: '{count, plural, one {Accept request} other {Accept requests}}' }, + confirmDismissMultipleTitle: { id: 'notification_requests.confirm_dismiss_multiple.title', defaultMessage: 'Dismiss notification requests?' }, + confirmDismissMultipleMessage: { id: 'notification_requests.confirm_dismiss_multiple.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?" }, + confirmDismissMultipleButton: { id: 'notification_requests.confirm_dismiss_multiple.button', defaultMessage: '{count, plural, one {Dismiss request} other {Dismiss requests}}' }, }); const ColumnSettings = () => { @@ -74,45 +74,15 @@ const SelectRow = ({selectAllChecked, toggleSelectAll, selectedItems, selectionM const intl = useIntl(); const dispatch = useDispatch(); - const notificationRequests = useSelector(state => state.getIn(['notificationRequests', 'items'])); - const selectedCount = selectedItems.length; - const handleAcceptAll = useCallback(() => { - const items = notificationRequests.map(request => request.get('id')).toArray(); - dispatch(openModal({ - modalType: 'CONFIRM', - modalProps: { - title: intl.formatMessage(messages.confirmAcceptAllTitle), - message: intl.formatMessage(messages.confirmAcceptAllMessage, { count: items.length }), - confirm: intl.formatMessage(messages.confirmAcceptAllButton), - onConfirm: () => - dispatch(acceptNotificationRequests(items)), - }, - })); - }, [dispatch, intl, notificationRequests]); - - const handleDismissAll = useCallback(() => { - const items = notificationRequests.map(request => request.get('id')).toArray(); - dispatch(openModal({ - modalType: 'CONFIRM', - modalProps: { - title: intl.formatMessage(messages.confirmDismissAllTitle), - message: intl.formatMessage(messages.confirmDismissAllMessage, { count: items.length }), - confirm: intl.formatMessage(messages.confirmDismissAllButton), - onConfirm: () => - dispatch(dismissNotificationRequests(items)), - }, - })); - }, [dispatch, intl, notificationRequests]); - const handleAcceptMultiple = useCallback(() => { dispatch(openModal({ modalType: 'CONFIRM', modalProps: { - title: intl.formatMessage(messages.confirmAcceptAllTitle), - message: intl.formatMessage(messages.confirmAcceptAllMessage, { count: selectedItems.length }), - confirm: intl.formatMessage(messages.confirmAcceptAllButton), + title: intl.formatMessage(messages.confirmAcceptMultipleTitle), + message: intl.formatMessage(messages.confirmAcceptMultipleMessage, { count: selectedItems.length }), + confirm: intl.formatMessage(messages.confirmAcceptMultipleButton, { count: selectedItems.length}), onConfirm: () => dispatch(acceptNotificationRequests(selectedItems)), }, @@ -123,9 +93,9 @@ const SelectRow = ({selectAllChecked, toggleSelectAll, selectedItems, selectionM dispatch(openModal({ modalType: 'CONFIRM', modalProps: { - title: intl.formatMessage(messages.confirmDismissAllTitle), - message: intl.formatMessage(messages.confirmDismissAllMessage, { count: selectedItems.length }), - confirm: intl.formatMessage(messages.confirmDismissAllButton), + title: intl.formatMessage(messages.confirmDismissMultipleTitle), + message: intl.formatMessage(messages.confirmDismissMultipleMessage, { count: selectedItems.length }), + confirm: intl.formatMessage(messages.confirmDismissMultipleButton, { count: selectedItems.length}), onConfirm: () => dispatch(dismissNotificationRequests(selectedItems)), }, @@ -136,46 +106,45 @@ const SelectRow = ({selectAllChecked, toggleSelectAll, selectedItems, selectionM setSelectionMode((mode) => !mode); }, [setSelectionMode]); - const menu = selectedCount === 0 ? - [ - { text: intl.formatMessage(messages.acceptAll), action: handleAcceptAll }, - { text: intl.formatMessage(messages.dismissAll), action: handleDismissAll }, - ] : [ - { text: intl.formatMessage(messages.acceptMultiple, { count: selectedCount }), action: handleAcceptMultiple }, - { text: intl.formatMessage(messages.dismissMultiple, { count: selectedCount }), action: handleDismissMultiple }, - ]; + const menu = [ + { text: intl.formatMessage(messages.acceptMultiple, { count: selectedCount }), action: handleAcceptMultiple }, + { text: intl.formatMessage(messages.dismissMultiple, { count: selectedCount }), action: handleDismissMultiple }, + ]; + + const handleSelectAll = useCallback(() => { + setSelectionMode(true); + toggleSelectAll(); + }, [setSelectionMode, toggleSelectAll]); return (