diff --git a/app/soapbox/actions/snackbar.ts b/app/soapbox/actions/snackbar.ts index c2fd5f32d..485537ea8 100644 --- a/app/soapbox/actions/snackbar.ts +++ b/app/soapbox/actions/snackbar.ts @@ -2,24 +2,32 @@ import { ALERT_SHOW } from './alerts'; import type { MessageDescriptor } from 'react-intl'; -export type SnackbarActionSeverity = 'info' | 'success' | 'error' +export type SnackbarActionSeverity = 'info' | 'success' | 'error'; -type SnackbarMessage = string | MessageDescriptor +type SnackbarMessage = string | MessageDescriptor; export type SnackbarAction = { - type: typeof ALERT_SHOW - message: SnackbarMessage - actionLabel?: SnackbarMessage - actionLink?: string - severity: SnackbarActionSeverity -} + type: typeof ALERT_SHOW, + message: SnackbarMessage, + actionLabel?: SnackbarMessage, + actionLink?: string, + action?: () => void, + severity: SnackbarActionSeverity, +}; -export const show = (severity: SnackbarActionSeverity, message: SnackbarMessage, actionLabel?: SnackbarMessage, actionLink?: string): SnackbarAction => ({ +export const show = ( + severity: SnackbarActionSeverity, + message: SnackbarMessage, + actionLabel?: SnackbarMessage, + actionLink?: string, + action?: () => void, +): SnackbarAction => ({ type: ALERT_SHOW, message, actionLabel, actionLink, severity, + action, }); export const info = (message: SnackbarMessage, actionLabel?: SnackbarMessage, actionLink?: string) => diff --git a/app/soapbox/features/ui/containers/notifications_container.js b/app/soapbox/features/ui/containers/notifications_container.js index b7d10c9e4..50343fd10 100644 --- a/app/soapbox/features/ui/containers/notifications_container.js +++ b/app/soapbox/features/ui/containers/notifications_container.js @@ -4,6 +4,8 @@ import { NotificationStack } from 'react-notification'; import { connect } from 'react-redux'; import { Link } from 'react-router-dom'; +import { Button } from 'soapbox/components/ui'; + import { dismissAlert } from '../../../actions/alerts'; import { getAlerts } from '../../../selectors'; @@ -33,7 +35,12 @@ const mapStateToProps = (state, { intl }) => { } }); - if (notification.actionLabel) { + if (notification.action) { + const { action } = notification; + notification.action = ( +